Friday, December 11, 2015

Membuat Tombol Download CSS Menarik untuk Blog

Tombol Download Menarik untuk Blog

Assalamu 'alaikum warohmatullahi wabarokatu. Baiklah dalam posting kali ini saya akan membahas mengenai cara membuat tombol download CSS yang menarik untuk blog. Tanpa basa-basi langsung saja, silahkan lihat demo berikut ini.

Download
Nama_File.rar
Size : 1.5 MB

Pertama-tama kita akan memasukkan kode CSS dari tombol download tersebut ke blog, silahkan buka dashboard blogger anda, buka Template lalu pilih Edit HTML.

Membuat Tombol Download Menarik untuk Blog

Kemudian temukan kode ]]></b:skin> lalu tambahkan kode berikut diatasnya.

/* DLBUTTON [Personal Change] */
.dlbutton br {display: none !important;}

.dlbutton {
margin: 0px auto;
width: 200px;
position: relative;
z-index: 1;
}
.dlbutton a {
color: white !important;
display: block;
width: 200px;
height: 50px;
background: #2DA5C6;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 );
}
.dlbutton a, .slide {
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.slide {
position: absolute;
z-index: -1;
display: block;
margin: -50px 0 0 10px;
width: 180px;
height: 40px;
background: #444;
color: #fff;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.dlbutton:hover .bottom {
margin: -10px 0 0 10px;
}
.dlbutton:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
.dlbutton a:active {
background: #00b7ea;
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 );
}
.dlbutton:active .bottom {
margin: -20px 0 0 10px;
}
.dlbutton:active .top {
margin: -70px 0 0 10px;
}

Setelah itu Simpan. Sekarang sobat sudah bisa memasukkan tombol download tersebut di blog anda. Cukup tambahkan kode berikut pada saat menulis posting dalam mode penulisan HTML.

<div class="dlbutton"><a href="#" target="_blank">Download</a><div class="slide top">Nama_File.rar</div><div class="slide bottom">Size : 1.5 MB</div></div>

Silahkan ganti # dengan alamat download anda, Nama_File.rar diganti dengan nama file sesuai pada alamat file tadi. Dan sobat juga bisa mengganti kata Download sesuai keinginan sobat, misal Download Chrome.

Saya rasa cukup, jika ada hal yang ingin ditanyakan, silahkan sampaikan pada kotak komentar dibawah atau melalui halaman contact blog ini. Terima kasih, assalamu 'alaikum.
Disqus Comments