Unique Hover Effect Social Media Follow Us Widget

0
Unique Hover Effect Social Media Follow Us Widget
In  this  tutorial i'm going to  explain how to add unique hover effect join/follow/connect us widget with social media  profile  icons and social followers or fans counter. By using this widget you can link your social media profile Facebook,Twitter and Rss and YouTube.You have to update the counter manually.



1. Log in to blogger account.
2. Now select "Layout"
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below code
<style>
.btrix_widget{
margin-bottom:20px;
overflow:hidden;
clear: both;
border: 1px solid black;
width: 300px;
}
.btrix_widget li{
line-height:15px;
float:left;
width:75px;
height:87px;
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
list-style:none;
}
.btrix_widget li a{display:block;text-align:center;}
.btrix_widget li a strong{ background:url(http://4.bp.blogspot.com/-DHkZX7Y0FXs/UVvNYBepQVI/AAAAAAAAAc8/_EA1lwrFxqA/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s;  -moz-transition: opacity ease-in-out 0.4s;  -o-transition: opacity ease-in-out 0.4s;  transition: opacity ease-in-out 0.4s;}
.btrix_widget li a:hover strong{opacity:1;}
.btrix_widget li:hover a{text-decoration: none;}
.btrix_widget li.rss-subscribers a strong{ background-position:center -1084px ;}
.btrix_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}
.btrix_widget li.rss-subscribers span{display:block;font-size:21px;}
.btrix_widget li.facebook-fans a strong { background-position:center -1192px ;}
.btrix_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}
.btrix_widget li.twitter-followers a strong{ background-position:center -868px;}
.btrix_widget li.twitter-followers a:hover strong{ background-position:center -922px;}
.btrix_widget li.youtube-subs a strong{ background-position:center -976px;}
.btrix_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}
.btrix_widget li span{display:block;font-size:21px;}
.btrix_widget li a small{color:#777;}
</style>
<br />
<div class="widget btrix_widget">
<ul style="margin-left: -40px;">
<center><h1>Connect with Us</h1></center>
<li class="rss-subscribers">
<a href="http://feeds.feedburner.com/bloggersstand">
<strong></strong>
<span>548</span>
<small>RSS Feed</small>
</a>
</li>
<li class="twitter-followers">
<a href="http://www.twitter.com/bloggersstand">
<strong></strong>
<span>5,245</span>
<small>Followers</small>
</a>
</li>
<li class="facebook-fans">
<a href="http://facebook.com/bloggersstand">
<strong></strong>
<span>2,298</span>
<small>Fans</small>
</a>
</li>
<li class="youtube-subs">
<a href="http://www.youtube.com/username">
<strong></strong>
<span>1,202</span>
<small>Subscribers</small>
</a>
</li>
</ul>
</div>
  • Change bloggersstand with your Feedburner ID 
  • Change bloggersstand with your Facebook username
  • Change bloggersstand with your Twitter Username
  • Change Username with your youtube username
5. Now save your 'HTML/Javascript'. Done !
Hover Effect Social Media Follow Us Widget for blogger,connect,join us,social sharing counter widget gadget for blogspot best hover effect social sharing box with html and css
In  this  tutorial i'm going to  explain how to add unique hover effect join/follow/connect ...
SUMMARY

Hover Effect Social Media Follow Us Widget for blogger,connect,join us,social sharing counter widget gadget for blogspot best hover effect social sharing box with html and css

You Might Also Like:

We hope this article helped you to learn Unique Hover Effect Social Media Follow Us Widget. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Unique Hover Effect Social Media Follow Us Widget" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand