Tạo menu ngang cho blog. ~ Lê Hoàng Chiến

Kiểu 1 :

1. Đầu tiên đăng nhập vào blog của bạn
2. Vào bố cục(thiết kế) và chọn chỉnh sử HTML
3. Thêm code sau vào bên dưới thẻ <head> :

4. Tiếp đến bạn thêm code bên dưới vào trước thẻ ]]></b:skin>

div.domtab {
padding:0;
width:500px; /*độ rộng của tab*/
font-size:90%; /*cỡ chữ của tab*/
}
ul.domtabs
{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li
{
float:left;
padding:0px 1px 0px 0px;
text-align: center;
}
ul.domtabs a{
padding:5px;
display:block;
background:#999; /*màu nền của thư mục trong tab*/
color: #fff; /*màu text của thư mục trong tab*/
height:1em;
font-weight:bold;
text-decoration:none;
}

ul.domtabs a:hover{
color: #0000ff; /*màu text của thư mục trong tab khi rê chuột*/
background:#ccc; /*màu nền của thư mục trong tab khi rê chuột*/
}
div.domtab div {
clear:both;
width:auto;
padding:0 2px;
margin: 0 0 1em 0;
}

div.domtab div {display: block; clear: both;}

Bạn dựa vào các dòng chữ hướng dẫn (dòng màu xanh) và chỉnh sửa lại cho phù hợp.
5. Đến đây bạn save template lại và trở về phần tử trang, thêm 1 HTML/Javascript và thêm vào code bên dưới :

Chỉnh sửa code:
- Bạn hãy chú ý các dòng text màu đỏ trong code, chúng phải là giống nhau tương ứng ở từng nội dung.
- Bạn thay các text màu xanh lá đậm trong code thành tên thư mục mà bạn muốn tạo.
- Và những dòng màu xanh dương đậm chính là phần chứa nội dung tương ứng với từng thư mục.
Ở đây mình chỉ tạo tab có 3 nội dung cơ bản, bạn có thể tạo thêm nhiều nội dung khác theo ý của mình

Nguồn : http://htentertainment.blogspot.com/2011/10/tao-tab-noi-dung-cho-blogspot.html

Kiểu 2 :

(Traidatmui.com) – Theo yêu cầu của bạn trungnguyen2010 là tạo menu ngang cho blog, hôm nay mình xin chia sẽ cùng các bạn cách tạo menu này. Với menu này sẽ giúp bạn bố trí các menu con dễ dàng và gọn gàng hơn. Menu này sẽ gồm có các mục menu chính và các menu con được ẩn bên dưới các menu chính đó, chúng sẽ hiện ra khi bạn rê chuột vào menu chính chứa chúng. Bạn có thể tạo ra rất nhiều menu con mà không làm mất nhiều không gian trên blog. Để tạo được menu này bạn hãy thực hiện theo các bước bên dưới.

☼ Bắt đầu thủ thuật

1. Công việc đầu tiên là vào tài khoản của bạn
2. Vào bố cục (Thiết kế) chọn chỉnh sửa HTML
3. Thêm code bên dưới vào trước thẻ ]]></b:skin>

.parent-menu, .sub-menu {width:900px;}
#topmenu {height:46px; margin-bottom:5px;z-index:-10px;}

.fl {float:left;}
#topmenu {float:left;}
.fr {float:left;}

