Add a Floating Social Media Counter Button Including Pinterest Pin it Button

2 comments

Today I am bit free and Holidays it is I have decided to lets play with CSS again.  I am going to put a floating Bar Widget  For Blogger and WordPress both . Contain Facebook like button and Twitter Counter  By tweetmeme and Pinterest Pin it button and Google G+ button as we know Facebook and Tweeter are widely known social media without which you can not call blog a blog. This widgets lets your reader circulate and share the post to their best and loving ones.

"This new version of CD Widgets are available all this four social media buttons if you want to add more buttons to it and need help from us feel free to ask and drop your doubt in Comment box."

This can be further edited :
  • This can be aligned any where in the blog left or right side of your website. By default it will appear in the middle left of your blog.
  • You can add more more Social media to it like Digg.
Follow the Steps to Add Facebook, Twitter, Pinterest and Google G+ Counter to Blogger:
  • Log in to blogger>Design.
  • Select HTML/JavaScript Widgets from anywhere (position Doesn't matter).
  • Inside it Post the code Below.
<style>
/*-------CD Sharing Widget------------*/
#cdfloat {
  position:fixed;
bottom:15%;
margin-left: -84px;
z-index:10;
float:left;
padding-bottom:2px;
}
#cdsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id="cdfloat">
<div id="cdsidebar">
    <table cellpadding="1px" cellspacing="0">
<tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="probloggingtool">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a href="http://pinterest.com/pin/create/button/" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td> <a href="http://coderdesire.blogspot.in/2012/06/add-floating-social-media-counter.html" style="color:#000000; font-size:8px">Get This </a>
    </td>
    </tr>
        </table> </div> </div>
  • Save your widgets and you are Done !
See your Blog its look beautiful with a hanging light widgets in middle left of your Website. hope you liked it...  :)


← BLOGGER OR GOOGLE+ →

2 comments:

  1. kenapa yah di blog gw gak bisa muncul like fbnya ?

    ReplyDelete