Socialize It – Add Below Post Social Sharing Widget with Comments Counter

Socialize It – Add Below Post Social Sharing Widget with Comments Counter

Below Post Socialize It - Social Sharing Widget for Blogger Blog
Socialize It – Social Sharing Widget

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.

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. So now lets start adding socialize it – Below Post Social Sharing widget to 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(https://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;}
    #MBGSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #MBGSocialFloat td{padding:4px;margin:0;border:none;}
    #MBGSocialFloat td iframe{max-width:82px;width:82px !important;}
    #MBGSocialFloat.MBGFloatSocial{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(“#MBGSocialFloat”);a.wrap(‘<div id=”MBGSocialPlaceholder”></div>’).closest(“#MBGSocialPlaceholder”).height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b(“#MBGSocialFloat iframe[src*=plusone]”).closest(“div”).css(“max-width”,”82px”);b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass(“MBGFloatSocial”):a.removeClass(“MBGFloatSocial”);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=’MBGSocialFloat’ id=’MBGSocialFloat’>
<table class=’MBGSocialFloat’ 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.

Conclusion:

So above guide is about How To Add Socialize It – Below Post Social Sharing Widget with Comments Counter to Blogger Blog. 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.

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments