January 24, 2009

Multi Level Drop Down Menu In Blogger/BlogSpot Blogs


One of the important widgets I found missing in some blogs is a top navigation menu (preferably multi-level drop down list).
If you have some important navigation links/labels/categories for your blog, that are popular among your readers, then it will be very easy for them, if you could place a navigation bar in the top region of your blog.

So have a quick look on this live demo: [CSS Horizontal Menu], before you add this to your blog.

Now if you are impressed by the way it looks and works, then without wasting any more time, add this widget quickly to your blog, and make your readers happy !

Here's what you have to do.
STEP1:
Download this file from Dynamic Drive:
slidemenu_hori.css [Click Here],

and this one too:
slidemenu_horiz.js (Copyrighted to Dynamic Drive and modified with pre-added images)

And upload the files to MyDataNest (recommended)
NOTE:Edit and save the properties of the folder at your MyDataNest account as "hidden" and NOT as "Private".
or to SigMirror.com, to get the DIRECT LINKS to these files.

Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:
</head>
Immediately BEFORE it, place this code:
<link rel="stylesheet" type="text/css" href="http://mydatanest.com/............/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://mydatanest.com/.............../slidemenu_horiz.js"></script>
Replace the links in RED, with the DIRECT LINKS you obtained from hotlinkfiles.com or sigmirror.com
Then save the template.

STEP 2:
Now go to "Page Elements" of  "Layout".
Add a Gadget of HTML/JavaScript type.

Then add this code in to it:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>
Then save this widget. And drag it just above the posts widget.



216 comments:

«Oldest   ‹Older   1 – 200 of 216   Newer›   Newest»
KTS Lâm Hà Mạnh said...

that great!
thank you

Divya Sai said...

Hello KTS

I am happy that the code was helpful to you !

But 1 advice that I want to give you and anyone who uses any code from this blog, is to first download any file being used in the hack, then reupload it somewhere else, because with increasing number of users, there can be issues of bandwidth limitation, which I already have seen on some occasions !

Hope you can understand the seriousness of this matter, and sorry for troubling everybody !

Regards
Sai


NOTE: In this widget, there are two external files being used (In the first code)

1. http://dsai.588.googlepages.com/slidemenu_hori.css
2. http://dsai.588.googlepages.com/slidemenu_horiz.js


So download these files and reupload them to any other website, and use it in the code

KTS Lâm Hà Mạnh said...

thank you for your notice!

Jaime said...

Is there a way to change the color of the linkbar?

Anonymous said...

you can see in
http://dsai.588.googlepages.com/slidemenu_hori.css
have
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
change, background: color you want using hexa color;

KTS Lâm Hà Mạnh said...

you can see in
http://dsai.588.googlepages.com/slidemenu_hori.css
have
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
change, background: color you want using hexa color;

Jaime said...

I hate to sound dumb but where would I upload these files too? after I have changed them? Can i just add the code into blogger? Thanks so much

KTS Lâm Hà Mạnh said...

step 1: you must download css style at
http://dsai.588.googlepages.com/slidemenu_hori.css
step 2: open it by notepad
find code
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

change background: color you want using hexa color;
step 4: save it: slidemenu_hori.css
step 5: upload it to webhost
step 6: using path you have to replace in code :
href="http://dsai.588.googlepages.com/slidemenu_hori.css" />

KTS Lâm Hà Mạnh said...

you can sign up with free web-host
exp: websamba.com
googlepages.com
ect...

KTS Lâm Hà Mạnh said...

http://www.0moola.com/
Free web hosting - Free Web space - Free Subdomain
Interests: Personal, Business
Your URL: Subdomain
Space: 5000 MB.
Bandwidth limit: 10000 MB/month
Upload: FTP, Browser
File size limit: 5 MB
Editor: Adv, Basic, WYSIWYG
60-days Inactivity limit
Multiple accounts allowed


http://www.3000mb.com/
Free web hosting - Free Web space - Free Subdomain
PHP support
Interests: Personal, Business
Your URL: Subdomain
Space: 3000 MB.
Bandwidth limit: 10000 MB/month
Upload: FTP, Browser


http://www.4000webs.com/
Free web hosting - Free Web space - Free Subdomain
PHP support
Interests: Personal, Business
Your URL: Subdomain
Space: 4000 MB.
Bandwidth limit: 8000 MB/month
Upload: FTP, Browser

Divya Sai said...

HI KTC.....

Thanks a lot for explaining and helping others !

I hope now everything is clear for you Jaime,
In brief;

you have to edit the .css file in the first code, and upload it to any of the above mentioned hosts, and replace the link in the code, as described by KTS Lâm Hà Mạnhthat's it !
Feel free to ask your doubts here !

Once again thanks KTS Lâm Hà Mạnh, for your response and help in this blog !

Regards
Sai

Jaime said...

Thank you so much. I customized it and uploaded it to my godaddy account that I already had. Thanks again...This is PERFECT!!

Jaime said...

Well except one more question....How can I make it so the whole link bar is evenly spaced? I can't seem to get that correct?

Jaime said...

Thanks again so much for this. I am glad I found it.
I am trying to make the font this color #998e83 and the background white...but it doesn't seem to be working out for me......I must be changing the wrong ones.

KTS Lâm Hà Mạnh said...

sorry !
as Divya Sai said,
you find code:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #463E41;
width: 100%;
}
change background ì you want by hexa color: #463E41
last day, i'm very tired ^^

Eden Eco Homes said...

Hey there,


looks like a great menu, i got your version installed on my blog, but when i tried to upload CSS and Java pages myself to a host, the slider format got lost.

I m using google sites but cant save website address as xxxxxx.css or xxxxxx.jv


is that neccesary for my blog to read the code?

this is where is saved it, but why isnt it working???


http://sites.google.com/site/edendropdownmenutest1/


what else could i be doing wrong?

Eden Eco Homes said...

or do any other references have to be changed?


ie
www.dynamicdrive.com"

//bloggerstop.net"

?

Divya Sai said...

You have to just copy paste the entire code as it is, BUT, a slight modification is required:

first download and save these two files:
1. http://dsai.588.googlepages.com/slidemenu_hori.css
2. http://dsai.588.googlepages.com/slidemenu_horiz.js

Then go to hotlinkfiles.com, create an account
and upload these files to get two DIRECT links, now replace these links (http://dsai.588.....), with the two new links in the FIRST code, and then put it into the HTML template of your blog !

Divya Sai said...

I do not know, whether you are given access to the HTML of your blog/site in Google sites, if you are not given the access to the template, then create a blog in Blogger.com (blogger also belongs to Google)

Regards
Sai

Eden Eco Homes said...

Sai,

awesome. sounds right. will try it asap

Eden Eco Homes said...

could i just embed the .js java code from

1. http://dsai.588.googlepages.com/slidemenu_hori.css
2. http://dsai.588.googlepages.com/slidemenu_horiz.js

in my html?

why do i need a seperate file uploaded?


i am trying to copy and upload, but do i upload as a .js .css or just simple text?

how do i make the code into a .js or .css?

Eden Eco Homes said...

ok....

when i go to

http://dsai.588.googlepages.com/slidemenu_hori.css

it only gives me text? how do i make this a .css file?

Divya Sai said...

yes that will be displayed as text;

while it is being displayed as text, go to "file"-> and click on "Save Page As"


and then you can save it as "slidemenu_hori.css"

Divya Sai said...

you can simply use the links as dsai588........

BUT, that may bother you, me and many others in future, cause they are uploaded on googlepages, which do not give unlimited bandwidth, so the bandwidth limitation can be broken anytime.
and then a lot features will stop working (including this drop-down menu)!

Eden Eco Homes said...

OK

I got it!

just save as .txt file, and then open file title and change extension name to .css



Thanks for all your help.

Working on an eco-housing site here on Mt. Fuji, Japan

Divya Sai said...

Mt Fuji, Japan....cool

I would like to see some nice pics on your blog about Mt.Fuji and your project !

Eden Eco Homes said...

Sai.

GREAT! now it is working in MS explorer,

but menus go horizontal instead of vertical in Firefox.....

here it is

http://edenvillages-lifestyle.blogspot.com/

can i make this work for all browsers?

Divya Sai said...

Well this code is for horizontal menu !
and what I see in your blog is a horizontal menu , in both IE and Firefox !

snam said...

@Eden Eco Homes
I think it goes horizontal because you only have one subcontent and no subfolders. There is only one folder per tab so it cannot go vertical. If you look at the example, it will go across, down, across, down, etc. Yours only goes across for this reason. Hope I could help.

Eden Eco Homes said...

works fine in Old explorer, but still not in Firefox

is problem really in ul and li tags?
or in CSS JAva?

shouldnt a drop down simply be ....

ul
li top item /li

ul
li sub item /li
li sub item /li
li sub item /li

/ul
/ul

???

Eden Eco Homes said...

here is the address again....

http://edenvillages-lifestyle.blogspot.com/

Divya Sai said...

Well if u see the demo, although it has some alignment problem, but works correctly in all browsers !

LINK

chedregion10 said...

there are bullets in my menu... how do i remove it? thnx in advans

Divya Sai said...

The hack needs the use of unordered list and listed items which are <ul> and <li>, and as you are using the default templates given by blogger so those bullets are showing up in the hack.

I suggest you to change the template to a customized template;
TEMPLATES
INSTRUCTIONS

NOTE: Before changing the template, back up this template and BACK UP al your widgets in text pads.

Anonymous said...

really thanks

bloggerstop.net said...

Really welcome dude !
But I would hav been more happy to see your name, and not an anonymoust comment !

BRUNEI BLOG said...

wow this is very helpful to me, thnks guys..

Divya Sai said...

Welcome brunie !

BRUNEI BLOG said...

dude got problem when using firefox when i uses my own link site to the 2 files css and js..can u tell me how to fix them?thanks, regards from bruneiblog

Divya Sai said...

To which site have uploaded the two files(js and css) ?
As you must use ONLY DIRECT LINKS....

bruneiblog said...

i was using www.hotlinkfiles.com and i uses direct link as what u said, also i tried to run the script locally and link to css and js files locally and still firefox is not working..but when i link it to your link it totally work at all..

Divya Sai said...

Ohk, ya there has been a BIG problem at hotlinkfiles.com, even in my account all files are missing, I checked their website and the problem is being faced many other members too. Some of them are saying that their files were back after some hours, but again went missing.....

So either you can wait for them to resolve the issue, or in the mean time you can try fileden.com (a similar service)

BRUNEI BLOG said...

well thank you somuch dude, u've been a big help..im inviting you to visit my blog at www.brunei-today.blogspot.com and one thing, can i park my blog to your blogsite?just give me the site or embeded code..thnks alot for great info and help..best regards

Blogger Templates said...

Here in this page you can read the recent comments by hotlinkfiles.com members:

http://www.hotlinkfiles.com/announcements?action=view&aid=8

Blogger Templates said...

I could not get your point of parking, can you explain it in detail plz ?

BRUNEI BLOG said...

its like blogger list or follower, like im your follower..

Blogger Templates said...

Hi
Sorry for replying so late, if you want to show the updates of this blog, then you can use the feed of this blog in a recent posts widget...

Roady said...

hmm well.. im using it on my Blog but as you can see, there is a big space between the menu and the post area. Why? if I reduce the space, then the options in the drop down menu will get BEHIND the posting area, thereby disappearing. Can you please take a look at this? I want the options under the menu to come ON TOP OF the Posting area, not under it =((. Thanks in advance

Divya Sai said...

Actually you have used this in the header widgets that is why a big space is observed in it. If you place this widget just over the post-body section, then it may not show that space, anyways if you want to try a similar widget like this, you can chk this out:
http://www.leigeber.com/2008/11/drop-down-menu

Roady said...

Okay, talking about putting it just over post-body section, here's the resulthttp://img25.imageshack.us/img25/8489/bloggernet1.jpg . Of course, that doesn't look good! And about the javascript part, well to be frank, I didn't understand much. I replaced the "script src" with that javascript file and also the CSS file but didn't get anywhere to that drop down menu. Any other help, if possible?

Thanks In Advance

Divya Sai said...

Hi Roady,

Because the length of words or letters is more than that of your post-body section, but you can see now that the gap is not there,

well i think it will be easier for you if I write a post on this new widget rather than explaining it in a comment, I'll try to do it within a day,
in case I forget this, plz do remind me through a comment here (after 24 hrs) :)

Lux-lux said...

My menu don't see well at IE/ ->http://sdsd-sdsd.blogspot.com/

Divya Sai said...

@ Lux-Lux,
I checked your blog in both Firefox and IE, the widget is working perfectly fine, make sure you have enabled javascript for your browsers...
Here's the screenshot in IE8:
http://www.gigaimage.com/images/ffxbbgaevfl1n8redfu9.png

@ Roady
Here's the new drop down menu tutorial:
http://bloggerstop.net/2009/03/new-multi-level-drop-down-menu.html

Shilpa shetty said...

hello divya ...same problem here can you put downlaod link for thise code also you help will be deeply appreciated ........your site say "The bandwidth or page view limit for this site has been exceeded and the page cannot be viewed at this time. Once the site is below the limit, it will once again begin serving as normal." 8-}

Roady said...

You can try www.hotlinkfiles.com @ Shilpa. It started working properly for me again :)

Divya Sai said...

I'll update the post with a download link to the file, and along with HLFiles you may even use sigmirror.com , as hotlinkfiles.com is frequently going down nowadays...

bloggerstop.net said...

Post updated !

As expected now bandwidth problem has become more frequent :(

manan said...

divya sai wrong file you have updated link are the wrong ... i get the error which i was getting earlier than you fix it now oyu need to update those you have edited thanks

Divya Sai said...

Thnx manan...
I have updated the post !

manan said...

oh thenks god!!! and thank oyu divya now my blog is up and running thanks a lot god bless you thenetgod.blogspot.com

Divya Sai said...

Welcome manan !

manan said...

Divya i Have one more question...need oyur help to figure out why in my blog this menu does not work ...... i mean it appear perfectly ....but drop down on the drop down menu oyu can click on only first two menu after that it just skip my menu....you can see my blog thenetgod.blogspot.com...thansk in advance

Divya Sai said...

Sorry manan, that seems to be related to your template code, so difficult to solve, i can only suggest you to try any other multi-level drop down :
http://bloggerstop.net/2009/03/new-multi-level-drop-down-menu.html

mmmbiscuiits said...

I love these dropdowns but I'm having trouble. Anyone have some advice please?
Half the time they look great, and half the time I see the the dropdown headings all laid out in a vertical column. I'd filled in lots of items so this column is pretty long and ugly.
I hadn't placed the .css and .js files on a hosting site so i thought that was the problem. I just started from scratch, hosting them to hotlinkfiles, and i still get the same prob.
My blog's here: http://bitethebiscuit.blogspot.com/. Since I have no idea when it will work and when it won't, I'll post a screenshot of the dropdowns when they aren't formatted correctly.
Has anyone else seen this?

Divya Sai said...

Hi mmmbiscuits,

Plz switch over to sigmirror.com from hotlinkfiles.com, as there's problem at hotlinkfiles and so files go missing sometimes.....tell me if that works for u!

mmmbiscuits said...

Thanks Divya Sai. I will try that. Meanwhile I may have fixed the problem. I noticed that the last 3 lines of html were slightly different after I'd pasted them into my blog. Instead of script type="text/javascript" , my html said script src=". Not sure how this happened. I recopied the code and same thing happened. I had to change it by hand. No wit looks ok Hopefully it'll stay that way.

Divya Sai said...

Hmmm good....BTW you have added some REALLY mouth watering pictures in your blog, and great recipes too !
Keep up the gud work !

just as a suggestion i wud advice you to switch to a customized template !

TT said...

I have one question. Where do you have to put your links in the menu you put in the blogger template? In which section of the code?

Divya Sai said...

No dude, not in the template, you have to edit the HTML code, i.e the second one:

Wherever you find this:
href="#"

Replace that # with any link, like this:

href="http://google.com", or like this:

href="http://bloggerstop.net"

TT said...

^^
Oke thnx. Great drop down menu by the way!
But when i open my site in internet exlplorer the menu is displayed Vertical. In Mozarilla firefox everything is perfect. Any idea how this is possible and how i can fix this???? Because the majority of people is still using internet explorer nowadays.

TT said...

my blog:
http://pcgladiator.blogspot.com/

Divya Sai said...

Hi TT, I just checked your blog in both IE and Firefox, and found the widget working, can you plz try it in any other computer or ask any of your friends to chk it for you ?

TT said...

^^ I tried it on another pc and there the menu was displayed horizontal in internet explorer so you are right that it has something to do with the IE settings. But i also have red crosses beneath each menu item now. Like there is an image not displayed or something. I also have this in the google chrome browser. Do you have any idea how this is possible?? ( try checking the blog with google chrome to see it )

Divya Sai said...

ya there's was a problem in the link to an image in the .js file, I have just corrected it and re-uploaded the file, you may download the new js file and use it !

Sorry for the inconvenience !

TT said...

^^
Oke thnx but where can i find the new JS file??

TT said...

By the way i have downloaded the new file but it still gives the same problem in Google chrome now. Or should i also refresh the CSS file?? thnx for the help!

Anonymous said...

I have a couple of questions.

1. I'm successful with the menu, thank you. How do you get the right and down arrow to be in there? I must have missed that.

2. My date on the blog post is interfering with the drop down menu. How do I sort that?

Thank you
littlekariblueATgmailDOTcom

Divya Sai said...

Actually you have to upload the images to any image host and replace the links in the .js file, but I have just now placed the links for everybody in the .js file, so you may now download the file and use it !

I couldn't get your second question, can u xplain it in detail, or give me your blog link?

Anonymous said...

Does that mean that if I replace the file I already used it will now have the arrows on those menus?

My second question is this... the first post on my blog has the date listed first and where the date is, written in white, it sort of covers over the drop down menu. Should I make the top margin really big to accommodate this or no?

kari

Divya Sai said...

Yes now it should be displayed, if you are using the new javascript file.

And for the date issue, if you think the links are more important than the date of your first post, then try your best to show the links(menu) without distorting your blog's overall looks :)

Anonymous said...

Brilliant! Thank you!! Love this menu!
kari

Anonymous said...

Ok, have another question lol. I'm wanting to use this just under the header instead of at the top of the blog posts. It already is there, actually. Is there a way to make it so it will be on top of the posts and the sidebar items? I made the top margins really big and it looks sort of strange. But if I don't, anything on the sidebar or a post will cover over the menu. Is there a way to make it stay on top? If you have an email addy I can send you the link, I just don't really fancy having it on here since it is private.

Thank you, Kari

TT said...

Dude i have an other question. i tried to add sub menu's now like you adviced. But these submenu's doesn't work at my blog. Becaue there is a little space bewteen the main box and those submenu boxes so that if you try to clik on it already dissapeared. So you can't click on such a sub item.
Is there anyway to solve this????
Thanks in advance!

If you wanna see what happens check out my blog and click on folder 2 and then folder 2.1 and then you can't go further. Maybe it is my browser or something. But can you check this out?

Divya Sai said...

@TT,

How about this:
Let this menu be at the top, and add one more below the header image ?
Change the colors, and add this one:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Divya Sai said...

@ Kari,

Even you can try this one:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Simply modify the colors of the widget tabs, so as to match your blog !

Regards
Sai

Anonymous said...

ha ha here I am again... ok, I have all of the items filled with links and when you go to the drop down then to the second drop down on that menu it disappears before you can click on any of the links. Is this something I've done wrong or is it a glitch somewhere? Can you advise?

kari

Divya Sai said...

Okay.....actually even some other bloggers have reported this kinda error, hmmm so again I can advice the same option to you, if possible try the other menu (link given in the previous comment)

Anonymous said...

Can ANYONE help me? I used my 'practice' blog to sort this menu and it looks great! The only problem is that when I put all the same information in my actual blog the text was no longer white, it is grey and difficult to read.

Why would the same code in two different (but very similar blogs) make it one colour in one and anohter colour in the other?

kari

Anonymous said...

Sigh... can anyone find a way to make the menu stay on top in firefox? Is there a way to have it always on top or absolute or something? I don't know enough (anything) about code to know how to do it myself but would love it if someone can find a way to make this menu work in firefox.

Miguel said...

Excellent! This is really great, man, thanks!

My doubt is about how can I change the color of the menu and the color of the font. I don't really get it.

Thanks in advance. ;)

