Lt

Lu sis tutorials Thay đổi background Blog Opera Thay đổi giao diện Blog Opera Background của trang Opera của bạn thể hiện ở đoạn mã sau trong file main.css (lưu ý, đối với các theme khác nhau, phần mã này cũng có thể khác nhau): BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #b6b8b1; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #111; LINE-HEIGHT: 145%; PADDING-TOP: 0px; FONT-FAMILY: arial,'trebuchet ms',helvetica,sans-serif; TEXT-ALIGN: center } #wrap1 { BACKGROUND: url(/community/graphics/users/2/wrap1.gif) #acaea7 repeat-y left top; MARGIN: 0px auto; max-width: 882px } #wrap2 { BACKGROUND: url(/community/graphics/users/2/wrap2.gif) repeat-y right top } #topbar { BACKGROUND: #fff; MARGIN: 0px -10px; OVERFLOW: hidden; LINE-HEIGHT: 23px;

HEIGHT: 28px; max-width: 852px } #content { CLEAR: both; BACKGROUND: #fff; MARGIN: 0px auto; POSITION: relative; TEXT-ALIGN: left; max-width: 812px; min-width: 739px } #footer { CLEAR: both; BACKGROUND: #fff; MARGIN: 0px auto; POSITION: relative; TEXT-ALIGN: left; max-width: 812px; min-width: 739px } Để cho dễ hiểu, bạn hãy nhìn vào ảnh minh họa sau:

- Body là phần hiển thị những chiếc lá maples đủ màu; - Wrap1 là phần border bên trái (repeat-y left: hình nền lập lại theo trục Y, bên trái; Nếu bạn muốn thay đổi border ở trên, thay vì bên trái, bạn có thể sửa đoạn này thành repeat-x top); - Wrap2 là phần border bên phải (repeat-y right; tương tự, muốn đổi thành border ở dưới cùng, bạn sửa thành repeat-x bottom); - Topbar là thanh trên cùng của Blog; - Content là phần hiển thị toàn bộ nội dung của Blog; - Footer là phần hiển thị hình chiếc lá maple và 3 hạt dẻ. Bạn muốn thay đổi ảnh nền, hoặc màu nền thì chỉ cần thay đường dẫn ở phần tôi đã in đậm phía trên. - Màu nền: bạn cần xác định tên màu bằng tiếng Anh hoặc mã màu (cách đơn giản nhất để xác định mã màu là dùng Photoshop để so cho phù hợp với hình ảnh nền mà bạn muốn sử dụng).

