Chẳng hiểu sao!!!!

Với sự phát triển không ngừng của blog cùng các công nghệ và các đại gia cung cấp các dịch vụ blog miến phí. Để lập một blog không hề khó nếu không muốn nói là rất dễ. Danh sách friends trong blog của tôi ngày càng nhiều minh chứng càng nhiều người lập blog Opera

Với sự phát triển không ngừng của blog cùng các công nghệ và các đại gia cung cấp các dịch vụ blog miến phí. Để lập một blog không hề khó nếu không muốn nói là rất dễ. Danh sách friends trong blog của tôi ngày càng nhiều minh chứng càng nhiều người lập blog Opera. Cùng với sự phát triển ấy, mỗi người lại tự tìm cho mình một phong cách blog riêng, tạo skin khác người cũng là một trong số đó. Không bàn đến tính thay đổi skin dễ hay khó giữa các nhà cung cấp dịch vụ blog miễn phí như Yahoo hay Blogger. Ở đây tôi chỉ muốn đề cập tới việc thay đổi skin ở Opera vì hiện tại tôi đang sử dụng nó. Tôi đã có một số bài hướng dẫn thay đổi skin Opera nhưng hình như vậy vẫn chưa đủ chi tiết để các bạn có thể tự làm một skin phong cách cho mình. Đã rất lâu rồi tôi muốn viết tutorials chi tiết hơn nhưng cứ lần nữa mãi. Hôm nay tôi ngồi viết một tutorial hướng dẫn chi tiết cách sửa một skin từ một skin mặc định. Skin có số thứ tự là 2 trong danh sách 13 skin của Opera. Cấu trúc của skin này khá giống skin số 1, 3, 4 vì vậy nếu bạn có đang sử dụng 1 trong 4 skin đó thì có thể áp dụng bài viết này để sửa. Riêng các cặp skin (5,6), (7,8,9), (10,11), (12,13) có cấu trúc khác và phức tạp hơn nên tôi sẽ giới thiệu sau.

Các bạn chú ý, tất cả các bài viết về hướng dẫn tạo skin cho blog, đưa nhạc hình, nhạc tiếng, flash, playlist flash đều được tôi gộp vào tag "Hướng Dẫn". Các bạn có thể vào tag này để xem lại các bài viết cũ.

Công cụ khuyến cáo bạn nên sử dụng giúp công việc dễ dàng, tiện dụng, và nhẹ nhàng hơn.
+ Marcomedia Dreamweaver: Một công cụ chuyên nghiệp trong việc dàn trang và xây dựng trang web. Rất trực quan khi sử dụng. Bạn chỉ cần thay đổi một thuộc tính của files css ngay lập tức skin của bạn cũng thay đổi theo. Giúp tiết kiệm thời gian xem trước trang đã sửa.
+ Adobe Photoshop: Công cụ sửa ảnh chuyên nghiệp.

Do hạn chế về thời gian nên tôi cũng không thể hướng dẫn các bạn cắt hay chỉnh sửa ảnh. Tôi chỉ chú trọng tới việc sửa chữa code css mà thôi. Tôi cũng không phải là chuyên gia đỉnh cao nên chắc chắn sẽ còn thiếu sót trong bài viết. Rất mong các bạn đóng góp ý kiến để các bài viết sau này ngày càng hoàn thiện hơn. Bài viết có tham khảo hướng viết bài của blog whyopera. Xin bạn ghi rõ nguồn http://phamlam.info và tác giả phamlam nếu bạn xuất bản lại bài viết này trên blog của bạn hoặc trên các phương tiện truyền thông khác. Dông dài quá rồi, chúng ta bắt tay vào làm việc thôi.

Trong tutorial này chúng ta sẽ học:

- Cách đưa độ rộng của skin về 778px
- Cách đóng khung ô viết bài
- Cách đổi hình nền blog
- Cách đưa hình nền vào ô viết bài
- Sửa chữa sidebar
...

Việc trước tiên là phải download file main.css của skin số 2 này. Các bạn có thể download tại đây (nhấn chuột phải chọn save target as). Mở file này bằng Notepad (nhấn chuột phải vào file chọn open with Notepad) và chuẩn bị để sửa chữa. Nếu bạn dùng Macromedia Dreamweaver thì việc sửa chữa sẽ dễ dàng hơn.

1. Thay đổi độ rộng của skin về 778px

- Mở file main.css. Nhấn Ctrl+F để mở hộp thoại tìm kiếm. Gõ vào ô tìm kiếm từ #wrap1. Xóa đoạn max-width:882px; đi.

Đây là đoạn code gốc

 #wrap1 {
    margin:0 auto;
    max-width:882px;
    background:#acaea7 url(/community/graphics/users/2/wrap1.gif) top left repeat-y;
    }

Đoạn code sau khi thay đổi

#wrap1 {
    margin:0 auto;
    background:#acaea7 url(/community/graphics/users/2/wrap1.gif) top left repeat-y;
    }

- Tiếp tục kéo xuống hoặc nhấn Ctrl+F để mở hộp thoại tìm kiếm. Gõ vào ô tìm kiếm từ #wrap3. Trong dấu {} của #wrap3 tìm đoạn

max-width:832px;
min-width:739px;

rồi thay thế bằng đoạn bằng đoạn width:758px !important;
Code gốc

#wrap3 {
    background:#fff;
    margin:0 auto;
    max-width:832px;
    min-width:739px;
    padding:0 10px;
    }

Sau khi thay thế sẽ trở thành

#wrap3 {
    background:#fff;
    margin:0 auto;
    width:758px !important;
    padding:0 10px;
    }

- Tiếp tục kéo xuống tìm từ #topbar thay thế max-width:852px; bằng width:778px !important;
- Tìm #top xóa

