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

5
1696
blog sub menu

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. blog sub menu for setup more features
  6. click HTML/javascript
  7. 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. blog sub menu for arrange correctly
  4. 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

5 COMMENTS

  1. Everything posted made a lot of sense. But, what about this?
    what if you wrote a catchier title? I am not suggesting your information isn’t solid, however suppose you added something to maybe get
    folk’s attention? I mean Add blog sub menu for your blog to increase features of your content » newtamilanda is kinda
    boring. You could look at Yahoo’s front page and see how they write post headlines to get people to click.
    You might add a video or a related pic or two to get
    people excited about everything’ve written. Just my opinion, it would make your posts a little livelier.

  2. I want to express my gratitude for your kind-heartedness giving support to women who should have guidance on this important concern. Your personal dedication to getting the message along became surprisingly informative and have constantly encouraged guys just like me to realize their aims. Your entire valuable information denotes a great deal to me and even more to my office colleagues. Best wishes; from each one of us.

LEAVE A REPLY

Please enter your comment!
Please enter your name here