Add LinkList As Horizontal Top Menu Links For Blogger

Posted by Faheem Mustafa


Hello Readers:
It took me a lot of days to learn about how can I add a linklist above my Blog title to make my blog readers fing the article; they want, more easily. Today I found a way to add linklist above the Blog header. I would like to share this Blogger Hack code with you.
Adding Lisnklist as Top Menu Links Above Blogger Title
This tutorial is to add top menu links. The link list widget will be added in your blogger layout above your blogger header (at the top of your blog) from where you can easily add your horizontal links and manage them as per your needs and there will be no need to go to html of your blog every time to manage these horizontal Links. This will enable you to manage links just from Lavout>Page Elements page.
1:  Log-in to your blogger account. Move to Layout>Edit HTML
2:  Check the Check-box "Expand Widget Templates"
3:  Press CTRL+F and find </b:skin>
4:  Now copy and paste the following code above </b:skin>
/* ----- 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;
}
5:  Now (CTRL+F) search for this code <div id='header-wrapper'>
     If not found try ti find this <div id='header-left'>
 6:  Now Copy the code below and paste above the code searches in step 5
<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>
That's It
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.
CUSTOMIZE:


If you want to add the Link list below your Blog Header Just paste the code (step 6) below the code searched in step 5.

Share |
Labels: , , ,
blog comments powered by Disqus
Related Posts with Thumbnails