18 April 2013

Blogger Simple DropDown Menu

// // 15 comments
Blogger Simple DropDown Menu
Do your blog have large no. of posts with different category?Then you must need a dropdown menu for your blog.This wil surely make your blog's look more attractive as well as will make your blog easy navigation enabled blog.Visitors would love to stay on your blog. also due to this.You may already seen this on many blogs.It's contained css,so doesn't even affect much your blog loading speed too.So want one for your blog?Here we're going to make this happen for you.Just go through the below tutorial.


 Must Read Highlighted Author Comment System Blogger


Add Dropdown Menu on Blogger

  • log onto blogger dashboard > template> edit html 
  • now search [press ctrl+f] for  ]]></b:skin> code tag
  • now paste following code above   ]]></b:skin> tag


/*----- TTH Drop Down Menu ----*/ #tthnavbar { background: #2a2626; width: 100%; color: #FFF; margin: 0px; padding: 0; position: relative; border-top:0px solid #7f7777; height:35px; } #tthnav { margin: 0; padding: 0; } #tthnav ul { float: left; list-style: none; margin: 0; padding: 0; } #tthnav li { list-style: none; margin: 0; padding: 0; border-left:1px solid #333; border-right:1px solid #333; height:35px; } #tthnav li a, #tthnav li a:link, #tthnav li a:visited { color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; } #tthnav li a:hover, #tthnav li a:active { background: #6c6464; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 10px 12px; } #tthnav li { float: left; padding: 0; } #tthnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #tthnav li ul a { width: 140px; } #tthnav li ul ul { margin: -25px 0 0 161px; } #tthnav li:hover ul ul, #tthnav li:hover ul ul ul, #tthnav li.sfhover ul ul, #tthnav li.sfhover ul ul ul { left: -999em; } #tthnav li:hover ul, #tthnav li li:hover ul, #tthnav li li li:hover ul, #tthnav li.sfhover ul, #tthnav li li.sfhover ul, #tthnav li li li.sfhover ul { left: auto; } #tthnav li:hover, #tthnav li.sfhover { position: static; } #tthnav li li a, #tthnav li li a:link, #tthnav li li a:visited { background: #6c6464; width: 120px; color: #FFF; display: block; font:normal 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border-bottom:1px dotted #333; } #tthnav li li a:hover, #tthnav li li a:active { background: #2a2626; color: #FFF; display: block; margin: 0; padding: 9px 12px 10px 12px; text-decoration: none; }


  •  Now save the template
  • Move onto layout and add a gadget
  • select html/javascript and paste following code within it 


<div id='tthnavbar'> <ul id='tthnav'> <li> <a href='#'>Home</a> </li> <li> <a href='#'>Contact</a> </li> <li> <a href='#'>About</a> </li> <li> <a href='#'>Blogging</a> </li> <li> <a href='#'>Services</a> <ul> <li><a href='#'>Sub Page #1</a></li> <li><a href='#'>Sub Page #2</a></li> <li><a href='#'>Sub Page #3</a></li> <li><a href='#'>Sub Page #4</a></li> <li><a href='#'>Sub Page #5</a></li> </ul> </li> <li> <a href='#'>Create This ></a> </li> </ul> </div>


Customization

  • if you want to change menu colour change this  #2a2626
  • if you want to change colour of menu backgroun on mouse hover change this  #6c6464 
  • if you want to change dropdown colour change this  #6c6464
  • Lastly replace # with your menu link and names with your titles

Now save it and you're done.Hope you like it.Your comments are highly appreciated,so don't forget to share your view with us about this post.Stay with us through our rss feed.

Articles You May Like

15 comments: Leave Your Comments

  1. This would be helpful if I knew how to create my own template.. Thanks.. Maybe I will use this someday if I get into making my own templates for my blog..

    ReplyDelete
  2. You got helpful tips in there. Thanks!

    ReplyDelete
  3. Awesome Drop Down Menu And Nicely Explained :)

    ReplyDelete
  4. I've been trying to figure this out for the longest time. Thanks for sharing! :)

    ReplyDelete
  5. Yeah, this is a very helpful link! thanks for sharing, I can absolutely use this in my own website.. :D

    ReplyDelete
  6. Oohh I wanna try this on my blog. Thank you for this detailed info. Wish me luck! :)

    ReplyDelete
  7. how to change right and left sidebar backgroud color ,current color is light green ,I want to change this color bro thanks

    ReplyDelete
    Replies
    1. Ok will soon post an article on it.Just wait till then :)

      Delete
  8. I count not find this ]]> at all in my blog html codd. Could you please tell me more how to get? I am very new to blogger build and I have been trying to get this dropdown menu for a long but I always because I could not find the code even though I searched.

    Thanks you

    ReplyDelete
  9. It working perfectly but , the menu color not show.
    what will do-

    ReplyDelete
  10. Its working......thank!
    http://www.moreviews.net

    ReplyDelete