Bagi anda pemilik blog tutorial yang banyak membagikan cara mendesain tampilan blog, mungkin akan lebih cocok jika di postingan blog anda diberi tombol demo agar pengunjung dapat melihat langsung contoh hasil nyata dari tutorial yang dijabarkan di postingan tersebut. Keberadaan tombol ini tentu akan lebih meyakinkan pengunjung jika ingin menerapkan tutorial tersebut di blog miliknya.
Selain tombol demo, kadang juga dijumpai tombol download di sampingnya atau di bawahnya. Biasanya yang menyertakan tombol download ini adalah blog-blog yang menjual atau membagikan aplikasi atau file-file tertentu kepada pengunjungnya. Blog-blog pembuat template blog juga biasanya menyertakan tombol-tombol ini untuk memudahkan pengunjung yang berminat untuk mengunduh template-template tersebut.
 |
| screenshot tombol demo & download |
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}.btn ul {margin:0;padding:0}.btn li{display:inline;margin:5px;padding:0;list-style:none;}.demo,.download{padding:10px 10px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}.demo {background-color:#3498DB;}.download {background-color:#f39c12;}.demo:hover {background-color:#60B8F4;color:#fff}.download:hover {background-color:#C77E0A;color:#fff}.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:5px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
4. Pastikan di template blog anda sudah terpasang kode font awesome. Jika belum, silahkan tambahkan kode berikut ini di atas kode </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
5. Simpan kembali template anda.
6. Silahkan pilih postingan yang hendak anda tambahkan tombol demo & download.
7. Buka pada mode html dan letakkan kode berikut ini di mana pun anda suka.
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> <li><a class="download" href="LINK-DOWNLOAD" target="_blank">DOWNLOAD</a></li> </ul> </div>
Keterangan:
- Ganti yang ditandai warna merah dengan link tujuan demo dan download.
- Jika anda hanya ingin memasang salah satunya saja, misal hanya tombol demo saja, silahkan ubah menjadi seperti berikut ini:
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="LINK-DEMO" target="_blank">DEMO</a></li> </ul> </div>
8. Simpan kembali perubahan pada postingan dan lihat hasilnya.
Jika sewaktu-waktu ingin menampilkan tombol tersebut di postingan lain, anda cukup tambahkan saja kode pada menu postingan seperti langkah terakhir di atas.
Demikianlah tutorial tentang cara membuat tombol demo dan download keren di postingan blog. Semoga bermanfaat.