Thursday, August 20, 2015

Add responsive share buttons of Addthis in Blogger

Blogger though provides their own version of share buttons for our blogs, their share buttons appear little not-so-good. There are many other third parties that provide cool free responsive social media sharing buttons. 

One of the third parties that provide such responsive social media share buttons is Addthis. It also gives option to either go pro by paying some amount or get their free buttons. Let us add their free buttons in our blog.

We can also add social media sharing buttons of Addthis like above in our blogs. Please follow the given steps to get them in our blogs:
  1. Login to your blog
  2. Click on Layout
  3. Click on Blog Posts
  4. Disable Show Share Buttons
Once above steps are incorporated, you have successfully removed blogger default social media share buttons. If it's not at all activated in your blog, just ignore above steps. Now let us add customized Addthis share buttons:
  1. Login to your blog
  2. Click Template
  3. Click Edit HTML
  4. Find (Ctrl+F): <div class='post-footer'> (will appear more than twice. Consider second)
  5. Paste the given code beneath to it
<div style='text-align: left;'>
<div class='addthis_toolbox'>
<div class='custom_images'><a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3m60XMWtJsEEmNdX4V6_fgyfKscQM9I1mXukVl0ICWvrYKtCAQqEWDGBP54tDO9_14Qk4mWmBAjlmbISgpkX5zyvliDwBbJpebFAYU_RFC74CCgKdAYLh0Ezc5SsfYFbs_TgJCyrMLChc/s1600/Share+this+Post.png'/></a><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1NIr5FVRUzX5utTh7DB7_gOc1XTJC80_jv3pRyXYziYUuw2CLHodX3AXJAxDgBWaMXtKVaIZAA95vGYyxIBFz9xkE6J-lm4mQhyphenhyphen2P2mc1WBlKbqDBFExr6rd88rB4aiKYwr2n1xYsgXy4/s1600/Facebook+Button+Share.png'/></a><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv786cW33mgGN63gZNSbzSysOiqMKTVgtR3BhEnYNB9XjJxyxu0xMgvBh64fUnwQADQ86Vc_gwfMExmmqS2qip4MLGa03rX6EhSakYHlF0oVkhlJQkN7Z4gmaoWRZ09lTJhemYmeIkqCQz/s1600/Twitter+Button+Share.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuVYFASf-RAtydXrB3EzRqa1a__C5FHSO7dJMIcRChsy268ZvgGEnFEjdKcpCB05f31fJI1_be-9KHXdxGqRcbkxyGnz54K_h5FSk42KGtetKB5KAQ3OxetgBnEnzM3vhKqPO2OXe-c6u9/s1600/Pinterest+Button+Share.png'/></a><a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaJy7s7NH-Z_MYVAoZFKrUphsnt5QlKadfLZS0Pe9G1u3sPmEUtVwW7N14ajYPNmI-3R6Gx-af0kEahcXmAm7mOgcRo5Wqchs0a6vk7jXds3v-qks2Dh5JLmDfev7KuSZfax5S-0Xe52jd/s1600/Tumblr+Icon.png'/></a><a class='addthis_button_google_plusone_share + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALYr-xcLHbRRkI5aySKrTdXQ93sP3A22QllXtdCcZ8osLJnVs-yP3jG_0iPvGBeelRaAU1_hP3YYlWMlGAdvPXpL9x2-zChjftnT_AjjSs1tyBDU_EgJETTNYtqO5QRoOaLDdi-kDH_oW/s1600/Google+Plus+Share.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONkQzU34elT7ZzFQOZBv1gz7oxdA4q-cvC45LaiEZfGqxy-FTQFE_bXu4xYITaZatfZLWnJdEmnTCXqvfOxpxVdArWLT2yQ0BfNGLY5Bg6OzJixc-42NFDuFCohABeTznUoDajn7VCtok/s1600/Email+Button+Share.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>

Once you have added it, you may preview the blog. If no error comes up then you may click Save Template to complete it. Now open your blog once more. See those buttons have appeared below your post. Cool. Isn't it? Cheers!

No comments:

Read our comment Policy to know your rights & responsibilities before actually leaving a comment for this article.

Related Posts Plugin for WordPress, Blogger...