- Ảnh nền: bạn phải chỉ đường dẫn đến file ảnh mà bạn đã upload vào My Files. Đường dẫn có thể tuyệt đối, i.e. url(http://my.opera.com/tên-user/tên-directory/tên-file), hoặc tương đối, i.e. url(/tên-user/tên-directory/tên-file). Tuy nhiên, tôi được biết nếu bạn chỉ đường dẫn tương đối thì ảnh có thể không hiển thị trên trình duyệt Fire Fox. Còn lý do tại sao thì tôi không biết Trong trường hợp bạn đổi vị trí của wrap1 và wrap2 thành top và bottom, và sử dụng ảnh nền cho 2 vị trí này, bạn cần xác định thêm thông số height (chiều cao), để ảnh có thể hiển thị đầy đủ. Bạn cũng phải làm tương tự với footer, nếu bạn muốn thêm ảnh vào, thay vì màu nền mặc định. Nếu bạn muốn thay đổi background cho từng bài viết của bạn, bạn cần tìm đoạn mã sau đây: .post { PADDING-RIGHT: 0px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 16px } #firstpost { BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; PADDING-TOP: 0px; BORDER-BOTTOM: medium none } #lastpost { BORDER-BOTTOM: #ddd 1px solid } .post .title { FONT-SIZE: 20px; MARGIN: 0px 0px 10px; LINE-HEIGHT: normal

} Bạn thấy rằng background mặc định của bài viết sẽ theo background của content. Nếu bạn muốn thay đổi, bạn cần thêm đoạn mã về background vào phần post (nội dung bài viết) và post.title (tiêu đề của bài viết), ví dụ: .post { background: url(đường dẫn tới file ảnh) no-repeat right bottom; } Thuộc tính đi sau đường dẫn để xác định ảnh nền chỉ hiển thị một lần (no-repeat) và nằm ở phía dưới cùng (bottom), bên phải (right). Nếu bạn muốn ảnh nền tự động lập lại thì không thêm thuộc tính no-repeat, hoặc đặt ở các vị trí khác thì thay đổi tương ứng (left, center, top,...). Nếu bạn muốn tạo border cho từng post, bạn chú ý phần in đậm trong mã post. File main.css của theme dựng sẵn chỉ tạo border cho góc trên của post, không có border cho post đầu tiên (first post), và chỉ có border góc dưới của post cuối cùng (last post). Nếu bạn muốn tạo cả 4 góc, bạn cần thêm vào border-left (trái), border-right (phải), borderbottom (đáy). Thông số đi theo bao gồm màu (color), xác định bằng mã màu; độ lớn (width), tính bằng đơn vị pixel; và kiểu (style) của border. Bạn có thể tham khảo các kiểu border tại W3Schools. Khi đã tạo border, với mã code mặc định, bạn sẽ thấy nội dung sẽ nằm sát border. Muốn canh lề cho đẹp, bạn chú ý phần in đậm và nghiêng. Theme mặc định không chừa lề cho cả lề trái lẫn lề phải, bạn chỉ cần thay đổi giá trị, tính bằng đơn vị pixel cho phù hợp với sở thích của bạn. Nếu muốn canh lề phải, bạn thêm mã padding-right vào đoạn code nhé. Chúc bạn thành công! Thay đổi banner Blog Opera (Phạm Lâm) Thay đổi giao diện Blog Opera Tới đây, tôi nghĩ đọc bài hướng dẫn của Phạm Lâm sẽ dễ hiểu hơn, vì bạn đã có một số khái niệm cơ bản về Web Page Layout rồi Bài trích từ Blog của Phạm Lâm, có sửa chữa chút xíu Để thay đổi banner mặc định của Opera thì trước hết bạn phải biết kích thước của banner sau đó tạo một bức ảnh có kích thước như vậy để sẵn sàng thay thế. Opera cũng có trang tạo sẵn một số các bức ảnh có kích cỡ đã định để các bạn thay thế (thư viện banners của Opera). Riêng tôi thì tôi tự tạo ra một banner và upload vào trong phần My Files của Opera. Để thay đổi banner các bạn hãy mở file main.css của mình ra tìm tới đoạn code có chữ #top2 (cách đơn giản để tìm là mở file css ra bằng Notepad nhấn Ctrl+F để mở ô tìm kiếm sau đó gõ vào từ #top2 để tìm). Ví dụ: #top2 { height: 116px;

padding-left: 15px; background: #2f569b url(/community/graphics/users/1/top.gif) top left repeat-x; border-bottom: 1px solid #fff; } * height: 116px: Chiều cao của banner, các bạn có thể chỉnh thông số này bằng với chiều cao của bức ảnh; * #2f569b: Màu của banner nếu ảnh nền banner không hiển thị, trong đó #2f569b là mã của màu; * /community/graphics/users/1/top.gif: Đường dẫn đến file ảnh banner; * top left repeat-x: Lặp lại bức ảnh từ phía trên cùng bên trái theo trục x tức là xếp liên tục bức ảnh đó từ trái qua phải. Đoạn in đậm chính là phần quan trọng để thay đổi banner. Bạn chỉ cần chỉ đường dẫn tới file ảnh của bạn là banner của bạn sẽ được thay đổi. Nếu bạn chỉ muốn banner là màu thôi thì đoạn background sẽ được thay thế thành background: #000000; (thay #000000 thành mã màu mà bạn muốn). Chúc bạn thành công! Viết tiếng Việt trong Blog Opera (Phạm Lâm) Thay đổi giao diện Blog Opera Tổng hợp từ Blog của Phạm Lâm Hiện nay blog của Opera có hỗ trợ Unicode vì thế chúng ta có thể gõ tiếng Việt có dấu bình thường. Nếu mở file main.css bằng notepad các bạn sẽ thấy đoạn sau: body { background:#8c315b; margin: 0; padding: 2px 0; font-family: 'trebuchet ms',helvetica,sans-serif; font-size: 12px; line-height: 145%; text-align: center; color: #000; } Có thể đoạn này của các bạn hơi khác nhưng không sao. Giải thích với các bạn chưa biết gì về CSS ở đây thật khó nhưng mình chỉ quan tâm tới 3 vấn đề trong đoạn code này đó là font chữ (font-family), cỡ chữ (font-size) và màu chữ (color). Một số bạn dùng trình duyệt IE khi viết tiếng việt ở phần tiêu đề sẽ không hiển thị đúng với font 'trebuchet ms' ở đây. Các bạn hãy thay đổi như sau:

