Contact

Sunday, August 31, 2014

How to Add Share Buttons at the End of Every Post on Blogger


If you don't want the tiny and bored-looking share buttons set up by default  by blogger at the end of every post, you could change them to these two options I'm going to show you shortly.

First, you need to remove Blogger's share buttons. Follow these steps:

1. Open your blog dashboard
2. Go to Layout
3. Click edit on the "Blog Posts" gadget
4. Remove the check mark from the "Show share buttons" option and click save

Now that you have removed them. You can now add your custom share buttons.

1. Open your blog dashboard
2. Go to Template
3. Click Edit HTML
4. In the template code find  (click CTRL + F and paste this code). You will find more than one of these occurrences. Paste any of the below codes below each occurrence and click Save Template.  

Addtoany 

How it Looks


























Code

<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>


Addthis

How it Looks


Code

 <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>

If you have any questions about this tutorial or any others leave a comment below or contact me by filling out the contact form on my "Contact" page on the top.


No comments:

Post a Comment