Thursday, 6 February 2014

Socialize It - Floating Social Sharing Bar With Comments Count For Blogger

Social networking sites are receiving an vastly increasing number of important to bloggers. Social media presence is currently more important than any other promoting tip for bloggers. Search engines like Google, Bing and many others are giving a better search rank which have a great social media presence. So, every website owner or blogger is looking to get various solutions to increase the social media presence pertaining to his/her web site or blog. One the way to get more shares, likes as well as tweets is with the help of social sharing buttons in your website as well as blog.
Today, I 'm here with an easy guide to feature Social Sharing Widget below Post titles in the blogger blog that will assist you to acquire more tweets and shares for the blog article. If that you are one particular who is looking to get more shares and likes then this widget is just perfect for you. So lets start rolling your fingers to add it to your blogger blog.

Add Social Sharing Widget below Blog Posts:

1. Log in to your Blogger Account.

2. Go to Template and back up your template.

3. Now click on "Edit HTML" and search for "</head>" section by using ctrl+F keys.

4. Copy the code given below and paste it just above </head> the section. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
    .horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle;  font-size: 14px;}
    .horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px;  height: 25px; }
    .horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
    .horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
    .horizontalsocial .sharerbubble{background: url(http://2.bp.blogspot.com/-Zenaemr3nKw/USzIGk9FTTI/AAAAAAAAB6A/1_wR3MU5Wms/s1600/Commentz.png) no-repeat;  height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
    .horizontalsocial .sharerbubble a{color: #2d2520;  padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
    .horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
    #MBBSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #MBBSocialFloat td{padding:4px;margin:0;border:none;}
    #MBBSocialFloat td iframe{max-width:82px;width:82px !important;}
    #MBBSocialFloat.MBBFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#MBBSocialFloat");a.wrap('<div id="MBBSocialPlaceholder"></div>').closest("#MBBSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#MBBSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("MBBFloatSocial"):a.removeClass("MBBFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="https://www.googledrive.com/host/0B2ww3WS8P1MJSFM3cXRycDUzUXc"></script>
<script type="text/javascript">
/*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

/*]]>*/
</script>
</b:if>
5.  Click the "Save Template" option.

6. Now search for <data:post.body/> 
( If you find this code, more than once then try checking all of them ) 7. Add the following code just above it.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='MBBSocialFloat' id='MBBSocialFloat'>
<table class='MBBSocialFloat' width='100%'>
    <tr>
<td><div class='sharertitle'>Socialize It &#8594;</div>
</td>
        <td>
            <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
        </td>

        <td>
        <div class='fb-like'>    <iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
        </td>
     
        <td>
        <div class='sharergplus'>    <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
        </td>
     
        <td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
    </tr>
</table>
</div></div>
</b:if>
8. Click Save Template.

In the Last:

So this is the great widget to increase your social media presence and get more visitors to your blog. This is a must-use widget for a blog and I hope you added it to your blog successfully. Now It's your turn to share this post with your friends and write your feedback in comments till then Peace, Blessings and Happy Socializing.

No comments:

Post a Comment