In this article I’m going to share Flat Social Sharing Buttons for Blogger with CSS Tooltip and why is it better to add sharing buttons this way, then using JavaScript and the counters. I’m sure you’ve noticed on some websites after the site’s content loaded in, things are still loading in. These are the JavaScript files for the sharing buttons and social widgets. And by using share buttons that don’t use js, we free up a lot of memory and lover the websites load speed.
Adding Flat Social Sharing Buttons to Blogger
First of all goto your Blogger Account >> Select your blog >> Template >> Edit HTML. Click inside the editor press CTRL + F. Now search for ]]></b:skin>. Once you get to it just paste the following code above ]]></b:skin>.
a.tooltip{font-family:arial;font-weight:700}a.tooltip span{position:absolute;width:120px;color:#FFF;background:#111;height:30px;line-height:30px;text-align:center;visibility:hidden;border-radius:6px;top:-40px;margin-left:-60px!important}a.tooltip span:after{content:'';position:absolute;top:100%;left:50%;margin-left:-8px;width:0;height:0;border-top:8px solid #111;border-right:8px solid transparent;border-left:8px solid transparent}a:hover.tooltip span{visibility:visible;bottom:30px;left:50%;margin-left:-76px;z-index:999}.social-tooltip a{border: 1px solid black;display:inline-block;position:relative;margin-left: 10px;}.social-tooltip a:hover{opacity:.8}.facebooktip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvNERaZDU4QThXbTQ/");height:50px;width:50px}.twittertip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvbnZINE9oTm5DUlU/");height:50px;width:50px}.google_tip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvTFlmS1Bpa2JfX2c/");height:50px;width:50px}.linkedin_tip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvaW1HLWt0U1E0MVk/");height:50px;width:50px}.pinterest_tip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvNkI2OGJIaEpEYzQ/");height:50px;width:50px}.reddit_tip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvWEtVTUNXNTY5M0U/");height:50px;width:50px}.stumble_tip{background-image:url("https://googledrive.com/host/0B8D3MQmcZTyvMFNLUi1iTnFTc2c/");height:50px;width:50px}.social-heading {float: none !important;border: 0 !important;outline: none !important;box-shadow: none !important;background: none !important;padding: 0 !important;margin-left: -285px;margin-top: -25px;}Now we will add our very own custom post footer, Again make a search by pressing CTRL + F.
Find <div class='post-footer'>, you will see 2 matches. Move towards the second one. Paste the following code above that match (the second <div class='post-footer'> match in the search).
<center>That's all! You're done! :-)
<div class="social-tooltip" style="margin-top: 45px;">
<a class="tooltip facebooktip" expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'>
<span>Facebook</span></a>
<a class="tooltip twittertip" expr:href='"http://twitter.com/share?text=" + data:post.title' target='_blank'>
<span>Twitter</span></a>
<a class="tooltip google_tip" expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'>
<span>Google+</span></a>
<a class="tooltip pinterest_tip" expr:href='"http://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title + " - " + data:post.url' target='_blank'>
<span>Pinterest</span></a>
<a class="tooltip linkedin_tip" expr:href='"http://www.linkedin.com/shareArticle?mini=true" + "&url=" + data:post.url' target='_blank'>
<span>Linkedin</span></a>
<a class="tooltip stumble_tip" expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url' target='_blank'>
<span>Stumble</span></a>
<a class="tooltip reddit_tip" expr:href='"http://www.reddit.com/submit?url=" + data:post.url' target='_blank'>
<span>Reddit</span></a>
<div class="social-heading"><img src="https://googledrive.com/host/0B8D3MQmcZTyvMXJnZ2M1bFpFczg/"/></div>
</div>
</center>
<script type="text/javascript">
$('.tooltip').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, '.tooltip', opts);
return false;
});
</script>
If you have any issues or suggestions, you can keep a declaration down below! Also make sure to sign-up to my newsletter so you do not miss out on any post that I publish!
Post a Comment