Since it is weekend so I thought lets play with some CSS again. Facebook Like Button and retweet counter by tweetmeme are the two most widely used social media widgets without which you can’t call a blog a blog. Both these buttons along with Stumble Upon
bookmarking button can let your readers circulate/share your tutorials
and articles with their interested collegues and friends connected to
them via these social networks. With a little HTML spiced with CSS we
succeeded in creating a floating widget that will include these three
buttons and will stay fixed at the middle lift side of your websites.
The widget settings can surely be changed to align it to the right,
bottom or left if you wish. You can also add more buttons to it if you
wish like DIGG for instance... How To add Floating Facebook Like, Retweet and Stumble Upon Counter to Blogger?
- Go To Blogger > Design
- Select HTML/JavaScript Widget from anywhere (Position doesn’t matter)
- Inside it paste the code below,
| <div style="display:scroll; position:fixed; top:40%; left:2%;
border: 1px dotted #E8E8E8; padding:0px 0px 0px 5px; height:220px;
width:53px "> <table cellpadding="1px" cellspacing="0"> <tr> <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/> </td> </tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </td> </tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="MeGaFiLeSStOrE">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td> </tr>
</table>
</div> |
4. Simply replace MeGaFiLeSStOrE with your twitter username.
5. Save your widget and you are Done!
See your blog to find a light and beautiful widget hanging at left side of your blog. Hope you like it! :)
