Phạm Lâm's Blog

Hôm qua NamKhanh vào comment trong bài hát hòn đá cô đơn có khen giao diện của mình đẹp. Nhân đây cũng xin cảm ơn NamKhanh và một số bạn vì đã có lời khen. Trước kia mình cũng có một website nhỏ là toiyeuem.tk chắc một số bạn cũng biết. Giờ mình chuyển sang dùng Blog của Opera vì thấy nó cũng tiện và tuyệt vời. Mình cũng đăng ký ở khá nhiều trang blog để thử nghiệm nhưng mình thấy ở Opera là tiện và hay nhất.Hiện giờ Opera cho bạn chọn tới 9 giao diện khác nhau và đều khá đẹp. Tuy nhiên, mình lại muốn tạo một cái gì đó khác với mọi người một chút và thật tuyệt vì Opera cho mình làm điều đó. Hôm đầu tiên sử dụng dịch vụ của Opera mình đã mò ra môt trang nói về cách sửa blog của mình. Và mình sẽ chia sẻ với mọi người và cùng bàn luận nhé. Đó là trang http://my.opera.com/WhyOpera/. Ở đây có 5 bài dạy các bạn từ đổi banner tới tất cả mọi thứ . Nếu bạn rành tiếng Anh thì xin hãy vào trang mình vừa đưa vì ở đó viết rất chi tiết còn nếu bạn không rành thì xin hãy vào đây, mình sẽ giới thiệu trên tinh thần của trang đó.

* Chúng ta bắt đầu từ đâu nào?

Thứ nhất: Bạn vào phần My Account (phía trên cùng của trang weblog ấy)
Thứ hai: Bạn vào tiếp Design nhé.
Thứ 3: Bạn vào custom style sheet. Sau khi vào đây sẽ hiện ra một khung để chúng ta có thể gõ code của mình vào. Còn gõ như thế nào thì bạn sẽ biết ngay sau đây thôi.


Mọi người chú ý: Nếu ai không thấy link để vào Custom Style Sheet thì có thể vào qua link sau _http://my.opera.com/nickoperacuaban/account/usercss.dml
Thay nickoperacuaban là nick bạn dùng để đăng nhập vào Opera. Ví dụ như nick của tôi là phamlam. Nhớ đăng nhập trước khi gõ link trên và bỏ dấu _ ở đầu link đi

Nói qua một chút về phần này. Blog ở opera cho chúng ta 3 lựa chọn để sửa chữa giao diện của mình đó là: sử dụng giao diện sẵn có của Opera, sử dụng kết hợp giữa giao diện của Opera và của cá nhân, chỉ sử dụng giao diện do mình thiết kế toàn bộ. Như các bạn biết đấy, để thiết kế lại toàn bộ giao diện của mình thì quả không phải là dễ, các bạn phải thật am hiểu về CSS. Vì vậy, mình sẽ kết hợp giữa giao diện sẵn có của Opera và sửa chữa đi 1 chút.

Bài 1: Thay đổi tiêu đề của blog

Đầu đề hay có thể gọi là tiêu đề (title). Như của mình đó là chữ thật thà cho 1 tình yêu đó.
Các bạn chú ý:khi bạn save trang web của bạn về thì sẽ thấy 1 file có tên main.css khi bạn mở nó ra và tìm bạn sẽ thấy 1 đoạn sau (với mỗi skin # nhau của opera thì đoạn này có thể hơi khác nhau 1 chút, don't worry):

#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;
}

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ữ, cỡ chữ và màu chữ. 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. Theo mình biết thì có một số font unicode hiển tốt trên nhiều trình duyệt như Arial, Verdana, Tahoma. Vì vậy, với mình mình sẽ khuyên các bạn dùng 1 trong 3 loại font unicode trên. Nào bây giờ chúng ta hãy thử nhé. Đây là đoạn code sau khi thay đổi:

#top h1{
margin:0;
width:100%;
overflow:hidden;
font-size:25px;
font-family:Tahoma,Verdana, Arial,'trebuchet ms',arial,helvetica,sans-serif;
color:#808080;
line-height:normal;
padding-top:22px;
}

Chú ý: Những chỗ màu đỏ là những chỗ đã thay đổi.

color:#808080; :Đây sẽ là màu chữ. Với những bạn biết về 1 chút về thiết kế web thì mã màu #808080 không có gì khó khăn nhưng với những bạn không biết thì hơi khó. Mình sẽ đưa bảng mã màu sau nhé. Hoặc bạn nào có thì hãy gửi cho mình để mình đưa lên.
font-size:25px; đây là thay đổi cỡ chữ.
Sau khi paste đoạn code trên vào ô Enter CSS: (tất nhiên là bạn có thể thay đổi cho phù hợp với bạn). Hãy đánh dấu vào ô Use my custom style sheet together with the current theme và save lại để xem kết quả của mình.

- Tương tự như vậy với chữ nhỏ hơn tức là Subtitle text. Như của mình là chữ PhamLam's Weblog - http://phamlam.info đấy. Bạn hãy sửa đoạn sau và save nhé

#subtitle {
margin:0;
font-size:12px;
width:100%;
overflow:hidden;
}

Bạn có thể sửa thành:

#subtitle {
margin:top;
width:100%;
overflow:hidden;
font-size:10px;
font-family:'Verdana',arial,helvetica,sans-serif;
font-style:bold;
color:#C0C0C0;
}

Chúc bạn thành công. Hết bài 1 bài tiếp theo sẽ là thay đổi banner của blog mời các bạn đón đọc .