Cara Membuat Tombol Download Keren Di Blog Spot

Cara Membuat Tombol Download Keren Di Blog Spot

LANGKAH LANGKAH :

seperti biasa bukalah template blog anda lalu edit html ikuti langkah berikut ini :

1. langkah pertama yang kita lakukan adalah dengan menambahkan css di html template anda. caranya tekan tombol CTRL+F lalu di kotak pencarian carilah ]]></b:skin>. jika anda sudah menemukan kode tersebut letakan code css dibawah ini tepat di atas kode ]]></b:skin> 

   /* tombol button */
   .dlbutton br {display: none !important;}
   
   .dlbutton {
   margin: 0px auto;
   width: 200px;
   border-radius: 7px 7px 7px 7px;
   position: relative;
   z-index: 1;
   }
   .dlbutton a {
   border-radius: 7px 7px 7px 7px;
   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='#00b7ea', endColorstr='#009ec3',GradientType=0 );
   }
   .dlbutton a, .slide {
   border-radius: 7px 7px 7px 7px;
   -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 {
   border-radius: 7px 7px 7px 7px;
   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='#00b7ea', endColorstr='#009ec3',GradientType=0 );
   }
   .dlbutton:active .bottom {
   margin: -20px 0 0 10px;
   }
   .dlbutton:active .top {
   margin: -70px 0 0 10px;
   }

2. simpan template anda lalu buatlah postingan baru dengan menulis menggunakan tab html di pojok kiri atas. jika sudah salin kode html di bawah ini lalu tempelkan di area yang anda inginkan.

   <div class="dlbutton">
   <a href="https://draft.blogger.com/u/1/blogger.g?blogID=5272429493663515608#" target="_blank">DOWNLOAD</a><br />
   <div class="slide top">
   MATLAB.rar</div>
   <div class="slide bottom">
   Size : 11.5 GB</div>
   </div>

3. simpan postingan anda dan cobalah pratinjau hasil project tersebut.

• KETERANGAN

• Border-radius: 7px 7px 7px 7px; (untuk melengkungkan sudut)
• <a herf="#" ganti # dengan alamat link download

DEMO

DOWNLOAD

MATLAB.rar

Size : 11.5 GB

jika anda mengalami kesulitan atau bingung tinggalkan komentar ?!

keyword command :

• cara membuat tombol download keren
• kode tombol download css