Phạm Lê Hoàng

Tạo thêm top menu cho Blog Opera

Saturday, April 28, 2007 2:58:12 AM

(Nguồn : Blog's Đan Quỳnh )

Mới thử cái skin có một bữa mà bà con kêu quá trời

Đã nói là để đấy học CSS mà chẳng ai chịu học cả. Bây giờ tôi báo cáo kết quả cho mọi người học theo nhé

Ai đang sử dụng Fire Fox, Opera, Internet Explorer 7 thì hãy nhìn về menu của tôi, ai sử dụng Internet Explorer 6 thì nhìn vào... hình minh họa

Bạn có thấy menu "home" không? Nếu click vào đó, bạn sẽ được dẫn đến trang chủ của tôi http://www.duyhien.com

Tôi nhớ có ai đó đã hỏi trong topic FAQs của Phạm Lâm liệu có thể tạo thêm menu trong Blog Opera. Theo lý thuyết thì là không

Nhưng thực tế là tôi đã tạo được rồi đó

Tuy nhiên, menu này hiển thị không đúng vị trí trong Internet Explorer 6

Vì vậy, bạn hãy... upgrade trình duyệt của mình nhé

Thật ra, khi copy user.css của Heiko, tôi cũng chẳng để ý tới menu này đâu. Nhưng khi post lên để hỏi bài cả nhà thì Khánh Quang nhắc tôi về điểm đặc biệt này của Blog Heiko (hì... tôi học được nhiều thứ từ cậu em này lắm. Nếu hắn chịu viết tuts, chắc không ai ghé blog của tôi làm gì

). Thế là tôi lại view source và đây là đoạn "tricks" trong user.css của Heiko

Để tạo thêm menu, trước tiên bạn hãy copy đoạn mã quy định menu trong main.css hoặc user.css. Ví dụ tôi lấy đoạn mã của theme số 6:

#menu {
clear:both;
height:41px;
background:transparent url(/community/graphics/users/6/top3.jpg) bottom left no-repeat;
padding:0 35px;
}

#menu ul {
padding:0;
margin:0;
height:30px;
}

#menu li {
float:left;
line-height:30px;
font-size:11px;
margin:0 10px 0 5px;
padding:0;
}

#menu a {
color:#aaa;
text-decoration:none;
}

#menu a:hover, #menu a#selected {
color:#fff;
}

Kế tiếp, bạn hãy đổi dấu "#" thành "." (chuyển ID thành class), và đặt thêm một class menu vào trong file.css. Ví dụ Heiko dùng menu_home (tôi nghĩ để nguyên chữ menu cũng được, vì một bên là class, một bên là ID. Nhưng vì không có chuyên môn nên cứ làm theo cho chắc ăn

). Cụ thể là đoạn mã sau:

.menu_home {
margin:0;
padding:0;
}

.menu {
clear:both;
height:41px;
background:transparent url(/community/graphics/users/6/top3.jpg) bottom left no-repeat;
padding:0 35px;
}

.menu ul {
padding:0;
margin:0;
height:30px;
}

.menu li {
float:left;
line-height:30px;
font-size:11px;
margin:0 10px 0 5px;
padding:0;
}

.menu a {
color:#aaa;
text-decoration:none;
}

.menu a:hover, #menu a#selected {
color:#fff;
}

#useraction {
margin:15px 0 0 0;
}

Sau đó, bạn cần chỉnh lề (margin) và vị trí (position) cho menu mới thêm vào. Híc híc... cái này hơi bị khó đó nha

). Cuối cùng, bạn paste thêm nội dung vừa chỉnh sửa vào ô Enter CSS. "Paste thêm" có nghĩa là bạn vẫn phải giữ đoạn code menu mặc định nếu bạn sử dụng option "use my custom style sheet only".

Để menu hiển thị trên blog của bạn, bạn hãy thêm đoạn mã sau vào entry (bạn hãy đổi tên trang chủ của tôi bằng tên trang của bạn):

 Home

Như vậy, menu chỉ hiển thị khi bạn xem blog mà thôi (thật ra, bạn có thể embed đoạn code này vào mục "About" nữa). Nếu bạn muốn menu luôn hiển thị khi bạn xem bất cứ entry nào thì bạn phải dán đoạn mã trên vào tất cả entry (không sao, công nghệ copy and paste mà, cực kỳ đơn giản

).

Bạn làm thử nhé, chúc bạn thành công

Tạo RSS Reader cho Blog OperaTạo chat box trong Blog Opera