Skip to main content

How to add stylish Share buttons to your blogspot blog

Custom share buttons for blogger

​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.
Labels:

Comments

Post a Comment

Popular posts from this blog

#Day2: Overcoming Procrastination

Have you ever tried getting rid of procrastination but find yourself procrastinating about doing what's needed to be done? # Day2 of my 30 days on a Confused State of Mind. Today, it's about overcoming my biggest struggle, Procrastination. In case you missed #DAY1 Of my Confused State of mind, You can go read it >>>>  Discovering my self-worth 99% of times, I find myself procrastinating but worrying over the fact that I can't fight it! Like whom ever said I couldn't fight it? It's a rough fight and I'm always at the losing end. I feel bad about the fact that I go through this but I'm not ashamed to admit it. Probably spiting it out is one of the ways I've got to fight it. Who Else Rows the Boat? The act of postponing and procrastinating isn't peculiar to me, definitely there are a lot more people out there struggling even worse than I. But it doesn't matter, because we are all birds of a feather!  Obviously, it feels so bad to b...
Continue Reading

How To Expand Your Wordpress Ping List

WordPress ping list are indeed useful when you want to extend your blog reach to major search engines. If you are not aware of pinging feature in WordPress, then be aware now! :) When ever you publish, edit or modify a post, WordPress sends ping to all the Ping services which must have been listed under your ping update service. So this way, ping services get notified about new post and search engine will quickly index them. Now by default WordPress notifies all major ping services but we can always extend our limit by pinging more services. adding them manually is an option definitely.  Below is a list of ping services for WordPress , which will help you to ping more services. You can also copy the list from WordPress doc file http://rpc.icerocket.com:10080/ http://blogsearch.google.com/ping/RPC2 http://1470.net/api/ping http://api.feedster.com/ping http://api.moreover.com/RPC2 http://api.moreover.com/ping http://api.my.yahoo.com/RPC2 http://api.my.yahoo.com...
Post a Comment
Continue Reading

I Hate Captchas, We All Hate Google Recaptcha

A good number of internet users if not all have come across and solved a captcha. Captchas are antibot checkers employed by websites to impede scam and spam. but these captchas are somewhat annoying and the latest and now most popular member of the captcha family, Google recaptcha, keeps popping up here and there in an absolutely unbearable and annoying manner. Solving captchas over the years have become somewhat harder and uncalled-for, especially with the spread and popularity of Google recaptcha. Solving captchas used to be fun and easier when users had to type in words and numbers as seen correctly but now reverse is the case as most websites have began using google recaptcha and recently, in order to have access to some websites, you need to prove that you are human! obnoxious I must say! To avoid getting stressed over selecting all roads, cars or signs, you could simply use Google Chrome browser. It's sickening that out of 10 sites you visit in a day, at...
Post a Comment
Continue Reading