How To Add Horizontal LinkList in Blogger

Posted by Lasantha Bandara on June 27th, 2009 File Under : css, gadget, html, widget3 Comments

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

</b:skin>

3.Now copy below code and paste it just before </b:skin> tag .

/* ----- 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;
}

4.Now again Scroll down to where you see like this code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test blog (Header)' type='Header'/>
</b:section>
</div>

5.Now Copy below code and paste it after above code.

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

Note:To open Linkbar in a new window or tab use below code instead of above code.

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='yes'>
<b:widget id='LinkList11' 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' target='_blank'><data:link.name/></a></li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>
</b:section>
</div>

6.Now save your template and you are done.

Source

File Under : css, gadget, html, widget

3 Responses to “How To Add Horizontal LinkList in Blogger”

  1. Bill says:

    I've used your instruction to add a linkbar to my blog. I like it a lot. Is there a way to get the links in the linkbar to open in a new window or tab?

  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:

    Hello Bill,

    I update my article as your need.Read the article again.

  3. jobs-in-2011 says:

    I agree with all the points mentioned in this post. Reading your advice is so helpful.thank you so much. my blog is http://www.jobs-in-2011.blogspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.