About Mew O wSepakbolaTV OnlineGameOnlineAplikasiAwardDaftar isi

Sabtu, 21 Desember 2013

Cara membuat Tombol Download animasi di blog

Hi bloggers, kali ini saya akan membagikan turtorial cara membuat tombol download animasi seperti gambar diatas...
Mudah saja kok, caranya :

1. Login ke blog sobat.
2. Masuk Template > Edit HTML
3. Search (gunakan CTRL + F untuk mempercepat pencarian) :
    </body>
4. Copy CSS dibawah ini :
<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at rexroom.blogspot.com */

.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop

(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea',

endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -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);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop

(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea',

endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style><span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span>

   Paste diatas </body> dan save.
5. Buat post baru dan masukan Scrypt dibawah ini ke HTML :
<div class="abt-button">
<a href="REXROOM">Demo</a> <p class="up">Download animasi</p>
<p class="down">
Tombol</p>
</div>

6. Publikasikan dan lihat hasilnya...

Note :
REXROOM (ganti dengan URL tujuan sobat)
Download animasi (ganti terserah soat)
Tombol (Ganti terserah sobat)
Untuk Demo, Sobat bisa melihatnya di sini :
D E M O

Related Post:

Ditulis Oleh : jolly sondakh ~ Great Works Of Art

Artikel Cara membuat Tombol Download animasi di blog ini diposting oleh jolly sondakh pada hari Sabtu, 21 Desember 2013. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

Comments
3 Comments

3 komentar:

  1. Nie Yang Gue cari,Dari Kemaren Gk ada mulu

    Visit>>http://gameunyil.blogspot.com

    BalasHapus
  2. kalo ngedit CSS jadi males saya gan..salam kenal
    http://blog-medianet.blogspot.com/

    BalasHapus