Drop Down Subscription Box or Widget

Posted by Unknown on
Everybody knows the imprtance of Rss feeds.So its better to give the readers an option to subscribe to your feeds in their favourite Rss Reader..

Here in this blog you can see a Drop Down Subscription box on the left.Here is how i implemented it..

Goto your Blogger Template>Edit Html and find

body {

and place the following code just above it..

/* http://www.bloggerplugins.org--- Dropdown Subscription Box
*/
.img0 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em;background: url("http://simpletricksblog.googlepages.com/rss.jpg"); cursor:hand;cursor:pointer;}
.img1 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addgoogle.gif"); cursor:hand;cursor:pointer;}
.img2 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif"); cursor:hand;cursor:pointer;}
.img3 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://www.netvibes.com/img/add2netvibes.gif "); }
.img4 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/rss-bloglines.gif "); cursor:hand;cursor:pointer;}
.img5 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://www.newsgator.com/images/ngsub1.gif ");cursor:hand;cursor:pointer; }
.img6 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addmymsn.gif ");cursor:hand;cursor:pointer; }
.img7 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addrojo.gif "); cursor:hand;cursor:pointer;}
.img8 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addmyaol.gif "); cursor:hand;cursor:pointer;}
.img9 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addfeedlounge.gif "); cursor:hand;cursor:pointer;}
.img10 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em; background: url("http://simpletricksblog.googlepages.com/addnewsburst.gif ");cursor:hand;cursor:pointer; }
/* End Simple Tricks Coding */


(it not necessary to put it exactly above body { but i mentioned it to avoid confusion.)

Now add the following widget to your blog.(The widget will work only if you have done the template edit mentioned above)


Note: If you are reading this in a Feed Reader the widget installer wont be displayed.So visit the actual article on the site to install the widget.

Comments

  1. AnonymousOctober 13, 2007 at 11:38 AM

    I have enabled smartfeed in feedburner which make the feed compatible with visitors' feed reader application.

    ReplyDelete
  2. Shubham ~NeO~November 2, 2007 at 11:27 AM

    Hey Bro Ur Just Awesome .. Gr8 Tricks Keep Comign On Ur Blog .. I'm A Fan Of Urs .. Can U Help me Out With 2 Things..

    (1) I Searched Ur Blog But Didn't Saw Any Add Recent Posts Widget Which U Use On Ur Home Page Pls Share info About That ...

    (2) Next U Helped Me get Bookmark Buttons On Footer But U Removed SOme Bcos Not Enough Room .. Can U Now Plss Add Them All Bcos I Have Disabled Bordering Thanx !!!

    ReplyDelete
  3. UnknownNovember 25, 2007 at 5:27 PM

    @subham.. check out my latest posts.. i have included the recent post and comments widgets.

    For getting the other bookmarking buttons,you can copy out the <a expr: .......></a> tag of the corresponding bookmarking icon..

    ReplyDelete
  4. LakshmiNovember 27, 2007 at 12:03 PM

    cool post dude..

    ReplyDelete
  5. UnknownNovember 27, 2007 at 12:10 PM

    @Lakshmi

    Thanks...

    Hope to see you frequently around here..

    ReplyDelete
  6. UnknownJanuary 7, 2008 at 11:50 PM

    Woo-Hoo! Thanks! It works!!

    ReplyDelete
  7. AnonymousJanuary 16, 2008 at 12:41 AM

    The images are not shown on IE 6.0 but in Firefox it works fine on Firefox 2.0

    ReplyDelete
  8. QwicksetFebruary 19, 2008 at 8:56 PM

    Worked like a charm.
    Thanks again Aneesh.

    ReplyDelete
  9. UnknownFebruary 19, 2008 at 11:00 PM

    thanks for trying out the widget.The problem with this widget is that it will be empty when images are disabled..

    ReplyDelete
  10. Michael ShubeckFebruary 23, 2008 at 8:34 AM

    To get the pointer hand to show up on each entry, add "cursor:hand;cursor:pointer;" at the end of each image like so:
    .img0 { width: 83px; height: 17px; margin-left : 1.5em;margin-bottom : .6em;background: url("http://simpletricksblog.googlepages.com/rss.jpg");cursor:hand;cursor:pointer;}

    Thanks for the great idea.

    ReplyDelete
  11. UnknownJune 27, 2008 at 5:38 AM

    thanks shube for that piece of information.. i have added that feature now..I am now working on a javascript based dropdown subscription box.

    ReplyDelete
  12. VARUN...................July 7, 2008 at 8:36 PM

    Can you kindly let me lnow how do i create a drop down as in http://bloggerindraft.blogspot.com/ sidebar?

    ReplyDelete
  13. UnknownJuly 7, 2008 at 10:39 PM

    you can get them by adding the Subscription Links (New!) widgets from your Blogger Layout Page..

    ReplyDelete
  14. AnonymousFebruary 15, 2009 at 4:17 PM

    the images wont show up in IE and Google Chrome.
    except in Firefox.

    Please help.

    ReplyDelete
  15. putri-kecilApril 21, 2009 at 7:17 PM

    Thank....i put it my new blog.

    ReplyDelete
  16. AnonymousAugust 2, 2009 at 6:17 PM

    very nice thanks

    www.tips-tricks-tweaks-tech.blogspot.com

    ReplyDelete
  17. asiaFebruary 20, 2010 at 8:06 AM

    wow great..thanks

    ReplyDelete
  18. Abhishek Cool AbhiMarch 3, 2010 at 1:11 PM

    Very nice.
    i have added it on my blog cool abhi home which contains lots of fun and games, sms , downloads..

    ReplyDelete
  19. AnonymousMay 14, 2010 at 1:44 PM

    cant find
    body { man

    ReplyDelete
  20. Sonu khrabAugust 23, 2010 at 8:06 PM

    wer is prew?

    ReplyDelete

Post a Comment