Show Sharing Buttons Just Below all Post Titles in Blogs

The widget today is an upgraded version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter...

social sharing buttons widgetThe widget today is an upgraded version of the sharing widget we earlier shared. It includes popular social networking buttons like Twitter, Facebook Like, Google Plus +1, Add this and Stumbleupon. I am using it in my blog as you can see. We will also customize here the Add This button and will add blog title inside it. You can easily customize it to change the background colors and widget overall look. It can be added to both Blogger and Wordpress. It has great importance in boosting blog traffic through the shares made through these buttons which will circulate in social media and help you enjoy a long lasting referenced traffic. Lets add these valuable buttons to your blog.

Live Demo


Add Social Sharing Buttons Below Post Titles

I am sharing here the method for blogspot blogs. If you are using Wordpress then you may please add the code shared below inside your template by going to template section.

Follow the steps below if you use Blogger.

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click on the box at top right that says "Expand Widget Templates"
  4. Then search for <data:post.body/>
  5. Just above it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>

<td><!-- Twitter -->

<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='' type='text/javascript'> </script> </b:if> </td>


<iframe allowTransparency='true' expr:src='&quot;; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->

<script expr:src='&quot;;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td><!-- AddThis Button BEGIN -->

<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>


Make these changes:

  • To change the background color of the container edit #FEE6E6
  • Change MY BLOGGER TRICKS with your blog title so that it appears on the add this button upon mouse hover. As shown below:

customize add-this button

      5.  Note: skip this step if you have already added a Google+ button somewhere in your blog. Search for ]]></b:skin>  and just below it paste the following code:

<script src='' type='text/javascript'> {lang: &#39;en-US&#39;} </script>


       6.  Save your template and say bingo!

Visit your blogs and see it appearing only on post pages and not the homepage. If you wish to show it even on your homepage then simply delete the two purple lines from the code above.

Want more?

If you want more variations of the same widget then kindly check our social sharing widget collection.  Do let me know if you needed help. Peace pals! :)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
SEO and SEM Guide For Bloggers: Show Sharing Buttons Just Below all Post Titles in Blogs
Show Sharing Buttons Just Below all Post Titles in Blogs
SEO and SEM Guide For Bloggers
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy