Cara Membuat Tombol Demo Dan Download Pada Blog

Micro Cyber 2 - Kali ini tema yang akan kita bahas adalah tentang blogging, yaitu tentang cara membuat tombol demo dan download keren. Okelah langsung saja ke tujuan !

Cara Membuat Tombol Demo Dan Download Pada Blog

1. Login ke Blogger sobat
2. Masuk Dashboard > Lalu Pilih Template > Edit HTML
3. Cari kode ]]></b:skin> dan jika sudah ketemu lalu letakkan css dibawah ini tepat diatas ]]></b:skin>

.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 }

NB : Sobat juga bisa mengganti warna background/ text sesuai selera masing-masing! 

*Text yang saya beri warna merah adalah kode warna background
*Text yang saya beri warna pink adalah kode warna background setelah tersentuh cursor
*Text yang saya beri warna biru adalah kode warna text . 

Jadi sobat bisa merubahnya dengan cara mengganti kode warna htmlnya  

4. Simpan Template, dan tidak sampai disini saja !
5. Untuk menggunakan tombol demo dan download dalam postingan blog gunakan kode dibawah ini di mode HTML bukan di compose!

<div style="text-align: center;"><ul class="button"><li><a class="demo" href="http://microcyber2.blogspot.com/" target="_blank">Demo</a></li>

<li><a class="download" href="http://microcyber2.blogspot.com/" target="_blank">Download</a></li></ul></div><div class="clear"></div>

NB : Ganti Url yang berwarna merah sesuai dengan link tujuan sobat!

6. Lalu yang terakhir publish artikel dan lihat hasilnya.

Contoh Hasil Kode Diatas

Nah, itulah cara membuat tombol demo dan download keren. Cukup mudah kan sob? oke terimakasih dan selamat mencoba~