Subscription widgets should be simple, clean and big enough for the user to notice them. They have to be attractive and look professional so that this reader will want to subscribe and look more for your content.
Social Subscription Widget is Very Important
Many bloggers are missing some important basics from this element in order for it to work as expected to make people subscribe, the sleek style as I mentioned above, and the suitable location, when should the reader see that widget? It is very important as well. They probably don't put it in the right place, I noticed it being mostly put on sidebar which is not good.
Today, I am releasing a great social widget for blogger blogs, and I took care for you about the code and design. I also determined the location for where it should be added so it can attract attention and let you get much subscribers more easily. The best location for a subscription widget is just under the post itself because the reader will be free minded at that point to think to subscribe if he likes your content.
It contains of 3 subscription methods for your readers to subscribe and they are the most famous effective ways which are Facebook, Twitter and FeedBurner email subscription. You don't want to distract the reader with so many subscription options that make visitors feel lazy to choose. Well, here you can check a live demonstration:
Add Social Subscription Widget to Blogger Blogs
Okay, now lets add this great widget to your blog, please login to your blogger account then navigate to your target Blog Dashboard >Template > Edit HTML and press (Ctrl + F) on your keyboard to search for<b:includable id='post' var='post'> then directly once you find it please search again for post-footer then you will see this code:<div class='post-footer'>
(bla bla bla)
</div><b:if cond='data:blog.pageType == "item"'>
<section class='newsletter'>
<h3>
Tired of Checking for New Posts?
</h3>
<div id='form-newsletter'>
<div class='social facebook'>
<a href='https://www.facebook.com/iSmoothBlog' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZtECQ41fnRjeaVpgxqzCkH470PRRey0AtBJTc-fiLE_a5dk4ba8leQ0BKqAWF_vKBIxYcMmoPQSfZrbYX8b3wpRfbAbmBz0Tbe-9TfoI0uTNBH3WtoOIEe_sm_J3WRcSuF3C5MswDYqiT/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%2FiSmoothBlog&width=90&height=21&colorscheme=light&layout=button&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/iSmoothBlog' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpntNdBRGgsP9McXomMY1TWU5PrPL68UGA9wiSFHODz3a4Yn-jrM-R4x_LDqiSnJbjEE68vKFNcYgvARJH95appFfTOfmPoA7tek8WSKjdytTuc382pWHMM75hCnx5B0IIQ1_qL5-l8Pa/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='//platform.twitter.com/widgets/follow_button.html?screen_name=iSmoothBlog&show_count=false&lang=en&show_screen_name=false' style='height: 20px; width: auto;' 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>
<h3>Get all posts directly into your mail.</h3>
<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=iSmoothBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='email' id='email' name='email' onblur='if (this.value == "") {this.value = "Enter your email here..";}' onfocus='if (this.value == "Enter your email here..") {this.value = "";}' type='text' value='Enter your email here..'/>
<input name='uri' type='hidden' value='iSmoothBlog'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='subscribe' name='commit' type='submit' value='Subscribe'/>
</form>
</div>
</fieldset>
</div>
</div>
</section>
</b:if></head> in your template with the same keys again and paste this just above it:<style type='text/css'>
/* Social Subscription Widget */
.newsletter{margin:0;-webkit-transform: translateZ(0);transition:all 0.5s ease-in-out;transition-delay:0.2s;}
.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:100%;margin:0 auto}
.newsletter:before,.newsletter:after{content:" ";display:table}
.newsletter:after{clear:both}
.newsletter h3{color:#666;margin:1em auto;font-size: 120%;font-weight: 400;}
.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;border:0;padding:0;}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:10px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-25px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #eee;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 h3{color:#565f6a;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 10px 3px;font-size:14px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{outline:0 none;width:84%;border:0;left:0;position:absolute;height:40px;padding:0 0 0 10px;}
.fields .subscribe{outline:0 none;border:0;background:none repeat scroll 0 0 #8493A0;color:#FFF;right:0;position:absolute;height:40px;transition:all ease 0.6s;padding:10px;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>Put Your Social Settings
It's obvious that you have to put your Facebook page ID, Twitter screen name and Feedburner ID in order for these services to function for you. So, please look in the social widget code for the 3iSmoothBlog phrases and change them to your own settings.You can also try to play with the colors in the CSS snippet up there if you want to match the coloring scheme of your layout or design. You are done, you have just set-up a very effective and sleek social subscription widget with an email form for your blog, congratulations. You may now consider looking at my other Blogger Tricks articles.
What do you think about this social subscription widget? Do you like it, share your thoughts with me and if you have any problem, do not hesitate to post in the section below.
