Coldblodded social media sharing widget offers shares a post to Facebook, Twitter, Google plus, Pinterest and bookmark a post on Delicious, Evernote, Stumble upon, Digg, Blogger, Yahoo bookmarks additional feedburner email subscription. It made with CSS, HTML and icons uses only a piece of image what will draw all icon process calls CSS image transition CSS Sprite, This widget also reduce HTTP request unlike other icon base sharing choices. Will be fit to any kind of Blogger blog, no matter they are professional blogs, gallery or other features sites. Let's see how it looks like and how to add it on your site.
Add Cool Social Media Sharing icons below posts in Blogger
Demo- (Click Here)
Step 1: Back up your template (Optional step)
- 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's Harddrive
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 == "item"'>
<style>/*crawlist.net CSS starts*/
ul.ks-coldblooded {float:right;}
ul.ks-coldblooded li {float:left;list-style: none outside none;border:none;}
ul.ks-coldblooded li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiQkta5pZStLx1QijeCzSJu24NDZxm0uewHYVc1tMbPZ-NC1hDTw0Wfvqjop8qLQx5K3A3ph-STYaYeLHgn-9LL5-Q3elbN6yHckEB4VGDMgnRrMCPETl2VaPO4as2KpnIVlVS6mTdS_m/s1600/fi2.png');background-repeat:no-repeat;background-size:506px;border:0 none;color:white;direction: ltr;display:block; height:43px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s 0s linear;width:42px; cursor:pointer;}
.ks-coldblooded li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiQkta5pZStLx1QijeCzSJu24NDZxm0uewHYVc1tMbPZ-NC1hDTw0Wfvqjop8qLQx5K3A3ph-STYaYeLHgn-9LL5-Q3elbN6yHckEB4VGDMgnRrMCPETl2VaPO4as2KpnIVlVS6mTdS_m/s1600/fi2.png')}
ul.ks-coldblooded li.facebook a{ background-position:0 0}
ul.ks-coldblooded li.twitter a{ background-position:-42px 0}
ul.ks-coldblooded li.google a{ background-position:-84px 0}
ul.ks-coldblooded li.stumbleupon a{ background-position:-126px 0}
ul.ks-coldblooded li.pinterest a{ background-position:-168px 0}
ul.ks-coldblooded li.delicious a{ background-position:-210px 0}
ul.ks-coldblooded li.evernote a{ background-position:-252px 0}
ul.ks-coldblooded li.digg a{ background-position:-294px 0}
ul.ks-coldblooded li.blogger a{ background-position:-336px 0}
ul.ks-coldblooded li.yahoo a{ background-position:-378px 0}
ul.ks-coldblooded li.blanked a{ background-position:-420px 0}
ul.ks-coldblooded li.rss a{ background-position:-462px 0}
ul.ks-coldblooded li.facebook a:hover, #sidebar ul.ks-coldblooded li.facebook a:hover{ background-position:0 -42px}
ul.ks-coldblooded li.twitter a:hover, #sidebar ul.ks-coldblooded li.twitter a:hover{ background-position:-42px -42px}
ul.ks-coldblooded li.google a:hover, #sidebar ul.ks-coldblooded li.google a:hover{ background-position:-84px -42px}
ul.ks-coldblooded li.stumbleupon a:hover, #sidebar ul.ks-coldblooded li.stumbleupon a:hover{ background-position:-126px -42px}
ul.ks-coldblooded li.pinterest a:hover, #sidebar ul.ks-coldblooded li.pinterest a:hover{ background-position:-168px -42px}
ul.ks-coldblooded li.delicious a:hover, #sidebar ul.ks-coldblooded li.delicious a:hover{ background-position:-210px -42px}
ul.ks-coldblooded li.evernote a:hover, #sidebar ul.ks-coldblooded li.evernote a:hover{ background-position:-252px -42px}
ul.ks-coldblooded li.digg a:hover, #sidebar ul.ks-coldblooded li.digg a:hover{ background-position:-294px -42px}
ul.ks-coldblooded li.blogger a:hover, #sidebar ul.ks-coldblooded li.blogger a:hover{ background-position:-336px -42px}
ul.ks-coldblooded li.yahoo a:hover, #sidebar ul.ks-coldblooded li.yahoo a:hover{ background-position:-378px -42px}
ul.ks-coldblooded li.blanked a:hover, #sidebar ul.ks-coldblooded li.blanked a:hover{ background-position:-420px -42px}
ul.ks-coldblooded li.rss a:hover, #sidebar ul.ks-coldblooded li.rss a:hover{ background-position:-462px -42px}/*crawlist.net CSS ends*/
</style>
<!--crawlist.net share starts-->
<ul class="ks-coldblooded">
<li class="facebook">
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title="Share on Facebook"></a></li>
<li class="twitter">
<a expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title="Share on Twitter"></a></li>
<li class="google">
<a expr:href='"http://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title="Share on Google plus"></a></li>
<li class="stumbleupon">
<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title="Submit on Stumbleupon"></a></li>
<li class="pinterest">
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title="Pin this on Pinterest"></a></li>
<li class="delicious">
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title="Submit on Delicious"></a></li>
<li class="evernote">
<a expr:href='"https://www.evernote.com/clip.action?url=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title="Save it to Evernote"></a></li>
<li class="digg">
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title="Submit on Digg"></a></li>
<li class="blogger">
<a expr:href='"http://www.blogger.com/blog_this.pyra?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title="Blog about this"></a></li>
<li class="yahoo">
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' title="Bookmark on Yahoo"></a></li>
<li class="rss">
<a href='http://feeds.feedburner.com/your feed' target='_blank' title="Never miss a post" rel="nofollow"></a></li>
</ul><!--crawlist.net sprite share ends--></b:if>
Step 3: Configuring
You need to add your Feedburner email subscription manually, Collect your website's feedburner feed Id and replace on http://feeds.feedburner.com/your feed it pink colored.
Template Compatibility and Faq
This Cool Social media sharing icons widget is compatible with almost all stranded templates but unique designed templates or highly coded templates will not accept this.
Last words, Hope it will increase your blog post's social sharing, having any trouble with this widget don't forget to mention.Chill.....
