How To Add Horizontal LinkList in Blogger

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

If you find this article useful, please feel free to link to this page from your website or blog.

url:

HTML link:

forum link:

Don't Copy This Article:

This work by http://www.bloggertipandtrick.net/ is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed