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

Earn While you Save With Alat.ng

If you've always wanted to save up for the future, but didn't take actions for reasons best known to you, now is the time to reconsider your thoughts and take actions, because there is a digital bank known as ALAT waiting to be utilized. What Is A Digital Bank? According to Avoka.com; "Digital banking is the digitization (or moving online) of all the traditional banking activities and programs that historically were only available to customers when physically inside of a bank branch." What is ALAT? ALAT is a digital bank, the first if its kind in Nigeria! It is an innovation of Wema Bank Nigeria, developed to give you easy access to saving your funds and doing other bank transactions without being physically present at the bank.  With Alat digital bank, you can open a savings account using your phone number and Bank Verification Number (BVN) as well as other documents that you will be prompted to upload during the registration process. It’s simple, convenient, reliabl...
Post a Comment
Continue Reading

30 Days On A Confused State of Mind: #DAY1: Discovering My Self Worth

#Day1 Hello dear and welcome to the first day of my confused state of mind mindboggling findings. This is not just a step discovery challenge but its also more like a 30 days blogging challenge for me, as well as a plot to overcoming some procrastination ish. I only hope I don't get tired too soon! It's only the first day and I already feel worse than Garfield! Telegraph.co.uk Now, lets head over to the First Topic of my 30 days challenge. It absolutely wasn't thought through but there was no need to think it through because it came in like a flash and “Discovering My Self Worth”, was the first issue I could Point out of my may overwhelmed thoughts! On Discovering My Self Worth There are too many unanswered questions, Ones that have weighed me down over the years and others with answers I've refused to hold on to (I rather not be told the truth). If you've had issues with loving yourself, then the word self-worth shouldn't be so stran...
8 comments
Continue Reading

How to get a Payoneer Account For Receiving and Making Payments Online (Best Paypal Alternative)

Paypal is the most popular online payment processor and about 98% of websites make use of it to pay workers and publishers. Paypal is the best when it comes to receiving money and making payment but this flexibility have not been made accessible to some countries. While some don't have access to Paypal at all, others only have access to it as a means of making payments and not receiving payments. Now this is very sickening because such restriction impedes the chance of making money online. How are you going to get paid after all your struggles? As a Blogger and Affiliate Marketer or someone that works online, you will definitely need to get paid for the services you've rendered with or without a PayPal account! You've probably always paid someone to receive your cash which in the long run reduces your money. But not to worry, there's always a way out. There are tons of paypal alternatives , and they've been discussed previously, but here, we will ...
Post a Comment
Continue Reading