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.