Cùng nhau tạo phong cách riêng cho blog (bài 2)

Như đã hứa với các bạn, hôm nay mình mới có thời gian viết tiếp bài thứ 2 trong loạt bài “Cùng nhau tạo phong cách riêng cho blog”. Một số các bạn yêu cầu quá nhưng thực sự là mình không có thời gian. Mình cứ vào blog 1 tí là sếp mình lại bảo “cái blog thì để khi nào có thời gian, chú ý vào công việc đi”. Híc híc vậy là chẳng viết được gì. Hôm nay phải về nhà ngồi tu để viết bài thứ 2 này. Nào chúng ta cùng bắt đầu nào. Trước khi bắt đầu chúng ta cũng phải nói qua về nội dung của bài 1 . Ở bài một các bạn đã biết làm thế nào để kết hợp giữa giao diện mặc định của Opera và giao diện tự thiết kế thông qua các style. Và cũng ở bài 1 chúng ta đã biết cách thay đổi kiểu chữ cỡ chữ màu chữ của tiêu đề blog, tuy nhiên thế vẫn chưa đủ phải không?.
Ở bài 2 này mình sẽ giới thiệu với các bạn cách thay đổi font chữ mặc định của Opera giúp blog của bạn hiển thị tiếng Việt có dấu tốt trên hầu hết các trình duyệt phổ biến. Chèn nhạc hình, nhạc tiếng, flash vào trong blog. Cách viết tiếng Việt có dấu trong blog. Và nếu mình có thời gian thì sẽ giới thiệu với các bạn cách thay đổi banner của blog. Hãy tạm thời thế đã nhé..

Cách thay đổi font chữ mặc định của Opera

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 trong blog Opera tuy nhiên hiển thị trên các trình duyệt khác nhau thì lại là một vấn đề. Khi vào blog của luKa tại thời điểm này bằng trình duyệt IE các bạn sẽ thấy hiển thị tiếng Việt có dấu không tốt nhưng dùng trình duyệt FireFox hoặc Opera thì lại hiển thị được tiếng Việt. Mình không biết nguyên do tại đâu nhưng mình đoán do trình duyệt IE không nhận một số font Unicode. Chúng ta khắc phục điểm này như thế nào? Xin thưa là rất đơn giản, các bạn hãy làm trình tự theo cách sau:

Chúng ta hãy vào phần custom style sheet, nếu bạn không biết nó ở đâu xin mời các bạn hãy quay trở lại bài 1 để biết thêm chi tiết. Mở file main.css (sau khi vào file và chọn save page as thì bạn sẽ thấy file này). File main.css của tớ thì ở đây các bạn có thể tải về để xem nhưng có thể file của các bạn sẽ khác của mình 1 chút tuỳ theo các giao diện khác nhau. Sau khi 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 chúng ta chỉ quan tâm tới đoạn font-family:’trebuchet ms’,helvetica,sans-serif; font-size:12px; để hiển thị tiếng Việt tốt hơn thôi mà. Mặc dù các thuộc tính khác như thế nào các bạn không cần quan tâm. Các bạn hãy thay đổi như sau:

body {
background: #8c315b;
margin: 0;
padding: 2px 0;
font-family: Arial, ‘trebuchet ms’,helvetica,sans-serif;
font-size: 12px;
line-height: 145%;
text-align: center;
color: #000;
}

Đó 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. Sau đó đánh dấu vào ô Use my custom style sheet together with the current theme và save lại để xem kết quả. Ví dụ của mình là:

body {
background: #8c315b;
margin: 0;
padding: 2px 0;
font-family: Arial, ‘trebuchet ms’,helvetica,sans-serif;
font-size: 13px;
line-height: 145%;
text-align: center;
color: #000;
}

Cũng có người lại hỏi mình là làm thế nào để gõ tiếng Việt có dấu trong blog của Opera. Nhân đây mình cũng trả lời luôn. 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 và gõ thôi.

Chèn nhạc hình, nhạc tiếng, flash vào blog

Có nhiều bạn hỏi mình các đưa nhạc vào blog cái này cũng đơn giản thôi nếu như ta biết. Thực ra là nhạc hình và nhạc tiếng thì không khác gì nhau cách đưa cả. Chỉ cần thay đổi đường dẫn của file nhạc thôi. Các bạn hãy copy và paste đoạn code sau vào khung viết bài của blog và chỉ cần thay đổi đoạn _http://linknhac.mp3 thành link tới bài hát là có thể được.

 

Cùng nhau tạo phong cách riêng cho 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.com đấ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

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.