SEO Tips: An All In One Email Subscription Box With Social Sharing Buttons For Blogger

In this post, I will explain how to add an "All in One Email Subscription box" to a blogger

blog.

Popup Email Subscription box with Jquery

Why Email Subscription box is necessary for your blog?

A well established blog must have an Email Subscription Box widget. With the help of this useful widget, any new visitor who likes your blog may turns into a regular visitor of your blog and your regular visitors stay updated with the new posts. In this way, the blog traffic increases.

How to add Email Subscription Box with Social Sharing Buttons?

1. First of all go to www.blogger.com and sign in with your Gmail ID.

2. On the blogger dashboard, click on the arrow pointing downwards on the right upper corner of the page as shown in the image below:

 

3. After clicking this arrow, select Layout from the list.

4. On the Layout page, Select Add a Gadget on an appropriate place and then select HTML/JavaScript from the list.

Following below is the code which you have to put in your blog after making some changes in it.

<style> #socialnetworking { border: 1px solid #ebebeb; width: 280px; } .fb-likebox { padding: 10px 10px 0 10px; border-bottom: 1px solid #ebebeb; } .googleplus { background: #eef9fd; border-top: 1px solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .googleplus span { color: #000; font-size: 11px; position: absolute; margin: 9px 70px; width: 280px; } #widgetbox { background: #EBEBEB; padding: 2px 8px 2px 3px; text-align: right; border-image: initial; } #widgetbox .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration: none; } .g-plusone { float: left; } .twitter { background: #eef9fd; border-top: 1px solid #fff; padding: 10px; } .fb { background: #eef9fd; border-top: 1px solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .fb span { color: #000; font-size: 11px; position: absolute; margin: -12px 100px; width: 280px; } .pterest { background: #EFF5FB; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; border-top: 1px solid #ddd; } #email-news-subscribe .email-box { padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-image: initial; height: 35px; background: #EFF8FB; width: 260px; } #email-news-subscribe .email-box input.email { background: #FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif; } #email-news-subscribe .email-box input.email:focus { color: #333 } #email-news-subscribe .email-box input.subscribe { background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: white; text-shadow: #d08d00 1px 1px 0; padding: 7px 14px; margin-left: 3px; font-weight: bold; font-size: 12px; cursor: pointer; border-image: initial; } #email-news-subscribe .email-box input.subscribe:hover { background: #ff9b00; background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00); background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline: 0; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: #FFFFFF; text-shadow: #d08d00 1px 1px 0 } &lt;/style> &lt;div id="socialnetworking"> &lt;!-- Begin Widget --> &lt;div class="fb-likebox"> &lt;!-- Facebook --> &lt;center> &lt;a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/114816507471686503320" target="_blank"> &lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRscP7PVbii2At9H9N-1HZtGy-8qmuU_-QCd0y9PwR-3OaIxpn6W7KkW5kPhOYFWfjOXPB1c-nWES5n5mpB8BAfXSWohoKCZE6u49ASHQFCx1hc4Hl5VBD5SLMQV8eRd3Nzo32e2M5CTQ/s1600/GooglePlus.png" />&lt;/a> &lt;a style="margin-right: 10px;" href="https://www.facebook.com/pages/ALL-IN-ONE/306098639542616?ref=hl" target="_blank" rel="nofollow"> &lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijs9A7EUn8yRFaP0P7h4CvUcDbr8P0eLyT4nGleIrikoJXO2EGM2ORp0mmgQmAmPeW8H6IluADXvI7vhQ0DKu5NR7IGHAGg9E29m6QVSiR2LSDIqyhMbVCELrTR6lwVdCJfUfaLJbUF3E/s320/1oaxc4.jpg.png" />&lt;/a> &lt;a style="margin-right: 10px;" href="http://feeds2.feedburner.com/blogspot/jiPcI" target="_blank" rel="nofollow"> &lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZan3NqliMDaZBR5meFUGfvBqESqW7XcWP2MbTtp0xycwcsEkMF0aHuY5AzAh1v_UjZdhbrCRTHe31keF2g5wXjenr08hem1x9PnpMAp_J5AjmR1cQjBv3_mrHWW0Z38K7MVM8yJWO_oBP/s1600/2d7itk9.jpg.png" />&lt;/a> &lt;a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=Blogspot/jiPcI&amp;loc=en_US" target="_blank" rel="nofollow"> &lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjft3qt_GFdAsbrfhq1XDdkvNGkAYDeZmnF3PR2P3Yt29viqefkejE7jSnNXMyR53osXTqbB9w6LdwMXI3j-gufcez6YTWYOdmBr7ltpXIduOFBrV7G3WI-6aY72JfJYI35aHgwmiXvRaX8/s320/j5krgl.jpg.png" />&lt;/a> &lt;a style="margin-right: 10px;" href="http://twitter.com/#!/GenuineEarnings" target="_blank" rel="nofollow"> &lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5cvIGS7lfgy2cevQrSUwQUacr2q9vlLw7xY4styFce8sZRIZAfzsqYSJvU9MZC-1ox6lhZmegorJ37gJi-MXMx96Ckw9j2NpO6r9D1ZOofT4rrVGlMlLtqJhuHbusJ19zzB057smTnOk6/s1600/3312cmr.jpg.png" />&lt;/a> &lt;/center> &lt;/div> &lt;div class="googleplus"> &lt;span>&lt;font>&lt;font>Recommend Us On Google &lt;/font>&lt;/font>&lt;/span> &lt;!-- GooglePlus --> &lt;!-- Place this tag where you want the 1 button to render --> &lt;g:plusone size="medium">&lt;/g:plusone> &lt;!-- Place this render call where appropriate --> &lt;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); })(); &lt;/script> &lt;script type="text/javascript"> gapi.plusone.render ( 'plusone-div', { "size": "medium", "count": "true" } ); &lt;/script> &lt;/div> &lt;div class="fb"> &lt;!-- Twitter --> &lt;iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FALL-IN-ONE%2F306098639542616&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"> &lt;/iframe> &lt;span>Like Us On Facebook&lt;/span> &lt;/div> &lt;div class="twitter"> &lt;!-- Twitter --> &lt;iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=GenuineEarnings&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"> &lt;/iframe> &lt;script src="http://platform.twitter.com/widgets.js" type="text/javascript">&lt;/script> &lt;/div> &lt;div class="pterest"> &lt;a href="http://pinterest.com/abcdefg/">&lt;img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/>&lt;/a> &lt;/div> &lt;div id="email-news-subscribe"> &lt;!-- Email Subscribe --> &lt;div class="email-box"> &lt;form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Blogspot/jiPcI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> &lt;input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/> &lt;input type="hidden" value="Blogspot/jiPcI" name="uri"/> &lt;input type="hidden" name="loc" value="en_US"/> &lt;input class="subscribe" name="commit" type="submit" value="Subscribe"/> &lt;/form> &lt;/div> &lt;/div> &lt;div id="widgetbox" style="background: #FBEFEF;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> &lt;span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;">&lt;a href="http://v1topone2u.blogspot.com/2013/04/add-all-in-one-social-media.html" target="_blank">Get This Widget »&lt;/a>&lt;/span> &lt;/div> &lt;!-- End Widget --> &lt;/div>

