Tạo menu ngang trên phần Header

Thứ Năm, 28 tháng 4, 2011
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.


 Nguồn Blog Huynh Nhat Ha

Copy bài viết: +A Tăng cỡ chữ =A Mặc định -AGiảm cỡ chữ

Liên hệ mail: tpm1512@yahoo.com và xem tất cả bài viết trang này Tại đây
Nhấn vào theo dõi thăm trang web của Trần Phúc Minh


  • https://yogaso1.blogspot.com/2011/04/tao-menu-ngang-tren-phan-header.html?m=0
Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
Mã Hóa Code
Đăng nhận xét mới

Tổng số Bình luận [ 5]

Thành Hero lúc 02:23 17 tháng 9, 2011

bạn dạy mình làm cái menu như trang bạn đi,cám ơn nha,blog bạn đẹp thật đấy,trang của mình là bachkhoamedia.blogspot.com,mới làm thui nên còn gà lắm:((

Nặc danh lúc 19:07 25 tháng 11, 2011

Mình đã làm theo hướng dẫn của bạn, nhưng không hiểu sao khi lưu Template lại thì bị báo lỗi :

"Chúng tôi không thể lưu mẫu của bạn

Hãy sửa lỗi bên dưới và gửi lại mẫu của bạn.
Có trên một tiện ích được tìm thấy bằng: LinkList1. Các ID tiện ích phải là duy nhất".

Mong bạ chỉ dùm.
Chân thành cám ơn bạn

Trần Phúc Minh lúc 19:25 25 tháng 11, 2011

bạn xem lại nội quy

Hoàng Liêm lúc 07:19 6 tháng 6, 2012

Khi bạn copy nó có đường dẫn của trang web này, bạn chỉ càn xóa nó đi là được. chúc bạn vui vẻ!

Cach Mang Nha Dat lúc 02:42 2 tháng 10, 2014

ad oi cho em hoi với : sao trang cua nguoi ta tren thanh tiêu đề thì đuôi của dòng link đều là HTML vidu http://tranphucminh.blogspot.com/2011/04/tao-menu-ngang-tren-phan-header.html, còn trên trang của em đuôi toàn là label vidu :http://www.cachmangnhadat.com/search/label/QU%E1%BA%ACN%201 , em mới chơi blog còn gà lắm nên mong ad chỉ giúp em đổi link thành html hết với , em cam on ad nhìu ,

Đăng nhận xét

Lên trên