Add LinkList As Horizontal Top Menu Links For Blogger



Add LinkList As Horizontal Top Menu Links For Blogger,as i took the tutorials many times on how to add top menu links for blogger or horizontal menu links for blogger below the header of the blog to display of your important blog links.As this tutorial is also same to add top menu links but difference is that this time a link list widget will be added in your blogger layout below your blogger header from where you can easily add your horizontal links and manage them and now there is no need to go to html of your blog to manage these horizontal Links.

The tutorials i hold before on horizontal top menu links for blogger are below:-
1)Top Menu Links For Blogger
2)Horizontal Menu Links For Blogger


Now let's carry On with our tutorial

Just Go To Layout > Edit Html

And Search For </b:skin>

Now add these below Css codes above it-


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



Now Search for below codes-

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

And add the below codes after the above codes:-


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


Thats It Now Preview It.If its working fine just save your template.

Now Goto Page elements and you will see an gadget named linkbar in your blogger layout below the header of you blog,click the Edit Button On that gadget an window will open and add the link you want to show up in your blog top menu from there and can manage all menu links from there .Its so easy,i hope will like this tutorial.

21 comments:

Berbagi iLmu said...

Wow...
Good...!
Thanks =)

Anonymous said...

I have added this menu to my blog. But it does not work.

I added as your told. And in my LAYOUT, I can see there is a linkbar but its work like normal link list!

Could you please check my blog and give some advices? My blog

Anshul said...

it will show link link list but in form of horizontal with black menu,as widget is working but it is not taking the css part of code from your template,you miht have made some mistake for sure in adding codes.Please add then carefully again.

Anonymous said...

Thanks for advice but still have a problem. I copy and paste CSS codes before </b:skin> but its not working! I have done in an other new blog and its ok now. But in my main blog. It's not working. What do you think?

Anshul said...

Ok just download template and upload some where and five me download link,i will add it and send you.

Anonymous said...

Dear Anshul, thanks for your advice!

I copy and paste CSS codes before Profile CSS and my menu start to work!

I don't know why but didn't work when pasted before as your told!

See you!

Anshul said...

ya sometimes it can happen at it mostly happpens with us while using javasacipts in blog xml as scripts codes at begginin will work but if we put it to last it won't,but never seen it happening with css.

Anonymous said...

thx that was great :)

jpzednem said...

You are amazing! Thanks a mill!

Valerie said...

my linklist is ABOVE my header picture for some reason!!
and it appears as a black line.
why is that so?
help please!

Anshul said...

@valerie Please always show demo of error to make you suggest rite.

Blog Tipper said...

Good stuff man!

http://www.howtodothat101.blogspot.com

Jack said...

thank oyu very much
the code help me a lot

Deb Thaxton said...

-->This worked for me after a few color modifications!

www.WebSavyMom.com

|-R_L-| said...

Awesome! worked like a charm. Thnaks a bunch

Sagar said...

I want to add link list at the bottom of my blog how can I do it ?
My blog url : http://www.speedyvehicles.in

Pankaj D.C said...

dude I have added this...can i add a submenu to this nav bar?

Anshul said...

2pankaj its css for widget type not in this but u can make submenus but not in this sorry.As to make it you need to know about css and then also making it work in blogger.

Primriz said...

Hi, I am excited about your tutorial, and have been wanting to add horizontal top menu for my blog, but unfortunately, I'm not very familiar with all these codes etc..will you please help me..
my url http://howtosonanything.blogspot.com
thanks

Post a Comment