News Update :

Animasi Tombol Download di Posting Blogger

Diposkan oleh : Posted on Minggu, 21 Desember 2014 - 9:07 PM with No comments

Selamat siang Sobat 2-Bersaudara, Kali ini saya akan saharing mengenai Cara Memasang Tombol Animasi Download di Postingan untuk blogger keren. Artikel ini saya temukan di blog Kompi Ajaib punya Adhy Suryadi. Tombol Animasi Download ini ada 2 Versi, versi pertama pergerakan tombol animasi yang kesamping dan yang kedua pergerakan tombol animasi yang ke bawah.
Demo VERSI I : Animasi Download ke Samping
Tombol Download Slide Samping 
 Demo VERSI II : Animasi Download ke Samping
 Tombol Download Slide Bawah

Tahap I : Penambahan kode CSS
VERSI I : Tombol Animasi ke Samping
  • Masuk ke Edit HTML sobat
  • Letakkan kode CSS bibawah ini, letakkan diatas ]]></b:skin>
.container {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
    font-family:Arial;
}

.con_down {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
    height:50px;
    padding-right:10px;
    padding-top:5px;
    text-align:right;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;
}
.con_down .fa-download{
    position:absolute;
    left:10px;
    top:15px;color:#895D0A;
}

.con_down h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes h5 {
    margin:0;
}

.sizes {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
    padding-top:2px;
  border-bottom:4px solid #AAA9A9;
  position:absolute;
  top:13px;
  right:20px;
  transition:.5s all ease-in-out;
}

.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}

.sizes_abs {
  background-color:#F6EB96;
  cursor:pointer;
  width:20px;
  border-bottom:4px solid #D8B83C;
  border-bottom-right-radius:5px;
  border-top-right-radius:5px;
  height:55px;
  position:absolute;
  top:-13px;
  right:-20px;
  z-index:2;

}

.container:hover .sizes {
  right:-100px;
}

.container:hover .con_down {
  background-color:#F1DD5E;
     border-bottom-right-radius:0;
  border-top-right-radius:0;
}

.container:hover .sizes_abs {
  background-color:#F1DD5E;
}
  • Simpan Tempalate
VERSI II : Tombol Animasi ke Bawah
  • Masuk ke Edit HTML sobat
  • Letakkan kode CSS bibawah ini, letakkan diatas ]]></b:skin>
.container {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
    font-family:Arial;
}

.con_down {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
    height:50px;
    padding-right:10px;
    padding-top:5px;
    text-align:right;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;transition:.5s all ease-in-out;
}
.con_down .fa-download{
    position:absolute;
    left:10px;
    top:15px;color:#895D0A;
}

.con_down h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes h5 {
    margin:0;
}

.sizes {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
  position:absolute;
  bottom:22px;
  left:50%;
    margin-left:-50px;
  transition:.5s all ease-in-out;
}

.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}

.sizes_abs {
  background-color:#F6EB96;
  cursor:pointer;
  width:200px;
  border-bottom:4px solid #D8B83C;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px;
  height:20px;
  position:absolute;
  right:-50px;
  bottom:-22px;
  z-index:2;

}

.container:hover .sizes {
  bottom:-30px;
}

.container:hover .con_down {
  background-color:#F1DD5E;
    border-bottom:0;
     border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}

.container:hover .sizes_abs {
  background-color:#F1DD5E;
}
  • Simpan Tempalate 
Tahap II : Cara Pemasangan
  • Buat Enteri Baru / Saat membuat posting
  • Pilih mode HTML buka Compose
  • Pastekan kode dibawah ini
<div class="container">
  <div class="con_down">
      <i class="fa fa-download fa-2x"></i>
    <h4>Download now</h4>
  </div>
  <div class="con_sizes">
  <div class="sizes">
    <h5 class="size">34.5 MB</h5>
    <div class="sizes_abs"></div>
  </div>
  </div>
</div>
Demo
click to view

Share this Article on :
Animasi Tombol Download di Posting Blogger
Item Reviewed: Animasi Tombol Download di Posting Blogger 9 out of 10 based on 10 ratings. 9 user reviews.

0 komentar:

Poskan Komentar

 

© Copyright 2-Bersaudara 2015 | Design by Herdiansyah Hamzah | Editing by 2-Bersaudara.