Cara Membuat Download Button Keren di Blog

Sahabat Kabeka|| Download button biasanya banyak di gunakan pada blog2 dan website khusus download. nah dari yang kabeka dengar-dengar dari suhu yang di google, penggunaan gambar pada download button bisa menurunkan kualitas/tidak baik bagi SEO. entah benar atau tidak kita akan buktikan itu nanti, sekedar untuk jaga-jaga kabeka pun mendapat ide untuk menggantinya dengan download button baru dan lebih keren tentunya untuk dilihat :)

entah bagaimana penilaian sobat ya, tapi menurut kabeka download button ini lebih keren karena kesannya yang dinamis :D inilah contoh kenampakkannya

DOWNLOAD

Bagimana? Tertarik untuk menggunakannya ?

Silahkan simak tutorial sederhana cara pemasangannya :)

oke... kita lanjutkan :v

1. Pertama silahkan login dulu ya ke akun blogger sobat :D

2. Pada dashboard pilih blog sobat >> Template >> Edit Html

3. Cari kode ]]></b:skin> *gunakan Ctrl+F untuk memudahkan pencarian* pastekan kode CSS ini diatasnya. lalu Save Templatenya..

/* Download Button */ /* www.kabeka.net */
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.download{border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 30px !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;}
.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}
/* selesai */

4. Untuk memunculkannya di postingan blog cukup gunakan kode berikut pada tipe html ..

<div class="button">
<a class="download" href="http://www.kabeka.net/p/download.html" target="Klik">DOWNLOAD</a>
</div>
<div class="clear"></div>

5. Selesai.. jangan lupa ganti url yang berwarna merah dengan url filenya :)



Sekian yang dapat Kabeka posting hari ini, terimkasih sudah berkunjung :) share artikel ini bila dirasa bermanfaat :) oke sampai ketemu pada postingan selanjunya :) byee...

Related Posts:

Tweet