How to add stylish Share buttons to your blogspot blog

​Though I may never admit it, but I'm a lover of classic and chic looking things, which is why I want your blog to look outstanding with this cute custom blogger share buttons. I shared a post months back about replacing your blogger default share buttons with a beautiful and more professional one. (Demo Here)

Today we will be getting something better. This share buttons can work on WordPress as well but that doesn't matter since WordPress blogs come loaded with lots of share button plugins. Thus, this is rather suitable for blogspot bloggers.

Changing Your Share Buttons
First thing first, since you will be editing your theme's raw file, please backup your theme(template) to avoid losing your precious theme to a tiny mistake.

After backing up (please back it up!), click on "EDIT HTML" and search for
]]</b:skin> and Paste the CSS below above it.

.social-share-buttons li {
display: inline-block;
padding: 0;
}
.social-share-buttons.show-title a {
margin: 20px auto 0 auto;
text-transform: uppercase;
font-size: 10px;
}
.social-share-buttons.style-default i {
width: 32px;
height: 32px;
margin: 0 auto;
line-height: 32px;
text-align: center;
font-size: 14px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
border-radius: 16px;
color: #fff;
background-color: #121212;
}

Now search for <b:includable id='shareButtons' var='post'> and replace the codes below it and before </b:includable> with the HTML codes below

<ul class='social-share-buttons secondary-2-primary style-default'>
    <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'><i class='fa fa-facebook'/> </a></li>
    <li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class='fa fa-twitter'/> </a></li>
    <li><a href='javascript:voidundefinedundefinedfunctionundefined)%7Bvar%20e=document.createElementundefined&apos;script&apos;);e.setAttributeundefined&apos;type&apos;,&apos;text/javascript&apos;);e.setAttributeundefined&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttributeundefined&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.randomundefined)*99999999);document.body.appendChildundefinede)%7D)undefined));' target='_blank'><i class='fa fa-pinterest'/> </a></li>
    <li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><i class='fa fa-google-plus'/></a>
            </li>
    <li><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url' target='_blank'><i class='fa fa-linkedin'/> </a>
            </li></ul>

Note; You are replacing the default share buttons placed inside the includable tags. Here is what I mean <b:includable id='shareButtons' var='post'> SELECT ALL THE CODES HERE AND REPLACE WITH THE ONES GIVEN ABOVE</b:includable>

Please take note of the emboldened codes so you don't delete them mistakenly.

Save your modifications If you use a responsive blogger template. If you don't, in order to show the share buttons in the default mobile view, you shall have to find <b:if cond='data:top.showMobileShare'>, You will see the code that pulls out the mobile share button below it. All you have to do is replace the code with the share button codes given above.

This is what the codes below <b:if cond='data:top.showMobileShare'> looks like

<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>

You are to replace them correctly with the share buttons code above... Be sure to replace the codes without affecting other codes in your template.

Once you are done, Save your theme ad check the new share buttons in your blog.