Tombol Download Dengan Animasi Slide beserta File Size

Tombol Download Dengan Animasi Slide beserta File Size

Cara Membuat dan memasang Tombol Download di postingan blog Dengan  menggunakan efek Slide beserta tampilan File Size - Hayyy sobat langit, apa kabar anda di hari ini ? saya rasa anda dalam keadaan sehat. Dikarenakan kali ini saya akan memberikan salah satu Cara untuk memperindah tampilan pada postingan anda yang diutamakan untuk memperindah tampilan pada tombol download anda.

Tutorial yang akan saya bagikan mengenai bagaimana cara untuk membuat tombol download menggunakan animasi slide dan juga disertai tampilan ukuran file download ketika anda menyorotkan mouse anda pada download button, sangat tepat anda gunakan terutama pada blog yang bernichekan software ataupun game.

Trik yang saya bagikan ini hanya menggunakan kode CSS3 dan pemanggil pada postingan, sehingga tidak akan mengganggu loading pada blog anda, nah jika anda tertarik anda bisa menerapkanya pada blog anda dengan memasang kode berikut di blog anda.
Tombol Download Dengan Animasi Slide beserta File Size
1. Login akun Blogger => Template => Edit HTML
2. Masukkan kode font awesome berikut tepat diatas </head>
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
INFO : Jika pada blog anda sudah terpasang kode font awesome versi 4.2.0 sebaiknya anda lewati pada tahap ini.

3. Dan masukkan kode berikut tepat diatas ]]></b:skin> atau </style>
.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;
}

3. Untuk menampilkan tombol download pada blog anda, silahkan anda masukkan kode berikut disaat membuat entri pada pilihan HTML.
<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>

4. Setelah selesai, klik pratinjau terlebih dahulu. Tetapi jika sudah tampil silahkan anda klik publish.

Saya rasa cukup untuk tutorial kali ini, jika anda ingin desain lainya anda bisa mampir ke postingan tutorial saya sebelumnya mengenai Tombol Download disertai Demo.

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »