RealcomBiz
Pin It

How To Add Drop Down Menu In New Blogger Template

Template editing have been so much difficult ever since blogger introduce new blogger template designer, especially picture window template and watermark, which have cause a great headache for most blogger newbies.
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.


How To Add Drop Down Menu To New Blogger Template
  • Go to your blogger dashboard
  • Click on "Design" > Edit HTML" > back up your template
  • Now find your tab/menu tag code, it will look very similar to the code below, you can scroll through your template until you find it
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}


Remove the comment quote (*/) from the top and add it the bottom of your tab tag like the example below.

/* Tabs
-----------------------------------------------
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

*/
  • Click "SAVE TEMPLATE" and that's all. you can reverse the case anytime. 
Now you can add any drop down menu to your navigation bar without any difficulties.Hope this tricks help? take few seconds to share and subscribe to receive our free posts update into your email.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

7 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Hi. I have three questions for my blogger blog:

    1) I've tried relocating the "*/" on the EDIT HTML>Tabs as indicated, but my pages on the lower part became affected. My desired format should look like the FANFICTION tab. Like in this picture:

    http://i.imgur.com/emRWj.png

    As you can see, the pages below are messed up when I relocated the */.

    2)I put sub pages in the FANFICTION tab and it's working, but only when I do the */ relocating thing. Anyway, my second problems is that when I need to go to subpage 1, I have to hover on it QUICKLY or else it disappears immediately. How do I remedy this?

    3)Below is what I'm planning to do, but as you can see, the separator on the FANFICTION tab is thicker. Is there a way I can make it thinner?

    http://i.imgur.com/U4EJ1.png

    This is the first time I've tried editing html and it works so far, aside from the problems above. I hope you can help me with it. This is my blog if you want to check it.

    http://hellionism.blogspot.com/

    Thank you.

    ReplyDelete
  2. Awesome widget! Keep it up..
    Bloggers are expecting this types of widget. Thanks.. :)

    ReplyDelete
  3. Extra help needed here. I have VideoZone Blogger Template (free). How can i add content to each page of the menu? I am new and willing to "fight" with the... unknown html things. Thanks!

    ReplyDelete
    Replies
    1. For tutorial on the adding pages to navigation menu, read this tutorial. if you are also interested in drop down menu, you can search for that using the search box at the navugation menu.

      Delete
    2. This is a great navigation menu, and it was easy to integrate into the site. But, after adding the navigation bar, I'm having issues adjusting the margin and width. What's the best to get the menu to expand across the full width of the blog?

      Delete
  4. I did this trick exactly but, still have the problem, the drop down menu doesn't drop down. pls help!
    This is the screenshot: http://prntscr.com/yapzp

    ReplyDelete
  5. HI..i created a drop down menu list on my blog using this link http://www.realcombiz.com/2012/07/create-simple-drop-down-menu-in-blogger.html, but as soon as i am doing it the upper line i.e. the pages gadget is getting thin... please help... my blog http://shiveshskitchen.blogspot.in/

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger