How to Modify Default Blogger Share Buttons to Attractive Custom Images?


Blogger formerly has an option for share buttons, but it’s not very attractive. So I decide to share my own tutorial on how I done it. I expect this tutorial saves your time .Finally, you can make specially this to have your special images and match your fonts or colors. If you're finding for an easy solution. I have made some attractive grey buttons that should go with most any blog.

Blogger Share Buttons

There included Facebook, Twitter, Email, Google+ ,Tumblr and Pinterest button.

READ MORE : How to Add Social media Sharing Button Under Every Blogger Post?


At first, you need to remove default Blogger share on your site or blog. To do this,

 log in to your Blogger Dashboard>> Layout tab >> Edit post.
From the window you need to organize the blog posts. There is an option named “Show the Share Buttons”. Confirm this button is unchecked. Then click save. Now that the Blogger default share buttons are blank, now you can add the customize button.
 Now go to the Template part and click edit HTML, click inside your HTML code and hit Ctrl F to locate the following code:

 <div class='post-footer'> 

You may find this code more than once, you need second one. Now pest the following code after second one:



<!-- AddThis Key BEGIN -->
<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='http://1.bp.blogspot.com/-Doe-nHNRph0/VXi6oEYHpiI/AAAAAAAALf0/vehf0HZG3W8/s1600/Share%2Bthis%2BPost.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='http://4.bp.blogspot.com/-1zDqh-W7LLk/VXi6ntQsYtI/AAAAAAAALfQ/Pprvi03-NpQ/s1600/Facebook%2BButton%2BShare.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='http://4.bp.blogspot.com/-9ot9ZrDBORw/VXi6olHElFI/AAAAAAAALfg/FgkFZtzhM7E/s1600/Twitter%2BButton%2BShare.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://3.bp.blogspot.com/-b8J3nxp5Zek/VXi6oOIafaI/AAAAAAAALfU/0U0YQQdo2Z0/s1600/Pinterest%2BButton%2BShare.png'/></a><a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' src='http://1.bp.blogspot.com/-fla_oko-g4I/VXi6oeLUW7I/AAAAAAAALfc/3mpJuBDo8YY/s1600/Tumblr%2BIcon.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='http://1.bp.blogspot.com/-SVErwlOWPws/VXi6n0s0yQI/AAAAAAAALfM/trsRWvm8eNk/s1600/Google%2BPlus%2BShare.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='http://1.bp.blogspot.com/-0Wsj8_RX-B4/VXi6noTVdDI/AAAAAAAALfI/ZjlhX2fT9mA/s1600/Email%2BButton%2BShare.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Key END -->

How to customize this code?


If you wish to modify it, you can change the img src links with your own images link. Here's an example of how you can customize this code. If your blog template has a boundary around your images, you might want to take the regular border off, but that's your call. If you want it centered or aligned right , find the line: 

<div style='text-align: left ;'> 

And change the left to "center" or “right".

If you want to change the language of "Share this post". Right now this is saved as an image. If you wish to say something another, you can also make your own image or just type in your own text. To style in your own find the line:

 <div class='addthis_toolbox'>

 And type in your new passage right below. For example: "Like this post or Share it to your friends". You will then want to delete the Share this post image by deleting this line of code:

<a class='addthis_button_share'><img alt='Share this Post' border='0' src='http://1.bp.blogspot.com/-Doe-nHNRph0/VXi6oEYHpiI/AAAAAAAALf0/vehf0HZG3W8/s1600/Share%2Bthis%2BPost.png'/></a>

That’s all. Feel free to ask any question or quarry, make a reply in comment section.

9 comments:

  1. I agreed with you Dear! Your posts is really helpful for me.Thanks for your wonderful post. I am very happy to read your post. It is really very helpful for us and I have gathered some important information from this blog!! So Cool blog and great content. Thanks author for your Awesome tropic and Excellent Content. Truly I like it and Looking forward to read your Up coming post. SSC Result 2018! HSC Result 2018!

    ReplyDelete
  2. Bangladesh Education Board SSC Result Can be Found Here. Get SSC Result 2018 and More From Here. Also Find The HSC Exam Result 2018 From Here

    ReplyDelete
  3. SSC Result 2018 This is really a great article and great read for me. It’s my first visit to your blog and i have found it so useful and informative specially this article.

    SSC Exam Result |

    Govt Job Circular

    ReplyDelete
  4. Very useful information about blogging. thanks for sharing with us and free guest posting sites

    ReplyDelete
  5. Thanks you so much admin to share such kink of informative article.
    Anyway, To get
    HSC Result 2018 and SSC Result 2019 You can visit resultkit.com
    Thank you

    ReplyDelete
  6. I have a very good news for. To get
    HSC Result and SSC Result You can visit Result Kit
    Thank you

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

More From Webworld