(Huynh Nhat Ha's Blog) -- Các Tempplate cơ bản của Blogger thường không có thanh menu ngang trên phần Header. Một kiểu menu như vậy giúp bạn có thêm không gian web để bố trí các liên kết cần thiết cho blog.

Để tạo kiểu menu này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code CSS sau đây vào trước dòng ]]</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;
}

Bước 2. Tìm dòng <div id='header-wrapper'> và đặt trước nó với đoạn code bên dưới. (Đối với Template Simple sẵn có của Blogger hiện nay thì đặt trước thẻ <header>).

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

Lưu Template.

Bước 3. Vào Page Elements. Bạn sẽ nhìn thấy trên đỉnh Template có một tiện ích tên là Linkbar nằm trên phần Header, nhấn vào nút Edit. Tại cửa sổ mới, bạn lần lượt thêm các URL và tên cho các liên kết.

* Giải đáp yêu cầu của bạn Minh Quân tại trang Gaunau.info. Bạn MQ muốn tạo thanh menu ngang trên phần Header giống như trang Bloggerplus.net.

Bạn MQ có thể xem Demo trước khi thực hiện như sau.

Ở chế độ chỉnh sửa Template, dùng từ khóa #linkbar-wrapper để tìm đến đoạn code CSS liên quan. Bạn thay toàn bộ đoạn code đó bằng đoạn code CSS bên dưới.

#linkbar-wrapper {
margin: 0px;
padding: 0px;
width: 976px;height:30px;
position: relative;
background: #2A2A2A;
border: 1px solid #E5E5DE;
}
#linkbar .widget {
margin: 0px;
padding: 3px 0px 6px 0px;
text-align: left;
}
#linkbar ul {
margin: 0px;
padding: 0px;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px;
padding: 0px;
}
#linkbar h2 {
margin: 0px;
padding: 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
padding: 5px 10px 5px 10px;
width:100%;
text-decoration:none;
font: normal normal 100% Times;
color: #e4e4e4;
text-transform: none;
border-right: 0px solid #ffffff;
border-left: 0px solid #706050;
}
#linkbar a:hover {
padding: 3px 10px 7px 10px;
color: #ffffff;
background: #808080;
font-weight: bold;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 1px 0 #111;
-moz-box-shadow:1px 1px 0 #111;
-webkit-box-shadow:1px 1px 0 #111;
}
.cat {width:600px;float:left;}
.rightlinks{float:right}

Sau đó tìm đến thẻ <div id='header-wrapper'> và đặt trước nó với đoạn code sau đây.

<div id='linkbar-wrapper'>
<div class='linkbar section' id='linkbar'><div class='widget HTML' id='HTML100'>
<h2 class='title'>Menu</h2>
<div class='cat'>
<ul>
<li><a href='.info/' title='Home'>Home</a></li>
<li><a href='/link1.html' title='Link 1'>Link 1</a></li>
<li><a href='/link2.html' title='Link 2'>Link 2</a></li>
<li><a href='/link3.html' title='Link 3'>Link 3</a></li>
<li><a href='/link4.html' title='Link 4'>Link 4</a></li>
</ul></div>
<div class='rightlinks'>
<ul>
<li><a href='http://feeds.feedburner.com/huynh-nhat-ha'><img alt='Blogger+ RSS feed' src='http://feeds.feedburner.com/~fc/huynh-nhat-ha?bg=ED720B&amp;fg=000000&amp;anim=0' style='margin-bottom:-9px;margin-top:0px;border:none'/></a></li>
<li><a href='http://feeds.feedburner.com/huynh-nhat-ha' title='Blogger+ RSS feeds'><img alt='RSS' src='http://bloggerplusjs.googlecode.com/svn/trunk/Image/feed-16x16.gif' style='padding-top:0px;margin-bottom:-1px; margin-top:-1px;padding-left:3px;border:none'/>RSS</a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=huynh-nhat-ha' title='Đăng ký nhận bài viết mới qua Email'><img alt='Email Subscription' src='http://bloggerplusjs.googlecode.com/svn/trunk/Image/email-16x16.gif' style='padding-left:3px;border:none;vertical-align:middle'/>Email Subscription</a></li>
</ul>
</div>
</div></div>
</div>
<div style='clear: both;'/>

Việc bạn MQ cần làm là thay URL và tên cho các link và đổi huynh-nhat-ha bằng id mà bạn đã đăng ký blog của bạn với Feedburner.com.

Lưu Template là OK.