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.

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.