Simple Yet Stylish Share Buttons for Blogger

Recently one of our twitter follower asked us to create him a custom social sharing widget with some icons. The icons were of the WordPress plugin Simple Share Buttons.

While creating the widget for him, we decided to make the widget easily customizable, so that it will be easy for everyone to customize it with their own icons and effects.

Actually, this widget is created to be placed below the blog posts. Placing it below the post title or somewhere else will be boring. So lets start...

Adding the Share Buttons Below Every Blog Posts

1. Go to your blogger dashboard, Template > Edit HTML and search for <data:post.body/> and paste the below code after it.

<style type="text/css">
#social-share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline;
}
</style>

<div id="social-share-buttons" class="bg-share-buttons">
<center>Don't be selfish... Share this article with your friends :)<br/>
<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share this on Facebook'><img src="http://www.simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" /></a>

<!-- Twitter -->
<a expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' target='_blank' title='Tweet This!'><img src="http://www.simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" /></a>

<!-- Google +1 -->
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=&quot; + &quot;en&amp;url=&quot; + data:post.url' target='_blank' title='Share this on Google Plus'><img src="http://www.simplesharebuttons.com/images/somacro/google.png" alt="Google" /></a>

<!-- Digg -->
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg this!'><img src="http://www.simplesharebuttons.com/images/somacro/diggit.png" alt="Digg" /></a>

<!-- Stumble Upon -->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble upon something good? Share it on StumbleUpon'><img src="http://www.simplesharebuttons.com/images/somacro/stumbleupon.png" alt="StumbleUpon" /></a>

<!-- Reddit -->
<a expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share this on Reddit'><img src="http://www.simplesharebuttons.com/images/somacro/reddit.png" alt="Reddit" /></a>

<!-- Linkedin -->
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share this on Linkedin'><img src="http://www.simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" /></a>

<!-- Pinterest -->
<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;is_video=&quot;' target='_blank' title='Pin It !'><img src="http://www.simplesharebuttons.com/images/somacro/pinterest.png" alt="Pinterest" /></a>

<!-- Buffer -->
<a expr:href='&quot;https://bufferapp.com/add?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' target='_blank' title='Share this on Buffer'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQruYm4HsN93HeFZmdDsS0by5Pioe36Z37AeUcYIAsEzB1KyjI7CRP1755A7D8YBiFdHx4D4KE2idzE2We-eVcOVXf6F_RFD9n_aSkGPwmdPwHca9sQSg-f-o8mS_7rP5MANlFgJCh1XX/s1600/buffer.png" alt="buffer" /></a>

</center></div>

2. Click the save button.

Note: Replace NAME with your twitter handle.

The first part is over and you can see the widget live in action on your blog. If you're satisfied with what you saw, the next part is not for you. Whatever, if you want to make the widget more beautiful, move on to next part...

Customizing the Share Buttons

Everything from texts to icons are easily customizable in this widget. As I told earlier, it was our only motto while creating this widget. So lets go customize the widget...

Replacing the Social Media Icons

Just go through the code and you can see some links in RED, they are the links of the icons. You can replace it with the links of the icons of your choice.

Let's say, you want to change the icon of the Twitter button. Go find <!-- Twitter --> in the above code and replace the corresponding link with the link of your button.

Changing the Text

Figure out the text in ROSE and change it to whatever you want. If you want to remove that text, remove it along with the <br/> tag succeeding it.

Adding CSS Hover Effects to the Icons

If you want to add any sort of CSS hovers like rotate, fade or something else, use the CSS class bg-share-buttons to do so.

To add a rotate effect to the icons, add the below code after <style type="text/css">

.classbg-share-buttons img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

Hope this helps. Save the changes and reload your blog to see the widget live on your blog. If you faced any difficulty while installing or customizing the widget, drop a comment below, we are always happy to help. Before you leave, make sure to check more of blogger widgets here at blogger garage.