My OperaThay đổi giao diện Opera trong 10 phút
Saturday, August 18, 2012 9:56:54 AM
Thay đổi giao diện Blog Opera trong 10 phút
Có một trick dành cho những người không thích tốn công. Bạn chỉ cần dùng menu "Save As" của Internet Explorer để lưu toàn bộ Blog mà bạn thích. Sau đó bạn mở file user.css, copy toàn bộ và paste vào phần Enter CSS của menu My Account/ Design/ Change design/ Custom Style Sheet, rồi save với option "Use my custom style sheet together with the current theme". Tuy nhiên, bạn cần phải biết theme gốc của Blog đó (bằng cách xem trong file main.css).
Có một trick dành cho những người không thích tốn công. Bạn chỉ cần dùng menu "Save As" của Internet Explorer để lưu toàn bộ Blog mà bạn thích. Sau đó bạn mở file user.css, copy toàn bộ và paste vào phần Enter CSS của menu My Account/ Design/ Change design/ Custom Style Sheet, rồi save với option "Use my custom style sheet together with the current theme". Tuy nhiên, bạn cần phải biết theme gốc của Blog đó (bằng cách xem trong file main.css).
Thay đổi giao diện Blog Opera trong 10 phút
THAY ĐổI GIAO DIệN BLOG OPERA
Có một trick dành cho những người không thích tốn công. Bạn chỉ cần dùng menu "Save As" của Internet Explorer để lưu toàn bộ Blog mà bạn thích. Sau đó bạn mở file user.css, copy toàn bộ và paste vào phần Enter CSS của menu My Account/ Design/ Change design/ Custom Style Sheet, rồi save với option "Use my custom style sheet together with the current theme". Tuy nhiên, bạn cần phải biết theme gốc của Blog đó (bằng cách xem trong file main.css).
1. Bạn vào phần My Account
2. Nhấn tiếp vào Change Design
.png)
3. Chọn tiếp custom style sheet.
.png)
4. Tại ô Enter CSS các bạn có thể gõ code hoặc copy paste code CSS vào sau đó đánh dấu chọn vào ô Use my custom style sheet together with the current theme và nhấn Save để kết thúc.
.png)
Nhưng chắc bạn không thích copy y chang source code của user khác như vậy phải không? Muốn tạo sự độc đáo cho Blog của mình, trước tiên, bạn cần chuẩn bị một số file hình ảnh và upload vào Opera host, dùng menu My Account/ Files. Bạn cũng cần xác định đường dẫn của những files này để thay vào những files hình ảnh của theme gốc trên Opera.
Sau đó, bạn cần chọn một theme trong số những themes dựng sẵn của Opera. Bạn trở lại trang Blog, và dùng menu "Save As" của Internet Explorer để lưu vào ổ cứng của bạn. Lúc này, trong ổ cứng của bạn sẽ có một file.html và một folder lưu một số hình ảnh và các file.css. Bạn tìm file main.css và mở bằng notepad, wordpad, hoặc Microsoft FrontPage. Bạn cũng cần mở sẵn một trang trắng (untitled của notepad/ wordpad hoặc new page của MS FP). Tất cả những thay đổi của bạn sẽ được lưu trong trang trắng này để sau đó paste vào ô Enter CSS (như đã hướng dẫn ở trên).
Thay đổi background Blog Opera
SATURDAY, 9. SEPTEMBER 2006, 17:04:42
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)
SATURDAY, 9. SEPTEMBER 2006, 17:29:15
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!
Muốn tìm file main.css thì bạn coi kỹ lại post Thay đổi giao diện Blog Opera trong 10 phút trước nhé.
...
Bạn trở lại trang Blog, và dùng menu "Save As" của Internet Explorer để lưu vào ổ cứng của bạn. Lúc này, trong ổ cứng của bạn sẽ có một file.html và một folder lưu một số hình ảnh và các file.css. Bạn tìm file main.css và mở bằng notepad, wordpad, hoặc Microsoft FrontPage. Bạn cũng cần mở sẵn một trang trắng (untitled của notepad/ wordpad hoặc new page của MS FP). Tất cả những thay đổi của bạn sẽ được lưu trong trang trắng này để sau đó paste vào ô Enter CSS (như đã hướng dẫn ở trên).
Tốt nhất là bạn xem từ post Trang trí Blog Opera theo sở thích cá nhân nhé. Vì mỗi phần đều có liên quan tới phần trước. Nếu bạn không đọc theo thứ tự thì rất khó đó
Viết tiếng Việt trong Blog Opera (Phạm Lâm)
MONDAY, 11. SEPTEMBER 2006, 05:05:25
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
TUESDAY, 12. SEPTEMBER 2006, 12:54:27
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
WEDNESDAY, 13. SEPTEMBER 2006, 10:33:20
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!
Theme dành cho Blog Opera của bé
TUESDAY, 26. SEPTEMBER 2006, 13:01:40
THAY ĐổI GIAO DIệN BLOG OPERA
Tôi nhận được một số PM từ các bố, mẹ,... hỏi sử dụng theme tôi hiện đang dùng (và có những người chẳng hề hỏi han nhưng vẫn vô tư sử dụng ). Đối với tôi, điều đó chẳng có vấn đề gì, tuy nhiên, xin các bạn vui lòng thay đổi lại đường dẫn cho các files hình ảnh để đừng chiếm dụng bandwidth của tôi
Ngoài ra, tôi nghĩ theme này không được hợp với bé lắm. Vì vậy, tôi có làm thử một theme, nếu các bạn thích, các bạn có thể thoải mái sử dụng Nếu có thời gian, tôi sẽ làm thêm một số themes nữa
Đây là demo đi cùng với theme số 2 của Opera:
Enjoy!!
Trang trí bài viết của Blog Opera theo chủ đề
THURSDAY, 12. OCTOBER 2006, 09:32:29
THAY ĐổI GIAO DIệN BLOG OPERA
Hôm nọ tình cờ view source Blog của Quang Hiếu, tôi... phát hiện ra cách trang trí từng bài viết theo chủ đề Bài viết này của tôi là một ví dụ
Để làm được như vậy, bạn cần biết một chút HTML Bạn có thể tham khảo tại W3Schools hoặc trang học HTML ở phần kinh nghiệm hay của tôi
Bạn cần tạo một thẻ table và chọn hình nền làm background cho thẻ này. Phần nội dung của bài viết nằm hoàn toàn trong thẻ table. Nếu bạn chưa biết tạo table thì bạn có thể tham khảo tại bài Thay đổi source code của webset dùng tables do tôi tự viết
Hoặc bạn có thể trang trí và viết bài bằng FrontPage rồi copy phần HTML code vào khung soạn thảo của Opera (tôi chưa thử nhưng nghĩ chắc cũng được ) Nói chung bạn phải paste phần mã HTML vào trong table, chứ không phải là văn bản soạn thảo thông thường.
Trường hợp bạn không biết HTML hay FrontPage, bạn có thể vào Blog của Quang Tú để xem hướng dẫn cách tạo skin cho từng post bằng một chương trình được thiết kế riêng. Có rất nhiều mẫu cho bạn lựa chọn. Tuy nhiên, lưu ý, bạn vẫn phải dùng một số code HTML đơn giản để soạn thảo bài viết của mình trước khi paste vào những skin được thiết kế sẵn.
Chúc bạn thành công!
Thay đổi background của topbar trong phiên bản mới của Blog Opera
THURSDAY, 8. MARCH 2007, 16:52:44
THAY ĐổI GIAO DIệN BLOG 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!
4. Trang trí nhà cửa:
Với Opera thì cách trang trí nhà cửa theo phong cách của mình cũng ko đơn giản nhắm đối với những người chưa quen sử dụng CSS. Tuy nhiên, tôi sẽ hướng dẫn bạn mí cách như sau:
CÁCH CÀI THEME:
Có 3 cách cái theme:
Cách 1: Bạn sử dụng mẫu theme có sẵn trong Opera. Bạn làm như sau:
1. Đăng nhập vào blog Opera.
2. Vào mục My Account (ở phía trên cùng của blog)
3. Vào mục Design
4. Chọn theme nào trong design bạn thik
5. okie gồi đấy. Cách này đơn giản hem..^^
6. Nhấn F5
Cách 2: Kết hợp theme có sẵn trong Opera với một chút CSS:
1. Đăng nhập vào blog Opera.
2. Vào mục My Account (ở phía trên cùng của blog)
3. Vào mục Design
4. Chọn theme nào trong design bạn thik
5. Kéo chuột lên trên tìm dòng chữ "Select a design for your page from the list below, or add your own custom style sheet" và nhấn vào link custom style sheet.
6. Bạn có một đoạn CSS copy vào phần Enter CSS.
7. Sau đó, bạn chọn mục Use my custom style sheet together with the current blog design..là okie.
8. Nhấn F5
VD: Bạn có đoạn CSS dưới đây..là làm như cách trên là okie
Nắng
#top2 {
height: 281px;
padding-left: 18px;
background: #2f569b
url(http://i551.photobucket.com/albums/ii451/pibi_photos/banmai.jpg) top left repeat-x;
border-bottom: 1px solid #fff;}
#wrap1 {
font-family:Arial, Helvetica, sans-serif !important;}
#content {
font-family:Arial, Helvetica, sans-serif !important;
font-size:13px;
(Mục này tôi hướng dẫn các bạn thay banner cho Opera. Banner là cái ảnh nền phía trên cùng.
Để 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ế. VD đoạn mã trên, ảnh chiều dài là 911px. 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. Sau đó, bạn up ảnh lên một trang lưu trữ trung gian nào đó..gồi copy vào phần in đậm. Bạn chú ý các phần in đậm nhé, height và link ảnh..để thay các banner. Ngoài ra, các bạn có thể tham khảo cách làm của chị DanQuynh:
Thay đổi banner blog Opera
Cách 3: Sử dụng CSS hoàn toàn:
Cách này tương đối phức tạp..để tạo một ngôi nhà mang phong cách của riêng bạn. Bạn phải tìm hỉu dần dần mới hỉu đc phần nào. Tôi cũng chưa hỉu nhìu lắm. Bạn nên tham khảo các đoạn CSS của một số blog có skin đẹp. Tôi sẽ chỉ cho bạn một cách “ chôm” Skin từ blog ngừi khác..độc chiu..hé hé..^^
Copy link sau và dán vào notepad, wordpad , word .....( Nói chung là phần mềm nào soạn được văn bản ):
http://files.myopera.com/user của blog sẽ lấy theme/user.css
Sau đó hãy thay phần user của blog sẽ lấy theme ở link trên bằng user của blog xấu số mà bạn đang định lấy theme . Ví dụ ( blog xấu số ấy là blog của tôi user của tôi là onlyiu như vậy đoạn link của bạn sẽ là :
http://files.myopera.com/onlyiu/user.css
Cuối cùng copy link đã thay đổi dán vào thanh address của trình duyệt và Enter ~~~~~~~~~~~~~> Một files code sẽ hiện ra thường là file dạng Notepad . Copy toàn bộ code trong này sau đó đăng nhập vào blog của bạn Vào My Account ~~~> Design ~~~~> Custom style sheet . Dán toàn bộ code vào khung Eter CSS ~~~~> Chọn mục Only use my custom style sheet rồi Save lại ~~~~> nhấn F5 vài lần ~~~~> Xonggggggggggg !
Tuy nhiên, trước khi lấy skin của ai đó tốt nhất là nên comment hỏi ý kiến của chủ nhân trước. Cần tôn trọng chủ nhân của blog bởi vì tôn trọng người khác cũng chính là tôn trọng chính bản thân mình .
Từ blog của Mr. Silent: http://my.opera.com/forevermyweb
Tiếp theo..
1. Đăng nhập vào blog Opera.
2. Vào mục My Account (ở phía trên cùng của blog)
3. Vào mục Design
4. Chọn theme nào trong design bạn thik
5. Kéo chuột lên trên tìm dòng chữ "Select a design for your page from the list below, or add your own custom style sheet" và nhấn vào link custom style sheet.
6. Bạn dựa vào CSS vừa " chôm" đc..tự thiết kế một CSS của riêng mình..gồi Paste nó vào enter CSS..
7. Sau đó, bạn chọn mục Only use my custom style sheet..là okie.
8. Nhấn F5
Một số cách trang trí cho ngôi nhà của bạn..sưu tầm đc trên blog chị danquynh:
Thay đổi giao diện blog opera trong 10 phút
Thay đổi background
Thay đổi banner
Thay đổi bố cục
Trang trí lại Slidewrap của blog opera
Theme dành cho blog opera của bé
Trang trí bài viết theo chủ đề
Thay đổi background của topbar trong phiên bản mới
Khung soạn thảo của blog Opera:
http://my.opera.com/danquynh/blog/khungsoanthaocuablogopera
Bạn muốn soạn thảo trong blog opera..chỉ việc cut đoạn văn bản vào thanh tab sau khi nhấn vào các công cụ trên Tool bar..là okie..
6. Và tổng hợp rất nhiều thủ thuật khác trên Opera..các bạn có thể tìm hiểu tại đây về cách viết blog, trang trí blog, cách chèn nhạc vào blog.v.v.
Những câu hỏi về blog opera:
http://my.opera.com/danquynh/blog/nhungcauhoiveblogopera
Tổng hợp các câu hỏi về Opera trên blog Phạm Lâm:
http://my.opera.com/phamlam/blog/tonghopcauhoiopera
Hỏi đáp về Opera:
http://my.opera.com/vietnamese/forums/hoidapveopera
Tài liệu về opera: ( Tổng hợp về opera)
http://files.myopera.com/onlyiu/Shareopera/ebooklamblog
Tạo SKINMSG cho bài viết trên Opera
1) Dùng IE (6 trở lên) để truy cập vào trang http://atlantisboy.hostrocket.com/skinmsg/
Trang này sẽ tự động nạp các dữ liệu cần thiết vào các mục "Dịch vụ Blog", "Các site skin"...
2) Paste bài viết ở dạng mã HTML của bạn vào trường "Your HTML Code"
3) Ở phần Dịch vụ Blog, bạn chọn "OPERA"
3) Trong mục "Các site skin", bạn chọn "Atlantisboy_Hostrocket" hoặc những site skin khác, những skin hiện có trên host này sẽ hiện ra tất cả trong "Danh sách skin"
4) Chọn skin để xem mẫu.
5) Nếu skin đã load thành công, trang web sẽ thông báo "Click nut tao ma HTML de xem ket qua".
6) Click nút "Tạo mã HTML", một cửa sổ sẽ bung ra, trong đó có chứa PREVIEW và đoạn code HTML.
7) Copy đoạn code HTML đó, paste vào Opera Editor. Bạn có thể trang trí thêm nếu bạn hiểu mã HTML.
Ps. Nếu ai coi không được thì dùng menu Tools/ Internet Options/ Accessibility rồi check vào "ignore font styles specified on Web pages" nhé
You must be 
Walk In Cloudswalkinclouds # Saturday, August 18, 2012 9:58:08 AM
Nam Ròmnamrom64 # Saturday, August 18, 2012 10:50:32 AM
nuthanvodanh # Saturday, August 18, 2012 11:01:54 AM
HỎNG HỈU MẤY
Walk In Cloudswalkinclouds # Saturday, August 18, 2012 5:12:12 PM
Originally posted by nuthanvodanh:
hehehe, chờ ka rảnh up hình minh họa lên nữa thì mới dễ hiểu hánuthanvodanh # Saturday, August 18, 2012 5:36:44 PM
làm sao cho nhà đẹp đẹp á
Walk In Cloudswalkinclouds # Saturday, August 18, 2012 5:39:34 PM
Originally posted by nuthanvodanh:
mụi xài theme có sẳn do Opera cung cấp đi, theme lạ như nhà của ka là xài code CSS nên không rành là biến cái nhà thành lung xờ tung à nha, hahahanuthanvodanh # Sunday, August 19, 2012 5:35:03 AM
"mụi xài theme có sẳn do Opera cung cấp đi, theme lạ như nhà của ka là xài code CSS nên không rành là biến cái nhà thành lung xờ tung à nha, hahaha"
uhm...để thời gian hi vọng mọi thứ quen tay..mụi sẽ mò từ từ
bởi vậy đang yên đang lành dời nhà ...nản quá chừng luôn
eyre1972 # Monday, August 20, 2012 7:26:39 AM
Walk In Cloudswalkinclouds # Monday, August 20, 2012 7:34:44 AM
Originally posted by eyre1972:
no prolem, ka cũng copy từ người khác mà