Add share buttons below post titles in blogger

In our previous posts we have explained different types of share buttons for blogger. Most common types of share buttons are floating share buttons, buttons below blogger posts, shareaholic animated share buttons etc. In this post we will learn how to add share buttons below post titles in blogger. Today we will discuss about two types of share buttons. One is addtoany service and the second one is addthis service. These two are the popular content sharing services over the web.

 

Why we need to add share buttons to blogger ?

We have discussed this question many times in our previous posts. You need to add share buttons in your blog to increase traffic and popularity of your blog. Visitors of your blog can directly share the content of your blog to their social networks with the help of these social share buttons. In this way these buttons helps in spreading your voice to the millions of the social networking website users. With the help of these small buttons you can make your posts go viral on social networking websites which results in huge incoming referral traffic towards your blog

Features of AddtoAny  buttons

• These buttons are compact and can be placed in just a small space on your blog.
• Use very light weight script which do not effect your blog`s loading speed.
• Provide hundreds of social networks for sharing your blog posts.
• Easy to add and maintain.

Features of Addthis buttons

• Beautiful and attractive design.
• Fast loading source code.
• One click share to hundreds of social networks.
• Adding these buttons to your blog is very easy.
• Easy to customize the share buttons.

Adding share buttons below post titles in blogger

• Open your blogger dashboard.
• Select Template option.
• Click Edit HTML
• In the template code find following code.

<div class='post-header'>
 <div class='post-header-line-1'>

• Now just below <div class='post-header-line-1'> find first occurrence of</div>
• Now just below this first </div>  paste  any one of the following codes and save the template.

Style 1 : Share buttons powered by Addtoany service

Code for Addtoany share buttons for blogger

<div class='post-header-line-2'>
 <!-- AddToAny BEGIN -->
<br/><a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' height='16' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171'/></a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<!-- AddToAny END -->
      </div>

Style 2: Addthis Share buttons

Code for Addthis share buttons for blogger

 <div class='post-header-line-2'>
<!-- AddThis Button BEGIN -->
    <br/>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> 
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51bafe4d7ce14f20"></script>
<!-- AddThis Button END -->
      </div>