.parent-menu {height:21px; font:12px arial; color:#ffffff; text-align:center; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijs7gMSvkn8EBk10g4WL_t30_qyJb1sKUUHZeCiIzm0RTcHMC3sOxQVQLrE2a4bosWQ1zP3j-Rmo1f6n7vehrRbwqj-ePqubSl2znTrkgmXi6HhGYiBaRBWYW8yBx8rh8ofcY5k8A4g7ab/) repeat-x 0px -49px;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;}
.pmenu-sep {width:25px;}
.pmenu-normal{height:15px; padding:4px; ursor:pointer;}
.pmenu-normal, .pmenu-active, .pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {cursor:pointer;}
.pmenu-normalleft, .pmenu-normalright, .pmenu-activeleft, .pmenu-activeright {width:3px; height:25px;font-size:1px;}
.pmenu-active {height:15px; padding:4px; color:#ff0000; background:#f5f5f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijs7gMSvkn8EBk10g4WL_t30_qyJb1sKUUHZeCiIzm0RTcHMC3sOxQVQLrE2a4bosWQ1zP3j-Rmo1f6n7vehrRbwqj-ePqubSl2znTrkgmXi6HhGYiBaRBWYW8yBx8rh8ofcY5k8A4g7ab/) repeat-x 0px -73px;}
.pmenu-activeleft {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCq-WJQ7TKy9lXnAPb0gHkfOItxmQjczkFrAhl47E-09ejrTssGXFit2qpLvBQluBOwP29VQt8ORW2bz144y1Qe2LU2jcwg8SqskjpKRp4xdSbLadqzpNTOZjSXJwoFCX1JUA3jBkSQ1y/') no-repeat 0px 0px;}
.pmenu-activeright {height:25px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCq-WJQ7TKy9lXnAPb0gHkfOItxmQjczkFrAhl47E-09ejrTssGXFit2qpLvBQluBOwP29VQt8ORW2bz144y1Qe2LU2jcwg8SqskjpKRp4xdSbLadqzpNTOZjSXJwoFCX1JUA3jBkSQ1y/') no-repeat 0px -27px;}
.sub-menu {height:21px;padding:1px 0px 0px 1px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijs7gMSvkn8EBk10g4WL_t30_qyJb1sKUUHZeCiIzm0RTcHMC3sOxQVQLrE2a4bosWQ1zP3j-Rmo1f6n7vehrRbwqj-ePqubSl2znTrkgmXi6HhGYiBaRBWYW8yBx8rh8ofcY5k8A4g7ab/') repeat-x 0px -100px;
width:899px;}
.smenu-content {width:678px; height:17px;padding:2px 7px;}
.smenu-content2 {width:892px; height:17px;padding:2px 7px;}
.smenu-content3 {width:534px; height:17px;padding:2px 7px;}
.smenu-content ul {width:50%;height:17px;margin:0px;padding:0px;list-style-type:none;}
.smenu-content li{float:right;padding:0px 5px;}
.smenu-content li img{border:0px; vertical-align:middle}

.sub-menu {position:relative; font: 12px arial; }

.parent-menu, .sub-menu, .sub-menucontent {overflow:hidden;}

.link-submenu {font:11px arial; color:#004f8b; text-decoration:none;}
.link-submenu:hover {text-decoration:underline;}

.sep-fmenu{width:2px; height:26px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCq-WJQ7TKy9lXnAPb0gHkfOItxmQjczkFrAhl47E-09ejrTssGXFit2qpLvBQluBOwP29VQt8ORW2bz144y1Qe2LU2jcwg8SqskjpKRp4xdSbLadqzpNTOZjSXJwoFCX1JUA3jBkSQ1y/') no-repeat -5px -138px;}

Ở mã CSS trên bạn có thể thay đổi màu nền lại theo ý mình (chính là các code màu xanh lá ở trên)

4. Bây giờ trở về phần tử trang thêm 1 HTML/Javascript
5. Thêm code sau vào HTML/Javascript đó.

Chỉnh sửa code:

- Phần var menu_fid chính là tổng số menu chính và menu phụ, số này phải lớn hơn hoặc bằng với số menu chính + menu phụ. Và bạn hãy lưu ý là số cuối cùng sẽ không có dấu phẩy (,), nếu không code sẽ bị lỗi và không thể hiển thị được.
- var menu_pid: Phần này là phần cho biết bố cục của menu bạn gồm có bao nhiêu menu chính và bao nhiêu menu phụ. Ở trên có 6 menu chính và 15 menu phụ. Nếu bạn muốn thêm menu chính thì hãy thêm dãy số sau số 5 ở phần bắt đầu bằng số 0, thêm menu con thì hãy thêm tiếp dãy số ở phần sub của menu.
- var menu_name: phần này là phần bạn sẽ đặt tên để hiển thị cho các menu chính và menu phụ. Phần này sẽ hiển thị trên menu của bạn để chỉ các nội dung trên blog của bạn.
- var menu_path: phần này để bạn thiết lập đường dẫn cho các menu chính và phụ. Bạn hãy thay các URL trong phần này thành các link tương ứng cho từng menu.
- var menu_show phần này là phần trình diễn các menu, tổng các số menu (gồm menu chính và phụ) phải bằng tổng các số 0 ở phần này.

Lưu ý: Các phần tử cuối cùng trong các mãng sẽ không có dấu phẩy (,) theo sau, và các phần tử trong các mãng phải bằng nhau thì code mới hiển thị đúng.

Bạn hãy download file JS tại đây về và chỉnh sửa lại các mãng trong phần này lại cho phù hợp với blog mình, rồi sau đó upload lên trang host và lấy link thay cho link trên.

Bạn hãy thay link màu cam thành logo của blog bạn hoặc hình ảnh mà bạn thích kích thước (18px x 18px).

6. Sau khi hoàn tất việc chỉnh sửa bạn hãy save lại và kiểm tra kết quả

Chúc bạn thành công.

Tham khảo Fandung Blog

Kiểu 3 :

Nếu trên Blog của bạn có quá nhiều trang riêng lẻ thì công việc tạo menu ngang là cần thiết, có nhiều cách để tạo ra menu ngang (bạn có thể xem các mẫu menu ngang đơn giản TẠI ĐÂY).

Ngoài cách trên, bạn có thể tạo cho mình một menu có nhiều menu con xổ dọc xuống khi bạn click vào một menu chính bất kỳ, điều này sẽ làm cho Blog bạn trông "gọn gàng" hơn và "Pro" hơn rất nhiều.

Để tạo được như vậy, các bạn cần làm theo các bước sau đây:

Đầu tiên, bạn đăng nhập vào Blog > Chọn thiết kế > Chọn chỉnh sửa HTML, sau đó bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh </head>. Bây giờ bạn copy đoạn code này và dán trên dòng lệnh đó

Vì code của menu ngang này bị xung đột với giao diện Blog, do đó các bạn thông cảm tải file này về và copy để dán trên dòng lệnh </head> như hướng dẫn ở trên. TẢI VỀ

Sau khi dán xong đoạn code này, bạn xoá dòng lệnh cũ đi và tiếp tục gõ vào khung tìm kiếm dòng lệnh </header> rồi copy tất cả các code này vào trên dòng lệnh đó.

<ul>

<ul>