Friday, May 16, 2014

How to create drop down box for blog/How to add drop down menu form for blogger/ Detailed explanation with step by step pictures/BASIC TIPS FOR FOOD BLOGGERS

HOW TO CREATE  DROP DOWN MENU BOXES FOR BLOG

Hi..every one...Hope you all doing good..I know Iam not updating any posts here in this blog.Even though I have few important posts to share, with shortage time Iam not able to concentrate on this space.My food blog MAHASLOVELYHOME ,my home,hubby and kids,specially MAHADEV daily studies are grabbing my time.But,now seriously decided to work on this space and from now regularly will update the interesting posts for you all.



Today` post is about adding drop down box..It is a very useful widget for active bloggers,especially for food bloggers those who updates their space with huge recipes along with multiple labels.This widget helps to viewers to catch the recipe easily with just one click.If you have a good image recipe index it`s ok..Even along with that also you can add this in your blog.You can add number of  categories with this same html. Labels can name like, desserts,baking,egg free baking milk shakes etc..But every time along with recipe name and link you should change the category name in the above.To add this widget you may need around 30 minutes of your time.Seriously,Iam telling you all,it`s very useful one and gives more page views to your blog also.Try this and let me know If you have any doubts..Thank you..


Go to blogger.Sign in.Click on lay out.

Choose "add gadget"

In that select Html/Java script


In that copy this below code.
<form name="jump">
<select name="menu">
<option value="" />

<option value='URL link 1 here' > Name 1</option>

<option value='URL link 2 here' > Name 2</option>

<option value='URL link 3 here' > Name 3</option>

<option value='URL link 4 here' > Name 4</option>

<option value='URL link 5 here' > Name 5</option>

<option value='URL link 6 here' > Name 6</option>

</select>

<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

</form>

 value="" />


<form name="jump">
<select name-"menu">
<option value-" any name which you want"
option value='url link 1 here'> name 1</option>
option value='url link2 here'> name 2</option>
option value='url link 3 here'> name 3</option>
option value='url link 4 here'> name 4</option>
option value='url link 5here'> name 5</option>
option value='url link 6 here'> name 6</option>
</select>

<input type="button"
on click="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

</form>
PASTE CODE

Now it`s time to have have fun

If your are a food blogger,first decide about label.I mean category-rice recipes/curries/sweets etc.

In the above third line-   <option value="" />  
after this write heading.For example here i wrote   Mahas helpful tips .So,you can write  rice recipes/curries/sweets etc


Then start changing the links. "URL link 1 here" with recipe link. and Name 1 with recipe name.

{here I gave my food blog link as an example,but Originally I used my another blog links and names.So,don`t confuse}

For example, < option value= "http://www.mahaslovelyhome.com/2014/05/carrot-cilantro-riceleft-over-rice.html"> carrot cilantro rice</option>


Change all those with recipe names and links.FROM  (1-6)

If you want to add more links then repeat this line and replace recipe links and name <option value='URL link  7 here' > Name 7</option>

for example,If you want 5 more-add 5 more lines like this and replace links.

 you can give name in the box "title"


It looks like this when you view blog

See,how it looks/works...


You can see this below table for easy understood-this is my blog html
<form name="jump">
<select name="menu">
<option value="" /> Mahas helpful tips
<option value="http://mahastips.blogspot.com.br/2013/12/create-your-signature-nameautomatically.html#.U3ZLF8RDvaI" /> Create your signature name for blog
<option value="http://mahastips.blogspot.com.br/2013/12/add-social-media-follow-buttons-to.html#.U3ZLi8RDvaI" /> social media follow buttons for blog
<option value="http://mahastips.blogspot.com.br/2013/12/add-social-media-buttons-to-bloggerhow.html#.U3ZLssRDvaI" /> social media sharing buttons
<option value="http://mahastips.blogspot.com.br/2013/11/create-name-header-with-images-for-food.html#.U3ZL8cRDvaI" /> create name header with images
<option value="http://mahastips.blogspot.com.br/2013/10/how-to-edit-pictures-in-picasadecorate.html" /> learn editing pictures in picasa
<option value="http://mahastips.blogspot.com.br/2013/10/how-to-create-recipe-indexstep-wise.html#.U3ZMPcRDvaI" />create recipe index
</select>
<input type="button" onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO" />
</form>

Hope today`s post helps you all..Try this and please share your results with me..Thank you.......

Visit my food blog-MAHASLOVELYHOME and IT`S FACE BOOK PAGE

NEXT POST IS,HOW TO ADD SCROLLING IMAGES SLIDE SHOW WITH LINKS

UNTIL THEN BYE BYE..KEEP IN TOUCH WITH MY TWO BLOGS..THANK YOU

4 comments:

  1. Very useful ! BTW can't copy the code?

    ReplyDelete
    Replies
    1. Hi...I just now came to knw abt d reason n re corrected it..now u can copy d code happily.try it n let me knw d result...

      Delete
  2. wow dear this is looking awesome.. i will try this widget :P

    ReplyDelete

Thanks for visitng,Try If you feel it is helpful and you can share results..PLEASE!! Dont write any indecent comments..

Print Friendly and PDF

Printfriendly