2008-11-02

A Link List Widget As A Horizontal Menu Bar



The two pictures above illustrate how to make your link list widget to turn into a horizontal menu bar. Here are two options to choose from:-
a- A horizontal link list above the header.
b- A horizontal link list below the header.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Templates check box. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000000;
border: 1px solid #000000;
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:960px;
text-decoration:none;
font: arial;
color: #FFCC00;
border-right: 1px solid #000000;
}

#linkbar a:hover {
color: #FFFFFF;
background: #FFFFFF;
}

Next, search for this code <div id='header-wrapper'>


Place this code immediately right before where a line is highlighted as shown above.
<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>


If you'd like to have a horizontal menu bar below the header, just add the above code right after the closing div tag where a line is highlighted.

Save the template, click on 'Page Elements'. Choose "Edit" on the "Linkbar" box. And add things to your new link list widget for it to show up i.e add your links and their titles.



3 comments:

Emm said...

Thank you! I have used your instructions to great success! http://emm-media.blogspot.com/

Anandarajeshwaran.J said...

thankyou very very much for this post of yours.it saved me tons of time

www.beginwithdisbelief.com
(can u give me a linkback my site is relatively new not even 1 month so your help would be appreciated)

skin tags said...

The idea of this site is pretty cool! I like the system and its very comfortable.

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L