Trang trí Blog Opera theo sở thích cá nhân

Bài này tôi tải lại từ blog của chị Thủy Hiền tại địa chỉ http://my.opera.com/danquynh. Cảm ơn tác giả đã dày công tìm hiểu để có bài viết này. Có thể bài viết sẽ bổ ích đối với các bạn:
Tôi viết bài này dựa trên những kinh nghiệm “xương máu” của bản thân - một người chưa từng qua một trường lớp thiết kế Website nào, cũng không có bất kỳ một kiến thức cơ bản nào về software, hardware,… hoặc những thứ tương tự như vậy Chỉ vì muốn một sự độc đáo, không đụng hàng cho website của con gái, tôi đã tự mò mẫm ở W3Schools học HTML. Rồi cũng muốn tạo một phong cách riêng cho Blog cá nhân, tôi đã một lần nữa mò mẫm những bài dịch của Phạm Lâm và những bài hướng dẫn của Opera. Tuy nhiên, đối với một người amateur như tôi, những bài viết đó thật khó hiểu , chủ yếu là do thứ tự giới thiệu các bài viết. Vì vậy, thật sự chúng không giúp ích được tôi nhiều, nếu tôi không lần nữa truy cập W3Schools. Tuy vậy, điều đó không có nghĩa là tôi phủ nhận hoàn toàn công “khai sáng” của Phạm Lâm, mong Phạm Lâm không “chấp”, mà xin hãy coi là một lời góp ý chân thành.
Tôi không có ý định tranh bản quyền của Phạm Lâm khi giới thiệu cách thay đổi template của Blog Opera, chỉ xin quote một câu của Phạm Lâm “xin các cao thủ hãy ngồi ngoài để chỉ giáo”. Những từ ngữ tôi dùng trong loạt bài viết của mình có thể làm cho dân “pro” buồn cười, vì thực ra, có nhiều “cái” tôi cũng chưa thực sự… hiểu cặn kẽ, chỉ đoán là như vậy thôi Và chính vì vậy, tôi cũng chỉ “dám” giới thiệu một số “nhu cầu” cơ bản; nếu bạn muốn thay đổi những chi tiết khác thì hoặc tự tìm hiểu, hoặc liên hệ với tôi, tôi sẽ cố gắng giúp bạn trong khả năng của tôi.
Bạn hãy click vào các link dưới đây để xem chi tiết hướng dẫn. Tôi chân thành khuyên bạn nên đọc theo thứ tự, không nên “nhảy cóc”. Tôi đã giới thiệu shortcuts rồi, nếu bạn muốn “tắt” nữa thì… gay đấy Tuy nhiên, nếu đã đọc kỹ mà vẫn không làm được, xin bạn vui lòng comment để tôi chỉnh sửa nhé. Cám ơn bạn và enjoy surfing.
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 Preferences/ Web Page Layout/ 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 Preferences (http://my.opera.com/tênđăngnhập/account/)2. Nhấn tiếp vào Web page layout (http://my.opera.com/tênđăngnhập/account/layout.dml)3. Chọn tiếp custom style sheet (http://my.opera.com/tênđăngnhập/account/usercss.dml)* tênđăngnhập: Tên đăng nhập của bạn vào blog ở Opera. Như của tôi là phamlam.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. (xem hình minh họa, xem hình rồi bạn đừng nói là ko biết nó ở đâu nhé)
(Nguồn: Phạm Lâm)
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 Preferences/ My 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).
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 Blog của tôi
- 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!
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).
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, 19:54:27
Thay đổi giao diện Blog OperaGồ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, 17:33:20
Thay đổi giao diện Blog OperaPhầ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}
Theme dành cho Blog Opera của bé
Tuesday, 26. September 2006, 20: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:
Download set1.rar, bao gồm hình ảnh và file user.css để bạn paste vào phần enter CSS. Lưu ý, bạn cần chỉ đường dẫn cho các files hình ảnh mà bạn sẽ upload vào My Files trên Blog Opera của bạn, và save với option 1 nhé. Enjoy!!
Trang trí bài viết của Blog Opera theo chủ đề
Thursday, 12. October 2006, 16:32:29
Thay đổi giao diện Blog OperaHô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.
Bài này được tải tự blog http://my.opera.com/danquynh/blog./
dinhkimtuan