Add Link List As Horizontal Top Menu In Blogger

Like This


#Go to layout
#Edit html
#THEN SEARCH FOR CODE

</b:skin>

# NOW ADD THESE BELOW CSS CODES BEFORE IT-


#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>



# 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...

Enjoy………………….


Thank You
Keep Visiting