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.
5. Click the "Save Template" option.
<b:if cond='data:blog.pageType == "item"'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RDzKarKp2WFlDEfamBe3ojsg8WWPwtulXxAF8zYaWZrr05igGh6jH_taQklab7eu9u0RP0D6T86NHeUGs9bbdn7LHrlYuySOo5s_kJypvJlOLxm-CJ7lNQwPQTvwHIsdCY4dBh8pDXg/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[*/
(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>
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 == "item"'>8. Click Save Template.
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='MBBSocialFloat' id='MBBSocialFloat'>
<table class='MBBSocialFloat' width='100%'>
<tr>
<td><div class='sharertitle'>Socialize It →</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='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' 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>
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