blogOnline JobsOthers

Add blog sub menu for your blog to increase features of your content

Blog Sub Menu

Adding a blog sub menu is the best ways to separate your content of your blog. If you create a blog without a menu and sub menu the people you visit your site may difficult to find what they want so they definitely leave your site immediately. In order to increase your visitors your need to create your blog sub menu for more features and also easy to access for those who visit your site. Create a submenu is the best ways to separate your blog with more features.

the users who visit your site will easily access your site without any difficulty to find which category they want to search. Once they find easy navigation they will definitely bookmark your site for reading your more articles so you got more daily visitors.

Create Blog Sub Menu

  1. just log in to your blog dashboare
  2. click on the layout
  3. now your blog default layout will be shown here.
  4. now click on add gadget in your header layout
  5. click HTML/javascript
  6. copy this code and paste it

Code For Creating Sub Menu

<!– start navmenu –>
<ul id=’cssnav’>
<li class=”active”><a href=’http://newtamilanda6.blogspot.com/’>Home</a></li>
<li class=”sub”><a href=”>Menu-1</a>
<ul>
<li><a href=”>Submenu-1</a></li>
<li><a href=”>Submenu-2</a></li>
<li><a href=”>Submenu-3</a></li>
</ul>
</li>
<li><a href=”>Menu-2</a>
<ul>
<li><a href=”>Submenu-1</a></li>
<li><a href=”>Submenu-2</a></li>
<li><a href=”>Submenu-3</a></li>
<li><a href=”>Submenu-4</a></li>
</ul>
</li>
<li><a href=”>Menu-4</a>
<ul>
<li><a href=”>Submenu-1</a></li>
<li><a href=”>Submenu-2</a></li>
<li><a href=”>Submenu-3</a></li>
<li><a href=”>Submenu-4</a></li>
<li><a href=”>Submenu-5</a></li>
<li><a href=”>Submenu-6</a></li>
</ul></li>
<li><a href=”>Menu-5</a>
<ul>
<li><a href=”>Submenu-1</a></li>
<li><a href=”>Submenu-2</a></li>
<li><a href=”>Submenu-3</a></li>
</ul>
</li>
<li><a href=”>Menu-6</a>
</li></ul>

<!– end navmenu –>
now open your blog it will show your submenu but it will show in meshed up condition. In order to set up correctly, you need to add more code. For setup more code follow the steps below

Step To Arrange Your Blog Sub Menu

  1. now go to your blog dashboard
  2. click on the theme – customize – advance –  add css
  3. now copy the code below and paste it

Code For Rearrange Your Sub Menu

/* —– CSS Nav Menu Styling —– */
#cssnav {
margin: 0px 0 0 -10px;
padding: 0px 0px 0px 0px;
width: 1050px;  /* 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;
}
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Once you successfully complete, you can change your sub menu by editing your code.

error in sub menu

If you get any error like sub menu in a different position. then clear the HTML code in gadget and use the code from my blog click here

Tags
Show More

newtamilanda

Hello this is raja. i love blogging and also make a cool website. newtamilanda is created for creating online awareness in india. posts will be updated when i have a free time.

Related Articles

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Please consider supporting us by disabling your ad blocker