How To Add Stylish Share Button On Your Blogger Blog.guess you would like to add a simple stylish facebook, twitter, google plus, whatsapp share button on your blogger blog, especially below your blogger blog post both on desktop and mobile view.well, the share button i will use on this tutorial is a simple design which i believe is cool for blogger blog and visitor can easily make use of it to share your blog post to their various social media account such as facebook, twitter, google plus, whatsapp etc. for those who makes use of the normal facebook share button that has counter, you should know by now that the share button doesn't work on
mobile view on bloggers blogspot blog. at times it may display but in various instances, it doesn't often display. even the facebook likes and normal twitter tweet button too doesn't often display when mobile visitors surf your site. although it will display on desktop version of your blog.this is the reason i make use of this simple share button because it also display on both desktop and mobile version of blogger blog. so today i will share with you on how to add social medial share button on your blogger blog
just follow the steps below to get it done.
You May Like To Read
How To Add Facebook, Twitter, Google Plus, Whatsapp Social Media Share Button On Blogger Mobile View
How To Add Stylish Social Media Share Button On Your Blogger Blog
==> Login to your blogger dashboard and go to the site you wish to add the code
from your dashboard, scroll down and Click On
Template=Edit HTML
the template html code will be displayed.search for this code in the template using Ctrl F.
</head>
just above the head tag, add this code
<style type='text/css'> /*** Share Post Styling ***/ #share-buttons{margin:0 0 8px;padding:0;overflow:hidden;text-transform:uppercase;font-size:12px} #share-buttons p{font-size:100%;float:left;background:#1abc9c;display:block;padding:2px 10px;margin:2px;color:#fff} #share-buttons a{position:relative;float:left;display:block;color:#fafafa;padding:2px 10px;margin:2px} #share-buttons a:hover{background:#626e7c!important} </style>
after adding it, now find this code below
<data:post.body/>
you may see other data:post.body in the template, just try each of them and see which one works
insert this share button below/after the code
<div id="share-buttons">
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&via=HANDLERNAME&text=" + data:post.title' title='Twitter' rel='nofollow' style='background:#00aced;' target='_blank'>Twitter</a><a class='plus' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' style='background:#dd4b39;' target='_blank' title='Google+'>Google+</a><a class='whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + "%20" + data:post.url' rel='nofollow' style='background:#4dc247;' target='_blank' title='Whatsapp'>WhatsApp</a>
</div>
after adding it, save your template.
note: at the twitter share button, the spot that is marked red should be replaced with your twitter username.
also, note: Always backup your template before making any changes
visit
www.gurubest.com to view the latest post update you are not seeing right now.
more articles update is posted on
gurubest every day,so don't be the last to get update to your email.
Subscribe by email
DON'T FORGET TO SHARE WITH YOUR FRIENDS ON FACEBOOK BY CLICKING THE SHARE BUTTON.
Get Your Own Blog/Website Like Mine
woow..been looking for this since...lemme try it out
ReplyDeleteam glad it worked for you
DeleteGreat job bro it worked perfectly well on my blog but see..... am having an issue here..... i uploaded a banner image on my blog, awesome template, but there is this grey background everywhere. i want to make it transparent and also to be able to add more image gadge under the blog description. could you please help me out biko!
ReplyDeleteas for the banner, if you have knowledge in tweaking the html codes, you can change that. as for gadgets, if there is a position for you to add gadgets under the blog description, you can do that by moving the gadget to that position from the layout. there are some templates that comes with such positioning of gadgets at the header area so you can add banners or any other stuffs
Delete