Add Stylish Post Sharing Widget below Posts of Blogger

Hello and Welcome to GetWebInfo.Com. Here on this post, you can be able to find Out Latest Article About Blogger Social Sharing Widget. A few months ago I was Published a couple of fresh post sharing widget for Blogger blogs. If you are using one of the Latest GetWebinfo Social Sharing Widget for Blogger. Its a viral sharing widget can be seen on lots of popular sites powered by Wordpress I duplicated and remade it for the Blogger platform. Made with CSS, CSS3, and HTML no image just gradient colors featuring Google fonts, with six sharing services. Now you can see how it looks liked and how to add it in Blogger.



I am always trying to share those type of articles that can be really important for Bloggers users. You can write a post and want to share it on Social media for engaging the audience to come on to your blog or website. This widget made with CSS, CSS3 and HTML no image just gradient colors featuring Google font, 6 sharing services. So now let's do it and add this widget on to your blog.



Stylish Post Sharing Widget

Step 01: First of all Log in to your blogger blog.

Step 02:  Backup your blogger template.

Step 03: Now Using CTRL + F or Cmd + F to find this code <div class='post-footer-line post-footer-line-1'>

Note: You can find out this code two times or maybe three times in some templates just ignore the first one and paste the following code given below just after this code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-sharo { border:1px solid #CCC; height:110px; width:600px; border-radius:10px;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 44%, #e5e5e5 84%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(44%,#ffffff), color-stop(84%,#e5e5e5));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 44%,#e5e5e5 84%);
background: radial-gradient(ellipse at center, #ffffff 44%,#e5e5e5 84%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 );}
.ks-sharo h3 {font-family: 'Pacifico', cursive; font-size:20px; text-align:center;
font-weight:300; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { color:#fff; text-decoration:none}
.sharo-contino a:hover { color:#fff; text-decoration:none}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{text-align:center;display:inline-block;margin:0 5px}
.tweet,.fb-tips,.googleplus,.linkedin,.pin-it,.stumble{color:#fff;border:1px hidden #CCC;font-family: 'Montserrat', sans-serif;
padding:8px 12px;
font-size:14px;
border-radius:5px;}
.tweet.tips{background:#00A0D1;border:1px solid #00A0D1}
.fb-tips{background:#3B5998;border:1px solid #3B5998}
.googleplus.tips{background:#DA4834;border:1px solid #DA4834}
.linkedin.tips{background:#0077B5;border:1px solid #0077B5}
.pin-it.tips{background:#CB2027;border:1px solid #CB2027}
.stumble.tips{background:#EB4924;border:1px solid #EB4924}
/*crawlist.net CSS ends*/</style>
<div class="ks-sharo"><!--crawlist.net sharer starts-->
<h3>Like the article? Please share on your social network :)</h3>
<div class="sharo-contino">
<ul class='share-story'>
<li><a class='fb-tips' data-title='Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Twitter</a></li>
<li><a class='googleplus tips' data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Google+</a></li>
<li><a class='linkedin tips' 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;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'>Stumble</a></li> 
</ul><!--Getwebinfo.com sharer ends--></div></div></b:if>


Cautions and FAQ


  • In some templates this code (<div class='post-footer-line post-footer-line-1'>) does not contains or contains this line one time then search for </article> instead of that and below </article> paste following codes. 
  • The widget won't appear on the Homepage.
  • This widget is compatible with all standard templates but unique styled templates won't support it. That case or if the widget design breaks remove it. 

I hope this article is really helpful for you if you like this article so please share it on social media with your friends. 

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.