Superb Feedburner subscription+Social Follow widget below posts of Blogger
Preview-
Live Demo- (Click Here)
Codes for copy-
Part 1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
Part 2
<!--crawlist.net widget starts-->
<b:if cond='data:blog.pageType == "item"'>
<div class="ks-volt">
<h3>Never miss a post, Again! (Subscribe)</h3>
<div class="ks-volta">
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=crawlist', 'popupwindow', 'scrollbars=yes,width=500,height=500');return true' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='ks-searchbar1' name='email' onblur='if (this.value == "") {this.value = " Enter your email";}' onfocus='if (this.value == " Enter your email") {this.value = ""}' type='text' value=' Enter your email'/>
<input id='ks-searchbutton' title='' type='submit' value='Submit'/>
</form></div>
<div id="ks-share">
<div class="facebook ks-button">
<i class="icon">
<i class="fa fa-facebook fa">
</i>
</i>
<div class="slide">
<p>
</p>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="Your Facebook Fanpage Adress" data-width="40" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<div class="twitter ks-button">
<i class="icon">
<i class="fa fa-twitter fa">
</i>
</i>
<div class="slide">
<p>
</p>
</div>
<a href="https://twitter.com/k_shazzad" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @your account name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="google ks-button">
<i class="icon">
<i class="fa fa-google-plus fa">
</i>
</i>
<div class="slide">
<p>
Google+
</p>
</div>
<div class="g-plusone" data-size="medium">
</div>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div> </div></div><!--crawlist.net widget ends-->
<style>
/*crawlist.net design starts*/
.ks-volt { border:2px #ccc solid; height:160px; width:500px; margin:auto; border-radius:4px; overflow: hidden; background:#fff;}
.ks-volt h3 { color:#333; text-align:center; font-size:20px; font-weight:100;font-family: 'Droid Serif', serif; margin-top:10px; margin-bottom:10px;}
#ks-share {
background: white;
width: 480px;
overflow: hidden;
margin-top:6px;margin-left:7.5px;}
.ks-button {
background: #DCE0E0;
position: relative;
display: block;
float: left;
height: 40px;
margin: 0 5px;
overflow: hidden;
width: 150px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 38px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.icon i {
color: #fff;
line-height: 42px;
}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 38px;
position: absolute;
width: 112px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
border-left: 1px solid #fff;
border-left: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 16px;
left: 0;
margin: 0;
position: absolute;
text-align: center;
top: 8px;
width: 100%;
}
.ks-button .slide {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/*position fix */
.facebook iframe {
display: block;
position: absolute;
right: -16px;
top: 10px;
z-index: 1;
}
.twitter iframe {
width: 90px !important;
right: 5px;
top: 10px;
z-index: 1;
display: block;
position: absolute;
}
.google #___plusone_0 {
width: 70px !important;
top: 10px;
right: 15px;
position: absolute;
display: block;
z-index: 1;
}
/*share bar background*/
.facebook:hover .slide {
left: 150px;
}
.twitter:hover .slide {
left: 150px;
}
.google:hover .slide {
left: 150px;
}
/*icon background*/
.facebook .icon, .facebook .slide {
background: #305c99;
}
.twitter .icon, .twitter .slide {
background: #00cdff;
}
.google .icon, .google .slide {
background: #d24228;
}
.ks-volta { height:50px; margin:auto; width:460px;}
#ks-searchbutton{width: 200px;
height:38px;
text-align: center;
font-size: 16px;
font-family: 'Droid Serif', serif;
font-weight: bold;
letter-spacing: 0;
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
background-color: #f2672e;
text-shadow: none;
text-transform: uppercase;
border: none;
cursor: pointer;
position: relative;
margin-bottom: 20px;
-webkit-animation: shadowFadeOut 0.4s;
-moz-animation: shadowFadeOut 0.4s; }
#ks-searchbutton:hover { color: #fff;
-webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-webkit-animation: shadowFade 0.4s;
-moz-animation: shadowFade 0.4s;
}
@keyframes shadowFade {
0% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}
@keyframes shadowFadeOut {
0% {
-webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}
@-webkit-keyframes shadowFade {
0% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}
@-webkit-keyframes shadowFadeOut {
0% {
-webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}
@-moz-keyframes shadowFade {
0% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 46px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}
@-moz-keyframes shadowFadeOut {
0% {
-webkit-box-shadow: inset 0px 44px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 44px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 44px 0px 0px rgba(204,86,15,1);
color: #fff;
}
100% {
-webkit-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
-moz-box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
box-shadow: inset 0px 0px 0px 0px rgba(204,86,15,1);
color: #fff;
}
}
#ks-searchbar1
{
border:1px solid #d5d5d5;
background:#ffffff;
color:#888888;
width:250px;
height:34px;
font-family: 'Droid Serif', serif;
font-size:16px;
}
/*crawlist.net design ends*/
</style>
</b:if>
How to add
This widget set up has two part, read on-
- First, Log into your Blogger, select your blog,
- Select 'Template', select 'Edit HTML'
- Now search for (Using Ctrl+F in Windows, Cmd+F in Mac) into code snippet </head>
- Above </head> copy and paste part 1's codes
- Second, Again search for
<div class='post-footer-line post-footer-line-1'>
- You may find this line twice, select sound line, and copy and paste part 2's codes below that line
- If your template doesn't contain this line <div class='post-footer-line post-footer-line-1'> (Basically HTML5 templates) search for </article>
- And below </article> copy and paste Part 2's codes. and configure
How to configure
- To configure your Feedburner email subscription form. replace crawlist with your feeburner id, it can be found in (http://feeds.feedburner.com/your feed id)
- To configure Facebook like button, just replace your Facebook fan page full address on 'Your Facebook Fanpage Adress'
- To configure twitter follow button, just replace your twitter account url on https://twitter.com/k_shazzad and @your account name
- After configure hit 'Save template' and check out your blogger blog.
Compatibility
- This widget is compatible with all browser's latest version (old version's are supports too except IE),
- All stranded structured template will show this widget correctley, if some template don't show it right, you may have to change #ks-share 's margin values and .ks-button 's margin values. This widget will not appear on homepage.
