Animasi Tombol Download di Posting Blogger

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

 

 Demo VERSI II : Animasi Download ke Samping

 

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