Phạm Lâm's Blog

Chỉ hướng dẫn các newbie. Các cao thủ xin ngồi ngoài và chỉ giáo

[+] Nếu bạn muốn tạo hẳn 1 skin bên ngoài khác hoàn toàn với các skin sẵn có của Opera và mọi người khác thì các bạn ít nhất cần phải có kiến thức về CSS (1 chuẩn ngôn ngữ dùng để dàn trang của tổ chức internet quốc tế), kiến thức về các trình chỉnh sửa ảnh (tôi hay dùng Photoshop), không cần kiến thức về lập trình. Các bạn cần và nên tìm các tài liệu về các vấn đề trên để tham khảo trước.
----> Về CSS hiện tại trên Internet có rất nhiều trang web dạy và lưu trữ tài liệu online nhưng không có trang web tiếng Việt, các bạn cần phải biết tiếng Anh để hỗ trợ học tập. Một số trang tham khảo như sau.

• http://www.w3.org/Style/CSS/
• http://css.maxdesign.com.au/
• Cssweb standards
• http://www.dezwozhere.com/links.html
• http://www.cssbeauty.com/
• http://www.csszengarden.com/

----> Về Photohop thì cũng không thiếu các tài liệu cho các bạn học nhưng chủ yếu vấn là tiếng anh. Tuy nhiên cũng có 1 số trang tiếng Việt giúp các bạn tham khảo dễ hơn.

• http://vietphotoshop.com
• www.dohoavn.net
• http://www.good-tutorials.com/
• http://www.pixeldigest.com/

[+] Nếu bạn chỉ muốn chỉnh sửa chút xíu về banner hay font chữ màu chữ cỡ chữ...Thì bạn chỉ cần đọc các bài học của tui là đủ...Trước khi vào bài 3 các bạn cũng nên đọc bài 1 và bài 2

Sau mấy ngày bắt các bạn, những người quan tâm tới việc tạo phong cách riêng cho blog của mình đợi dài cổ thì hôm nay cũng cố gắng vừa xem bóng đã vừa hoàn thành bài 3 trong sê ri các bài tạo phong cách cho blog. Trong bài 3 này tôi sẽ hướng dẫn tổng quan về cấu trúc của blog cách thay đổi banner, màu nền hoặc background của blog, background của bài viết

Nói lại một chút để các bạn tiện theo dõi nếu không đọc bài 1 và bài 2.

Cùng bắt đầu nào

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

Có rất nhiều bạn hỏi tôi file main.css ở đâu. Thường là nó ở _http://my.opera.com/community/css/users/1/main.css. Không nhất thiết là số 1 mà có thể là số 2, 3 hay 13. Bạn hãy vào Web page layout và đếm các skin từ trái qua phải, từ trên xuống dưới như hình vẽ này. Xem skin mà bạn đang dùng là cái thứ mấy thì thay số đó vào link trên để xem file main.css.

Tổng quát về cấu trúc của blog opera.
Cái này viết sau vì nói ra dài dòng lắm.

Thay đổi banner của blog.

Để 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ế. Các bạn có thể vào các địa chỉ sau để lấy ảnh.

- 12/02/2005 - 10 Headers - Farm - dark colors - Link
- 12/02/2005 - 10 Headers - Natural - dark colors - Link
- 12/02/2005 - 10 Headers - Sport - dark colors - Link
- 12/01/2005 - 10 Headers - Children - dark colors - Link
- 12/01/2005 - 10 Headers - Exotic nature - dark colors - Link
- 12/01/2005 - 10 Headers - Oceans and seas - dark colors - Link
- 12/01/2005 - 10 Headers - Mixed elements - Dark colors [2] - Link
- 11/30/2005 - 10 Headers - Mixed elements - Dark colors - Link
- 11/30/2005 - 6 Headers - Rabbit related - Light colors - Link
- 11/30/2005 - 10 Headers - Winter related - Light colors - Link
- 11/30/2005 - 10 Headers - Sunset related - Dark colors - Link
- 11/30/2005 - 10 Headers - Food related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Cat related - Mixed colors - Link
- 11/30/2005 - 10 Headers - Dog related - Mixed colors - Link
- 11/29/2005 - 10 Headers - 10 Dark Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - 10 Colors - Plain but nice - Link
- 11/29/2005 - 10 Headers - mixed collection - check it out - Link
- 11/29/2005 - 5 Headers for those who love wildlife - dark headers - Link
- 11/29/2005 - 5 Headers for those who love babies - light headers - Link
- 11/29/2005 - 5 Headers for those who like birds - dark headers - Link
- 11/28/2005 - 6 Headers for those who like dark styles - Link
- 11/28/2005 - 6 Headers for those who like light - natural styles - Link

Riêng tôi thì tôi tự tạo ra một banner và upload vào trong phần my file 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 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

Để thay đổi các bạn có thể làm như sau.

Ví dụ

#top2 {
height:116px;
padding-left:15px;
background:#000000 url(http://my.opera.com/phamlam/homes/files/banner.jpg) top left repeat-x;
border-bottom:1px solid #fff;
}

* http://my.opera.com/phamlam/homes/files/banner.jpg: Đoạn này chính là phần quan trọng để thay đổi banner. Bạn chỉ cần trỏ 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 thay thế thành background:#000000; (hãy thay thế #000000 thành mã màu mà bạn muốn.)

Thay đổi màu nền và ảnh nền của blog thì mai viết tiếp. Vừa xem bóng đá vừa viết chẳng tập trung được gì cả.