Friday, October 12, 2007

Drop Down Subscription Box or Widget

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.

Bookmark this post:
StumpleUpon Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Simpy Spurl Reddit Google

13 Comments:

Show/Hide Comments
Giagbytes said...

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

Shubham ~NeO~ said...

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 !!!

Google Blogger said...

@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..

Lakshmi the Great said...

cool post dude..

Simple Tricks said...

@Lakshmi

Thanks...

Hope to see you frequently around here..

Angie said...

Woo-Hoo! Thanks! It works!!

Manolete said...

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

Qwickset said...

Worked like a charm.
Thanks again Aneesh.

Aneesh said...

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

Shube said...

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.

Aneesh said...

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

KRYTON said...

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

Aneesh said...

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

Hide Comments
Post Your Comment (looking for the old comment form?)

Comment Box is made DO FOLLOW for Google spiders..So comment on..