Thủy Hiền

Tạo thêm top menu cho Blog Opera

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

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âmphamlam # Wednesday, April 4, 2007 1:20:12 AM

Cái này hay à nha sis

Vũ Xuân Đượcstarnstar_xd # Wednesday, April 4, 2007 3:24:23 AM

Thank chị !

cọng rơm cuối mùa mantico # Wednesday, April 4, 2007 4:04:10 AM

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 # Wednesday, April 4, 2007 6:26:24 AM

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?

GillyNghecon18 # Wednesday, April 4, 2007 8:44:31 AM

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âmtunglam89 # Wednesday, April 4, 2007 11:09:27 AM

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

GillyNghecon18 # Wednesday, April 4, 2007 11:18:07 AM

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

Thủy Hiềndanquynh # Wednesday, April 4, 2007 4:16:37 PM

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

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

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

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

).

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

Blue1vnthanhthuycp # Wednesday, April 4, 2007 11:29:54 PM

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

Dao Duy HungChuBeRong # Thursday, April 5, 2007 12:23:08 AM

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'

. 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ảovuphuongthao # Thursday, April 5, 2007 3:31:14 AM

Mẹ bé Đan Quỳnh "diện" quá, đổi áo liên tục ah

Bộ này... hay ho hơn nhưng... khó nhìn hơn sis ah :-O

Đào TâmdinhvivetinhGPS # Thursday, April 5, 2007 11:22:09 AM

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âmtunglam89 # Thursday, April 5, 2007 12:11:11 PM

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ềndanquynh # Thursday, April 5, 2007 3:57:31 PM

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

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

Em vuphuongthao, welcome em lần đầu tiên đến blog chị nhé

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ị

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é

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.

Blue1vnthanhthuycp # Friday, April 6, 2007 4:55:22 AM

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

Thủy Hiềndanquynh # Friday, April 6, 2007 5:17:14 AM

Ủa? chị hướng dẫn ở trong bài mà? Em không đọc sao?

Em không hiểu chỗ nào thì nói cụ thể nhé

Vũ Tùng Lâmtunglam89 # Friday, April 6, 2007 6:24:41 AM

Cái blog của em , em cho nó hết gạch chân cả roài

. Thanks chị đã ghé blog em nhá , muh ko hẳn blog của em chỉ có nhạc thui đâu

Nguyễn Xuân Báchbach_betto # Saturday, April 7, 2007 10:40:08 AM

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 NamMr_Nam # Sunday, April 8, 2007 3:43:09 AM

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 # Sunday, April 8, 2007 4:59:58 PM

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

Thanh Hùnghungit-share # Monday, April 9, 2007 4:29:54 AM

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

Vic zaizainhipsongtre # Monday, April 9, 2007 3:45:13 PM

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ềndanquynh # Monday, April 9, 2007 4:26:45 PM

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

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 đó

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

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

yeuemlam nè, thế em đọc ở đâu mà biết chị nhiều tuổi vậy?

Khổ thế đấy... ông bà vẫn thường nói "thương thay thân phận đàn bà..."

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

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

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?

Lê Đình Vịbloger12a5 # Friday, April 13, 2007 10:44:59 PM

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ềndanquynh # Saturday, April 14, 2007 1:07:05 AM

Hic hic... đừng kêu chị là... bà nha

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

Vic zaizainhipsongtre # Saturday, April 14, 2007 2:53:19 AM

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

Thủy Hiềndanquynh # Saturday, April 14, 2007 2:59:03 AM

Có cách đây đúng 1 tháng rồi em

Nhưng mà là Vietnamese Forum chứ không phải Blog

Em vào đăng ký thành viên đi nhé

Phạm Lê Hoàngdrkhanhb # Saturday, April 21, 2007 10:22:38 AM

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ềndanquynh # Monday, April 23, 2007 11:35:50 PM

Nếu em có link back thì quá tuyệt rồi

Chị cũng cám ơn em vì đã giúp truyền thông tin thêm cho nhiều người

Akimaruakimaru_tenchu_ninja # Friday, May 25, 2007 7:06:34 AM

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

Đào Văn Hoànhoandv # Thursday, June 21, 2007 10:20:53 AM

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ềndanquynh # Thursday, June 21, 2007 3:44:51 PM

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

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

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

Thủy Hiềndanquynh # Wednesday, July 11, 2007 9:19:52 AM

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é

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?

Thủy Hiềndanquynh # Wednesday, July 11, 2007 11:51:48 AM

Em qua IE7 xem cái menu của chị có hiển thị không nhé

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à

nguyen tuan anhMr_Cu # Friday, December 21, 2007 10:48:49 AM

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 anhMr_Cu # Friday, December 21, 2007 10:49:20 AM

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

Thủy Hiềndanquynh # Wednesday, December 26, 2007 10:15:33 AM

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

Sorry vì đã không giúp được em

sachmlm # Tuesday, January 8, 2008 1:36:44 AM

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 # Tuesday, January 8, 2008 1:42:50 AM

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ềndanquynh # Tuesday, February 12, 2008 4:11:27 AM

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

Nguyễn minh Bảohiboynet # Friday, December 26, 2008 1:53:10 AM

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ũtienvu117 # Tuesday, March 24, 2009 10:54:24 AM

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ươngnhatphuongt # Sunday, March 29, 2009 4:41:52 AM

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 hoadanghoa2310 # Saturday, May 30, 2009 6:44:43 PM

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

hongtaihongtailove # Monday, November 9, 2009 12:03:51 PM

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

sanh50ddtsanh50ddtpro # Tuesday, November 24, 2009 2:28:33 PM

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ươngnhatphuongt # Saturday, December 5, 2009 1:21:54 PM

ko ai giúp hả chài

Le Maovuongmaoit # Thursday, September 23, 2010 1:19:43 AM

Hello.
Minh muon lam tung de muc cho moi bai viet thi lam the nao vay ban.
Vi du nhu minh muon menu co de muc "music", "thong tin cong nghe",....Nhu ban co nhung de muc nhu "my page","design calendar",... Cam on ban truoc nha. Ban gui mail cho minh nha cataituongchienmo@yahoo.com