Skip to main content

How to Add Social Buttons Bar Widget Below Post Title

Social ButtonsSocial Buttons on blogs have been one the most important techniques to drive tonnes of traffic to blogs from the social networks like the facebook, google plus, digg, stumbleupon and so on. It allows blog readers to share with their friends, important article(s) they think might be useful to the community. A nice, helpful and unique content enhance the use of the social buttons by the readers which in return boost the traffic of the blog as friends of friends might be interested in checking out the article.

Social Buttons Bar

The social buttons widget I will be sharing is an horizontal bar-like which comprises of four social network (popular): Facebook, Google+, Twitter and Stumbleupon. Social sharing buttons can be placed anywhere in the blog but where is the most active? Where can we place the widget for readers to see easily? These are the questions that brought about this topic.

Add social buttons below post title

Read Also:  Amazing Recent Post With Thumbnails Widget for Bloggers

How to Add Social Buttons Bar Widget Below Post Title

Adding the Social Buttons Bar widget below post title does not seems too difficult the way the beginners took it to be. Follow the below steps carefully and see how easy it is.
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML and Search (Ctrl + F) for "</head>" 
  • Paste the below codes just before the "</head>" tag

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter

(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);;a.src="//";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");

// Stumbleupon

(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();


<style type='text/css'>

/*-----------------  OrbasPortal Social Bar  ----------------------------------- */

#SocialBar {

    float: left;

    border-top: 1px solid #eaeaea;

    border-bottom: 1px solid #eaeaea;

    width: 610px;

    margin-bottom: 20px;

    margin-left: -10px;

    margin-top: 10px;


.headingsharer h5 {

    float: left;

    padding-right: 20px;

    padding-top: 18px;

    text-transform: uppercase;

    font-weight: bold;

    margin: 0px;

    padding-left: 10px;


.tweeetero, .fbwolo, .g-plusones, .stumblo {

    float: left;

    border-left: 1px solid #eaeaea;

    padding-left: 18px;

    padding-top: 15px;

    padding-bottom: 10px;


.g-plusones {

    margin-left: 20px;



  • Click on Save Template
  • Now, Search for ""<div class='post-body entry-content' ""

Note: Originally, the search should be <div class='post-body entry-content'> but not all templates are the same. So, you search for <div class='post-body entry-content' without the double quotation("") marks.

  • Paste the below codes just before or above the searched codes

<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
<div class='headingsharer'>
<h5>SHARE THIS: </h5>
<div class='tweeetero'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href=''>Tweet</a>
<div class='fbwolo'>
<iframe allowtransparency='true' expr:src='"//" + 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 class='g-plusones'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
<div class='stumblo'>
<su:badge expr:location='data:post.url' layout='1'/>
  • Save Template
  • Done.
Warning:  Backup your templates before tampering with the codes

Check Out: Adsense-Like Text Link Ads Widget For Bloggers

Should you encounter any difficulties when installing the widget, do not hesitate to contact me.


Popular posts from this blog

How to Make Google Adsense Show in the Middle of Blog Post

People blog for various reasons. If one of your goal as a blogger is to make money online, then correct placement of ads is going to play a very long role for you to become successful. To get the placement that will work for you, experimenting placement of ads on all part of the blog will do: The top, the sides, below post title, below post itself and in the middle of post.

Read Also : How to Make Google Adsense show below post title
How to Make Google Adsense show below post title in Mobile View

For this tutorial, I will be writing on an entirely different one, placement of Google Adsense Ads in the middle of blog post.

How to Make Google Adsense Show in the Middle of Blog Post 1. Log in to your blogger dashboard
2. Navigate to template and backup your blogger template
3. Edit template and search for the below codes (Mostly the second one)
<data:post.body/> 4. Parse your Google Adsense Code using Html Encoder
5. Replace the above code with the below code
<div id='jobmi…

How to add Email Subscription Widget Below Post

Getting traffic to your blog or website might be one of the easiest thing for you to do but keeping them I challenge you, is one of the toughest things in blogging. There are several methods that can be used for making your readers keep on coming but for this tutorial we will focusing on one, adding email subscription below post.
Email subscription widget at the side bar also does this work but researches have shown that email subscription box below post does best. After a useful article has been read by the visitor, he/she will like to read more and thereby subscribing just immediately after the post making him/her a permanent visitor. How do I do this?
How to add Email Subscription Widget Below Post Get your desired email subscription widget code by searching online. Log in to your blogger account Navigate to Template > edit templateRemember to back up your template Search (using CTRL + F) for <data:post.body/> Place the Email Subscription code after/below the above code


Android: How to Download Youtube Videos

Right before now, YouTube videos were downloaded conveniently using the UCBrowser on Android devices but recently, the license placed on YouTube videos have restricted the browser download wizard to perform its wonders. Though, the YouTube had enabled the offline watching of videos but not all videos have this feature, the feature is placed on video according to its owner. This is definitely actually not the best as there are countless reasons why videos need to be downloaded.

Applications have been developed for this task and are all over the internet but here, I am going to share with you the most convenient of all: this has been tested by me which is why I find it worthy to be shared on my blog, the TubeMate.
Why TubeMate is the best? Fast download manager
Easy to use interface
High quality video downloads
How to Download YouTube Videos Via TubeMate  Visit tubemate official website to download the latest version of the application.  Install the application Launch and get familiar …