5. You have to made some necessary changes to this HTML code. To make changes to this code, follow the instructions below:

Instructions

a. Replace the Red Highlighted words with your Google + user name which is in the form of numbers. You can find it by going to your Google + account and then go to your Google + page. In the page url, you will find it.

b. Replace green highlighted https://www.facebook.com/pages/ALL-IN-ONE/306098639542616 with your facebook page Url. Also replace green highlighted ALL-IN-ONE with your facebook page name and replace 306098639542616 with facebook page username. You can find it in facebookpage url.

c. Replace brown highlighted GenuineEarnings with your twitter username.

d. Replace blue highlighted blogspot/jiPcl with your feedburner username. You can find it in your feedburner account. In your account, click on the feed and then click "Edit Feed Details".   

e. The blue highlighted words in the image above is the username of the feed URl.

f. Replace the purple highlighted abcdefg with your Pinterest username. 

g. After changing the highlighted texts, now go to http://www.opinionatedgeek.com/dotnet/tools/htmlencode/Decode.aspx and decode the above HTML code (After changing the coloured texts). You have to put the decoded HTML code in the Add a Gadget option of your blog (The above code is the encoded code. You have to put the decoded code in your blog "Add a Gadget" option).
 

Congratulations! You have successfully added a beautiful Email Subscription box with social sharing buttons on it.

If something goes wrong with the code, please tell me through comment or Contact me.

You also want to read  Social Media Share Widget for blogger
Add Email Subscription box above every post