A number of you read the instructions required to be on the menu as horizontal menu Dexterity Blog. Actually this is not difficult to create menu type, you must understand the importance some certain knowledge of CSS. Do you understand my instructions for using horizontal menus are introduced on WordPress.org and then we applied them to the case of Blogger.

LEARN HOW TO CREATE HORIZONTAL MENU:
Suppose we have the following code:

<div id="navmenu">
<ul>
<li> <a href="http://www.trangtriblog.com"> Home </ a> </ li>
Sort <li> <a href="http://www.trangtriblog.com"> </ a> </ li>
List <li> <a href="http://www.trangtriblog.com"> blog </ a> </ li>
<li> <a href="http://www.trangtriblog.com"> RSS </ a> </ li>
</ Ul>
</ Div>

If the code is embedded into the template through Blogger or add HTML / JavaScript, by default, this code will display the following:
* Home
* Classification
* Blog List
* RSS

We now apply the CSS to make the horizontal navmenu:

Ul {# navmenu
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}

# Li {navmenu
display: inline;
}

But the words stick together looking design is not beautiful, right? We add to our space and add color to the link, and change color when the mouse pointer on the object:

Ul {# navmenu
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}

# Li {navmenu
display: inline;
padding: 5px 20px 5px 20px;
}

# Navmenu a {/ * link color * /
text-decoration: none;
color: blue;
}

# Navmenu a: hover {/ * link color on mouseover * /
color: purple;
}

Attribute a and a: hover format but the link between <li> and </ li> should we gather to make things look (***):

Ul {# navmenu
margin: 0;
padding: 0;
list-style-type: none;
}

# Li {navmenu
display: inline;
list-style-image: none;
}

# Navmenu ul li a {
text-decoration: none;
color: blue;
padding: 5px 20px 5px 20px;
}

# Navmenu ul li a: hover {
color: purple;
}

Depending on the template, you can use our combined background color, background, border style, font, text color, font size, width of the menu (width) ... the ingredients.

Examples:

Ul {# navmenu
margin: 0;
padding: 0;
list-style-type: none;
}

# Li {navmenu
display: inline;
list-style-image: none;
}

# Navmenu ul li a {
text-decoration: none;
color: # FFFFFF;
background: # FF0000;
border-right: 2px solid # 000000;
padding: 5px 20px 5px 20px;
}

# Navmenu ul li a: hover {
color: # f8f400;
font-size: 14px;
background: # 0000ff;
text-decoration: underline;
}

BLOGGER APPLICATION TO :
So do you understand the principle of horizontal menu:

1. Need a CSS paragraph above is pasted into the middle <b:skin> <! [CDATA [/ * and ]]></ b: skin> in a template. (Mentioned above)

2. Need a script that contains the link-level menu

Of course you can still use code-level menu contains links to insert directly into your blog template. But here is how do I add LinkList through Blogger.

Log in to Blogger, from layout to add LinkList utility, you need to add the link and your name like horizontal menu then save.

If you look closely you see a name I did not add, not add to RSS Home and LinkList data, so we added some other way.

LinkList that you just created can be controlled with code like this:

<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>

Look out for its unique ID, LinkList # form, with the character # is a unique number. If you use multiple LinkList, character # will turn: 1, 2, 3, ...

I suggest you continue to cut the code into notepad just mentioned (drilling template, please save it), create a div named navmenu, add some essential components, and we will be like this:

<div id='navmenu'>
<b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'/>
</ B: section>
</ Div>

And now, please copy all of them placed on the template. Depending on the template and the desired position set menu that we have different treatments. This treatment requires a knowledge of design, CSS as well as certain understanding of the Blogger template code.

This is a sample template Minima (default), if you use another template, of course not the same!:

<body>
<div id='outer-wrapper'> <div id='wrap2'>
<! - Skip links for text browsers ->
<span id='skiplinks' style='display:none;'>
<a href='#main'> skip to main </ a> |
<a href='#sidebar'> skip to sidebar </ a>
</ Span>
<! - Insert menu here if you want to put across the top of the blog header ->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thu Blog.com(Header)' type='Header'/> Arts
</ B: section>
</ Div>

<! - Insert menu here if you want to put across the bottom of the blog header ->

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</ Div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</ B: section>
</ Div>

ADDITIONAL "HOME" AND "RSS":

If you must link to Home (http://yourblog.blogspot.com) on LinkList data, then we arrange how difficult the first Home located. Thus the simplest way is that we made ... hands!

Check Expand Widget Templates (Expand utility model):

LinkList Use keywords to find our facilities and you will find the following:

<div id='navmenu'>
<b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' 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>

And I have added red text:

<div id='navmenu'>
<b:section class='navmenu' id='navmenu-id' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'> <h2> <data:title/> </ h2> </ b: if>
<div class='widget-content'>
<ul>
<li> <a expr:href='data:blog.homepageUrl' title='Trang chu'> Home </ a> </ li>
<li> <a expr:href='data:blog.homepageUrl "2009/05/phan-loai-noi-dung-tren-thu-thuat-blog.html"' dung'> title='Phan internal classification type </ a> </ li>
<li> <a expr:href='data:blog.homepageUrl "2008/01/i-nt-v-blog-v-tc-gi.html"' title='Ve gia'> the Author </ a > </ li>
<b:loop values='data:links' var='link'>
<li> <a expr:href='data:link.target'> <data:link.name/> </ a> </ li>
</ B: loop>
<li> <a expr:href='data:blog.homepageUrl "2007/12/quy-nh-s-dng-cc-ni-dung-trn-th-thut.html"' title='Quy dinh'> regulations </ a> </ li>
<li> <a expr:href='data:blog.homepageUrl "feeds/comments/default"' title='Nhan xet'> Reviews </ a> </ li>
<li class='last'> <a expr:href='data:blog.homepageUrl "rss.xml"' title='RSS'> RSS </ a> </ li>
</ Ul>
</ Div>
</ B: includable>
</ B: widget>
</ B: section>
</ Div>

You know how I add it right?
Regarded here as we have done! If you have any difficulties, please comment below this article for help. Wishing success!