Flat post sharing widget below posts of Blogger
Preview:
Live Demo: (Click here)
Codes for copy:
<b:if cond='data:blog.pageType == "item"'>
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
.ks-flatsharo { border:2px solid #CCC; height:110px; width:600px;
background: #ffffff; margin:auto; padding-left:20px}
.ks-flatsharo h3 {font-family: 'Titillium Web', sans-serif; font-size:20px; text-align:center;
font-weight:600; margin-top:8px; margin-bottom:7px; color:#151515}
.sharo-contino a { text-decoration:none; color:#151515}
.sharo-contino a:hover { text-decoration:none; color:#fff}
.sharo-contino ul{list-style:none;text-align:center;margin:0;padding:0; margin-top:20px;}
.sharo-contino ul li{ float:left; margin-left:5px; margin-right:5px}
.tweet.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.fb-tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.googleplus.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.linkedin.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.pin-it.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.stumble.tips{background:#fff;border:2px solid #CCC;
color:#333;
font-family: 'Montserrat', sans-serif;
padding:6px 10px;
font-size:16px;}
.tweet.tips:hover {background:#00A0D1;border:2px solid #00A0D1; color:#fff;}
.fb-tips:hover {background:#3B5998;border:2px solid #3B5998; color:#fff;}
.googleplus.tips:hover {background:#DA4834;border:2px solid #DA4834; color:#fff;}
.linkedin.tips:hover {background:#0077B5;border:2px solid #0077B5; color:#fff;}
.pin-it.tips:hover {background:#CB2027;border:2px solid #CB2027; color:#fff;}
.stumble.tips:hover {background:#EB4924;border:2px solid #EB4924; color:#fff;}
/*crawlist.net CSS ends*/</style>
<div class="ks-flatsharo"><!--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='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Facebook</a>
</li>
<li><a class='tweet tips' data-title='Twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Twitter</a></li>
<li><a class='googleplus tips' data-title='Google+' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Google+</a></li>
<li><a class='linkedin tips' data-title='Linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&source=" + data:blog.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;'>LinkedIn</a></li>
<li><a class='pin-it tips' data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Pin it</a></li>
<li><a class='stumble tips' data-title='Stumle-Upon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Stumble</a></li>
</ul><!--crawlist.net sharer ends--></div></div></b:if>
How to add:
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
Installing (Mandatory step)
- From 'Template' tab, select 'Edit html'
- And find (Using Ctrl+F or Cmd+F) into code snippet this line-
<div class='post-footer-line post-footer-line-1'>
- You may find this line twice; ignore first one after second time paste all following codes below that line; and Save template.
Caution and FAQ:
- If your template doesn’t contains <div class='post-footer-line post-footer-line-1'>
- Or contains this line one time then search for </article> instead of that; and below </article> paste following codes.
- This widget won’t appear on 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.
