How to add Subscription widget for blogger

9 comments
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.

Cool widget for blogger


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

Guide to add gadget in blogger



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="http://2.bp.blogspot.com/_rLYhkzmU7RY/TED5ihk9m6I/AAAAAAAAABI/v_2rKVhRE0g/s320/1oaxc4.jpg.png" /></a> <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/Way2usefulinfo" target="_blank" rel="nofollow"> <img src="http://3.bp.blogspot.com/_rLYhkzmU7RY/TED5SYSjFII/AAAAAAAAABA/xcmxc456JgQ/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="http://1.bp.blogspot.com/_rLYhkzmU7RY/TED5LW-dTrI/AAAAAAAAAAw/mozQRQcCttU/s320/j5krgl.jpg.png" /></a> <a style="margin-right: 10px;" href="http://twitter.com/#!/Usefulinfo4all" target="_blank" rel="nofollow"> <img src="http://3.bp.blogspot.com/_rLYhkzmU7RY/TED5Omxmx_I/AAAAAAAAAA4/iU6SVPqEQWI/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...

9 comments:

  1. This is the tutorial I've been waiting for!!Thanks so much!! I had to pin this one! I know there are tons of people like me, needing to learn this stuff!
    website design

    ReplyDelete
  2. Really nice widget, i was looking for such widget that contains both subscribe in reader as well as email subscription..
    Thanks for the widget ..
    Keep Posting :)
    The Braves And Smarts

    ReplyDelete
  3. email subscription widget is necessary for the loyal traffic , it is also important from
    the perspective of search engine optimization.your widget is auxiliary and behaving
    correctly at work.as we know a blog is known by the numer of its subscribers and
    loyal traffic.well you got one more subscriber and it is me.nice work keep it up

    ReplyDelete
  4. Nothing is there in the Subscription Widget Coding File. Try to update with the code.

    ReplyDelete
  5. my blog brain-of-computer.blogspot.com/

    ReplyDelete
  6. Hello Brother Please Compress The Java Script Because It Can Slow The Site regards from http://www.latestgames2.com/

    ReplyDelete
  7. Nice Email Subscriptions widget. This widget is really helpful for blog or website. Nice share.
    I have a email subscription Widget:
    Add Nice Email subscriptions widget

    ReplyDelete

Powered by:

Way2usefulinfo © 2014. All Rights Reserved | Contact |