Skip navigation.

Log in | Sign up

TIPS AND TRICKS

http://www.duyhien.com

Tạo thêm top menu cho Blog Opera

Tuesday, 3. April 2007, 10:01:58

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

 <div class="menu"><ul><li class="menu_home"><a href="http://www.duyhien.com">Home</a></li></ul></div>
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

Học CSSTạo chat box trong Blog Opera

Comments

Phạm Lâm 4. April 2007, 01:20

Cái này hay à nha sis :D

Vũ Xuân Được 4. April 2007, 03:24

Thank chị !

cọng rơm cuối mùa 4. April 2007, 04:04

Sao em chưa hiểu gì cả ? nếu của em trước kia CSS bình thường . em thay đổi có được ko chị

Anonymous 4. April 2007, 06:26

Nhi writes:

Chị ơi! sao bây giờ em không thể đọc hết 1 câu trong bài post của chị vì nó bị che mất phần sau. Mà thanh trượt ngang đã kéo hết cở rồi?

Gilly 4. April 2007, 08:44

Nhìn sáng tạo lắm sis ah, cái này chắc hè được nghỉ rảnh rảnh em mới nghiên cứu được mất

Vũ Tùng Lâm 4. April 2007, 11:09

Cóa thấy cái home nào đâu T_____T

Gilly 4. April 2007, 11:18

đầu tiên trên góc trái ý em

Thủy Hiền 4. April 2007, 16:16

Phạm Lâm: giá như nó hiển thị trên IE6 thì còn hay hơn nữa P:

Stanstar_xd và Nghecon18 thử làm xem nhé :D

Em mantico, chị hướng dẫn dùng theme mặc định của Opera mà :smile:

Em anon và nhaconline, có một lỗi nhỏ khi view với Internet Explorer, bây giờ thì ok rồi (mới nhờ chuyên gia fix xong :yes: ).

Em tunglam89, chắc em view bằng IE6 nên không thấy (chị có nói rõ trong post mà :wink: ).

Blue1vn 4. April 2007, 23:29

O* , muon' tao. nhu~ng thanh Menu Dan Toi Web Khac O*? doc. tha^n Blog thi` la`m sao ha? ss , sorry ss , may' em hong khong go~ dc VNI

Nguyen Duc Duy 5. April 2007, 00:23

cai nay thu vi qua ss .Nho ss ma em bay gio da thong thao mot chut it ve thay doi giao dien cua Opera do' :D . Chuc ss luon tim toi va kham pha ra nhiu` nhiu` cai moi de cho bloggers duoc lam quen nhiu hon

Vũ Phương Thảo 5. April 2007, 03:31

Mẹ bé Đan Quỳnh "diện" quá, đổi áo liên tục ah :D Bộ này... hay ho hơn nhưng... khó nhìn hơn sis ah :-O

Đào Tâm 5. April 2007, 11:22

Tuyệt vời rồi! Cô Thuỷ Hiền đã là chuyên gia có Hạng thực sự đấy. Tôi rất...khâm phục. Và chắc sẽ ...sài đỡ bộ cánh mới này!

Vũ Tùng Lâm 5. April 2007, 12:11

Chị ui , em dấu link vào một dòng chữ , em bỏ đc phần gạch chân rồi , nhưng trong CSS nó nằm ở mục nào ạ , để em đổi màu lúc click vào

Thủy Hiền 5. April 2007, 15:57

Em thanhthuycp, em tạo class cho từng menu, rồi add đoạn code đó vào entry là được :smile:

Em ChuBeRong, mọi người cùng nhau khám phá thì sẽ vui hơn đó :D

Em vuphuongthao, welcome em lần đầu tiên đến blog chị nhé :D Em có thể giải thích tại sao khó nhìn được không? Chị sẽ cố gắng khắc phục trong khả năng của chị :D

Thầy Tâm ơi, cám ơn thầy. Em sẽ chỉnh lại một số chỗ và upload cho mọi người sử dụng nhé :D

Em tunglam89, thế khi em dấu link và bỏ gạch chân thì ở đoạn nào trong CSS? Màu của text hoặc link thể hiện ở mã "color:#mã màu". Nếu có mã này thì em đổi màu, nếu không có thì là màu mặc định trên toàn blog (trong mục LINKS), em thêm vào nếu muốn đổi.

Blue1vn 6. April 2007, 04:55

ss nói thế thì em chịu , em mù tịt mà #_#

Thủy Hiền 6. April 2007, 05:17

Ủa? chị hướng dẫn ở trong bài mà? Em không đọc sao? :confused: Em không hiểu chỗ nào thì nói cụ thể nhé :smile:

Vũ Tùng Lâm 6. April 2007, 06:24

Cái blog của em , em cho nó hết gạch chân cả roài :smile::smile::smile::smile: . Thanks chị đã ghé blog em nhá , muh ko hẳn blog của em chỉ có nhạc thui đâu :smile::smile::smile::smile::smile:

