How To Add Horizontal LinkList in Blogger

3
7d6ac4f1934dbff60d3a928fe22c774ddelicious

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:
    December 20, 2009 at 9:05 am

    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?

    Reply
  2. Blogger Tips And Tricks|Latest Tips For Bloggers says:
    December 20, 2009 at 11:25 am

    Hello Bill,

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

    Reply
  3. jobs-in-2011 says:
    February 20, 2011 at 10:50 pm

    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

    Reply

Leave a Reply