Divya Sai said...

Hi Miguel,
You need to edit the .css file, before uploading it. Simply change the HTML hex codes.
On how to change the codes, you may read this post:
http://bloggerstop.net/2009/04/vertical-multi-level-drop-down-menu.html
(in this post there's no .css file, rather the code is open and need to be directly pasted in the template)

Regards
Sai

agrotis94 said...

thx man
http://sanides.blogspot.com

pawan fan said...

thanks a lot man

Ankit said...

how can I align menu bar at center ?

suealeen said...

I used it on my daughter's blog. It works fine! Thanks

Divya Sai said...

Happy for suealeen....you may remove the second folder too, if you want to show the tabs only in one line..

Red Gear said...

Is there any css script without using external files?

Divya Sai said...

You may copy the content of the css file and directly use it in the template, but then load on the template will be same....but don't worry blogs are supposed to be slightly heavier than websites !!!
It shows u love ur blog :)

!i! KSAK !i! said...

man i have put this code in a new test blog but the problem still exist check this out

http://test-blog-2000.blogspot.com/

plz man tell me some cure of it

Anonymous said...

every thing is fine. while scrolling it goes behind the google ads which is just below menu bar. what to do ?

!i! KSAK !i! said...

i have placed ur multi-menu and it works awesome. can i change the color of the menu and make it smooth slide?

Sai said...

Yes dude, you can certainly change the color of the menu;
change the color code in .css file, and then upload it to hotlinkfiles or sigmirror.

!i! KSAK !i! said...

i more thing. is their any way to make the drop menu working when the page is loading. because currently the sub menu are not appearing during loading. it appears when it stops loading. i want it to working during the page loading.

Shankar said...

I already have the menu with my template..but i have to customize it in my own way..what to do?

Divya Sai said...

@ KSAK
It will only work when the .js and .css files load completely that means only when the page has loaded completely, but u don't have to worry in this, coz visitors usually notice these links once the page has loaded properly and they are somewhat not satisfied with the current page, in that case they look for new links in the page, where this drop down menu will be useful for them.

Divya Sai said...

Hi Shankar,

This is the code in your blog, through which you can modify the appearance of the menu.
First download and save the template, then try some experiments in the code:

