Hello dears, Today i will tell you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Facebook, Twitter, Feedburner integration. This widget has been optimized for blog with smaller width too and looks perfect on all blogs. The widget uses Jquery, CSS and HTML for its working.
How To Put In Your Blog ?
First and foremost you need to add the code. First go to Blog Title > Template > Edit HTML. Press Ctrl + F and search for <data:post.body/> code in your template and paste the below given code just below <data:post.body/>.
Note : There maybe more than one (usually 2-4) <data:post.body/> so make sure that you have selected the right one. If the widget does not appear try changing the location of code.
After adding the above given code, you need to make some necessary changes for changing the user ID's. In the above code i have made 6 words in bold and blue, you need to change them as required. The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to save your template.
How To Put In Your Blog ?
First and foremost you need to add the code. First go to Blog Title > Template > Edit HTML. Press Ctrl + F and search for <data:post.body/> code in your template and paste the below given code just below <data:post.body/>.
Note : There maybe more than one (usually 2-4) <data:post.body/> so make sure that you have selected the right one. If the widget does not appear try changing the location of code.
<section class="newsletter">Editing The Code :
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/funisonline.blogspot" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcAVNm3JgrbSk9sbrXKbtCiImcRPoPQguhi6YEdMh9VuhlbVVwPM3Rj-OYg572oxGhnZalk8PKlUdF2JqkOi3101uo61zuUqiSInFylzwuNzWeKRRIvxxHGCvPObGJ6N_8n2Ejgfa-U0VZ/s1600/nl-facebook@2x.png" />
</a>
<iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ffunisonline.blogspot&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
</iframe>
</div>
<div class="social twitter">
<a href="https://twitter.com/funisonline" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDm8Qe1ZHImlPIcv2g44OHExG7ldrjJRaW_EvqHQux2PKX99iVJ3c6_WGgNwzSr-GiYPYByJpX0AE5bu-Kb7epz3zn-NTZq4h38uDphsw5lLfihX3Ef0_uwr4EM4NfIghAr8vPSPRL8HCI/s1600/nl-twitter@2x.png" />
</a>
<iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&id=twitter-widget-0&lang=en&screen_name=funisonline&show_count=false&show_screen_name=false&size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
</iframe>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
<div class="newsletter-form">
<fieldset>
<h2>
Get all posts directly in your mail.
</h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=funisonline', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
<input name="uri" type="hidden" value="FunisOnline" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:" ";display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
$(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>
After adding the above given code, you need to make some necessary changes for changing the user ID's. In the above code i have made 6 words in bold and blue, you need to change them as required. The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to save your template.
