So here a Simple subscription box for you I represent it offers Feedburner email subscription form in smooth format and rounded corner social media profile slot with stunning hover effect what grab attention quickly of visitors. This subscription box offer's 7 major social media profile slot and contains Facebook, Twitter, Google plus, Linked in, Pinterest, Instragram and Youtube. It made with HTML, CSS, CSS3 and Google font. So Let's see how it looks like, How to add this in your Blogger blog and how to configure. Read on-
Add Cool Feedburner Subscription box below posts in Blogger
Preview-
Live demo- (here you go)
Backup 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 Hard-drive
Embedding the codes (Mandatory Step)
- Go to 'Template' section, 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'>
- And paste all these following code under that line- (you may find this line twice ignore first phrase paste codes below after second phrase)
<b:if cond='data:blog.pageType == "item"'>
<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-subbox {
border:2px solid #09F;
border-radius: 5px 5px 5px 5px;
text-align: center;
background:url(http://i62.tinypic.com/33xww00.png);
width:500px;
height:150px;
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
box-shadow:5px 5px 5px #ccc;
}
.ks-subbox h3 {font-family: 'Droid Serif', serif; font-size:18px; font-weight:bold; margin-top:15px; margin-bottom:15px; color:#151515; text-shadow:0px 5px 5px #ccc;}
.ks-button-blue {width:120px; height:37px; color:#fff;
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #00b7ea;
font-family: 'Droid Serif', serif; font-size:16px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-shadow:#f5f5f5; text-align: center;
-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;float:right; }
.ks-button-blue:hover { opacity:.7;-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.ks-oop { height:60px; width:335px;}
.ks-bool {font-family: 'Droid Serif', serif;
background: #fff;
border: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
height:34px;
width:170px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd;
background: #fff url(http://1.bp.blogspot.com/-CdoXCXa27vc/U9D125NlYLI/AAAAAAAAEp8/sBDcoTCLSYo/s1600/email.png) no-repeat 10px center; padding-left: 35px; float:left; }
.ks-soso { width:300px; height:100px;}
.ks-soso h4 {font-family: 'Droid Serif', serif; font-size:14px; font-weight:bold; margin-top:15px; margin-bottom:15px; color:#151515; text-shadow:0px 5px 5px #ccc;}
.ks-soso img { margin-left:5px; width:24px; height:24px;-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.ks-soso img:hover { margin-left:5px; width:24px; height:24px;-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; opacity:.7; }
/*crawlist.net CSS ends*/</style>
<!--crawlist.net widget starts-->
<div class="ks-subbox">
<h3>Subscribe to get new post update</h3>
<center>
<div class="ks-oop">
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=crawlist', 'popupwindow', 'scrollbars=yes,width=500,height=500');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-bool' 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 alt='' class='ks-button-blue' title='' type='submit' value='Submit'/>
</form>
</div>
<div class="ks-soso">
<a href="http://www.facebook.com/your profile" target="_blank" title="Join us on Facebook"> <img src="http://2.bp.blogspot.com/-xTo2z0AfUqU/U33wbRFt83I/AAAAAAAAD-Q/rMWuP5-btas/s1600/facebook.png"/></a>
<a href="http://www.twitter.com/your profile" target="_blank" title="Join us on Twitter"><img src="http://2.bp.blogspot.com/-gdZIqFLHmgY/U33wgLIZebI/AAAAAAAAD-4/lJ0YGv-pGhc/s1600/twitter.png"/></a>
<a href="http://plus.google.com/your profile" target="_blank" title="Join us on Google Plus"><img src="http://2.bp.blogspot.com/-lBAD59QkoC4/U33wcIBoRXI/AAAAAAAAD-Y/d0xceLk9HD0/s1600/googleplus.png"/></a>
<a href="http://www.linkedin.com/your profile" target="_blank" title="Join us on LinkedIn"><img src="http://2.bp.blogspot.com/-U0kBlYBkgQ4/U33we9zVe1I/AAAAAAAAD-o/mqlslNdIk_Q/s1600/linkedin.png"/></a>
<a href="http://www.pinterest.com/your profile" target="_blank" title="Join us on Pinterest"><img src="http://1.bp.blogspot.com/-Oc20KtF8H0Q/U33wfW1oT2I/AAAAAAAAD-w/O7p4qYbUAco/s1600/pinterest.png"/></a>
<a href="http://www.instragram.com/your profile" target="_blank" title="Join us on Instragram"><img src="http://2.bp.blogspot.com/-Vk0rmAcQupI/U33wdJeJRBI/AAAAAAAAD-g/9aNYauxvcKQ/s1600/instagram.png"/></a>
<a href="http://www.youtube.com/your Chanel" target="_blank" title="Join us on Youtube"><img src="http://3.bp.blogspot.com/-_EEaOwr9y4k/U33wizBvPvI/AAAAAAAAD_A/Pvp4nYCGFgY/s1600/youtube.png"/></a>
</div>
</center>
</div><!--crawlist.net widget ends--></b:if>
Configuration-
- To configuring Feedburner email subscription first collect your Feedburner Id. Example- http://feeds.feedburner.com/crawlist and replace 'your site's feed' (Green colored) with your feedburner Id
- To configuring Social media profiles First collect your following social media profile's direct link. And replace default links with your link. Example- 'http://www.facebook.com/your profile' with your Facebook profile. Rest links are same. And all social media profile's are Red colored.
- If you want to remove unused icon just delete <a href to </a> tag.
- Save your template and see your Simple Social Subscription box in live action
Template Compatibility and FAQ
- This Subscription box is compatible with almost all stranded templates but unique designed templates and highly coded templates will not accept this Subscription box. It also will not work on Blogger's default Dynamic view templates.
- If following method fails to show the widget, then search for </article> in stead of <div class='post-footer-line post-footer-line-1'> and below </article> paste those codes. see what happens...
- Won't appear on Homepage
So let me know how it looks like in your Blogger blog and how it working. Goodluck.....