/* header tabs */
#tabs{
font-size:14px;
width: 100%;
line-height:normal;
position: absolute;
bottom: 0;
left: 0;
top: 158px;
}
#tabs ul{
list-style:none;
}
#tabs li{
display:inline;
float: left;
position: relative;
margin: 0;
padding: 0;
}
#tabs a {
float:left;
background:url(http://2.bp.blogspot.com/_hcF8ssiWKd4/Se7B7puXK6I/AAAAAAAAAV0/ebaTe5djbMI/s1600/tab-left.png) no-repeat left top;
color:#0470a0;
padding-left:9px;
margin-right:3px;
text-decoration:none;
color:#cfcfcf;
cursor: pointer;
}
#tabs a span{
float:left;
display:block;
background:url(http://2.bp.blogspot.com/_hcF8ssiWKd4/Se7B7iU_vMI/AAAAAAAAAV8/_qM2VWLUkG8/s1600/tab-right.png) no-repeat right top;
height: 29px;
padding-right: 10px;
}
#tabs a span span{
display:block;
background:none;
height: auto;
padding: 4px 4px 0 4px;
}
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#cfcfcf;
}
#tabs a:hover{
background-position:0% -29px;
color:#fff;
}
#tabs a:hover span{
background-position:100% -29px;
color:#fff;
}
#tabs a.active, #tabs li.current_page_item a, #tabs li.current-cat a,
#tabs li.current_page_item a:hover, #tabs li.current-cat a:hover {
background-position:0% -58px;
color:#000;
}
#tabs a.active span, #tabs li.current_page_item a span, #tabs li.current-cat a span,
#tabs li.current_page_item a:hover span, #tabs li.current-cat a:hover span{
background-position:100% -58px;
color:#000;
}
/* sub-menus */
#tabs ul li{
float:left;
position:relative;
}
#tabs ul ul {
background:#eeeeef url(http://3.bp.blogspot.com/_hcF8ssiWKd4/Se7B79MneuI/AAAAAAAAAWE/4zIIgq7a3mc/s1600/tab-subnav.png) repeat-x left top;
position:absolute;
display:none;
width:200px;
top:29px;
left: 0;
margin: 0;
padding: 4px 0;
line-height: 100%;
border-left: 1px solid #999;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
}
#tabs ul ul ul{
border: 1px solid #999;
-moz-border-radius: 4px;
}
#tabs ul a.active ul, #tabs ul li.current_page_item ul, #tabs ul li.current-cat ul{
background: #fff;
}
#tabs ul.active ul ul, #tabs ul li.current_page_item ul ul, #tabs ul li.current-cat ul ul{
border: 1px solid #666666 !important;
}
#tabs ul li ul a{
width:180px;
height:auto;
float:left;
background: none;
margin: 0;
padding: 4px 10px;
color: #000;
font-weight: normal;
line-height: 125%;
}
#tabs ul li ul a span, #tabs ul li ul a span span{
margin: 0;
padding: 0;
height: auto;
float: none;
}
#tabs ul ul a:hover, #tabs ul ul a:hover,
#tabs ul a.active ul a:hover, #tabs ul li.current_page_item ul a:hover, #tabs ul li.current-cat ul a:hover{
color:#fff;
background:#09c6eb url(http://2.bp.blogspot.com/_hcF8ssiWKd4/Se7B75H-zEI/AAAAAAAAAWM/nkeriDjwh7s/s1600/tab-subnav-active.gif) repeat-x left top;
}
#tabs ul li ul a span, #tabs ul li ul a span{
background: none;
}
#tabs ul ul ul{
top:auto;
}
#tabs ul li ul ul {
left:195px;
top: 4px;
}
#tabs ul li:hover ul ul, #tabs ul li:hover ul ul ul, #tabs ul li:hover ul ul ul ul{
display:none;
}
#tabs ul li:hover ul, #tabs ul li li:hover ul, #tabs ul li li li:hover ul, #tabs ul li li li li:hover ul{
display:block;
}

Shankar said...

thnx sai..

Anonymous said...

Hi Divya Sai,
I have followed the instruction and has managed to have the menu on my blog but unfortunately the folder menu portion is not working where it failed to show the sub items. Can you please advise how to correct it?
Appreciate your earliest reply.

Have a nice :) day.

My condolence to the King Of Pop. May Allah bless upon his soul.

Malam.Syukur@gmail.com

Divya Sai said...

Your blog's address dude ?

Chickens123 said...

cool.. thanks for sharing coyyyyy

Ravenous Couple said...

Hi Sai,
Thank you so much for this tutorial. I got it to work on my test page:

http://foodnostalgia.blogspot.com/

But I would like to center the menu before putting it on my current site,

http://ravenouscouple.blogspot.com/

Thank you.

Divya Sai said...

Hello Ravenous

To center the menu, you just have to drag the widget immediately above the "Blog Posts" widget and NOT immediately below the "Header" in the "Layout->Page Elements" page.

In case you have doubts feel free to ask again :)

Divya Sai said...

@ Ravenous Couple

Chk out this screenshot, notice the three highlighted widgets, that is the location, where you have to drag the new widget and not IMMEDIATELY below the Header !

http://i39.tinypic.com/2ijgsn5.jpg

Ravenous Couple said...

Sai,

thanks...it works!

smallfreeanime.blogspot.com said...

Hi! Thank you for sharing knowledge.
But I ha a problem. Would you show me how to remove all the drop down arrow? I need to remove them.
Thanks in advance.

Divya Sai said...

Hello,

Edit the javascript file (slidemenu_horiz.js) and remove the links to the images...that's it !

Then upload it and use it (Direct Link) in the code.

smallfreeanime.blogspot.com said...

Thanks Divya but there is still a space after the words, and I want to remove it too.
And how to fix the drop menu when it shows it is hidden by the image under it (the sliding image under).
Can you take a look at it?
http://smallfreeanime.blogspot.com

VIJI RAJKUMAR said...

Gr8 blog Sai

I was trying to a make a multi level drop down menu,the above blog was very helpful, is there a way to change the top levels width.?

Admin @ BloggerStop.Net said...

Hello Rajkumar,

The width is adjusted automatically acc. to the no. of words/letters.

sobriquetz said...

Hey!
i tried using the simple drop down menu but it did not work for me, and now i'm trying the multi level drop down menu

the drop down menu still appears at the back of my contents! :(

pls help!
i'm currently still on the classic template of blogger actually.

my test blog address:
http://tttemplate.blogspot.com/

Swagat said...

Hey its not working :(. I uploaded the files to mediafire.com

1.http://www.mediafire.com/file/jqmz2kjjznw/slidemenu_horiz.css

2.http://www.mediafire.com/file/mmy5yzojhrn/slidemenu_horiz.js

A list is appearing in my blog.
NO css is there. Plz help

http://tech-feast.blogspot.com/

Divya Sai said...

Dude Swagat, mediafire doesn't support direct/hot linking, that is why I have clearly mentioned which sites to use in the tutorial above...

Kyle Hemker said...

Ok, if I could say thank you enough for this awesome tip with blogger I would try, but I might take up quite a few words on this page.  I have been looking for this for a while, and I'm glad I finally stumbled on your page.

Thanks

ahmed said...

its not working
see mine
http://annoula1984.blogspot.com
NOT WoRKING

Jeff Rader said...

I love this, but I put my files on hotlinkfiles... they seem to be having problems and now my menu isn't working.

Divya Sai said...

Yes Jeff, HLF was having some problem for the last two days. For days like these switch to either mydatanest.com or sigmirror.com to host your files...

LST Team said...
This comment has been removed by the author.
LST Team said...

Hey Anybody pls HELP ME...! As i have tried the above code as it used to be.. but still im not getting the menu in the correct order.

This is my blog... plz check it & help me...!
http://latestsongstelugu.blogspot.com

Thanks in Advance &
Waiting 4UR relpy..!

Divya Sai said...

The css file you are using is not correct. Go to the linked page and then save it from there. Then upload it it to hotlinkfiles.

LST Team said...

Thank You Divya Sai 4UR reply! I didnt except that the reply will be coming bcoz, as i have seen so many formuns etc.... no reply will be there K any way Thank You 4 replying!

But i still have a doubt, as you were telling to save it from the linked page.. what is the linked page..?
I didnt under stand that..? Can you plz make it clear so that..

My Blog URL:
http://latestsongstelugu.blogspot.com

Thank You Divya Sai &
Waiting 4UR Reply..!

Divya Sai said...

@LST Team,
Plz visit this page:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

there right click on the red colored link (jqueryslidemenu.css) and save it.

Then upload that file to hotlinkfiles.com

LST Team said...
This comment has been removed by the author.
LST Team said...

Thank You Divya Sai..!

Really ur post hepled my blog look more superb with that Sliding Menu.It was really working..!

Just 1c check my Menu.. so that you can find a small space/gap left at the end of the Menu after "Trail". I tried 2 insert some more words 2 previous fields, but then the menu is extending 2 next line. can you plz.. help me over that.

W8ING 4UR Reply
Thank You in advance
Divya Sai

Sai @ Blogger Widgets said...

@ LST Team,

Before you upload the .css file, you have to make some change in it, you'll find this code in the beginning:


.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}


So, delete this line in that code:
width: 100%;

ImSp said...

Great menu, awesome tutorial!
Everything is working just fine, except that in the menu areas that actually scroll down, there is a box, a tiny square....an image. I just dont know how to get rid of it. The rest of the menu bar is just great. Please help!

ImSp said...

Got it! Someone had the same question. Thanks anyways! And thanks again for the menu! peace!

Onsoft Technologies said...

Awesome Widget!I just implement it here:htt://linkedinsap.blogspot.com, and Its working very well

With this grate widget, i am able to provide more job information to my visitors.

Thanks
linkedinsap.blogspot.com

Mark said...

This article is very similar to my, but I used Superfish menu.
Take a look to : jQuery drop down menu on blogger

Abijah Gupta said...

This is awesome!

works great on my blog abijahangelicdelight.blogspot.com

thnx a ton!
-Abijah

Lee said...

I have a more complex issue. Please look at this site:
http://mulldrifting.blogspot.com/search/label/Zendikar%20T2

I am using Chrome.

As you can see, my dropdown menu comes out partially transparent; in other words, not fully opaque. Then, when I try to scroll down a menu and click on an item in the submenu, the whole menu automatically closes up.

My mouse won't go below the second item in each menu. There is something wrong with the hover function here? Please hlep.

Lee said...

Nevermind I found a fix.

Divya Sai said...

Hey Lee,
I was going to suggest you the same fix, hide that box saying "showing all posts with "X" label" Anyways glad you got it already.

Regards
Sai

Hotels & Resort said...

Hey there! Your codes helped me alot. Thanks!

But somehow it can't be viewed using IE. I've read one of the comments above that said the menu will be in vertical instead. I've tried viewing in 3 different PCs in IE, all looked the same. But somehow it looks perfect in mozilla firefox. Why is that?

Please please help me. It was such a headache putting all the codes together.

thanks!

Divya Sai said...

@Hotels & Resorts

I have checked your blog in both IE and Firefox. It's working prefectly. If you want I can show you the screenshots.

regards
Sai

muhammad said...

=))

sariyanta said...

hi i am newbie... this widget is just what i want... but i have some trouble.. :(
the widget is shown only as a text
what did i do wrong?
please help me
this is my blog: http://greatdesignbar.blogspot.com/

sariyanta said...

hi i am newbie... this widget is just what i want... but i have some trouble.. :(
the widget is shown only as a text
what did i do wrong?
please help me
this is my blog: http://greatdesignbar.blogspot.com/

Divya Sai said...

By mistake you have used the same file (slidemenu_horiz.js) as your .css and .js file.

So replace the link in this line:
<link href='http://www.mydatanest.com/files/sariyanta/57416_xr5lk/slidemenu_horiz.css' rel='stylesheet' type='text/css'/>

with a link to the correct .css file.

Jon Sanders said...

Got mine working very well, but how do you change the sublevel background to differ from the main level? I know it's something in the css file. I'm using a dark image and it goes throughout each level. I'd like a light image for the background of the sublevels, including the obvious switch to dark text. Thanks.

my site: http://www.xibasketball.com/

Divya Sai said...

Hey Jon, just had a visit to your blog. Yeah it's the css file that has to be edited. And as you are already doing it well, so I think all's perfect with your widget.

Cheers!

Jayme said...

Mine doesn't appear to be working in IE.

http://www.tatertwins.com

Jon Sanders said...
This comment has been removed by the author.
Jon Sanders said...

I still haven't changed the background. But after looking thru everyone else who's installed this particular drop down menu, I don't think it can be done bcuz it has not been done. I've looked thru the codes of menus that do have different backgrounds for their sublevels, and the set up is a bit different. It's ok tho, it's a great menu and thanks for making it.

Thanks for paying my comment some mind as well. Cheers!

Divya Sai said...

@Jayme,
It is working in IE, may be some problem with your browser, anyways here's the screenshot:
http://i46.tinypic.com/2418nex.png
You may ask your friends to check it for you,

Divya Sai said...

@Jon, It is of course possible to change the background... in the css file, find this code:

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

then add a background code like this: (BUT REMEBER TO PUT this along with the code: !important)

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
background: url(SOME_IMAGE_ADDRESS) !important;
}

And save it.

Jit Ghosh said...

I read your post and did the processes you have mentioned to make multilevel drop down menu in blogspot. My blog address is http://ghoshjit.blogspot.com it works fine in Firefox but is showing vertical menu in IE6, IE7, and IE8 also. Even I checked it in my friends computer, but I have the same problem. Please help

Divya Sai said...

@Jit,

It's not a problem with browsers, you can see the menu working because you are logged in to your mydatanest.com account in your Firefox browser and not in IEs.

There's some temporary problem in MyDataNest, and so files are accessible only to the person who's hosting them.

Use sigmirror.com instead of mydatanest to host files temporarily.

Jon Sanders said...

I have no clue why that worked after all the variations of just that everywhere I did beforehand, but it worked... and I once again thank you. You're the best. Actually Jesus, then Kobe Bryant, then you.

Divya Sai said...

Thanks Jon :)

Jon Sanders said...

No problem. I'm just glad that geniuses like you exist. Everything you said has worked beautifully except for the hover state of the submenu is only following the main tabs' text color scheme, not its background. Is there a way to change the hover state for the submenu or at least keep it constant with the main tab? display:block, none??? I dunno.


/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 11px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid black;
background: url(http://i40.photobucket.com/albums/e250/jonsan32/brushed-steel.jpg) !important;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #000000;
color: yellow;
}

--------------------
full css is located @ http://s2.sigmirror.com/files/58653_u34cg/slidemenu_hori.css


And if you don't answer or can't for a long while, I'll completely understand. I tried in vain to figure it out myself for so long as to avoid coming back here :-)

Divya Sai said...

So, what exactly is your "hover" requirement, that is, exact BG color and text color? you have to edit this code:

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #000000;
color: yellow;
}


mainly change these two lines:

background: #660000;
color: black;


set background to any other color, say black BG with yellow text and add !important to it.

background: black !important;
color: yellow !important;

Gagga.t said...

Thanks
Divya Sai
You Rock.

Jon Sanders said...

perfect!

sedotaja said...

thanks

Rachel Weisz said...

Thanks you very much, very useful for me

随心所摄 said...

thanks for share!
It works fine in my blog!

http://seanshutter.blogspot.com/

kinjal said...

Nice blog.
Excellent blog.
its excellent
Really i loved read this blog.
Its highly informative. I would be visiting your blog hereafter regularly to gather valuable information.

You can also find interesting stuf here.

Kolkata Web Design and Search Engine Optimization

kinjal said...

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif

Nice blog. I liked it.
Excellent blog. I liked it.
Gorgeous blog. I liked it.
its excellent
Really i loved read this blog.
Its highly informative. I would be visiting your blog hereafter regularly to gather valuable information.

You can also find interesting stuf here.

Kolkata Web Design and Search Engine Optimization

Shieroell said...
This comment has been removed by the author.
Shieroell said...

can you pls help me with this.. it works on my google chrome, but in firefox, safari, and ie its all in vertical.. and it only seemed to have work only in my pc, i tried it on my big bro's laptop and it doesn't work.. pls help me out i really like this

http://shieroell.blogspot.com

Jon Rogers said...

Good stuff. I appreciate the CSS and Javascript snippets. It really helped to make the interactive menu a reality for me.

I do, however, have one major issue. There are certain "widgets" that the drop-down menu items will always go behind (thus not visible and not clickable). On my blog, notably, the Twitter widget and the Google Ads widget behave in this way. I moved them down to try to avoid the problem, but the sub-menus re-discover the issue as they dip down low enough.

Is there a way to make the menu items exhibit an "always on top" property?

Any help would be greatly appreciated.

FYI: the blog I'm referring to is at http://www.blog.rogerspoll.com

Sai - BloggerStop.Net said...

Not sure, but lets see if this works...

Change this code:

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->


to this:

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
#myslidemenu {
z-index:100;
}
</style>
<![endif]-->

Srividya said...

Great stuff. Thanks for the codes

Anonymous said...

I really need help. thanks.
it doesn't work for me. i tried the rest of the multi level drop down. and none of them seems to work on my blog.
thanks

http://xijustwannatestx.blogspot.com/

sravani choudary said...

hey,i'm not able to understand that, what is the "http://" to be written for folder's,as it is just a heading and doesn't contain any content but,used to scroll down the items present in it,
reply me as early as possible n only thank you for giving such a solution to create multi-level drop-down menu

_ said...

Cant get this to work. Think i followed it perfectly apart from....

I downloaded jqueryslidemenu.css as I could not find the one mentioned above on the poge. Is this causing the problem?

Here whats happened :( the folders don't drop down and the grey colour continues under the widget i believe

HELP anyone

THanks

www.morris-media.blogspot.com

Divya Sai said...

I think there's some code conflict in your template (with the menu widget that is already present in your blog - Home Freelance work etc.)
Use this widget instead:
A Simple Drop-Down Menu Using Jquery

Martin said...

Great tutorial and excellent resource.

To those who are having problems changing the colors of the tabs / text and the hover color, I managed (after a little perseverence) to change all of the colors to my exact requirements. I even managed to change the font from the rather dull Verdana to to my preferred font of Georgia.

It really does work - and you can see the result here - while the website itself is currently not complete, you can at least see the drop down menu working in all its (colourful) glory...

Many thanks Mr Sai!

PS - perhaps a further tutorial explaining how to customise the source code would be helpful - it was only after a good deal of trial and error (more error than trial!) that I managed to work out how to configure the various code snippets - the uls, /li's etc etc so that the code worked perfectly....

Divya Sai said...

Thanks for sharing your experience Martin,
And you did a great job there.
Actually in every code, where a css file is involved and is free to edit, then you can usually change colors/fonts etc. I haven't mentioned the steps here to edit the file as it will make the tutorial more longer and also a little complicated. But of course you and all others are always welcome to comment/mail me in case you want to take these widgets to the next level.
And in case, anyone is looking for a simple (to add) multi-level drop down widget, with the ability to change colors easily, then s/he can try this widget:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html

Oree Azar said...

hey i want to ask... that when i open these files for download... it opens a page including many source files in that page... what to do?? how can i download... or if i copy paste then with which name... can anyone tell me the whole procedure?? plzzzzzz

PBS said...

Check my menu as well

7ths said...

thanks for your info, but can I know how to put the menu below my header instead of above my post?

as I tested on my blog @http://7thsboutique.blogspot.com/

as my sidebar will affect the length of the menu if put above the post..

hope to hear from you soon

Sai - Blogger Help said...

You just have to drag the widget either above the posts area or below the header in your "layout" page. And then save the layout.

BTW, I just have chked your blog, and found the widget below your header as you wanted it to be, so I hope you have already fixed it.

Regards

suhaidi said...

Your menu works great (thank you!) but I'm having a problem, which is that the drop down parts of the menu fall underneath the top post, so they can't be seen. How do I get it to drop down OVER the post so it can be seen and clicked on?
http://vtaminc.blogspot.com

suhaidi said...

fyi, i alreday done as comment no 172, thanks in advance

Sai - Blogger Widgets said...

@Suhaidi

Please try this widget:
http://bloggerstop.net/2009/03/new-multi-level-drop-down-menu.html

suhaidi said...
This comment has been removed by the author.
suhaidi said...

thanks sai, its work great!

Joe said...

Awesome widget, I've got it working but I can NOT seem to get it centered. I've placed it in the correct spot on the Layout page (directly above the blog posts) but it still won't center. Any ideas?

Cheers.

Admin said...

Thanx for the help. Nice post.

Dieu Vinh Tuan said...

how to new page for every drop-down menu, when i click menu appear new page in blogspot. I can post in every menu different. How create new page for every menu.........! Thank

gustosa giveaways said...

I already have a template on my blog (http://gustosa-giveaways.blogspot.com/) but I wanted to have a drop down menu on BLOGROLL.
What will I do?
please guide me. thanks

आनन्‍द पाण्‍डेय said...

divya ji
please help me
I am not being able to do all these things because of less english knowledge ... can you please make me understand these all in hindi ? or can you please set my blog manually ..

I'm the owner of a sanskrit {sanskrit-jeevan.blogspot.com} blog.. I want to make it more comfortable for the readers .. so please help me if you have some time ....
for ur suggestion please contact me via email at pandey.aaanand@gmail.com

thanx

nivre said...

Thank you for this template. I have a problem with code I'm working with. I'm trying to build a vertical menu but there is empty space at the top of the submenu list. How can I modify my code to keep the same look but make it work? I have included a sample pic. Thanks.

Sample Pic.

CODE:

/* Main Code */

#sddm
{ margin: 0;
padding: 0;
cursor: default;
list-style: none;
width: 100px;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
display:block;
height: 100%;
width: 100%;
list-style: none;
position:relative; /* MARKER1 */
float: left;
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 90px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none;}

#sddm li a:hover
{ background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
left: 110px;
z-index: 90;
top: 0; /* Will not work if line with MARKER1 does not contain position relative */
background: #EAEBD8;
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
top: 0;
padding: 5px 10px;
width: auto;
height:auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#sddm div a:hover
{ background: #49A3FF;
color: #FFF;}

#sddm li:hover div{
display: block; /* Make sure the submenu is displayed as blocks as well. */}

Shaima said...

Hi Divya: I have the same problem as user Lee told you, that the hover function is not working over the box that says "showing all posts with "X" label" which appears at the top of label pages. I see you recomended him to hide that box saying "showing all posts with "X" label". How can I do that? I think that will resolve the problem but I don´t know how to hide it.
Thanks a lot

Sai - Blogger Help said...

Hi Shaima,

Follow this tutorial to hide that box:
http://simple-blogger-tips.blogspot.com/2009/06/remove-showing-post-with-labelshow-all.html

Regards

Jibun said...

Firstly re-thank you for this useful post. This brings back memories.... I'm the owner of http://smallfreeanime.blogspot.com. Back then when I was commenting on this post, I didn't know any single knowledge about html/css/javascript/blogspot and such. Trying to add a dropdown menu ? Huh? Now I understand it. Guess from who? From this site. Now I'm really grateful Divya Sai, you even answered my fool question, so funny that I'm laughing. Anyway, this will turn into a spam if I continue.
Again thanks Divya Sai.
See you.

Sai - Blogger Widgets said...

Glad to have you back buddy :)
Yeah I can understand, how it looks like, when we see our comments left months or years back :D
I have many such comments mine too spread across the net :)

Jibun said...

Hehe Thanks. :)
I see you're still as vigorous as you were before, fast replying at people's comments.
Wish you success. :)

Sai - Blogger Widgets said...

Thank you :)
Wish you success too...

«Oldest ‹Older   1 – 200 of 216   Newer› Newest»
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy