Cara Membuat Design Tombol Follow Blogger Dengan Animasi Hover

Cara Membuat Design Tombol Follow Blogger Dengan Animasi Hover - Follow bisa diartikan sebagai pengikut adalah mengikuti blog orang lain atau pengguna yang berhubungan langsung dengan blog yang mereka ikuti. Dengan cara mereka memfollow menggunakan akun yang mereka miliki.

Tentunya akan menjadi keuntungan buat kita sendiri dengan sering follow ke blog orang lain. Kita akan mendapatkan update dari blog tersebut dan mengetahui perkembangan para blogger sebelum orang lain mengetahuinya, karena setelah pemilik blog tersebut mempublikasikan postingan terbarunya, tentu akan muncul di Dashboard kita. Dan apabila kita berkenan bisa langsung melihat postingan terbaru mereka dengan menambahkan komentar yang pertama di postingan tersebut. Kita lanjut ke tutorialnya:

Cara Membuat Design Tombol Follow Blogger Dengan Animasi Hover

1. Pertama buka Tema dan Edit HTML.
2. Lalu copy kode CSS dibawah ini diatas ]]></b:skin>.

/* button Follow anoytampan */
.middle{
  
  width: 100%;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 3px 1px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0.04);
  border-top: 2px solid #df0d83;
  transition: all .5s ease;
}
.middle a {
color:#ee0979;
}
.btn{
  display: inline-block;
  width: 200px;
  height: 70px;
  background: #f1f1f1;
  margin: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  color: #3498db;
  overflow: hidden;
  position: relative;
  transition: all .5s ease;
}
.btn p{
  line-height: 70px;
  font-size: 15px;
  transition: 0.2s linear;
}
.btn:hover p{
  transform: scale(1.3);
  color: #f1f1f1;
}
.btn::before{
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  background: #a90957;
  transform: rotate(45deg);
  left: -110%;
  top: 90%;
}
.btn:hover::before{
  animation: aaa 0.7s 1;
  top: -10%;
  left: -10%;
}
@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}
.middle .btn p {
  color:#f18241;
  font-weight: bold;
}

3. Tambahkan Widget baru di Tata Letak dan pilih HTML/Javascript lalu copy kode dibawah ini di text editor lalu tekan save.

<div class="middle">
    <a class="btn" href="http://www.blogger.com/follow-blog.g?blogID=8775495764235211372">
     <p>Follow</p>
    </a>
</div>

Ubah kode ID ini 8775495764235211372 dengan kode ID blog Anda.

4. Hasilnya akan seperti ini.

See the Pen QWwgMzK by Anak Ganteng (@AnakGanteng) on CodePen.