How to add Subscription widget for blogger

loading...

The Social subscription widget is for the people who wants more genuine readers and good fan following for them. Yes the Subscription widget is an RSS type , which the people will enter their email and subscribe to the updates of the blog. Whenever the user post new content they will get the news on their email immediately.

The Subscription widget here is mix up of CSS and HTML, and it is flavored with the Social media icons too, which reduces the blog space too.

DEMO

1) Go to the Blogger and sign in with your account



2) After going to your Dashboard, you can see this in your blog

3)  Left to the view blog an arrow is there, after clicking this arrow we get the options like below

4) Now select the Layout Option as shown in above

5) Then Click the Add gadget and Select the HTML/Javascript

6) Now paste this code in that box

<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 } </style> <div id="socialnetworking"> <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <center> <a style="margin-right: 10px;" rel="me" href="User id" target="_blank"> <img src="http://2.bp.blogspot.com/-TtecU81mxEA/TrHxZowPn9I/AAAAAAAABI8/UGSwDMYkt-c/s1600/Button G.png" /></a> <a style="margin-right: 10px;" href="http://www.facebook.com/Gkinfo4all" target="_blank" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmX0Si2Up2vHtCwF4cLUj2KkzwfwQlLdSdjwMe4QeK3uMTzmPaNDq0uPkYqhz7sYz4Bd4aZcziQMyF3XQf9U-P2r3fl9yCzqrTzTf790U2D9OB59aVSt-55zT1bARsPBx4lZHc-2qiPp66/s320/1oaxc4.jpg.png" /></a> <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/Way2usefulinfo" target="_blank" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJbA0_5GvL0WIq4c4KdzkDI6pNB3tQ2Ep4Jwb6MV2JBItP259sJ2kAeO4kRuUJ87dm4wQW0BHaUMGeqxBf1l_bqsdVWwPTKRn-5twsuKz2Q7ICeD1f14X7p7NXK-2zRJOfGp0rlcHweWU/s1600/2d7itk9.jpg.png" /></a> <a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=Way2usefulinfo&amp;loc=en_US" target="_blank" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qWJ9Zj-7z-uHtIaYevASFGCGZe-x7RlQ5qciMnaKnQzhrxkj3hbxSJdkkpr3rU0BH-27264Ih0SNah5mvJvB3ASpRAqqBCHF0f0miAIeyHYaX_A8j5BxjJVayd9S-MqM2aecKcoxj6kf/s320/j5krgl.jpg.png" /></a> <a style="margin-right: 10px;" href="http://twitter.com/#!/Usefulinfo4all" target="_blank" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqdwHAUkHPPSyEWKIk3NfRf38jPTRUaMKGlqnIEN6b32qeElDxKvqm62SK50hJWirftXGCs2hmaqG588Lqe_mLmgvCtKAMRlh4KgRyWrFhSpxyJCvFjEd0ZZlrfh12G7onJkU9rt0NkgQi/s1600/3312cmr.jpg.png" /></a> </center> </div> <div class="googleplus"> <span><font><font>Recommend Us On Google </font></font></span> <!-- GooglePlus --> <!-- Place this tag where you want the 1 button to render --> <g:plusone size="medium"></g:plusone> <!-- Place this render call where appropriate --> <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> <script type="text/javascript"> gapi.plusone.render ( 'plusone-div', { "size": "medium", "count": "true" } ); </script> </div> <div class="fb"> <!-- Twitter --> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2GKinfo4all&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"> </iframe> <span>Like Us On Facebook</span> </div> <div class="twitter"> <!-- Twitter --> <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=Usefulinfo4all&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"> </iframe> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div class="pterest"> <a href="http://pinterest.com/Usefulinfo/"><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"/></a> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri='Way2usefulinfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <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;"/> <input type="hidden" value="Way2usefulinfo" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="subscribe" name="commit" type="submit" value="Subscribe"/> </form> </div> </div> <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;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://way2usefulinfo.blogspot.com/2013/05/''how-to-add-subscription-widget-for.html" target="_blank">Get This Widget »</a></span> </div> <!-- End Widget --> </div>

After Downloading the code, Follow the Below instructions Regarding that above Coding file

• Replace userid with the google plus page of your blog ( http://profiles.google.com/XXXX)

• Replace Gkinfo4all with your facebook page of the blog

• Replace Usefulinfo4all with your Twitter fan page of your blog

• Replace way2usefulinfo with your feedburner ID

• Now please save your HTML/Javascript, its done.

Also check the How to Create a Blog in step by step procedure

loading...