Follow Button
Dashboard Button
Back to top

Friday, June 5, 2015

Add Menu Bar with Drop Down Menus for Blogger


Today's tutorial i will teach you guys how to add drop down menus for blogger. This is an important feature for blog/eportfolio because it's not only improving the looks of your blog, but also it’s navigation. Thus, helping your readers to reach your web content more easily. By default blogger just provide a simple menu bar, so in this tutorial i'll show you how to have the same menu bar with drop down menus.

Add Drop Down Menu Bars for Blogger tutorial

dropdown menu bars tutorial for blogger

Step 1. Go to Blogger Dashboard > select your blog > go to Layout and click on Add a Gadget link.
            (choose add a gadget link below the header as we want our menu bars to be in that position)

blogger add a gadget below header

Step 2. When the popup window appears, scroll down and choose the HTML/JavaScript widget.

blogger html/javascript widget

Step 3. Copy the following code, Paste inside the empty box, and Replace it with all your links:

<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='PUT-HOME-LINK-HERE'>Home</a></li>
<li class="sub"><a href='PUT-CATEGORY-ONE-LINK-HERE'>Category 1</a>
<ul>
<li><a href='PUT-SUB-CATEGORY-ONE-LINK-HERE'>Sub-category1</a></li>
<li><a href='PUT-SUB-CATEGORY-TWO-LINK-HERE'>Sub-category2</a></li>
<li><a href='PUT-SUB-CATEGORY-THREE-LINK-HERE'>Sub-category3</a></li>
</ul>
</li>
<li><a href='PUT-CATEGORY-TWO-LINK-HERE'>Category 2</a>
<ul>
<li><a href='PUT-SUB-CATEGORY-ONE-LINK-HERE'>Sub-category1</a></li>
<li><a href='PUT-SUB-CATEGORY-TWO-LINK-HERE'>Sub-category2</a></li>
<li><a href='PUT-SUB-CATEGORY-THREE-LINK-HERE'>Sub-category3</a></li>
</ul>
</li>
<li><a href='PUT-CATEGORY-THREE-LINK-HERE'>Category 3</a>
<ul>
<li><a href='PUT-SUB-CATEGORY-ONE-LINK-HERE'>Sub-category1</a></li>
<li><a href='PUT-SUB-CATEGORY-TWO-LINK-HERE'>Sub-category2</a></li>
<li><a href='PUT-SUB-CATEGORY-THREE-LINK-HERE'>Sub-category3</a></li>
</ul>
</li>
<li><a href='PUT-CATEGORY-FOUR-LINK-HERE'>Category 4</a>
<ul>
<li><a href='PUT-SUB-CATEGORY-ONE-LINK-HERE'>Sub-category1</a></li>
<li><a href='PUT-SUB-CATEGORY-TWO-LINK-HERE'>Sub-category2</a></li>
<li><a href='PUT-SUB-CATEGORY-THREE-LINK-HERE'>Sub-category3</a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->
Note:
- Links can be static pages, websites, social networks, and etc.
- There is no styling added yet and the menu will disarrange because we still didn't put any CSS code
- You can add more categories and sub-categories as you need by just copying the same format as 
   listed in the example above - remove <ul>....</ul>  will eliminate drop down menus.

Step 4. Go to Template > click Customize > choose Advanced and click Add CSS

add css to blogger template design

Step 5. Copy the following code and Paste inside it:

Select Code
/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 880px;  /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}

#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#cssnav li {
float: left;
padding: 0px;
}

#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}

#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}

#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#cssnav li:hover ul {
display: block;
}

#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}

#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}

#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
>>  you can change width: 880px to any suitable value to make the menu bar fit with your blog width <<

Step 6. Choose Tabs Text/Backgrounds and customize it based on your preferences > click Apply 
             to Blog after you have finished, and you're done! XD

blogger tabs background
   * Selected color refer to the color change when you hover your cursor to the tab text/menu bar


P/s: If you guys have any questions, don't hesitate to ask in the comment section below ok :)


2 comments:

  1. This is the best sub-menu building guide for google blogger; it is just right for blogger official template and easy to use. Thanks for your sharing !

    ReplyDelete
  2. I will try but it's didn't work what can i do

    ReplyDelete

Need to add an image/video?
[img]http://i681.photobucket.com/albums/vv180/kylekaulitzalyamani/tips.jpg[/img]
Thank you so much for taking the time to comment this post! ♥