body { font-family: Arial,'trebuchet ms',helvetica,sans-serif; } Các bạn có thấy chữ Arial màu đỏ không? Chỉ chỗ đấy được thay đổi thôi nhưng nó giúp hiển thị tiếng Việt tốt trên nhiều trình duyệt. Ngoài font Arial các bạn có thể thay bằng font Verdana, Tahoma. Các bạn cũng có thể thay đổi font-size: 12px; thành 13 hoặc 11; đổi color thành màu phù hợp với background của bạn. Bạn cũng cần làm tương tự với tiêu đề tại đoạn code sau: #top h1 { margin: 0; width: 100%; overflow: hidden; font-size: 30px; font-family: 'trebuchet ms',arial,helvetica,sans-serif; line-height: normal; padding-top: 22px; } và subtitle, tại đoạn code sau: #subtitle { margin: 0; font-size: 12px; width: 100%; overflow: hidden; } Opera không cho add bộ gõ trực tiếp giống như diễn đàn vì vậy phải dùng các bộ gõ khác như Vietkey hay Unikey và chọn bảng mã Unicode dựng sẵn để gõ tiếng Việt có dấu. Chúc bạn thành công! Thay đổi bố cục Blog Opera Thay đổi giao diện Blog Opera Gồng mình viết bài này , rất mong nhận được góp ý của các bạn. Trang Blog Opera bao gồm banner (top), menu, nội dung (content) và đường viền chân (footer). Content bao gồm phần hiển thị các bài viết (mainwrap) và phần hiển thị các links (sidewrap). Mặc định của Opera là mainwrap nằm phía trái, và sidewrap nằm phía

phải. Bản thân tôi không thích bố cục này, có lẽ vì tôi quen nhìn những websets có menu nằm bên trái rồi. Vì vậy, tôi sẽ giới thiệu cách đổi vị trí của 2 phần này. Bạn cần tìm đoạn code sau đây trong file main.css: #mainwrap { FLOAT: left; PADDING-BOTTOM: 12px; WIDTH: 100%; MARGIN-RIGHT: -210px } #main { MIN-HEIGHT: 400px; PADDING-BOTTOM: 15px; MARGIN-RIGHT: 210px } #sidewrap { FONT-SIZE: 11px; FLOAT: right; OVERFLOW: hidden; WIDTH: 190px } Phần in đậm trong 2 đoạn code xác định vị trí của mainwrap và sidewrap, lần lượt là bên trái (float: left) và bên phải (float: right). Trước tiên, bạn cần thay đổi giá trị của thông số này, để cho mainwrap nằm bên phải (đổi thành float: right) và sidewrap nằm bên trái (float: left). Tiếp theo, bạn chú ý đoạn in nghiêng trong 2 đoạn code mainwrap và main; thông số này để xác định lề phải của mainwrap (margin-right), bạn cần sửa lại thành lề trái (marginleft). Dựa trên bố cục mới của trang Blog, bạn điều chỉnh lại giá trị của thông số này (tính bằng đơn vị pixel) cho phù hợp với sở thích của bạn. Tôi không hiểu vì sao mainwrapmargin có giá trị âm còn main-margin thì có giá trị dương (hay ký hiệu "-" để biểu diễn một giá trị nào khác?? Bạn nào có chuyên môn có thể giúp giải thích được không ạ? Xin cám ơn!). Chúc bạn thành công!

Thay đổi bố cục Blog Opera Thay đổi giao diện Blog Opera Gồng mình viết bài này , rất mong nhận được góp ý của các bạn. Trang Blog Opera bao gồm banner (top), menu, nội dung (content) và đường viền chân (footer). Content bao gồm phần hiển thị các bài viết (mainwrap) và phần hiển thị các links (sidewrap). Mặc định của Opera là mainwrap nằm phía trái, và sidewrap nằm phía phải. Bản thân tôi không thích bố cục này, có lẽ vì tôi quen nhìn những websets có menu nằm bên trái rồi. Vì vậy, tôi sẽ giới thiệu cách đổi vị trí của 2 phần này. Bạn cần tìm đoạn code sau đây trong file main.css: #mainwrap { FLOAT: left; PADDING-BOTTOM: 12px; WIDTH: 100%; MARGIN-RIGHT: -210px } #main { MIN-HEIGHT: 400px; PADDING-BOTTOM: 15px; MARGIN-RIGHT: 210px } #sidewrap { FONT-SIZE: 11px; FLOAT: right; OVERFLOW: hidden; WIDTH: 190px } Phần in đậm trong 2 đoạn code xác định vị trí của mainwrap và sidewrap, lần lượt là bên trái (float: left) và bên phải (float: right). Trước tiên, bạn cần thay đổi giá trị của thông số này, để cho mainwrap nằm bên phải (đổi thành float: right) và sidewrap nằm bên trái (float: left). Tiếp theo, bạn chú ý đoạn in nghiêng trong 2 đoạn code mainwrap và main; thông số này để xác định lề phải của mainwrap (margin-right), bạn cần sửa lại thành lề trái (marginleft). Dựa trên bố cục mới của trang Blog, bạn điều chỉnh lại giá trị của thông số này (tính bằng đơn vị pixel) cho phù hợp với sở thích của bạn. Tôi không hiểu vì sao mainwrap-

margin có giá trị âm còn main-margin thì có giá trị dương (hay ký hiệu "-" để biểu diễn một giá trị nào khác?? Bạn nào có chuyên môn có thể giúp giải thích được không ạ? Xin cám ơn!). Chúc bạn thành công! Trang trí lại Sidewrap của Blog Opera Thay đổi giao diện Blog Opera Phần này cũng "gồng" luôn, nếu các bạn thấy khó hiểu thì comment để tôi chỉnh sửa nhé. Xin cám ơn Nếu bạn muốn thay đổi cách trang trí mặc định cho sidewrap bằng những hình ảnh hoặc màu nền cho phù hợp với background của bạn thì bạn tìm đoạn code sau: side H2 { PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 10px; BACKGROUND: #356ca2; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 1px; TEXT-TRANSFORM: uppercase; COLOR: #fff; PADDING-TOP: 2px; TEXT-ALIGN: left } .sidebox { BACKGROUND: #f5f5f5; MARGIN-BOTTOM: 15px; BORDER-BOTTOM: #dbdbd5 1px solid } .sidebox .pad { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top; PADDING-BOTTOM: 5px;

PADDING-TOP: 5px } Để cho dễ xác định, bạn hãy nhìn vào Blog của tôi - side H2 là phần hiển thị tiêu đề của từng box, e.g. About, Tags, Countdowns,... - sidebox là khoảng cách giữa tiêu đề và nội dung của từng box (bạn thấy có 1 khe rất nhỏ như sợi chỉ ở giữa); - sidebox.pad là phần hiển thị nội dung của từng box. Bạn chỉ cần thay đường dẫn của background bằng ảnh nền hoặc màu nền. Nếu bạn muốn tạo khung cho box thì bạn thêm code border (xem lại phần thay đổi background). Khi thay đổi background, có thể màu của text và hyperlink sẽ không phù hợp nữa. Bạn có thể thay đổi màu text của tiêu đề ở đoạn code color được in nghiêng. Màu text của nội dung hiển thị trong box nằm trong đoạn code sidewrap. Nếu không được xác định (như ở trên) thì có nghĩa là theo code của cả trang Blog của bạn (nằm trong đoạn code body (xem lại phần thay đổi background). Nếu bạn muốn màu text khác, thì bạn thêm code color: #000000 (thay bằng màu mà bạn muốn) vào đoạn code sidewrap hoặc sidebox. Màu của hyperlink được xác định trong đoạn code sau #side A:link { (liên kết) COLOR: #000 } #side A:visited { (liên kết đã được xem) COLOR: #000 } #side A:active { (liên kết đang hoạt động) COLOR: #000 } Lưu ý, những đoạn code này sẽ không áp dụng cho lịch và box download trình duyệt Opera. Muốn thay đổi cách trang trí của hai box này, bạn cần tìm đoạn code sau: #side CAPTION { (phần hiển thị tiêu đề của lịch, i.e. chữ Calendar) PADDING-RIGHT: 0px; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 10px;

BACKGROUND: #356ca2; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 1px; TEXT-TRANSFORM: uppercase; COLOR: #fff; PADDING-TOP: 2px; TEXT-ALIGN: left } #calendar { (phần hiển thị lịch) CLEAR: both; FONT-SIZE: 10px; BACKGROUND: url(/community/graphics/users/2/calendar.gif) #efefed; MARGIN-BOTTOM: 15px; WIDTH: 190px; BORDER-BOTTOM: #dbdbd5 1px solid; border-spacing: 1px } #side #getopera H2 { (phần hiển thị tiêu đề box download trình duyệt Opera) BACKGROUND: #356ca2; COLOR: #fff } #getopera .pad { (phần hiển thị nội dung quảng cáo) BACKGROUND: url(/community/graphics/users/2/sidebox.gif) #f5f5f5 repeat-x left top; COLOR: #fff } Nếu bạn không muốn hiển thị box download trình duyệt Opera, thì bạn chỉ cần viết đoạn code sau vào phần enter CSS: #side #getopera { display: none } Chúc bạn thành công!

Làm sao để bỏ dòng chữ "Sticky post"? Bạn thêm đoạn này vào user.css: .post .sticky { display:none; } Làm sao để chèn media vào blog? Để chèn file flash vào bài post trên blog, bạn dùng code sau (thay đường dẫn (src) bằng file của bạn): <embed quality="high" menu="true" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_P rod_Version=ShockwaveFlash" src="http://www.***.***/*.swf" type="application/x-shockwave-flash" width="500" height="273" loop="false"> Để chèn nhạc (mp3), bạn dùng code sau: <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="http://www.***.***/*.mp3" name="MediaPlayer1" width="280" height="46" autostart="0" showcontrols="1" volume="80"> Để đoạn nhạc lặp lại thì bạn thêm code loop=-1 Tại sao khi chuyển những bài viết từ file word vào blog thì không thể đưa footnote (chú thích) vào trong post được? Cách giải quyết? Muốn tạo footnote, bạn phải biết nhiều về ngôn ngữ W3. Bạn có thể vào đây tham khảo http://www.w3schools.com/xslfo/obj_footnote.asp Ngược lại, bạn có thể làm... thủ công bằng cách tạo lại footnote trong bài viết (copy phần footnote trong word rồi paste), còn các số ghi ở trên phần chữ trong bài viết thì có thể tạo bằng thẻ superscript (S1) hoặc subscript (S1) trên cửa sổ soạn thảo của Opera. Ai muốn chỉnh phần topbar (không là màu trắng hoặc đen mặc định) thì xem trong file topbar-1a.css. Cụ thể là: #topbar1 { background:#000; color:#fff; height:32px; overflow:hidden; line-height:24px;

} img { border:none; } .mobile, .hide { display:none; } p img, input { vertical-align:middle; } #topbar2, #toplogin div { width:832px; max-width:100%; min-width:700px; margin:0 auto; text-align:left; } #topbar1 img { margin-right:4px; } #topbar1 a, #topbar1 .tpad { padding-right:7px; text-decoration:none; } #topbar1 a:hover { text-decoration:underline; } #topbar1 a:link, #topbar1 a:visited { color:#fff; } #topbar2 a.yellow:link, #topbar2 a.yellow:visited { color:#ed2; }

#topbar1 p, #toplogin p { margin:0; font-size:11px; padding:4px 0; } #toplogin { border-top:1px solid #555; background:#333; color:#fff; padding:2px 0; border-bottom:1px solid #000; } #toplogin label { padding-right:4px; } #toplogin input { font-size:11px; border:none; } Chú ý phần in đậm để đổi hình nền, màu chữ của text hoặc link. Nếu chỉ muốn "vứt quách" cái thanh topbar thì chỉ cần thay background là transparent là xong Ai muốn customize những cái khác thì tự nghiên cứu nhé Chúc bạn thành công! 34. Làm cách nào để tạo script chuột và đổi màu thanh trượt? Trước đây, tôi cũng tạo cursor (ví dụ trang chủ của Đan Quỳnh) và thanh trượt (lưu bút của Đan Quỳnh), nhưng đều không hiển thị trên FireFox (chỉ xem được trên Internet Explorer), nên tôi không làm nữa. Nhưng nếu bạn vẫn muốn thì bạn làm như sau: - Để tạo script chuột, bạn thêm mã cursor vào đoạn mã body (mã đầu tiên trong main.css hoặc user.css): body { cursor: url(red5normal2.cur) }

Bạn cần ghi rõ địa chỉ URL của cursor mà bạn đã upload vào host. Bạn có thể vào Cursor Mania để download các loại cursor. - Để đổi màu thanh trượt, bạn cũng thêm đoạn mã scrollbar vào body: body { scrollbar-face-color: #b0c5a5; scrollbar-shadow-color: #dbe3cc; scrollbar-highlight-color: white; scrollbar-3dlight-color: white; scrollbar-darkshadow-color: #dbe3cc; scrollbar-track-color:#dbe3cc; scrollbar-arrow-color: white } Bạn có thể vào Online CSS Scrollbar Changer để thử màu cho từng thông số sao cho phù hợp với màu nền của bạn, rồi copy mã màu để paste vào đoạn mã trên. 35. Làm sao để chỉnh lại mục Friend Lists, Latest Comments và Recent Visitors ở sidebar khi không dùng skin mặc định của Opera? Bạn hãy copy và paste đoạn mã sau vào user.css: //* :: LATEST COMMENTS + RECENT VISITORS :: */ #side .userlist li { list-style-position: outside; list-style:none; } #newcomments .userpic { argin:0 1px 0 5px; float:right; } .userpic { border:1px solid #fff; } #newcomments li { border-bottom:1px dotted #aaa; }

#newcomments li, #visitors li { clear:both; padding:6px 0; } #visitors li { height:32px; } #newcomments a.usertext:link, #newcomments a.usertext:visited { color:#333; } #side .userlist a { text-decoration:none; } #side .userlist a:hover { text-decoration:underline; * :: FRIENDS IN SIDEBAR :: */ #friendz img { display:block; width:88px; height:66px; } #friendz li { float:right; width:88px; overflow:hidden; margin:0; } #friendz li.first { clear:both; float:left; }

Tạo RSS Reader cho Blog Opera Hôm nay bạn có thấy blog của tôi có gì mới không? Tôi mới tạo cái RSS Reader để khách có thể đọc được phần intro của 20 bài mới nhất Nếu bạn muốn tạo một cái như vậy thì vào trang http://www.neomyz.com và đăng ký làm thành viên bằng địa chỉ email của mình. Mỗi địa chỉ email được phép tạo một reader, một bảng thăm dò ý kiến (poll) và một game on line (file flash). Nếu bạn muốn nhiều hơn thì bạn phải trả tiền Trước tiên bạn copy URL của RSS trang blog của bạn. Bạn hãy nhìn xuống footer của blog, bạn sẽ thấy chữ RSS ở bên phải. Bạn click chuột phải vào chữ đó và chọn "copy link location". Bạn cũng làm tương tự nếu bạn muốn tạo reader cho một trang web, ví dụ báo điện tử. Tiếp theo, bạn log in vào http://www.neomyz.com bằng địa chỉ email và password của bạn. Bạn hãy chọn Neomyz RSS Reader (nếu bạn muốn tạo poll hoặc game thì chọn menu tương ứng) và "create new reader".

1. Your website address: địa chỉ trang blog của bạn, ví dụ của tôi là http://my.opera.com/danquynh, là nơi mà bạn muốn cái RSS Reader hiển thị. 2. Address of the RSS newsfeed: bạn dán địa chỉ mà bạn đã copy từ chữ RSS ở trang blog của bạn vào. Bạn cũng có thể chọn những trang thông tin có sẵn trong list (chỉ một hoặc hai thôi, không thể chọn cả hai được). 3. Skin: bạn không cần chọn, vì tất cả những skin khác đều dành cho thành viên có trả tiền Bạn nhấn nút "Save" và bạn đã có một RSS Reader. Vì là đồ free nên họ giới hạn 100 lần xem mỗi ngày. Nếu bạn không thấy thông tin hoặc chỉ thấy "missing input data" có nghĩa là đã vượt quá quota Nhưng hãy vui lên, vì điều đó có nghĩa là blog của bạn có nhiều người vào thăm (trừ khi bạn nhấn F5 quá nhiều ). Để đưa reader vào blog, bạn chọn "Get HTML Code".

Bạn sẽ nhận được một đoạn mã để có thể chèn vào trang web nếu host có hỗ trợ javascript Opera thì không rồi, vì vậy bạn cần biết địa chỉ của file flash để embed vào blog của mình. Để làm được, trước hết bạn copy URL trong đoạn mã (right click - copy).

Bạn truy cập vào địa chỉ đó (dán vào trình duyệt và... enter ). Sau đó bạn click chuột phải, chọn View Page Source.

Bạn copy đoạn mã embed và dán vào bất kỳ entry nào trong blog của bạn (tốt nhất hãy dán vào sticky post).

Bạn lưu ý, giữa dấu " và chữ h, ở phần src="http://... trong đoạn code, có một khoảng trắng. Bạn phải delete khoảng trắng đó đi thì reader mới hiển thị. Chúc bạn thành công! Tạo thêm top menu cho Blog Opera Thay đổi giao diện Blog Opera 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 norepeat; 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 norepeat; 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): 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 ).

Tạo Skin cho Blog Opera từ theme Yahoo 360

Yahoo 360o Bloggers có hẳn một kho themes tại http://360themes.com Tại sao Opera Bloggers không take advantage of nguồn tài nguyên đó nhỉ? Tôi sẽ giúp bạn một mẹo nhỏ để biến theme Yahoo thành Skin Opera Trước tiên, bạn download file user.css và hình nền của Yahoo 360o (thường có hai files: top và bottom). Bạn cũng cần tạo thêm một số hình ảnh để làm nền cho sidebox. Tôi thường dùng Gradient Tool trong photoshop để tạo. Bạn cũng có thể sử dụng Brush để làm cho đẹp hơn. Bạn nên lấy mã màu trong link download hình nền Yahoo để tạo hình ảnh cho cùng tone. Bạn hãy upload tất cả hình ảnh này vào host của bạn (My Account/ Files). Kế tiếp, bạn mở file user.css bằng notepad, và tìm đoạn mã sau: body { background:transparent url(http://files.myopera.com/danquynh/color/bg.jpg) top center repeat-x; margin:0; padding:0; font-family: arial,'trebuchet ms',helvetica,sans-serif; font-size:13px; line-height:145%; text-align:center; color:#111; } #wrap1 { padding-top: 20px; BACKGROUND: url(http://files.myopera.com/danquynh/color/wrap1a.jpg) top center no-repeat; } #wrap2 { BACKGROUND: url(http://files.myopera.com/danquynh/color/wrap2.jpg) bottom center no-repeat; } #wrap3 { background:transparent; border:#0089fd double; margin:0 auto; width:758px !important; padding-left:10px;

padding-right:10px; padding-bottom:100px; } #topbar1 { background:#c0e6ff url(http://files.myopera.com/danquynh/color/topbar.jpg) top center no-repeat; color:#0089fd; height:32px; overflow:hidden; line-height:24px; } Bạn hãy nhìn vào ảnh minh họa cho Skin Opera: - Body là nền chính của trang blog. Tôi dùng Gradient Tool để tạo một ảnh nền có màu xanh nhạt dần đến trắng. - Wrap1 là phần hiển thị banner. - Wrap2 là phần hiển thị footer. - Wrap3 là phần hiển thị toàn bộ nội dung của trang blog (trong khung). - Topbar1 là phần hiển thị menu log in (Opera Powered). Bạn hãy thay đường dẫn cho các hình ảnh (phần in đậm) trong đoạn mã trên lần lượt wrap1 là top và wrap2 là bottom của theme Yahoo mà bạn có. Nếu bạn không thích hình ảnh tràn ra ngoài khung thì trước khi upload, bạn resize sao cho chiều ngang (width) của ảnh là 778px. Hình nền của body và topbar1 thì bạn có thể tự tạo, hoặc chỉ cần lấy mã màu của theme Yahoo và điều chỉnh mã background, ví dụ: body { background:#ffffff; margin:0; padding:0; font-family: arial,'trebuchet ms',helvetica,sans-serif; font-size:13px; line-height:145%; text-align:center; color:#111; } Trong đoạn mã trên tôi dùng màu nền là màu trắng. Bạn thay bằng màu phù hợp với hình nền của theme Yahoo. Bạn có thể dùng tên màu bằng tiếng Anh hoặc mã màu.

Nếu bạn không thích đường viền bao quanh trang blog, bạn có thể bỏ đoạn mã border (in đậm) trong wrap3. Sau đó, bạn thay hình ảnh cho các sidebox, hình nền cho tiêu đề bài viết,... bằng những hình ảnh mà bạn tạo cho phù hợp với theme Yahoo. Bạn vui lòng xem post Thay đổi background Blog Opera và Trang trí lại sidewrap của Blog Opera để tìm những đoạn mã thích hợp để chỉnh sửa, kể cả màu chữ, màu link,... Cuối cùng, bạn paste toàn bộ nội dung đã chỉnh sửa vào ô Enter CSS (xem thêm post Thay đổi giao diện Blog Opera trong 10 phút) và save với option "only use my custom style sheet". Hãy cùng tạo ra nhiều skins đẹp và chia sẻ cho mọi người nhé! Chúc bạn thành công! 41. Tại sao banner vừa có thể đặt vào top2 vừa có thể đặt vào wrap1; tương tự footer và wrap2? Nói cho dễ hiểu, bạn hãy tưởng tượng cấu trúc của Blog Opera như một cái... bánh da lợn Body background là lớp dưới cùng; kế đến là wrap1 và wrap2; tiếp theo là wrap3; banner, content và footer là lớp trên cùng. Như vậy, nếu bạn không cho hình ảnh vào wrap3, banner, content và footer (transparent) thì bạn sẽ thấy wrap1 và wrap 2 42. PADDING và MARGIN khác nhau chỗ nào? Thay mặt sis Lu trả lời câu này vì sis trả lời gà quá (Phạm Lâm) Thẻ Div bạn có thể coi nó như một hình chữ nhật, thuộc tính margin của thẻ div đó sẽ xác định khoảng cách từ đường viền hình chữ nhật đó với các phần tử khác ở phía ngoài. Còn padding sẽ xác định khoảng cách từ đường viền hình chữ nhật đó với các phần tử ở trong nó. 43. Làm sao xóa được dòng chữ OPERA POWERED? Bạn thêm đoạn này vào user.css: div#topbar1 a.hidemobile { display:none } 44. Làm sao để viết bài thành hai cột? Nếu bạn muốn chèn một cái ảnh vào một bên, bạn chỉ cần định vị trí cho hình ảnh (trái hoặc phải) và viết bài, thì tự động ô viết bài sẽ chia làm hai cột. Lưu ý là bạn phải viết code cho cái ảnh trước khi viết bài. Cụ thể là: [imgleft=abc.jpg] Nội dung bài viết [imgright=abc.jpg]Nội dung bài viết Nếu bạn muốn chèn những yếu tố khác, ví dụ media, bạn phải tạo bảng:

Nội dung cột thứ nhất

Nội dung cột thứ hai

45. Làm thế nào để comment của chủ blog có background khác với comments của khách? Chắc bạn cũng biết, muốn thay đổi background của comments, bạn sẽ điều chỉnh đoạn mã sau (nếu không đổi thì mặc định sẽ là màu của content). .comment1 { BACKGROUND: #fdfbe2 url(abc.jpg); } .comment2 { BACKGROUND: #fdfbe2 url(abc.jpg) } Số 1, 2 đi sau đại diện cho comment mang thứ tự chẵn và lẻ. Nếu bạn thích các comments lần lượt có background khác nhau thì bạn tìm hai hình nền và thay vào. Để background của chủ blog khác với mọi người, bạn chỉnh hoặc thêm vào đoạn mã sau: .ownercomment { background: #fdfbe2 url(abc.jpg); } 46. Làm sao để đổi màu và size chữ của Tags ở sidebar? Size chữ mặc định của tag ở sidebar được quy định bởi số lượng bài viết trong từng tag, có nghĩa là nếu tag nào có bài viết nhiều thì size chữ sẽ to hơn những tag có ít bài viết. Bạn muốn resize cho cùng kích cỡ thì tìm đoạn mã sau và chỉnh lại kích thước cho fontsize. Nếu bạn muốn đổi màu chữ cho phù hợp với background thì thay mã màu ở "color". #tagcloud a:link, #tagcloud a:visited, #tagcloud a:active { color:#fff; } #tagcloud .size1 { font-size:11px; font-weight:bold; } #tagcloud .size2 { font-size:11px;

font-weight:bold; } #tagcloud .size3 { font-size:11px; font-weight:bold; } #tagcloud .size4 { font-size:11px; font-weight:bold; } #tagcloud .size5 { font-size:11px; font-weight:bold; } 47. Làm sao để viết chữ nghệ thuật ở banner? Opera không có nhiều font chữ có thể hiển thị tiếng Việt, cho nên tôi thường viết tiêu đề lên ảnh trong Photoshop. Bạn cần download một số font chữ thư pháp tại http://www.hunglandesign.com hoặc tại blog của Antoniblue. Tôi cũng có vài font chữ đẹp để share với các bạn tại post "Resources to share". Tuy nhiên không phải tất cả các fonts đều hiển thị tiếng Việt nhé. 48. Làm sao để đổi màu và bỏ gạch chân của link trên Blog Opera? Mã CSS quy định màu và hình thức thể hiện của link trên toàn bộ blog là: A:link { COLOR: #222; TEXT-DECORATION: underline } A:active { (liên kết đang được xem) COLOR: #222; TEXT-DECORATION: underline } A:visited {(liên kết đã được xem) COLOR: #222; TEXT-DECORATION: underline

} A:hover {(liên kết có chuột trỏ vào) TEXT-DECORATION: none } Bạn thay đổi màu trong mã color, và bỏ gạch chân bằng cách set "text-decoration:none". Tuy nhiên, bạn cũng cần tìm những đoạn mã khác bắt đầu bằng a:link, active, visited,... (ví dụ: post title, tag cloud, page nav,...) nếu bạn không muốn gạch chân bất kỳ link nào trong blog. 49. Làm sao để đổi màu số trang ở cuối trang blog? Bạn tìm đoạn mã sau và chỉnh lại "color" .pagenav a { color:#fff; }