Cara Membuat Tombol Demo dan Download Dengan Keterangan Gambar – Tombol demo dan Download adalah tombol yang memberikan gambaran jelas tentang Demo atau download berisi sebuah link yang mengarah ke halaman baru sebagai tujuan awal. Tombol ini sangatlah penting terlebih lagi bagi Blog yang khusus memberikan Tutorial Demo agar pengunjung lebih jelas dalam melihat hasilnya dan Software Download untuk membagi sebuah Benda bagi pengunjung yang menginginkannya.

Cara Membuat Tombol Demo dan Download Dengan Keterangan Gambar

Maka dari itu kali ini saya akan berikan tutorial mengenai bagaimana Cara membuat Tombol Demo dan Download di Blog atau Website. Keunikan dari tombol download dan demo ini adalah terdapat Gambar Roket di Tombol Demo dan Gambar Harddis di tombol Download, sehingga memperindah penampilan Tombol tersebut. Cara ini saya menggunakan CSS untuk membuatnya. Bagi sobat yang tertarik untuk mencobanya atau tertarik untuk mempelajari nya silahkan simak cara membuatnya berikut ini.

baca juga : Cara membuat Judul Postingan Rata Tengah 

1. buka Blog Sobat > masuk menu “Template” > Edit HTML > salin kode di bawah ini dan letakkan di atas kode ]]></b:skin>

/* CSS Demo Download Buttons */
.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:12px 15px!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:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'f135';display:inline-block;font-weight:normal;vertical-align: top;margin-right:10px;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:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

2. Simpan Template. Sekarang kita akan belajar bagaimana cara penerapannya, silahkan simak caranya berikut ini.

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="http://maycyber-download.blogspot.com/" target="_blank">DEMO</a></li>
<li><a class="download" href="http://maycyber-download.blogspot.com/" target="_blank">Free Download Template</a></li>
</ul>
</div>
</div>

Untuk cara penerapan nya, buat kode seperti ini ketika membuat postingan (gunakan Mode HTML bukan Compose)

sobat bisa menampilkan tombol demo saja atau tombol download saja atau kedua-duanya dengan menghapus Script download apabila ingin menampilkan tombol demo saja, menghapus Script Demo apabila ingin menampilkan tombol Download saja, atau memasang kedua-duanya  dengan memasang keseluruhan Script di atas. (atur Tombol Sesuai kebutuhan).
Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka Tombol Demo dan Download sudah berhasil terpasang dengan baik

Baca juga : Cara Membuat Tombol Demo dan Download Keren di Blog

Demikianlah tutorial mengenai Cara Membuat Tombol Demo dan Download Dengan Keterangan Gambar, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil menerapkan Tutorial ini jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.