Article | How To Add jQuery Horizontal LinkList in Blogger

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



2.Scroll down to where you see </b:skin> tag.



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

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:26px;
}
#nav a:link,
#nav a:active,
#nav a:visited{
display:block;
color:#FFF;
text-decoration:none;
background:#444;
height:26px;
line-height:26px;
padding:0 6px;
margin-right:1px;
}
#nav a:hover{
background:#0066FF;
color:#FFF;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:26px;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
width:12em;
top:auto;
}
#nav li ul ul {margin:0 0 0 13em;}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul{display:none;}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul{display:block;}

Note: If you want you can change above code as you like.



4.Now again Scroll down to where you see </head> tag.



5.Now Copy below code and paste it just before </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
function showmenu(){
$(&quot;#nav li&quot;).hover(function(){
$(this).find(&#39;ul:first&#39;).css({visibility:&quot;visible&quot;, display:&quot;none&quot;}).show();
}, function(){
$(this).find(&#39;ul:first&#39;).css({visibility:&quot;hidden&quot;});
});
}

$(document).ready(function(){
showmenu();
});
</script>

6.Now save your template.



7.Go to Layout-->Page Elements.



8.Click on "Add a Gadget" and select 'HTML/Javascript' and add the code given below.

<ul id="nav">

<li><a href="#">Link 1</a></li>

<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<ul>
</ul></ul></li>

<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<ul>
</ul></ul></li>

<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Link 4.1</a></li>
<li><a href="#">Link 4.2</a></li>
<li><a href="#">Link 4.3</a></li>
<ul>
</ul></ul></li>

<li><a href="#">Link 5</a>
<ul>
<li><a href="#">Link 5.1</a></li>
<li><a href="#">Link 5.2</a></li>
<li><a href="#">Link 5.3</a></li>
<ul>
</ul></ul></li>

<li><a href="#">Link 6</a></li>


</ul>

Note: Above code is example only.You can add many links if you like.



Replace blue colour codes with your link names.

Replace # with your link urls.



9.Now click save and you are done.It will look like this:

Loading...