Web Hosting

How To Add Horizontal LinkList in Blogger -2



Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Sponserd Links

This is a another different method from post How To Add Horizontal LinkList in Blogger

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

2.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='YOUR_BLOG_TITLE (Header)' type='Header'/>
</b:section>
</div>


3.Change above code as below code.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='YOUR_BLOG_TITLE (Header)' type='Header'/>
</b:section>
</div>


4.Now find ]]></b:skin> tag in your template .

5.Copy below code and paste it just before ]]></b:skin> tag.

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}


6.Now save your template.

7.Go to layout-->Page elements and click on 'Add a Gadget' on Header Section.

8.Select 'HTML/Javascript' and add the code given below and click save.

<div class="underlinemenu">
<ul>
<li><a href="Your-Link">Link-Name</a></li>
<li><a href="Your-Link">Link-Name</a></li>
<li><a href="Your-Link">Link-Name</a></li>
<li><a href="Your-Link">Link-Name</a></li>
<li><a href="Your-Link">Link-Name</a></li>
<li><a href="Your-Link">Link-Name</a></li>
</ul>
</div>


Note : Remember to replace Your-Link and Link-Name with your real details.

Now you are done.

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




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
.


0 comments:

Post a Comment

 

Blogger Tips And Tricks|Latest Tips For Bloggers Copyright © 2010 LKart Theme is Designed by Lasantha