Its technical, Its bliss.... So here is Technical Bliss....

Drop down menu for blogger beta..

By Arpit On Thursday, December 14, 2006 At 8:51 PM




In my last post i have given a javascript code to create a drop down menu in blog/sites. The same code i've implemented in my blogroll.( See right side bar of this blog for working example of it)
But the problem with the code is that it can't be implemented in blogger beta, as blogger beta does not give the complette freedom to modify the template code.

So here is small code to create a drop down menu in blogger beta.

Step 1. Copy the code below in a note pad and replace link1.com, link2.com etc. with the destination page, and link1 and link2 with the name of the respective destination. If you want to insert more links just copy and paste
<option value="http://link1.com"/>link1<option value="http://link2.com"/>link2
before </select> tag.
after doing this your code is ready.

start copying the code below this line

<br/><select onchange="javascript:window.open(this.options[this.selectedIndex].value);"><option value=""/>My Blogroll<option value="http://technicalbliss.blogspot.com"/>Technical Bliss<option value="http://link1.com"/>link1<option value="http://link2.com"/>link2</select>

code copy ends above this line.

Step 2. Log on to your blogger beta account and in blog settings go to template tab and then click "Page element" tab

(Click images to enlarge them)

Now click "Add a page element" and then choose HTML/Javascript page element

Now enter the title what ever you like. (i've entered Blogs i read) and in palce of content add the code which you have copied and modified in the notepad in step 1.

Now click "save changes"
Now you can see a new element is added in your layout.( see the image below)

Now drag and drop the element ( i.e Blogs i read) where ever you want it to be. ( Like i've put it below my blog archive)



Click "save" button and work is done.
your drop down menu will look like this.


If you want to see the working example of the visit my other blog at beta blogger here.
If you think that this method has been helpful to you then plz link my blog on your blog. (Or place my link in you blogroll).
If you have any problem, feel free to ask me...

Related topic(s):
Create drop down menu in you blog/website


Labels:




>> Add your comments | Add to Technorati | Suscribe to feed | Skip to the Top <<






 
Anonymous satga Says:

you have very low alexa ranking .....Get high alexa ranks go to this blog.......

 
 
Anonymous satga Says:

just go to http://www.labnol.net

 
 
Blogger ATUL DOGRA Says:

thanx arpit beta code worked

 
 
Anonymous Anonymous Says:

Thanks ! This is quite useful.. specially for non-IT person like me.

 
 
Blogger TBTAM Says:

Thanks! I linked to you on my blog.

 
 
Blogger Tanakwagu Says:

this trick help me out. thanks a lot
i always remember this

 
 
Blogger Novice Blogger Says:

hi! i find this post very helpful. thanks a lot!

 
 
Blogger sundaelicious Says:

Great! I find what I want here! Thanks for the information. I've linked you to my site.

 
 
Anonymous Paolo Says:

What if I want to specify the width? Is it possible to change to a smaller font?

 
 
Blogger Avinash Says:

hey tanx a lot. d code was very useful. i ve blogrolled u man. hope u reciprocate.

Visit my blog http://tvavinash.blogspot.com

 
 
Blogger Emily Says:

I tried 3 other 'helpful' blogs and your blog was the only one that was easy enough for a novice to understand. My drop down menu looks cool. Thanks.

 
 
Anonymous Arpit Says:

Well Emily..
Am happy it helped you.

 
 
Blogger D. Renee Bagby Says:

Extremely helpful and really easy to implement and use. Thanks alot!!

 
 
Anonymous Anonymous Says:

good work.......... a very nice article.........
i have implemented on

http://freesharestip.blogspot.com
http://freehackingsoftwares.blogspot.com

 
 
Blogger ecgta3 Says:

how can i open the link within the same window

window.open opens a new window,

if you have an answer please email me at ecgta3@yahoo.com or drop by kapeepcity.tk

 
 
Blogger Learn More Says:

Hi

Thanks for the tip, nice one. I put the drop down menu on my blog http"//is-this-what-you-want-.blogspot.com, also I added you to my friends list, could you add me pls.

 
 
Blogger LadyJava Says:

Hi I love this hack but can you tell me how I make the box smaller like the one you have here. One of my links have a very long name and the box overflow to outside my border.

Thanks ever so much :)

 
 
Blogger Lara Says:

i'm with lady java - how can i make it less wide? thanks!

 
 
Anonymous Arpit Says:

Hello Lady Java and Lara.
The best way to decrease the width of drop down menu is to shorten the name of link. This will prevent the box outflow.

 
 
Anonymous My Wok Life Says:

Thanks for your VERY clear guides. I added mine. Thanks a billion! You are the best!

 
 
Blogger DirtDigger (Tessa) Says:

Hi,

I have longer links and i see that it makes the box wider- shortening the name will not work for me- i looked at the code and didn't see any dimensions- could a size be put in the code so we can alter it to fit our needs? Thanks

 
 
Blogger Kavitha Says:

ur tips were too clear n helpful...bt i hav one query...hw can i open the contents in the same page..waitin for ur reply

 
 
Blogger محمد Says:

Hello,
Can you please help find a way to create the same drop down menu but for videos.
As you can see on my blog, I have different videos from youtube but I want to ahve all of them on 1 side but hidden. The reader has to use the drop down menu to select the video.

http://marocliberte.blogspot.com

Thanks

 
 
 
Blogger PRSOLUTIONS08 Says:

thans for ur valuable information..............do visit http://www.prsolutions08.blogspot.com/ n plz make a review of our blog.........once again tans a lot

 
 
Blogger Raine Says:

How come that your code in:
My Blogroll
part also clicks to open another link? it is supposed to be a title w/c cannot be clicked right?

 
 
Blogger Blake_Parker Says:

Thanks, could you tell me how to make it so the menu opens the link in the SAME window? Thanks!

 


Looking for Something Else




Technical Bliss is now MeetArpit.com



Email Subscription


    Whenever this blog is updated, you will get it in your mail box. Your email id is completely safe.

    Enter your email address:



    Add this blog to your technorati favorite.
    Add to Technorati Favorites

Previous Posts



My Reader's Community



Feed and Bookmarks

My Blogroll


Credits


    BLOGGER
    Original template design by Arcsin
    pingoat_11.gif



More Me

Blog Poll



© 2007 Technical Bliss | About Us

Disclamer:
All the tricks, tips and hacks provided on this blog are correct up our knowledge. We dont take any legal or moral responsibilty of the damage arising due to use of information provided here.


^Back to Top of this Page^



Creative Commons License
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.