max-width:872px;
min-width:739px;[/code]

thay bằng width:778px !important;
- Tìm #content xóa

min-width:739px;
max-width:812px;

thay bằng width:758px !important;
(chú ý có cả dấu chấm phẩy sau chữ px)

Chỉ bằng đấy bước là bạn đã đưa thành công độ rộng của skin thứ 2 thành 778px. Sau khi sửa copy toàn bộ nội dung file đã sửa vào Preferences (phía trên cùng của trang weblog ấy) vào tiếp Web page layoutvào custom style sheet. Paste toàn bộ nội dung đã copy vào ô Enter CSS. Kéo xuống đánh dấu vào ô Only use my custom style sheet và nhấn save.

Chú ý: Nhớ download file main.css từ link phía trên để sửa thì đường dẫn ảnh mới không bị sai. Nếu bạn save trang web về và mở file main.css ra sửa rồi copy vào thì một số ảnh sẽ không hiển thị.
2. Đóng khung ô viết bài.
- Mở hộp thoại tìm kiếm gõ vào từ .post để tìm. Xóa padding:16px 0 10px 0; thay bằng padding:10px 5px;
xóa border-top:1px solid #ddd; thay bằng border:1px solid #2382C7;

Ngoài lề: Border thuộc tính dùng thay đổi đường biên của đối tượng. Border được dùng như sau: border(-top, -right, -bottom, -left): #mã màu (hoặc tên màu) kiểu đường viền độ rộng của đường viền;
Có các kiểu đường viền sau: medium thin, thick, dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid, inherit. Bạn có thể thay đổi lần lượt để biết nó hiển thị ra sao.

Code trước khi thay đổi

 .post {
    padding:16px 0 10px 0;
    margin-bottom:10px;
    width:100%;
    overflow:hidden;
    border-top:1px solid #ddd;
    }

Sau khi thay đổi

 .post {
    padding:10px 5px;
    margin-bottom:10px;
    width:100%;
    overflow:hidden;
    border:1px solid #2382C7;
    }

- Tìm #firstpost xóa padding-top:0; thay bằng padding:10px 5px; và thêm đoạn border:1px solid #2382C7;

- Kéo xuống #lastpost xóa border-bottom:1px solid #ddd; thay bằng border-bottom:1px solid #2382C7;

Tới đây là xong việc đóng khung ô viết bài rồi. Lại copy toàn bộ file main.css vừa sửa copy vào đúng chỗ như ở trên đã chỉ dẫn và save. Để đổi màu đường viền thành màu khác bạn chỉ việc đổi #2382c7 thành mã màu mà bạn thích.
3. Thay đổi nền blog

Vẫn phải chú ý với các bạn chúng ta đang thay đổi skin số 2. Với skin này việc thay đổi nền blog như sau.

- Tìm #wrap1 xóa background:#acaea7 url(/community/graphics/users/2/wrap1.gif) top left repeat-y;

- Tìm #wrap2 xóa background:#transparent url(/community/graphics/users/2/wrap2.gif) top left repeat-y;

- Kéo lên trên cùng tìm thẻ body thay thế hoặc sửa background:#b6b8b1; thành background:#000; . Bạn có thể chọn màu nền mà mình thích để thay vào #b6b8b1. Tôi thay thành #000 là màu đen. Để đưa ảnh nền vào bạn làm như sau. Sửa background:#b6b8b1; thành background:#b6b8b1 url(đường dẫn tới bức ảnh nền) repeat;

Ví dụ:

Code gốc

body {
    background:#b6b8b1;
    margin:0;
    padding:0;
    font-family:arial,'trebuchet ms',helvetica,sans-serif;
    font-size:12px;
    line-height:145%;
    text-align:center;
    color:#111;
    }

Sau khi thay:

 body {
    background:#000 url(http://my.opera.com/phamlam/homes/nightstyle/bg.gif);
    margin:0;
    padding:0;
    font-family:arial,'trebuchet ms',helvetica,sans-serif;
    font-size:12px;
    line-height:145%;
    text-align:center;
    color:#111;
    }

Ngoài lề: background là thuộc tính ghi tắt của 5 thuộc tính background-color, background-image, background-repeat, background-position, background-attachment thay dùng để đổi nền đối tượng, thường có cấu trúc như sau:
background: #mã màu (hoặc tên màu, nếu dùng tên màu không có dấu #) url(đường dẫn tới file ảnh làm nền) vị trí đặt của bức ảnh nền trong đối tượng khả năng lặp lại của ảnh nền;
Các kiểu lặp lại của ảnh nền: repeat: lặp lại, no-repeat: Không lặp lại, repeat-x; chỉ lặp lại ảnh theo trục x, repeat-y: chỉ lặp lại theo trục y.

Tới đây đã xong việc đưa ảnh nền vào blog. Lại tiếp tục công việc copy và paste như ở trên và save vào. Mở blog nhấn F5 để xem kết quả.

4. Đưa hình nền vào ô viết bài.

- Tìm .post giống ở trên. Thêm đoạn background:#fff url(đường dẫn ảnh) bottom right repeat-x;

Chú ý: bottom right repeat-x; tức là lặp lại bức ảnh đó theo trục ngang x ảnh bắt đầu ở dưới cùng và bên phải của ô .post và lặp liên tục sang bên trái. Bạn có thể thay đổi cho phù hợp với yêu cầu của bạn.

Ví dụ

.post {
    padding:10px 5px;
    margin-bottom:10px;
    width:100%;
    overflow:hidden;
    border:1px solid #2382C7;
    background:#fff url(http://my.opera.com/phamlam/homes/nightstyle) bottom right repeat-x;
    }

Bài Viết của anh Phạm Lâm ( phamlam.info)

Phamlam.info