GBloghelper: Add Elegant Silver button Social sharing widget below posts in Blogger

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:-

Live demo:- (Here you go)

How to add

Step 1: Back up your template (Optional Step)

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 == "item"'>
<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'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLmIimmmKXCDN4hEb10kTRHMv2OVUm3oZ0KvNqmjTj0yl6EXUip9ceYPv9Si6gbUxyvHHdJFKPgzx1ap8rSSkmJNN1I2gtBgBI0bDOGJdAIUJ0MsGQwSV3rqnsTmIm1yOKmHWQLXwQBbY/s1600/1facebook.png' title='Share on Facebook' width='50'/></a>
<a expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU3wg33AOXJ6lTQ18G9uuLc6sJg7Kcp48Wk8xWfQN7ZebSBUUohSymE3D25rSEAfAMUmavWoh6z2V69QKhzC_SX-lmM1CyWu775mFzpWqp1u3C-bqsCEWsO5f2YnD3DCQYSiAciHP_aksE/s1600/2twitter-bird.png' title='Share on Twitter' width='50'/></a>
<a expr:href='"http://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxCIpg4rLcysKJtnebcl6Kyu9mM6-GqkWwyw84CS-3AYg3LZe-AvQ8kSrTeiaKiTYA1UO6GIrvYnR3p0G9DURMKvUTNSPmHOg2KNOFX06DQA84_38hcU-YwqbJdn1_v_ECnRQIXMPwLuA/s1600/3google-plus.png' title='Share on Googleplus' width='50'/></a>
<a expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmV0YX4WMdEvJhRWOjbuK56QComcO5Brn7FAzmzkWZM7xd4buLWa8UghNOsJZxhRPCwSA5YqCX7fvndY4t1LddX9T7Y35GxfJw8ZM2j0-tOsa8iy8-rSuyJU8xVeOhz10gdyE2GVXY4MJ/s1600/5stumbleupon.png' title='Share on Stumbleupon' width='50'/></a>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3n62sVUefBC5Evt_V3gBJtC_qq8tgKZybQgUJLuchjAsfQ8WfPv9AZxtAJqLZZH5tklsW3ADdEc5Kz7IYjrb56_YAMP-S8-eVGrl_4D_I2TiEnq1PsEOiI1ieD6MfQseRi3ZYXk1Y6evP/s1600/4digg.png' title='Bookmark it on Digg' width='50'/></a>
<a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQm9z9v_1BR7SuN4usTwavkINysS1Ve98CtphbSmZioBCb-CkBrHPp9h7g-pVFox-ar2dsWTnw95Tv8pDRjyVWs36JUYCC-_C-bC5t5y36KXptOkxQIQepn7-KxvlICheEoM2rI9tiK7z/s1600/6pintrest.png' title='Share on Pinterest' width='50'/></a>
<a expr:href='"http://www.blogger.com/blog_this.pyra?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img border='0' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Hy5rNyYaOHxjFXAWkUD0OIAL4Krj5PcajGuZnAADrUvCA3lgBniz8U5xw2Lzbj0Uh3PX8DbnnfCI4VvzZimpAmpnWvKB0GaCwh4cdlaJETr7ykc4G50qyMaolSMGUZhK6RrAb5cHXzPS/s1600/7blogger.png' title='Blog about this' width='50'/></a>
<a href='http://feeds.feedburner.com/you' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnr0N6eDWCbvk3kyjaEaEOJUsvJb0-HBoAxCJTebv5C_o1zIL3c9vjJXq85SyDVcB0z7ZwApp8DnmXoDSVOkISycIHOTb3-yYTMx0t-YQABRerrhWlOJdfGYImP9cObASLtQab7Zx8Cm89/s1600/8rss.png' alt='Feed' width="50" height="50" title='Never miss a post'/></a>
</p></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 :)

GBloghelper

About Me

Add Elegant Silver button Social sharing widget below posts in Blogger

Elegant silver button social sharing widget below posts in Blogger

0 comments:

Categories

Archives