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), border-
bottom (đá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 (margin-
left). 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!
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 (margin-
left). 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"></embed>
Để 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"></embed>
Để đ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 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 ).
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:
<table><tr>
 <td> Nội dung cột thứ nhất</td>
<td>Nội dung cột thứ hai</td>
</tr></table>
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 font-
size. 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;
}