19 July 2016

How To Add Smooth Social Subscribe Box Widget To Blogger

Hello my lovely readers, in today post, I'm share a guide of how to add a clean and smooth social subscriber box with social links to your blogger blogs. Email subscriber box is an awesome and powerful way of marketing and getting your visitors into your customers via email list. In my previous post, i'm share a guide of how to add simple "Email Subscription Box" to blogger. I hope you also like this widget and share your comments below this post.

image of How To Add Smooth Socail Subscriber Box Widget To your Blogger blogs

This is fully awesome, elegant and amazing social subscriber widget which you can add any where on your blog, in the footer area, header area, below every single post, etc. In this widget 3 in 1 strategy used, means with subscription box also get Facebook and Twitter profile links within this widget.

This is fully responsive and adjustable of all other devices like on Desktop, Mobile, Tablets etc. In this widget, CSS, HTML and JQuery use for it's full working. Below is the live demo of this widget you can see and then use this widget into your own blog using below complete guide of how to add into your blogger blog.


How To Add Smooth Social Email Subscriber Box With Social Links To Your Blog


Step 1 - First of all write into your browser address bar -  www.techora.net and Enter.

Step 2 - Select your blog go to overview section area. 

Step 3 - Go to "Template" and click on "Edit HTML" button. 

Step 4 - Now press CTRL + F to find some tags. 

Step 5 - Copy below tag and paste inside search box and enter to find this tags.

Note - Mostly it may be appear 2 to 4 times, but mostly used this code after 3rd time. But if widget doesn't work then don't worry change it's location and then try. 

Step 6 - Now copy below code and paste just below this tag. 

<!-- Developed By : www.techora.net -->
<section class="newsletter">
<h2>
Getting Our All Latest Posts Directly into your Inbox
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/TechoraNet" target="_blank">
<img src="http://1.bp.blogspot.com/-HiD7bFwl-fM/U3nB1ozGbKI/AAAAAAAACb0/5_nqyCGPN8Q/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%2FTechoraNet&amp;width
=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count
&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=5
19648428126767&amp;locale=en_US" style="border: none; height: 21px;
overflow: hidden; width: 90px;">
</iframe>
</div>
<div class="social twitter">
<a href="https://twitter.com/TechoraNet" target="_blank">
<img src="http://2.bp.blogspot.com/-NPqgpxxxV1s/U3nB1GvOtwI/AAAAAAAACbw/CmH7ymTRpR4/s1600/nl
-twitter@2x.png" /></a>
<iframe allowtransparency="true" class="social-box twitter-follow
-button twitter-follow-button" data-twttr-rendered="true" framebor
der="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=13997
85529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=TechoraNet&amp;show_count=false&amp;
show_screen_name=false&amp;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)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</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=TechoraNet', '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 Address..." />
<input name="uri" type="hidden" value="TechoraNet" />
<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:&quot; &quot;;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:medi
um 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>
<!-- By : www.techora.net -->

Step 7 - Save your "Template" and view your blog. 

Step 8 - Now the social subscription box is live now to attracting your visitors. 

Customization Options ! ! ! 


Before more proceeding, take a few minutes, simply change some important things for better working of this widget to your blog. First of all change the "TechoraNET" texts with your own possible name. It will be appear 6 times , first 2 times for Facebook profile, 3 - 4 times for Twitter profile and 5 - 6 times for Google Feedburner ID. After making all these changes save your template and view the result. 

That it, you've done it your work. Now this smooth social subscriber box widget to blogger will be live now on your blog for attracting your visitors and making them your permanent readers. 


Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!