How to add a mouse hover/Animated social subscription buttons into blogger blog - "Animated" wow sounds like something cool. Yes' guys, it's a really cool social subscription buttons for your dashing blog. The actual work of this widget is that it will help you to grow your social fans, because with the help of this animated buttons anyone will be able to subscribe you very easily. So today with the help of this post we are going to learn, how we can easily add this animated social subscription button on our blog. click on the below demo button to take a look of this widget (Look on bottom right hand corner on sidebar)
If you like this animated social subscription buttons and want to add into your own blog then follow the below steps.
How To Install Social Subscription Button?
First visit to your blogger dashboard with the help of this link - Visit
Now go to your "Template" section and then click on "Edit html" button.
After that, find the below code in template editor by pressing "Ctrl + F" key together from your keyboard.
]]></b:skin>
Now copy the below CSS code and paste it just before ]]></b:skin>.
.widget .social-icon{padding-bottom:0;padding-top:0;margin:0;overflow:hidden;text-align:center;border-top:1px solid rgba(255,255,255,0.15)}
.widget .social-icon:before{content:"";width:100%;top:0;position:absolute;height:1px;display:block;background-color:rgba(0,0,0,0.11)}
.social-icon a{color:#F7F7F7;text-decoration:none;display:inline-block;width:32px;height:32px;line-height:32px;text-align:center;font-size:14px}
.icon-twitter:before{content:"\f099"}
.icon-facebook:before{content:"\f09a"}
.icon-google:before{content:"\f0d5"}
.icon-rss:before{content:"\f09e"}
.icon-linkedin:before{content:"\f0e1"}
.icon-dribbble:before{content:"\f17d"}
.icon-pinterest:before{content:"\f0d2"}
.icon-youtube:before{content:"\f167"}
.icon-vimeo:before{content:"\f194"}
.icon-skype:before{content:"\f17e"}
.icon-deviantart:before{content:"\f1bd"}
.icon-flickr:before{content:"\f16e"}
.icon-stumbleupon:before{content:"\f1a4"}
.icon-tumblr:before{content:"\f173"}
.icon-delicious:before{content:"\f1a5"}
.icon-digg:before{content:"\f1a6"}
.icon-lastfm:before{content:"\f202"}
.icon-wordpress:before{content:"\f19a"}
.icon-instagram:before{content:"\f16d"}
.icon-apple:before{content:"\f179"}
.icon-dropbox:before{content:"\f16b"}
.icon-behance:before{content:"\f1b4"}
.icon-reddit:before{content:"\f1a1"}
.social-icon li{display:inline}
.social-wrap{overflow:hidden}
.social-wrap li{width:25%;float:left;height:110px;text-align:center;padding-left:0!important;margin-bottom:0!important;line-height:1em}
.social-wrap li:before{display:none!important}
.social-wrap .icon-counter,.social-wrap .social-desc{display:block}
.social-desc span{display:block;color:#616161}
.item-count{font-weight:400;font-size:17px}
.item-text{font-size:11px}
.social-wrap .fa{width:50px;text-shadow:0 1px 2px rgba(0,0,0,0.10);height:50px;line-height:50px;box-shadow:0 2px 3px rgba(0,0,0,0.10);text-align:center;margin-bottom:10px;font-size:24px;background-color:#E9E9E9}
.social-wrap .fa:after{content:"\f0d7";color:#E9E9E9;top:100%;position:absolute;line-height:14px;height:14px;left:50%;text-align:center;width:16px;margin-left:-8px;margin-top:-6px}
.social-wrap .icon-twitter,.social-wrap a:hover .icon-twitter:after{color:#2DAAE1}
.social-wrap .icon-facebook,.social-wrap a:hover .icon-facebook:after{color:#3C5B9B}
.social-wrap .icon-google,.social-wrap a:hover .icon-google:after{color:#F63E28}
.social-wrap .icon-rss,.social-wrap a:hover .icon-rss:after{color:#FA8C27}
.social-wrap .icon-linkedin,.social-wrap a:hover .icon-linkedin:after{color:#0173B2}
.social-wrap .icon-dribbble,.social-wrap a:hover .icon-dribbble:after{color:#F9538F}
.social-wrap .icon-pinterest,.social-wrap a:hover .icon-pinterest:after{color:#CB2027}
.social-wrap .icon-youtube,.social-wrap a:hover .icon-youtube:after{color:#CD332D}
.social-wrap .icon-vimeo,.social-wrap a:hover .icon-vimeo:after{color:#44BBFF}
.social-wrap .icon-skype,.social-wrap a:hover .icon-skype:after{color:#00AFF0}
.social-wrap .icon-deviantart,.social-wrap a:hover .icon-deviantart:after{color:#4B5D50}
.social-wrap .icon-flickr,.social-wrap a:hover .icon-flickr:after{color:#0063DB}
.social-wrap .icon-stumbleupon,.social-wrap a:hover .icon-stumbleupon:after{color:#EB4924}
.social-wrap .icon-tumblr,.social-wrap a:hover .icon-tumblr:after{color:#2C4762}
.social-wrap .icon-delicious,.social-wrap a:hover .icon-delicious:after{color:#3274D1}
.social-wrap .icon-digg,.social-wrap a:hover .icon-digg:after{color:#14589E}
.social-wrap .icon-lastfm,.social-wrap a:hover .icon-lastfm:after{color:#D51007}
.social-wrap .icon-wordpress,.social-wrap a:hover .icon-wordpress:after{color:#21759B}
.social-wrap .icon-instagram,.social-wrap a:hover .icon-instagram:after{color:#3F729B}
.social-wrap .icon-apple,.social-wrap a:hover:after{color:#B9BFC1}
.social-wrap .icon-dropbox,.social-wrap a:hover .icon-dropbox:after{color:#2281CF}
.social-wrap .icon-behance,.social-wrap a:hover .icon-behance:after{color:#1769ff}
.social-wrap .icon-reddit,.social-wrap a:hover .icon-reddit:after{color:#FF4500}
.social-wrap a:hover,.social-wrap a:focus{text-decoration:none}
.social-wrap a:hover .fa{color:#FFFFFF}
.social-icon .icon-twitter:hover,a:hover .icon-twitter,.icons-twitter .fa,.authorSocial .icon-twitter{background-color:#2DAAE1}
.social-icon .icon-facebook:hover,a:hover .icon-facebook,.icons-facebook .fa,.authorSocial .icon-facebook{background-color:#3C5B9B}
.social-icon .icon-google:hover,a:hover .icon-google,.icons-gplus .fa,.authorSocial .icon-google{background-color:#F63E28}
.social-icon .icon-rss:hover,a:hover .icon-rss{background-color:#FA8C27}
.social-icon .icon-linkedin:hover,a:hover .icon-linkedin,.icons-linkedin .fa,.authorSocial .icon-linkedin{background-color:#0173B2}
.social-icon .icon-dribbble:hover,a:hover .icon-dribbble,.authorSocial .icon-dribbble{background-color:#F9538F}
.social-icon .icon-pinterest:hover,a:hover .icon-pinterest,.icons-pinterest .fa,.authorSocial .icon-pinterest{background-color:#CB2027}
.social-icon .icon-youtube:hover,a:hover .icon-youtube,.authorSocial .icon-youtube{background-color:#CD332D}
.social-icon .icon-vimeo:hover,a:hover .icon-vimeo,.authorSocial .icon-vimeo{background-color:#44BBFF}
.social-icon .icon-skype:hover,a:hover .icon-skype,.authorSocial .icon-skype{background-color:#00AFF0}
.social-icon .icon-deviantart:hover,a:hover .icon-deviantart,.authorSocial .icon-deviantart{background-color:#4B5D50}
.social-icon .icon-flickr:hover,a:hover .icon-flickr,.authorSocial .icon-flickr{background-color:#0063DB}
.social-icon .icon-stumbleupon:hover,a:hover .icon-stumbleupon,.authorSocial .icon-stumbleupon{background-color:#EB4924}
.social-icon .icon-tumblr:hover,a:hover .icon-tumblr,.authorSocial .icon-tumblr{background-color:#2C4762}
.social-icon .icon-delicious:hover,a:hover .icon-delicious{background-color:#3274D1}
.social-icon .icon-digg:hover,a:hover .icon-digg{background-color:#14589E}
.social-icon .icon-lastfm:hover,a:hover .icon-lastfm{background-color:#D51007}
.social-icon .icon-wordpress:hover,a:hover .icon-wordpress{background-color:#21759B}
.social-icon .icon-instagram:hover,a:hover .icon-instagram{background-color:#3F729B}
.social-icon .icon-apple:hover,a:hover .icon-apple{background-color:#B9BFC1}
.social-icon .icon-dropbox:hover,a:hover .icon-dropbox{background-color:#2281CF}
.social-icon .icon-behance:hover,a:hover .icon-behance{background-color:#1769ff}
.social-icon .icon-reddit:hover,a:hover .icon-reddit{background-color:#FF4500}
.icons-whatsapp .fa{background-color: #5cbe4a}
.sharesinfo{position:absolute;width:auto;right:15px;left:0;top:50%;margin-top:-16px;padding:0;z-index:4;display:none;text-align:center}
.sharesinfo .fa{width:32px;height:32px;line-height:32px;color:#FFFFFF;font-size:14px}
.sharesinfo a:hover,.sharesinfo a:focus{text-decoration:none}
.sharesinfo a{display:inline-block;height:32px;width:32px;cursor:pointer}
.sharesinfo span{color:#FFFFFF;font-size:12px;height:18px;line-height:18px;position:absolute;top:-30px;left:-9px;right:-9px;background-color:#D32F2F;display:none}
.sharesinfo b{font-weight:300;background-color:rgba(0, 0, 0, 0.4);padding:0 2px;display:inline-block;float:left}
.sharesinfo a:hover span{display:block}
.sharesinfo span:before{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;width:0;height:0;border:5px solid transparent;border-top-color:#D32F2F}
.wasupport .sharesinfo .icons-whatsapp {display:inline-block}
.wasupport .item-share .icons-whatsapp {display:block}
And then click on orange save template button to make changes.
Now go to "layout" section and then click on " Add a widget ".
After that, select " Html/JavaScript ". (See the below image)
Now copy the below html code and paste it in Html box.
<div class='widget-content social-wrap'>
<ul>
<li><a href='http://last.fm' rel='nofollow' target='_blank' title='lastfm [530]'><span class='icon-counter'><i class='fa icon-lastfm [530]'></i></span><div class='social-desc'><div class='hide-count'>lastfm [530]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://google.com' rel='nofollow' target='_blank' title='google [8695]'><span class='icon-counter'><i class='fa icon-google [8695]'></i></span><div class='social-desc'><div class='hide-count'>google [8695]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://youtube.com' rel='nofollow' target='_blank' title='youtube [456M]'><span class='icon-counter'><i class='fa icon-youtube [456M]'></i></span><div class='social-desc'><div class='hide-count'>youtube [456M]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://pinterest.com' rel='nofollow' target='_blank' title='pinterest [567]'><span class='icon-counter'><i class='fa icon-pinterest [567]'></i></span><div class='social-desc'><div class='hide-count'>pinterest [567]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://instagram.com' rel='nofollow' target='_blank' title='instagram [8796]'><span class='icon-counter'><i class='fa icon-instagram [8796]'></i></span><div class='social-desc'><div class='hide-count'>instagram [8796]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://rss.com' rel='nofollow' target='_blank' title='rss [2.9k]'><span class='icon-counter'><i class='fa icon-rss [2.9k]'></i></span><div class='social-desc'><div class='hide-count'>rss [2.9k]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://twitter.com' rel='nofollow' target='_blank' title='twitter [200]'><span class='icon-counter'><i class='fa icon-twitter [200]'></i></span><div class='social-desc'><div class='hide-count'>twitter [200]</div><span class='item-text'>Followers</span></div></a></li>
<li><a href='http://facebook.com' rel='nofollow' target='_blank' title='facebook [1.2M]'><span class='icon-counter'><i class='fa icon-facebook [1.2M]'></i></span><div class='social-desc'><div class='hide-count'>facebook [1.2M]</div><span class='item-text'>Followers</span></div></a></li>
</ul>
</div>
After that, click on save widget button to make changes. Now refresh your blog and see the magic.
You can use the above codes according to your need.
Replace the highlighted link with your own social links .
I tried my best to make the installation process easy for you, however you will need some piece of mind to add this navigation menu into your blog.
That's it! I hope you like this social buttons! Stay tuned for more tips and tricks! Thanks for reading @Prince
You can use the above codes according to your need.
Replace the highlighted link with your own social links .
I tried my best to make the installation process easy for you, however you will need some piece of mind to add this navigation menu into your blog.
That's it! I hope you like this social buttons! Stay tuned for more tips and tricks! Thanks for reading @Prince
0 Comment to "Animated Social Subscription Buttons For Blogger"
Post a Comment