Blogger yang berkualitas selalu ingin menunjukkan kepada pembaca mereka bahwa konten yang ditulis adalah yang terbaik dan relevan. Salah satu cara untuk menunjukkan bahwa konten tersebut berkualitas adalah melalui penggunaan tombol demo dan download.
Tombol demo dan download adalah salah satu metode terbaik yang bisa digunakan blogger untuk menunjukkan kualitas konten mereka. Penggunaannya sederhana namun sangat berguna, karena pembaca dapat dengan mudah mengakses dan menguji konten sebelum memutuskan untuk mengunduhnya. Melalui penggunaan tombol ini, blogger dapat meningkatkan kualitas konten dan meningkatkan jumlah kunjungan ke blog mereka secara signifikan.
Secara sederhana, tombol demo dan download adalah sebuah tombol yang ditempatkan di halaman blog atau website yang mengarahkan pengguna ke halaman untuk mengunduh atau mencoba demo suatu produk atau layanan yang ditawarkan oleh blogger. Tombol ini biasanya ditempatkan di tempat strategis, seperti di bawah judul atau bahkan di samping konten utama dalam bentuk animasi.
Tombol demo dan download sangat berguna karena memudahkan pembaca untuk menguji ide atau produk sebelum memutuskan untuk membelinya. Misalnya, seorang blogger yang menawarkan aplikasi bisnis dapat menunjukkan bagaimana aplikasi tersebut bekerja melalui demo, sehingga pembaca dapat menguji kualitas dan relevansi sebelum membelinya. Begitu juga dengan produk digital atau eBook, pembaca dapat melihat isi dari produk tersebut melalui demo sebelum memutuskan untuk membeli.
Tombol demo dan download juga bisa membantu blogger untuk meningkatkan kualitas konten mereka. Dalam beberapa kasus, blogger telah memperbaiki produk mereka setelah melihat hasil pengujian langsung dari pembaca melalui demo. Dengan melakukan perbaikan ini, blogger meningkatkan kualitas konten mereka dan memperkuat kredibilitas mereka sebagai sumber informasi yang andal.
Selain itu, tombol demo dan download juga membantu blogger dalam promosi konten mereka. Dengan memperlihatkan bagaimana kualitas dari konten yang ditawarkan, pembaca kemungkinan besar akan membagikan konten tersebut dengan rekan dan keluarga mereka, bahkan di media sosial. Ini berarti bahwa konten yang ditawarkan oleh blogger akan memiliki potensi untuk menjangkau lebih banyak orang.
Namun, penting untuk diingat bahwa penggunaan tombol demo dan download harus diimbangi dengan kualitas konten yang ditawarkan. Jika konten tidak menarik atau tidak berkualitas, maka tombol tersebut akan menjadi tidak berguna dan membuat pengunjung menjadi kecewa.
Cara Membuat Tombol Demo dan Download Flat UI Pada Blog:
1. Buka blogger dan edit tema terlebih dahulu.
2. Salin kode di bawah ini dan tempelkan di atas kode </head>.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
3. Kemudian, letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>.
Style 1:
/* CSS Button Style 1 */ .button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both} .button ul{margin:0;padding:0} .button li{display:inline;margin:5px;padding:0;list-style:none} .button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s} .button li a.download{background:#3498db} .button li a.demo:hover,.button li a.download:hover{background:#666} .button li a.demo:active,.button li a.download:active{cursor:pointer} .button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome} .button li a.download:after{content:'\f019'}
Style 2:
/* CSS Button Style 2 */ .button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both} .button2 ul{margin:0;padding:0} .button2 li{display:inline;margin:5px;padding:0;list-style:none} .button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden} .button2 li a.download{background:#3498db} .button2 li a.demo:hover,.button2 li a.download:hover{background:#666} .button2 li a.demo:active,.button2 li a.download:active{cursor:pointer} .button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s} .button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite} @-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}} @keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
4. Simpan tema.
5. Untuk penggunaannya, silakan gunakan kode berikut ini ketika membuat posting (Tambahkan dalam tab HTML).
Style 1:
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="http://www.guiknise.eu.org" target="_blank">Demo</a></li> <li><a class="download" href="http://www.guiknise.eu.org" target="_blank">Download</a></li> </ul> </div> <div class="clear"></div>
Style 2:
<div style="text-align: center;"> <ul class="button2"> <li><a class="demo" href="http://www.guiknise.eu.org" target="_blank">Demo Link</a></li> <li><a class="download" href="http://www.guiknise.eu.org" target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>
- Ganti link guiknise.eu.org dengan link yang dituju -
Screenshot:
Style 1:
Style 2:
Dalam hal ini, blogger diharapkan untuk selalu memperhatikan kualitas kontennya dan selalu mengoptimalkan penggunaan tombol demo dan download untuk merangsang pembaca. Penggunaan tombol ini dapat membantu meningkatkan kualitas konten, meningkatkan jumlah pengunjung dan meningkatkan kredibilitas blogger. Jadi, bagi blogger yang ingin meningkatkan kualitas konten dan kehadiran mereka di dunia maya, jangan lupa untuk menggunakan tombol demo dan download!
