1,Open template in any word editor you have ,or in Blogger (go to Design tab ---> edit HTML ----> checked Expand Widget Templates )
2,find this code
<ul>
<b:section id='topcat' showaddelement='no'>
<b:widget id='LinkList1' locked='false' title='Top Category' type='LinkList'>
<b:includable id='main'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</ul>
and change it to
<ul>
<li>
<a href="link to category">Home</a>
</li>
<li>
<a href="link to category">World News</a>
<ul class="children">
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
</ul>
</li>
<li><a href="link to category">Travel</a></li>
<li><a href="link to category">Sports</a></li>
<li><a href="link to category">Finance</a>
<ul class="children">
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
</ul>
</li>
<li><a href="link to category">Entertainment</a></li>
<li><a href="link to category">Business</a></li>
</ul>
Remember to change the text in bold to your category and sub category . Link to category and sub category has structure : http://yourblog.blogspot.com/search/label/your-category
If you want to make multi-level menu in page navigation (About us ,contact us ....) ,you can also replace the code
<div id="navpages">
<ul>
<b:section id='page' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</ul>
<div class="clear"></div>
</div>
with the code has structure like this
<ul>
<li>
<a href="link to category">Home</a>
</li>
<li>
<a href="link to category">World News</a>
<ul class="children">
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
</ul>
</li>
<li><a href="link to category">Travel</a></li>
<li><a href="link to category">Sports</a></li>
<li><a href="link to category">Finance</a>
<ul class="children">
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
<li><a href="link to subcategory">Category</a></li>
</ul>
</li>
<li><a href="link to category">Entertainment</a></li>
<li><a href="link to category">Business</a></li>
</ul>
3,The most important step :
find this code :
#navcats {
width:970px;
background: url(http://img651.imageshack.us/img651/9570/bggradientlines.gif) repeat;
border-bottom:1px solid #efefef;
position:relative;
z-index:1;
}
and change z-index :1 to z-index:999
z-index:999 will make this menu float on others elements . If you don't change this value ,you will see multi-level menu is hidden by other elements .
That's all .Save template and you are done .
0 comments:
Post a Comment