Add Above/Below Blogger Posts Social Sharing Widget

If you write quality content then readers are sharing our posts to social networks, but what if we don’t have a good social sharing widget on our blogger blog? Beautiful and cool looking social sharing widgets helps us to get our posts shared on different sites of social media. If our articles get share more and more times on different social networks, it helps our content to get more links, free traffic and social signals which increase value of our content in search engines. So today I’m going to share a Horizontal Social sharing widget for Blogger blogs which can you put into below post titles and if you don’t want to put it on below post title then you can also put this social sharing widget to below post footer.
Below Post Footer / Below Post Title Social Sharing Widget For Blogger Blog

We have made this buttons by different colors. Every button has their own background color which make this widget pretty, cool and eye catching compare to other social sharing widget, which can bore our readers. So i hope you like the design and your readers too. I think your readers must want to click on these button cause of cool and pretty design.

Other Social Sharing Widgets

  1. Social Sharing Widget with Counter for Blogger
  2. How To Add CSS Social Sharing Widget to Blogger?
  3. Below Post Responsive Social Sharing Buttons For Blogger
  4. Responsive Blogger Social Sharing Buttons with Counter
Above We have also uploaded a screenshot of this social sharing widget. So if you want to add this cool looking social sharing widget on your blogger then follow all steps one by one.

Steps for Adding Social Sharing Widget to Each Post in Blogger

  • Go To Blogger Dashboard.
  • Template >> Edit HTML.
  • Find </head> tag by pressing CTRL+F and paste code by open below link just above of this tag.

Get Code

  • Now Find <data:post.body/> tag by same process and paste below code just above of this tag if you want to add this widget to below post title and if you want to add this social sharing widget to post footer then paste below code just above of this tag. You have <data:post.body/> tag 2 to 3 times in your blogger template. Find right one which suites to your blog.

<b:if cond=’data:blog.pageType == &quot;item&quot;’><div id=’mbgBloggerSocialbar’><div class=’shareBox’><div class=’titleBox’>Share</div></div><div class=’shareBox’> <div class=’twitterBox’><a class=’twitter-share-button’ expr:data-text=’data:post.title’ data-via=’MyBloggerGuides’ expr:data-url=’data:post.url’ href=’’>Tweet</a></div></div><div class=’shareBox’><div class=’fb-like’ data-action=’like’ data-layout=’button_count’ data-share=’false’ data-show-faces=’false’ style=’background: #4965B4; width:80px; height: 100%; padding: 4px 10px; border: 0;’/></div><div class=’shareBox’><div class=’googlePlusBox’><div class=’g-plusone’ data-size=’medium’ expr:data-href=’data:post.url’/></div></div> <div class=’shareBox’>   <div class=’stumblupon’><su:badge expr:location=’data:post.url’ layout=’1’/></div></div></div></b:if>

  • Change MyBloggerGuides into your twitter id.
  • Now Save Template.
  • That’s it. You have added this social sharing widget to your blogger blog.


So above guide is about How To Add Below Post Footer / Below Post Title Social Sharing Widget To Blogger Blog. Did you get it? Have some questions? Feel Free to ask us by dropping a comment below. Hope you will like these social media buttons and and added successfully to your blogger blog. Don’t forget to share on blogging communities and with your blogger friends.

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 for 2 years, and here on My Blogger Guides, I'm sharing my what I learned in these past two years. :)

Click Here to Leave a Comment Below 0 comments

Leave a Reply: