How to Make a Blogger Follow Button With
Hover Animation
Follow can be interpreted as a follower is to follow other people's blogs or users who are directly related to the blogs they follow. By the way they follow using the account they have.
Surely it will be an advantage for us to often follow to other people's blogs. We will get updates from the blog and know the development of the bloggers before other people find out, because after the blog owner publishes his latest post, it will certainly appear on our Dashboard. And if we want to be able to immediately see their latest posts by adding the first comment on that post.
🔹We continue with the tutorial...
How to Make a Blogger Follow Button With Hover Animation
☢️ PROCEDURES :
1. First open the Theme and Edit HTML . 2. Then copy the CSS code below above
]]> </ b: skin>.
/* Start - Button follow by Email Code Share by Top Blog Pk • Mubassir Ali */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; }/* End - Button follow by Email Code Share by Top Blog Pk • Mubassir Ali */
3. Add a new Widget in the Layout and select HTML / Javascript then copy the code below in the text editor then press Save .
/* Start - Button follow by Email Code Share by Top Blog Pk • Mubassir Ali */<div class="middle"> <a class="btn" href="http://www.blogger.com/follow-blog.g?blogID=4568204870050515099"><p>Follow</p> </a> </div>/* End - Button follow by Email Code Share by Top Blog Pk • Mubassir Ali */
🚫 IMPORTANT !
In above code (Case3) Please replace this code
4568204870050515099 with your Blog ID.