Thursday, August 25, 2011

Floating "Share Buttons" For Your Blog

Recently I found an amazing blogger plugins widget which can enable you and your blog readers share the blog posts easily and rapidly. In this way, if anyone finds your blog interesting, it will be shared within seconds and that of course will bring more traffic to your blog.
Its called a "Mashable Floating Social Media Buttons", which you can see at the left side of the blog. This blog widget highly recommended if your blog is related to any making money online field. Most importantly, it will surely increase web site traffic and make your blog look professional.


I've made this post easy-to-understand so that you can add this blogger plugin with just few clicks. I found this widget from Blogger Sentral Website and added an extra "FOLLOW ME" button.


It won't take much time so please follow the steps below: 
    
    1. Goto Blogger.com and Login

    2. Next, Click on Design > Page Elements

    3. Click on "Add A Gadget" and select "HTML/Javascript" from the list

    4. Write any attractive title like "Share This Blog And Get Widget"

    5. In the content, copy the code below and paste it as it is:

    <!-- floating page sharers Start "www.makingmoneyideas1.blogspot.com-->
    <style type="text/css">
    #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
    .fb_share_count_top {width:48px !important;}
    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !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='pageshare' title="Get this from here">
    <div class='sbutton' id='fb'>
    <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>
    </div>
    <div class='sbutton' id='rt'>
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </div>
    <div class='sbutton' id='su'>
    <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
    </div>
    <div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
    <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
    <a class="DiggThisButton DiggMedium"></a>
    </div>
    <div class='sbutton' id='gplusone'>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
    <g:plusone size="tall"></g:plusone>
    </div>
    <div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://makingmoneyideas1.blogspot.com/2011/08/floating-share-buttons-for-your-blog.html">Plugin</a></div>
    <div class='sbutton'>
    <a href='http://twitter.com/YOUR USERNAME'><img alt='follow me' src='http://i1103.photobucket.com/albums/g462/mariathebest22/13e2-1.jpg' style='border: medium none;'/></a>
    </div>
    <!-- Do not remove this link -->
    </div>
    <!-- floating page sharers End -->


        6. You can change the height of this blogger widget by changing the value of "Bottom      15%" to more or less in the third line

        7. Also if you want to change the location (from left to right side of blog) then change the "margin-left" to "margin-right".

        8. If you want to show more social media networks buttons then simply add the following code of that social website before the "<!-- Do not remove this link -->" line.
    <div class='sbutton'>
    BUTTON CODE
    </div>
    Enter your social network button code at "BUTTON CODE" 
      9. Finally, save the code and you're done. This will appear exactly the same as you see in this blog.
    
    
    I'm sure once you get this mashable widget installed in your blog it will surely do the work for sharing your posts much faster. Please SUBSCRIBE and you find it helpful then please share this blog or blog post using buttons on the left.
    
    
    If you have any questions or anything then please write to me in the comment box.

    0 comments:

    Post a Comment

    Related Posts Plugin for WordPress, Blogger...

     
    Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates