In today's Blogger tutorial i show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog. If you want to add lots of links to your blogger blog but are worried about the amount of space this will take up on your blog this will take yup on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list.

If you want to add Drop Down Menu by replacing the Home Pages then click below link for adding CSS Drop Down with amazing effect with Customization.

Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger

How to Add a drop down menu widget to Blogger:
Adding a drop down menu to capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic
computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:

Log in to Blogger if not already logged in.
 Navigate from the Dashboard to Layout > Page Elements.

Click on Add a Gadget in the sidebar or other location if you wish:
Select a HTML/ Javascript gadget from the list of gadget.

Paste the following code into the content box of the widget:

<from><selcet name="menu"
onchange="window.open(this.options[this.selectedindex].value,'_blank')"
size=1 name=menu>
<option>- Your Menu Title
-</option>
\
<!--Change the following links to your own -->

<option value="http://URL of link1"> Link1</option>
<option value="http://URL of link2"> Link2</option>
<option value="http://URL of link3"> Link3</option>

                  Like

<option vaule="http://trickofblogging.blogspot.com"> Trick Of Blogging </option>
</select></form> 


Replace _Blank as Follows:

To have a new window open leave the same.
To have the new page appear in the same window replace _self

Replace - Your Menu Title with a title of your own.

For each instance of the option values highlighted in read substitute your own links and links names.


Click Save:
Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes.

Click view Blog to admire the new drop down menu in the sidebar of your Blog.

In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger Blog.

Post a Comment

  1. very nice post dude keep it up.....

    ReplyDelete
  2. How can you regulate the width of the dropdown menu. It seems that it is dictated by the width of your linked items. I tried adding width="600" but it didn't seem to do anything. Related to this, can you have multi-line entries? For example, for Link 1 I want it to be displayed on two lines rather than one long line.

    ReplyDelete
  3. Just want to say your article is as astonishing.
    The clarity in your post is just great and i can assume you're an expert on this subject. Well with your permission let me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please continue the gratifying work.

    ReplyDelete
  4. A little help please. How do you change the text size and color for the 'links'?

    ReplyDelete
    Replies
    1. Hello Mac.

      For this you can make new one with other tutorial which i write in comming days.

      Thanks for Comment.

      Delete
    2. Thanks for your reply and apologies for my late response.
      I'll check back in the next few days.
      Thanks again.
      Mac

      Delete
    3. Ok Mac and thanks for coming again. Take care.

      Regards,
      Umair Noor.

      Delete
  5. As a way of saying thanks for your drop-down menu, please be advised your site is now included; “Blogging Tips And Tricks” on my Blog.

    Also, and this may already be included on your site but, just in case, you may be interested in a little insert that will open a link to a video in a full browser window.

    Just add '_popup' between ‘watch’ and the ’?’ as below.

    ....http://www.youtube.com/watch?v=....

    Change to;

    ....http://www.youtube.com/watch_popup?v=......

    Best regards,

    Mac

    ReplyDelete
    Replies
    1. Thanks Mac for Comment again. I like your tips and comment. But i can understand your first two lines please tell me again. (As a way of saying thanks for your drop-down menu, please be advised your site is now included; “Blogging Tips And Tricks” on my Blog) what is mean.

      Regards,
      Umair Noor

      Delete
  6. Sorry for the confusion, I like your drop-down menu and find it very useful so I have added a link to your site in my new drop-down menu. The menu is titled "Stuff You May Like" and the link to your site is the second one down.
    http://foggy-mirror.blogspot.co.uk/
    Hope this helps. Mac

    ReplyDelete
  7. Hi, I've applied this to my blog sometime ago & it was working fine until recently. The drop down menu in my blog at Luxury Haven just refused to open in Chrome, but it's working on IE8. Could you kindly advise? Much thanks!

    ReplyDelete
  8. Your blog is very nice. Thanks you for sharing this information tips. Your blog is really helpful for update himself who have unclaimed property or money

    ReplyDelete
  9. Your blog is really great. The point is very use full for all about money. I always follow your blogs.

    ReplyDelete

Thanks For Comment This Blog Post. Like It And Subscribe It.

 
Top