Horizontal Top Menu For Blogger

It look nice to have a menu bar as shown in
Just Go To Layout > Edit Html

And Search For
</b:skin>

Now add these below codes above it-

/* ----- LINKBAR ----- */

#linkbar {

margin: 6px 0px 0px 0px;

padding: 0px 0px 0px 0px;

width: 100%;

position: relative;

background: #000;

border: 1px solid #000;

border-bottom: 0;

}



#linkbar ul {

margin: 0px 0px 0px 0px;

padding: 5px 5px 7px 5px;

text-align: left;

list-style-type:none;

}



#linkbar li {

display: inline;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}



#linkbar h2 {

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

display: none;

visibility: hidden;

}



#linkbar a {

clear: both;

margin: 0px -4px 0px 0px;

padding: 3px 20px 3px 20px;

width:100%;

text-decoration:none;

font-family: arial, sans-serif;

font-weight: bold;

font-size: 12px;

color: #fff;

border-right: 1px solid #fff;

}



#linkbar a:hover {

color: #000;

background: #fff;

}

 Now Search for below codes-

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/>

</b:section>

</div>



And add the below codes after the above codes:-
 
<div id='linkbar-wrapper'>

<b:section class='linkbar' id='linkbar' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>

<b:includable id='main'>



<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>



</div>

</b:includable>

</b:widget>

</b:section>

</div>

Thats It Now Preview It.If its working fine just save your template.

Now Goto Page elements and you will see an gadget named linkbar in your blogger layout below the header of you blog,click the Edit Button On that gadget an window will open and add the link you want to show up in your blog top menu from there and can manage all menu links from there .Its so easy,i hope will like this tutorial.

0 comments :

Post a Comment