Tạo thanh menu ngang từ các trang tĩnh dành cho Blogspot

Hôm nay mình sẽ giới thiệu đến độc giả của vietdesigner cách tạo thanh menu từ các trang (pages) trên blogger và tất nhiên chỉ là thanh menu nằm ngang không có các menu con.

​

​

Đối với những template có sẵn của blogspot

Nếu như bạn đang sử dụng template từ những mẫu sẵn có trên blogspot thì bạn chỉ việc thêm các trang sau đó cài đặt như hình bên dưới

​

​

Đối với template khác

Với những template bạn sử dụng bên người thường tác giả họ không hỗ trợ menu được tạo bởi các page và chúng ta vẫn phải thực hiện các bước ở phía trên. Tiếp đến công việc của chúng ta là phải thêm CSS cho nó để có được một thanh menu như mong muốn

Trước khi thêm CSS sẽ hiển thị trên blog như sau:

​

​

Với cấu trúc HTML:

Code:

<div class="widget PageList" id="PageList98">
<h2>Pages</h2>
<div class="widget-content">
<ul>
<li class="selected"><a href="/">Trang chủ</a></li>
<li><a href="link">Truyện Cười</a></li>
<li><a href="link">
	
Blogspot Tips</a></li>
<li><a href="link">Search</a></li>
</ul>
</div>
</div>

Ta sẽ dựa vào class PageList để viết CSS cho thanh menu. Và thanh menu này mình sẽ làm style theo yêu cầu trên blog của mình từ bạn Yêu Truyện Ngắn



Live Demo

Code:

.PageList h2{display:none}
.PageList ul{background:#6fb1e9 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;_background-image:none;border-bottom:1px solid #444;margin-top:0;margin-left:-30px;margin-right:-30px}
.PageList ul{margin:0;padding:0;overflow:hidden;list-style:none}
.PageList li a{display:inline-block;padding:.6em 1em;font:normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;color:#000;border-left:1px solid #fff;border-right:1px solid #444}
.PageList li{margin:0;padding:0;float:left}
.PageList li a:hover,.PageList li.selected a{color:#666;background-color:#6fb1e9;text-decoration:none}
.PageList li.selected a{border-left:0}

Bạn cũng có thể dựa vào ID của widget để tạo thành thanh menu để không bị ảnh hưởng đến các widget pagelist khác trên blog. Ví dụ như ID của widget pagelist phía trên là PageList98, vậy bạn có thể thay đoạn CSS trên như sau:

Code:

#PageList98 h2{display:none}
#PageList98 ul{background:#6fb1e9 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;_background-image:none;border-bottom:1px solid #444;margin-top:0;margin-left:-30px;margin-right:-30px}
#PageList98 ul{margin:0;padding:0;overflow:hidden;list-style:none}
#PageList98 li a{display:inline-block;padding:.6em 1em;font:normal bold 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;color:#000;border-left:1px solid #fff;border-right:1px solid #444}
#PageList98 li{margin:0;padding:0;float:left}
#PageList98 li a:hover,#PageList98 li.selected a{color:#666;background-color:#6fb1e9;text-decoration:none}
#PageList98 li.selected a{border-left:0}

Không có gì phức tạp phải không bạn? Nếu gặp khó khăn trong quá trình thực hiện đừng ngại comment bên dưới, mình sẽ giúp đỡ bạn giải quyết những vướng mắc. Và nếu bạn có style đẹp dành cho menu này hãy chia sẻ mình sẽ rất cảm ơn. Chúc bạn thành công!