TUTORIAL BLOG - Cara Membuat Tombol Download, Demo, Dengan CSS Di Postingan Blog

Kali ini saya akan membahas tentang Tutorial Blog yaitu "Cara Membuat Tombol Dengan CSS Di Blog". Mungkin cara ini sudah banyak orang yang tau tapi berhubung teman saya ada yang nampaknya bertanya tentang cara membuat Tombol Download, Demo, Atau Klik Disini, seperti yang ada pada blog saya ini. Nah untuk membantu teman tersebut makanya saya share Tutorialnya, Oia lupa sesama blogger harus saling bantu donk ya gak sobat semua. 

Baik dari pada saya berceloteh panjang lebar lagi langsung saja, sebagai contoh tombolnya lihat di bawah ini :

DOWNLOAD          LIVE DEMO          DISINI

Itulah sedikit contoh tombol yang akan kita bahas cara pembuatannya.

Baiklah ikuti cara pembuatannya di bawah ini :

• 1. Login dulu ke akun Blogger sobat.
• 2. Setelah login klik TEMPLATE
• 3. Saat di halaman TEMPLATE klik EDIT HTML
• 4. Setelah semua kodenya terbuka cari kode ]]></b:skin> agar cepat menemukan kodenya tekan CTRL + F pada keyboard.
• 5. Jika kode ]]></b:skin> sudah di temukan Copy dan Pastekan kode dibawah ini tepat diatasnya.

/* css button original by : http://badry7.blogspot.com */.button {background-color:#3bb3e0;padding:10px;position:relative;font-family: &#39;Open Sans&#39;, sans-serif;font-size:12px;text-decoration:none;color:#fff;background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;-o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;box-shadow: inset 0px 1px 0px #7fd2f1, 0px 6px 0px #156785;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}
.button::before {background-color:#072239;content:&quot;&quot;;display:block;position:absolute;width:100%;height:100%;padding-left:2px;padding-right:2px;padding-bottom:4px;left:-2px;top:5px;z-index:-1;-webkit-border-radius: 6px;-moz-border-radius: 6px;-o-border-radius: 6px;border-radius: 6px;-webkit-box-shadow: 0px 1px 0px #fff;-moz-box-shadow: 0px 1px 0px #fff;-o-box-shadow: 0px 1px 0px #fff;box-shadow: 0px 1px 0px #fff;}
.button:active {color:#156785;text-shadow: 0px 1px 1px rgba(255,255,255,0.3);background:rgb(44,160,202);-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;-o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785;top:7px;}
.button:active::before {top:-2px;}

• Setelah semuanya selesai simpan Template sobat.
• Selamat tombolnya sekarang sudah bisa anda pergunakan di blog sobat.

Untuk penggunaan tombolnya sendiri saat sobat ngeposting artikel atau yang lainnya gunakan kode berikut di halaman HTML bukan di halaman COMPOSE :

<a href='LINK TUJUAN' class='button'><b>DOWNLOAD</b></a>

Ganti Tulisan LINK TUJUAN dengan link tujuan yang sobat inginkan, dan Kata DOWNLOAD bisa anda rubah dengan kata yang sobat inginkan.

Bagi sobat yang mungkin ingin menukar warna dan sebagainya silahkan di aplikasikan sendiri. Sekian dulu Tutorial Blog kali ini yang bisa saya share buat teman-teman semua mudah-mudahan bermanfaat dan dapat membantu sobat yang mungkin ingin membuat tombol download, demo dan sebagainya di blog sobat semua.

Demikian sedikit penjelasan seputar "TUTORIAL BLOG - Cara Membuat Tombol Dengan CSS Di Blog" yang bisa saya bagi buat sobat semua. Semoga bermanfaat dan dapat membantu anda. Wassalam.

Kumpulan Tutorial Blog yang lainnya lihat   DISINI