Bottle Caps style: Social sharing widget below posts in Blogger

I always try to publish Cool, Stylish and Trendy widget for your Blogger blogs. To continue that job here today I am going to publish a Post sharing widget (appears below every posts of Blogger). This widget called Bottle caps social sharing and bookmarking widget. Comes up with Glossy Icons, 10 service (Facebook, Twitter, Google plus, LinkedIn, Stumble upon, Pinterest, Delicious, Reddit, Blogger, Digg), CSS3 animation. Looks great on fashionable, personal and kids blogs. Easy to add and no configuration necessary, let’s see how it looks like and how to add it in Blogger blogs; read on-

Bottle Caps style: Social sharing widget below posts in Blogger

Preview-

Live Demo- (here you go)

How to add-

Optional Step: Back up your template first!

• Log in to your blogger, select your blog

• Select 'Template' tab option, click 'backup/restore' from upper right corner.

• Download full template and save it on your pc

Mandatory Step:

• From 'Template' tab, select 'Edit html'

• And find (using Ctrl+F or Cmd+F) this line-

<div class='post-footer-line post-footer-line-1'>

• You may find this code phrase twice, ignore first phrase, after second phrase paste these codes;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*www.crawlist.net CSS starts*/
p#ks-socialicons img { margin-top:20px; float:left; display:inline-block;
-webkit-transition:all ease 0.5s;
 -moz-transition:all ease 0.5s;
  -o-transition:all ease 0.5s;
   -ms-transition:all ease 0.5s;
    transition:all ease 0.5s; border-radius:50%; margin-left:5px; height:50px; width:50px;}
p#ks-socialicons img:hover {margin-top:10px; box-shadow:5px 5px 3px 3px rgba(0,0,0,0.3); opacity:.8; border-radius:50%}
/*www.crawlist.net CSS ends*/
</style>
<center><p id='ks-socialicons'><!--www.crawlist.net sharer starts-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/r36x6u" title='Share on Facebook'/></a>
<a expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank'><img src="http://goo.gl/wkkgPE" title='Share on Twitter'/></a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/CgvClq" title='Share on Googleplus'/></a>
<a data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;'><img src="http://goo.gl/5F6TMU" title='Share on LinkedIn'/></a>
<a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://goo.gl/ANRgzd" title='Share on Stumbleupon' /></a>
<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/rZijqM" title='Share on Pinterest'/></a>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://goo.gl/tBBeYc" title='Bookmark it on Delicious'/></a>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img src="http://goo.gl/gANStz" title='Share on Reddit'/></a>
<a expr:href='&quot;http://www.blogger.com/blog_this.pyra?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img src="http://goo.gl/Evpc8r" title='Blog about this'/></a>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img src="http://goo.gl/egH04s" title='Bookmark it on Digg'/></a>
<!--www.crawlist.net sharer ends--></p></center></b:if>

• Hit ‘Save Template’, and preview your blog for live action.

• [If your template doesn’t contains <div class='post-footer-line post-footer-line-1'> or using HTML5 template] try this way; Search for </article> into template and above </article> paste given codes.

P.S: This widget requires at least 600px width of your Post Footer Area, So you need to increase the width of Post Footer Area, otherwise icons will not appear in one row;

• From ‘Template’ tab, select ‘Edit HTML’

• Search for .post-footer, and within .post-footer’s bracket add width:600px;

like this;

.post-footer { default codes
Width:600px; }

• Save Template

Template Compatibility
This Bottle Caps style social sharing and bookmarking button widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this. Will not appear on homepage.

Last words, How it looking in your Blogger blogsite and if you having any trouble with this widget don't forget to mention. And don’t forget to check out previously published sharing widget you gonna love them too Truck Style, Silver button, Coldblooded etc. Happy sharing :) and stay connected…