How to add Dropdown menu in blogger or blogspot

Drop Down menu
Here is a collection of Horizontal CSS Drop down menus, adding drop down menus in blogger can benefit your readers to find out the intended Posts of the blog with ease. There is nothing like widget for blogger menus, you suppose to add the menu with your own. To add drop down menu in blogger you need is just a little bit of CSS and HTML code and put that code at the right place in your blog and done. We have a list of Horizontal CSS Drop down Menus for Blogspot Blogs, you need to choose the menu and add the code to your blog.
so lets start now introducing the menus one bye one, whichever you like just copy code and paste the code, you can also customize the menus online and then copy the code. Just click on DEMO to see the result.

1. Massive Blue Drop Down menuDemo | Download Source
2. Sunrise GlossDemo | Download Source
3. Blue Dawn Drop DownDemo | Download Source
4. Blue Center Drop BarDemo | Download Source
5. Black Center Drop BarDemo | Download Source
6. Blue Impression Drop Down MenuDemo | Download Source
7. Green Impression Drop Down MenuDemo | Download Source
8. Sunrise GlossDemo | Download Source
9. Blue Tabbed Drop DownDemo | Download Source
10. Yellow Tabbed Drop Down MenuDemo | Download Source
11. Tabbed Grey Drop DownDemo | Download Source
12. Red Tabbed Drop DownDemo | Download Source
13. Black Tabbed Drop DownDemo | Download Source
14. Orange Tabbed Drop DownDemo | Download Source
15. Simple RedDemo | Download Source
16. Simple BlackDemo | Download Source
17. Simple BlueDemo | Download Source
18. Simple GreenDemo | Download Source
Before Going ahead you should have now three Things.
1) HTML File - Contains the code of the menu
2) Images folder - Contains Images used in menu
3) CSS file - Contains Style used in menu
Now After Choosing the Menu follow the steps given below to add the menu in Blogger.






Step 1. Go to your blogger dashboard and select the blog in which you want to add drop down menu.
Step 2. Navigate to the Design > Page Elements.

Css deopdown menu
Step 3. Now choose ADD GADGET
Css deopdown menu
Step 4. Select HTML/Javascript
Css deopdown menu
Step.5 Copy the code of the menu.(Downloaded file contain code of menu in html file. Open the file with front page or any other utility. Now copy the code from <div> to </div>) see the picture
Css deopdown menu
Step6. Paste the code in HTML/Javascript that copied from html file
Css deopdown menu
Step7. Now click save
Step 8. Now Drag & Drop that Widget to the top of the Blog Posts Section and Done!.
Css deopdown menu
How to Add CSS for Menu:







  • On Your Dashboard, Click on Design (see below shown picture for further assistance)
Css deopdown menu
  • Now Click on HTML (see below shown picture for further assistance)
Css deopdown menu
  • Now Check the box of Expand Widget Templates (see below shown picture for assistance)
Css deopdown menu

Now find this code ]]><b:skin> and Put the CSS Code exactly(downloaded zip file contain a file name menu_style.css open the file and copy the entire code) Above the code. see the picture
Css deopdown menu

7 comments:

  1. it is not helpful..... i cannot access it .do u tell me where will i paste the code? java script?

    ReplyDelete
  2. @ hsdjfg

    Hello sir sorry for your disturbance.

    The post has been updated with clear details.

    ReplyDelete
  3. i wanted to know where will post css code
    mail me wahidur121@gmail.com
    don't mind

    ReplyDelete
  4. @ hsdjfg
    Hello sir A PDF has been sent to you.Please check out your mail inbox.
    Thanks

    ReplyDelete
  5. sir,
    my blog has not design option.what's the problem?

    ReplyDelete
  6. @ hsdjfg
    You are using old blogger account.
    Please login your blogger account with

    http://draft.blogger.com/

    You will get design option here.
    Thanks.

    ReplyDelete
  7. Visit My Blog and Click on the Adbrite/Infolinks Ads Please!!!www.rafsanchowdhury.blogspot.com

    ReplyDelete

Let us know, what you think about this blog