July 23, 2014

Wednesday, July 23, 2014
Add Cool Social Media Sharing icons below posts in Blogger
Change the taste of random looking social sharing button below posts in Blogger, here you can find a different and cool social media sharing widget what I named it Coldblodded! This social sharing widget loads faster than other icon base social shares, it's icons change color with mouse hover with flipping effect, it got the major social media sites share, main color is black colored what looks artistic and attractive.
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

Cool Social media sharing icons below posts in Blogger

Demo- (Click Here)

How to add this widget in your Blogger 

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
Step 2: Installing (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>/*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('http://1.bp.blogspot.com/-B3cvAMxF_Dc/U75FFC6s2OI/AAAAAAAAEc0/t3QSJZ5L1Hk/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('http://1.bp.blogspot.com/-B3cvAMxF_Dc/U75FFC6s2OI/AAAAAAAAEc0/t3QSJZ5L1Hk/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*/
<!--crawlist.net share starts-->
<ul class="ks-coldblooded">
<li class="facebook">
<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' title="Share on Facebook"></a></li>
<li class="twitter">
<a expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title="Share on Twitter"></a></li>
<li class="google">
<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' title="Share on Google plus"></a></li>
<li class="stumbleupon">
<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' title="Submit on Stumbleupon"></a></li>
<li class="pinterest">
<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' title="Pin this on Pinterest"></a></li>
<li class="delicious">
<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' title="Submit on Delicious"></a></li>
<li class="evernote">
<a expr:href='&quot;https://www.evernote.com/clip.action?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title="Save it to Evernote"></a></li>
<li class="digg">
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title="Submit on Digg"></a></li>
<li class="blogger">
<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' title="Blog about this"></a></li>
<li class="yahoo">
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + 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.....


Post a Comment

Copyright © 2013-16 Crawlist All Right Reserved
Designed By Me {K.Shazzad}