Now Reading
Best Widget Of Social Media With Hover Expanding Buttons For blogger

Best Widget Of Social Media With Hover Expanding Buttons For blogger

by AdminAugust 24, 2016

Social media is the greatest way to spread your website/blog traffics in sharing your post or attracting your blog reader. So today I am sharing a great hover expand social media buttons for blogger blog,

I hope this design will attract more your readers, to increase your followers and subscribers, Now Enjoy To Install This great Widget, Just follow my instructions :


Step 1 : Login To Your Blogger Dashboard
Step 2 : Now Click On Layout and add widget
Step 3 : And now copy code and paste on popup window where you already select HTML/javascript

Process : Blogger dashboard=>Select Blog=>Layout Tab=>Add Widget Button=>HTML/JavaScript.

Step 4 : Now change all id or link to own your link then click to save
Step 5 : Arrange the widget and click save button.

Your setting is Done !

Copy And Paste Below Code In Your Widget Area


<style>#TB911-SNS {width: 260px;margin: 5px 20px;padding:5px;}
#TB911-SNS li {cursor: pointer;height: 48px;position: relative;
list-style-type: none;}#TB911-SNS .icon {background: #D91E76
0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;
height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;
white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out,
background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#TB911-SNS span:hover {visibility: hidden;}#TB911-SNS span {display: block;top: 15px;position: absolute;left: 90px;}
#TB911-SNS .icon {color: #fafafa;overflow: hidden;}#TB911-SNS .fb {background-color: rgba(45, 118, 185, .42);
background-position: 0 -382px;}#TB911-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}
#TB911-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}
#TB911-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#TB911-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}
#TB911-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}
#TB911-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}
#TB911-SNS li:hover .icon {width: 250px;}#TB911-SNS li:hover .icon {background-color: #d91e76;}
#TB911-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#TB911-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#TB911-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#TB911-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}
#TB911-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}
#TB911-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}
#TB911-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}
#TB911-SNS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style>
<a rel="dofollow" title="blogger widgets" href="" target="_blank">
<img border="0" src="" style="margin-right:0px;" alt="widgets"/></a>
<ul id="TB911-SNS"><li><a href="" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li><a href="" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li><a href="" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li>
<li><a href="" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
<li><a href="" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
<li><a href="" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li>
<li><a href="" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul></div><div style='clear: both;'></div>

Credit Goes to blogs911

Replace All Link With Your Own Social Media Link And Keep Blogging.

I Hope You Enjoy This Widget Feel free to Drop Comment Below

Please wait...
About The Author

Leave a Response