Email Subscription box Multi color | Blogger Widget| Feedburner

This Tutorial I am guide you about how to create Multi color Indian Style Email Subscription widget box with Facebook Like and Google Plus button and also Twitter followers for blogger and website user.  Now I am discuss about how to create this stylish subscription box for your blogger and website.

How to Add Email Subscription box with Facebook Like, Google+ and twitter box ? 

See Video for more information

Note : I advice as always create full templates before editing any widget so please download full templates and then proceed below steps. 

• Go to Blogger.com and sign in with your username and password
• Select the blog which you want to add this widget.
• Go to Templates Menu and click on "Edit HTML" Button Link Then press on Procced and tick mark on "Expand Widget Templates" box. 
• Use Ctrl+F to search </head> and paste the below code before/above </head> tag.

<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>  
after adding above code before </head> section of your blog then save your templates.

Now Move to blogger dashboard and select Layout in the right side click add a gadget page and select HTML/Javascript option  and paste the below code. 

<style type="text/css">/* RB Style sheet for subscription box */ #rb-subscribe-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;} #rb-subscribe-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;} #rb-subscribe-box .twitter-follow { background: #E3FFBA; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;} #rb-subscribe-box .email-box {background:#FFD38D; padding:11px;} #rb-subscribe-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;} #rb-subscribe-box .email-box .txt,#rb-subscribe-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 150px;} #rb-subscribe-box .email-box .btn,#rb-subscribe-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 3px; float: right; font-size: 12px; font-weight: bold; padding: 7px 8px; text-shadow: 1px 1px 0 #D08D00;} #rb-subscribe-box .email-box .btn:hover{background:#FF9b00;} input, textarea { font-family: Georgia, "Times New Roman", Times; font-size: 1em;} box-shadow: 0 0 5px #EEE; line-height: 10px; margin: 10px 10px 15px 0; padding: 10px; width:300px; } #rb-text h3 { color:white; border-bottom: 1px dotted white; line-height:1.385em; font-size: 18px; padding: 0; margin: 0 0 10px; border-bottom: 1px dotted #AAA; font-wieght: bold; text-transform: uppercase; letter-spacing: 0; } </style><div class="rb_widget"><div id="rb-text"><div id="rb-subscribe-box"><div class="email-box"><h4>SUBSCRIBE FREE BLOGGER TIPS <a href="http://feedburner.google.com/fb/a/mailverify?uri=mastermindtools" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/mastermindtools" target="_blank">RSS</a></h4><form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mastermindtools', 'popupwindow', 'scrollbars=yes,width=700px,height=700px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"><input name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address" class="txt" /><input type="hidden" name="uri" value="mastermindtools" /><input type="hidden" value="en_US" name="loc" /><input type="submit" value="Subscribe" class="btn" /><div style="clear:both;"></div></form></div><div class="fb-like-box"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FMyblogtips&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/Myblogtips" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div></div><div class="gplusone"><div style="float:left;width:90px;"><g:plusone href="http://www.myblogtips.org"></g:plusone></div><a href="https://plus.google.com/117175198962210173110" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div></div><div class="twitter-follow"><a href="https://twitter.com/myblogtipsdaily" class="twitter-follow-button">Follow @myblogtipsdaily </a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div><br/></div></div></div>

Replace mastermindtools with your feedburner username
Replace myblogtips with your Facebook Like Page name
Replace https://plus.google.com/117175198962210173110 with your Google+ profile id
Replace myblogtipsdaily with your Twitter username

Click on Save Templates....
That's it...

Also Visit other blogger Widget about 
Link to this post widget
Create Separate Archive Page
  

I hope you like this post about Email Subscription widget for blogger please share this post with your friends. Thanks a lot.  

If you find any difficulty for adding this widget to your blog kindly Comment below I will help you to adding this widget to your blog or website. ...