Membuat Tombol Demo & Download Pada Blog - Unik₂

ohmlukas.blogspot.com - Micro Cyber 2 - Kali ni tema yg akan kita bahas adlh 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 ni 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 jg bisa mengganti warna background/ text sesuai selera masing-masing!

*Text yg saya beri warna merah adlh kode warna background
*Text yg saya beri warna pink adlh kode warna background setelah tersentuh cursor
*Text yg saya beri warna biru adlh kode warna text .

Jadi sobat bisa merubahnya dgn cara mengganti kode warna htmlnya

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

<div><ul><li><a href="/">Demo</a></li> <li><a href="/">Download</a></li></ul></div><div></div> NB :Ganti Url yg berwarna merah sesuai dgn link tujuan sobat!

6. Lalu yg 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~

other source : http://solopos.com, http://microcyber2.blogspot.com, http://kompas.com