July 05, 2014

Saturday, July 05, 2014
Add Elegant Silver button Social sharing widget below posts in Blogger
Few days ago I did published Truck style social sharing and bookmarking widget for Blogger. Now with this post I publishing another social sharing widget it made with HTML, CSS, CSS3 alongside with elegant looking icons, opacity and push effect on hover and click. Contains basic social media's Facebook, Twitter, Google plus, Pinterest, and social bookmarking submitting site like Stumble upon, Digg, also share on Blogger and Feedburner slot. Icons by creativenerds. This widget is pretty neat, designed to match with any kind of website/blogsite plus easy to install on your Blogger blog. Let's see how it looks like and how to add it in your Blogger blog.

Elegant silver button social sharing widget below posts in Blogger


Preview:-
Social sharing widget below posts in Blogger

Live demo:- (Here you go)

How to add

Step 1: Back up your template (Optional Step)
  • Log in to your blogger, select your blog, 
  • Select 'Template' option, click 'backup/restore' from upper right corner. 
  • Download full template and save it on your pc's Hard drive

Step 2: Installing sharer
  • Now, 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 code chunk

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
p#ks-pushingsilver img {float: left;
  position: relative;
  vertical-align: top;
  border: 0;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  display:inline-block;
  margin-left:5px;
  -webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    -ms-transition: all .7s ease;
    transition: all .7s ease;
}
p#ks-pushingsilver img:hover { opacity:.7;  
-webkit-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
    -ms-transition: all .7s ease;
    transition: all .7s ease;
      top:5px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;}
/*crawlist.net CSS ends*/
</style>
<center><p id='ks-pushingsilver'><!--crawlist.net sharing starts-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' height='50' src='http://2.bp.blogspot.com/-aFT3Ga9Jq6E/U7KQynTKnXI/AAAAAAAAEZ0/UaCoYwWL7bU/s1600/1facebook.png' title='Share on Facebook' width='50'/></a>
<a expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank'><img border='0' height='50' src='http://3.bp.blogspot.com/-ujF7dOgdahI/U7KQz8NVtGI/AAAAAAAAEZ8/bd9vHCgKPog/s1600/2twitter-bird.png' title='Share on Twitter' width='50'/></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 border='0' height='50' src='http://1.bp.blogspot.com/-iVOcAQGSD2M/U7KQ16Gu4tI/AAAAAAAAEaE/4TjJR6gh8f0/s1600/3google-plus.png' title='Share on Googleplus' width='50'/></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 border='0' height='50' src='http://2.bp.blogspot.com/-UvzYyxga3qQ/U7KQ5xQeB_I/AAAAAAAAEaU/Pz0xzu0L1pM/s1600/5stumbleupon.png' title='Share on Stumbleupon' width='50'/></a>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' height='50' src='http://2.bp.blogspot.com/-Zrjmv9vIETs/U7KQ4N6Dg3I/AAAAAAAAEaM/l_JjJD_bas8/s1600/4digg.png' title='Bookmark it on Digg' width='50'/></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 border='0' height='50' src='http://2.bp.blogspot.com/-a2N8zKPINxw/U7KQ7MX06rI/AAAAAAAAEac/2r4lcXWp6is/s1600/6pintrest.png' title='Share on Pinterest' width='50'/></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 border='0' height='50' src='http://3.bp.blogspot.com/-cDZZwbVuHbI/U7KQ-eKqOGI/AAAAAAAAEak/aaGcK2NOilw/s1600/7blogger.png' title='Blog about this' width='50'/></a>
<a href='http://feeds.feedburner.com/you' target='_blank'><img src='http://2.bp.blogspot.com/-JhIlsuzLb30/U7KQ_3zQNrI/AAAAAAAAEas/molZX6gf96M/s1600/8rss.png' alt='Feed' width="50" height="50" title='Never miss a post'/></a>
</p><!--crawlist.net sharing ends--></center></b:if>


Configure-
  • This sharing widget got Feedburner slot, so log in to your feedbuner account, collect your website's feedburner id and paste in your feed id
  • After pasting the code you are done. Save your template and take a peek in your Blogger blog.

Template Compatibility and Faq
This Elegant silver button 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.

Last words, How it looking in your site and if you having any trouble with this widget don't forget to mention. Happy sharing :)

0 comments:

Post a Comment

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