Cara Membuat Download Button Di Blog

Selamat malam, kali ini saya (Admin Ganteng) akan share tutorial membuat download button seperti yang ada di blog ini. Bagi yang sudah bisa silahkan di skip. Bagi yang belum bisa, silahkan di simak dengan detail agar hasil akhirnya seperti yang di inginkan.

Cari kode ]]></b:skin> kemudian letakkan CSS di bawah ini tepat di atasnya.

     /*Download Button*/

    #hafiz_area {width:97%; margin:0px auto;text-align: center}

    #hafiz_area a, #hafiz_area a:hover, #hafiz_area a:visited{color:rgb(230, 230, 230); text-decoration:none; border-bottom:none;}

    #hafiz_area p {font-style:italic;font-size:12px;}

    .tombol, .tombol-download{display: inline-block;white-space: nowrap;background-color: rgb(40, 40, 40);background-image: none;border-width: 1px;border-style: solid;border-right: 1px solid rgba(255, 255, 255, 0.03);border-left: 1px solid rgba(255, 255, 255, 0.03);border-image: none;border-color: rgba(255, 255, 255, 0.04) rgba(255, 255, 255, 0.03) rgb(34, 34, 34);padding: 0 1.5em;margin: 0.5em;font: 1em/2em 'Julee', Cursive;text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);text-transform:uppercase;-webkit-transition: all 0.1s linear 0s;-moz-transition: all 0.1s linear 0s;-o-transition: all 0.1s linear 0s;transition: all 0.1s linear 0s;}

    .tombol:hover, .tombol-download:hover{background-color: rgb(45, 45, 45);-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);-webkit-box-shadow: 0px px 4px rgba(0, 0, 0, 0.7);box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);}

    .tombol:active, .tombol-download:active{-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;position: relative;top: 1px;}

    .tombol:focus, .tombol-download:focus{outline: 0;background-color: rgba(255, 0, 0, 0.5);} 

    .tombol:before, .tombol-download:before{background: #000;background: rgba(0,0,0,.1);float: left;width: 1em;text-align: center;font-size: 1.5em;margin: 0 1em 0 -1em;padding: 0 .2em;-moz-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,0.03);-webkit-box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,0.03);box-shadow:1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,0.03);-moz-border-radius:.15em 0 0 .15em;-webkit-border-radius:.15em 0 0 .15em;border-radius:.15em 0 0 .15em;pointer-events: none;content: "\279C";color:rgb(45, 166, 223);}

 Cara Penggunaan : 

<div id="hafiz_area">
<a class="tombol" href="Link Download" target="_blank">DOWNLOAD</a><a class="tombol" href="Link Demo" target="_blank">DEMO</a>
</div>
<br />

Letakkan kode di atas pada posringan blog, cara nya pilih HTML  kemudian kopi-paste kode di atas.
Ket : 
Warna merah untuk link download
Warna Biru untuk tilte download
Warna Hijau untuk link Demo
Warna Kuning untuk title demo 

Sekian tutorial garing dari saya. Jangan lupa tinggalkan komen. dan yang kurang jelas bisa komen dibawah tentang apa yang kurang jelas.