Tham Khảo làm Blog ở Opera

Thay đổi giao diện Blog Opera trong 10 phút
Saturday, 9. September 2006, 13:03:18

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



3. Chọn tiếp custom style sheet.



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.



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

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é.

Thay đổi banner Blog Opera (Phạm Lâm)
Saturday, 9. September 2006, 17:29:15

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


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
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.

Thay đổi bố cục Blog Opera
Tuesday, 12. September 2006, 12:54:27
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!).

Trang trí lại Sidewrap của Blog Opera
Wednesday, 13. September 2006, 10:33:20

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
}

Trang trí bài viết của Blog Opera theo chủ đề
Thursday, 12. October 2006, 09:32:29
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.

Thay đổi background của topbar trong phiên bản mới của Blog Opera
Thursday, 8. March 2007, 16:52:44
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


Cách Customized theme trong Opera từ Theme của người khác :

Copy theme css - blog opera

Saturday, September 11, 2010 7:30:06 PM

opera blog theme, css, chia se, theme dep, theme

Không phải lần đầu làm blog opera, nhưng mà vẫn điên đầu với chuyện tìm theme. Cuối cùng lần ra đc cái tip khá hữu dụng.

Khi gặp 1 blog có theme đẹp, thì mở 1 trang blank rồi paste cái link này :

http://files.myopera.com/tên tài khoản của Blog mà bạn muốn lấy skin/user.css

Ví dụ: muốn lấy css blog của tôi thì copy đường link sau : http://files.myopera.com/vivienne4ever/user.css rồi dán vào 1 tab mới.

Công việc sau đó thì đơn giản rồi, chỉ việc copy tòan bộ css vừa load đc vào khung css trong trang blog của bạn. Nhớ nhấp chọn theme BLUE trước khi vào phần CUSTOMIZE. Stick chọn "Only use my custom style sheet"

Xong !

PS: theme này được design bởi Phạm Lâm, Khánh Quang, Thành Châu và Thủy Hiền