Nguyễn Xuân Bách 7. April 2007, 10:40

Em làm sao mà cái chữ home nó nằm trong bài entry roài...Ko nắm trên Menu...
Làm sao hở chị...

Nguyễn Hồng Nam 8. April 2007, 03:43

Chị ơi, em mới lập một blog mà chưa co một chút kiến thức gì về tạo những thay đổi trong đó. Chị có thể hướng dẫn em 1 cách chi tiết được không

yeuemlam 8. April 2007, 16:59

Hôm trước chưa đọc hết blog của chị, tưởng chị trẻ lắm. Ai ngờ còn nhiều tuổi hơn cả e. Hic. Thế mà định gọi là e đấy. haha. Tại em thấy tên con gái nên thế. haha. Đúng là máu gái :D

Thanh Hùng 9. April 2007, 04:29

Skin mới của chị đẹp wa. Xin học hỏi.

Vic zaizai 9. April 2007, 15:45

Thấy skin của mình không có quảng cáo http//www.my.opera.com/danquynh là cho vào ngay hic hic

Thủy Hiền 9. April 2007, 16:26

Em tunglam89, nếu có thời gian, chị sẽ ghé blog em thường xuyên nha :D

Xuân Bách ơi, phải biết position mới được. Như cái skin này, chị để cho nó ra ngoài bài viết được rồi (position left), nhưng mà không chuyển nó lên trên được. Bây giờ nó đang nằm sau sidebar đó :cry: Hic hic... phải biết CSS thôi, chắc đợi Khánh Quang hay Phạm Lâm viết một cái frame sẵn, rồi chỉ chỉnh margin hay padding p:

Mr_Nam, em xem lại từ post "Trang trí Blog Opera theo sở thích cá nhân" và đọc theo thứ tự nhé. Nếu không làm được phần nào thì nêu câu hỏi cụ thể, nói chung chung như thế này thì chị không giúp được :frown:

yeuemlam nè, thế em đọc ở đâu mà biết chị nhiều tuổi vậy? :lol: Khổ thế đấy... ông bà vẫn thường nói "thương thay thân phận đàn bà..." :cry:

Em hungit-share, chị đang chỉnh sửa một số phần, khi nào xong thì chị sẽ up để mọi người sử dụng :D

Em nhipsongtre, em nghĩ chị tài đến độ có thể giăng bảng quảng cáo vào blog của em như vậy sao? Có bạn yeuemlam cũng đang sử dụng skin endless love như em vậy, nhưng có bảng quảng cáo nào đâu? Nếu em download hình ảnh và thay đường dẫn, như trong hướng dẫn sử dụng, thì sẽ không có "quảng cáo" đâu P: Hình ảnh để trên host của chị thì chị muốn xử thế nào là tùy chị chứ phải không? :lol:

Lê Đình Vị 13. April 2007, 22:44

Chi DQ dung la tuyet!Cam on chi nhieu vi nhưng bài viết thiệt hữu ích.Có thời gian sẽ cố làm một vài cái như chỉ dẫn của bà chị.Chúc bà chị ngày càng nổi danh trong làng blog

Thủy Hiền 14. April 2007, 01:07

Hic hic... đừng kêu chị là... bà nha :frown: p: Chị không mong nổi danh đâu, chỉ mong mọi người thấy những gì chị chia sẻ là hữu ích là được rồi :smile:

Vic zaizai 14. April 2007, 02:53

Nghe nói đã có blog của VietNam rùi phải không chị!!

Thủy Hiền 14. April 2007, 02:59

Có cách đây đúng 1 tháng rồi em :smile: Nhưng mà là Vietnamese Forum chứ không phải Blog :wink: Em vào đăng ký thành viên đi nhé :smile:

Phạm Lê Hoàng 21. April 2007, 10:22

chà ... chà .. Những bài viết của chị thật hay và hữu ích ! Chị cho em post bài của chị vào trang của em nhé !! Hì .. hì ... em dẫn link tới trang web của chị luôn !! Cảm ơn chị nhé !

Thủy Hiền 23. April 2007, 23:35

Nếu em có link back thì quá tuyệt rồi :yes: Chị cũng cám ơn em vì đã giúp truyền thông tin thêm cho nhiều người :love:

Akimaru 25. May 2007, 07:06

em van ko hieu view html la` gi` ca co' the giup em ko

Đào Văn Hoàn 21. June 2007, 10:20

e tìm đọc mãi ko thấy hướng dẫn tạo thêm các menu .
Vi du nhu tạo ra các menu như trên của chị đó ?

My page
+ trang con
+ trang con
+ trang con
...

Opera Guide
+ trang con
+ trang con
+ trang con
...
Tin tuc bao
+ 24h
+ Tuoi tre
+ The thao
+ Vietnamnet
...
Vi dụ e muốn tạo các menu như the và có các bài theo chủ dề như vậy thì sửa chỗ nào ạ ?
Chị chỉ giúp e với ?
(1 tín đồ opera mới hành nghề >> nên cực gà !)

