Cara Membuat Tombol Demo dan Download Awesome

Kali ini saya akan membagikan tutorial yang cukup keren untuk anda coba. Tutorial ini diperkenalkan oleh Kang Ismet, salah satu master web designer dari Indonesia.

Bagi anda yang suka mempercantik tampilan template blog, pasti anda akan bosan dengan tampilan tombol demo dan download yang biasa – biasa saja, yang cuma berupa anchor text dengan atribut bold atau tebal. Jika anda termasuk blogger yang demikian maka ada baiknya anda mencoba tutorial kali ini. Tombol demo dan download yang akan saya bagikan kali ini sangatlah eye friendly atau enak dipandang mata. Biaklah daripada panjang lebar langsung saja simak tutorial berikut ini.

Cara Membuat Tombol Demo dan Download Keren Eye Friendly

1. Pertama terlebih dahulu masuk ke dashboard blogger anda masing – masing.

2. Masuk ke “Template”, jangan lupa untuk mem-back up terlebih dahulu template agan untuk berjaga – jaga jika nanti terjadi kesalahan pada saat edit template.

3. Setelah itu, pilih “Edit HTML”

4. Cari kode ]]></b:skin> pada template anda, gunakan Ctrl + F atau F3 untuk mempermudah pencarian, jika sudah ketemu letakkan kode berikut ini tepat diatas 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 }

5. Tekan “Save” atau “Simpan” untuk menyimpan template anda.

Untuk cara penggunaannya sendiri cukup mudah, anda hanya perlu masuk pada mode postingan HTML, jangan Compost. Berikut kodenya :

<div style="text-align: center;">

<ul class="button">

<li><a class="demo" href="link tujuan" target="_blank">Demo</a></li>

<li><a class="download" href="link tujuan" target="_blank">Download</a></li>

</ul>

</div>

<div class="clear"></div>

*Catatan :

·        Ganti link yang bewarna merah dengan link demo dan download anda.

·        Ganti teks yang bewarna biru dengan teks yang akan anda munculkan, misal Demo diganti dengan “View” dan “Download” diganti dengan “Unduh”

Nah, itulah tutorial untuk cara membuat tombol demo dan download keren untuk mempercantik blog anda. Semoga dengan tampilan tombol demo dan download yang keren membuat visitor anda lebih sering menekan tombolnya. Sekian tutorial kali ini, semoga bermanfaat bagi anda.