Cara Membuat Tombol Demo dan Download Keren di Blog

Baca Juga

Cara Membuat Tombol Demo dan Download Keren di Blog – 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.

Baca Juga : Cara Membuat Artikel Terkait dengan tubnail di Bawah Postingan

Maka dari itu kali ini saya akan berikan tutorial mengenai bagaimana Cara membuat Tombol Demo dan Download di Blog atau Website. Bagi sobat yang tertarik untuk mencobanya atau tertarik untuk mempelajari nya silahkan simak cara membuatnya berikut ini.

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

/* -- Kang Ismet Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px important; background: #E55E48; color: #fff important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

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

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

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

Catatan : 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 keseluruahn Script di atas. (atus 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 Judul Postingan Rata Tengah

Demikianlah tutorial mengenai Cara Membuat Tombol Demo dan Download Keren di Blog, 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.