Thủy Hiền 21. June 2007, 15:44

Akimaru_tenchu_ninja, view HTML để xem trang web được viết bằng mã HTML nào. Em cứ click chuột phải, chọn "view source" hoặc "view page source" là ra mã HTML :wink: Còn dùng Fire Fox thì download vài cái add-on là xem được kể cả khi trang HTML đã dùng script disable right click :D

Hoandv, em xem post "FAQs về Blog Opera" (câu 24).

Thủy Hiền 11. July 2007, 09:19

Nếu chỉ có bao nhiêu đó thì không đổi được. Em xem bài "Viết tiếng Việt cho top menu của Blog Opera" nhé :wink: Nhưng chỉ xem được trên Fire Fox và Opera thôi. Em nhìn cái menu của chị đi, mặc dù bằng tiếng Anh, nhưng đâu có giống menu mặc định phải không? :wink:

Thủy Hiền 11. July 2007, 11:51

Em qua IE7 xem cái menu của chị có hiển thị không nhé :wink: Nếu chị mà biết làm thì chị đã hướng dẫn cho mọi người rồi, vì có giấu thì mọi người cũng rút source được mà :lol:

nguyen tuan anh 21. December 2007, 10:48

Chi. oi em lam` mat' pha^n` "about me" nam` o~ phan` dau tien sidebar (co ca~ vatar!)!rui lam` sao de co' lai. ha chi?em vao sidebar de^~ chon. ma` ko thay' co' pha^n` about me nhu nhung~ blog khac' ! cuu em voi ! thk chi. !

nguyen tuan anh 21. December 2007, 10:49

em lam` o~ blog khac chu ko phai blog cua~ em !

Thủy Hiền 26. December 2007, 10:15

Nếu mà không có thì chị cũng không biết làm sao cả, hic hic... Chắc em phải vào forum của Opera để hỏi thôi :frown: Sorry vì đã không giúp được em :frown:

sachmlm 8. January 2008, 01:36

Mình mới tạo Blog mong bạn chỉ cho mình cách đặt About vào Sidebar nhé

Cảm ơn

sachmlm 8. January 2008, 01:42

bạn có thể cho mình bộ giao diện của http://www.duyhien.com được không mình rất thích mẫu này để mình xem và học hỏi thêm rất cảm ơn bạn nhiều và vì mình còn ga mờ nên nếu bạn hướng dẫn cho mình nữa thì quá tuyệt , minh sẽ làm 1 home tương tự

Cảm ơn bạn nhiều nhiều

Thủy Hiền 12. February 2008, 04:11

Sachmlm, bạn vào My Page/ Account/ Sidebars and Menus và tick vào About.

Muốn viết được 1 trang tương tự như duyhien.com, bạn xem tại http://duyhien.com/website :D

Nguyễn minh Bảo 26. December 2008, 01:53

chị ơi chị ghé thăm blog của em và góp ý kiến với em dc hok.
ah` mà sao blog của em hok bót dc bài ra giữa và sang bên phải vậy. nếu muốn bót hay thêm thanh công cụ ở giữa và bên phải thì em phải làm như thế nào chi hướng dẫn dùm em cái
em cám ơn chị nhiều11111111111

Nguyễn Tiến Vũ 24. March 2009, 10:54

:cry: Chị cho em hỏi fần bài viết với side chị cho nằm trên wrap mấy?
Em đang muốn chỉnh menu mà ko biết code ở đâu?

Nhật Phương 29. March 2009, 04:41

sao mà thanh menu ở bên trái
http://i288.photobucket.com/albums/ll164/hoangphuongt/opera.jpg?t=1238301624

có thể giúp mình chữa dc ko
Đây là đoạn CSS: http://files.myopera.com/hoangkien/mystyle23/MyStyle23-TourDeSun-v1.css

có j sent qua mail nhá: nhatphuonght@gmail.com hoặc YH: thieugia_galang25

dang hoa 30. May 2009, 18:44

em khong thay cho cai dat hay menu cua blog o dau

hongtai 9. November 2009, 12:03

chị ơi! cho e hỏi cách tạo tuyết rơi chi blog thì làm sao!!

sanh50ddt 24. November 2009, 14:28

:confused:
chị ơi! cho em hỏi.
em mới lam blg nên k bt nè,blog của em có phần như ảnh của en,khách đến thăm,lịch,,,nó ở phía trái mà hơi lệch ra ngoài thân e phải sửa lại sao hả chị,chị jups em với,
thank chi,,mà bài viết của em dài thì em dùng đoạn coss nào đê tạo nhiêu trang chị:idea:

Nhật Phương 5. December 2009, 13:21

ko ai giúp hả chài

Write a comment

You must be logged in to write a comment. If you're not a registered member, please sign up.

December 2009
S M T W T F S
November 2009January 2010
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

My Pages

Opera Guide

Opera Themes to share

Design Calendars

Highlighted Posts