Yahoo 360: Trang trí bài viết bằng HTML và CSS

Mặc dù Yahoo 360 nổi tiếng là cứng nhắc vì không hỗ trợ nhiều các mã
HTML và CSS như các hệ thống Blog khác nên blogger gặp khó khăn khi
muốn tùy biến trang Blog của mình! Tuy nhiên, với sự sáng tạo của họ,
người ta vẫn tìm thấy những blog có phong cách thật khác biệt! Dưới đây
là một thủ thuật trang trí mỗi bài viết bằng mã HTML và CSS mà mình
muốn giới thiệu với các bạn.

Hướng dẫn thực hiện thủ thuật:

Bước 1: Vào blog 360 soạn thảo một entry mớ. Trong khung soạn thảo nhấp vào View HTML Source



Bước 2: Trang điểm ảnh nền cho bài viết.

{tipbox_right}Copy đoạn mã HTML này vào khong soạn thảo. Thay thế những đường dẫn in
đập bằng đường dẫn đến hình nào bạn thích trên internet để trang trí
nền cho bài viết.

Ví dụ: mình có thể thay đổi hình nền của "nội dung bài viết": http://i166.photobucket.com/albums/u102/devilphong2811/nen2-1.gif" bằng http://www.backgroundcity.com/mallims/th6m07.gif. Bạn có thể bỏ đi các đường dẫn tới hình nền nếu như bạn không thích.

Nhấp bỏ chọn View HTML Source để xem thử, và nhấp chọn View HTML Source để chỉnh sửa.

<table border="0" cellspacing="0" background="http://i166.photobucket.com/albums/u102/devilphong2811/nen1-1.gif">
  <tbody>
    <tr>
      <td rowspan="3" background="http://i166.photobucket.com/albums/u102/devilphong2811/nen1-1.gif"> Lề trái </td>
      <td background="http://i166.photobucket.com/albums/u102/devilphong2811/nen1-1.gif"> Tiêu đề trang trí<br />      </td>
      <td rowspan="3" background="http://i166.photobucket.com/albums/u102/devilphong2811/nen1-1.gif"> Lề phải</td>
    </tr>
    <tr>
      <td background="http://i166.photobucket.com/albums/u102/devilphong2811/nen2-1.gif"> Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung </td>
    </tr>
    <tr>
      <td background="http://i166.photobucket.com/albums/u102/devilphong2811/SuperDog6-1.gif"> Chân bảng</td>
    </tr>
  </tbody>
</table>

Nếu bạn giữ nguyên đoạn HTML này, bạn sẽ thấy hình như sau:



Bạn có thể dùng hình GIF động để trang trí như hình tuyết rơi, lá rơi....

Bước 3: Trang trí nội dung.


Sau khi đã trang trí vừa ý các ảnh nền. Bạn nhấp bỏ chọn View HTML Source.
Thay các chữ "Nội dung" bằng bài viết của bạn; "Tiêu đề trang trí" bằng
"Chủ đề của bạn (Music, Thời trang,...); các "Chân bảng", "Lề trái",
"Lề phải" có thể bỏ đi hay trang trí theo cách riêng của bạn. Tiếp đến
là chọn màu, chọn font hay cỡ chữ theo ý thích của bạn.



Cuối cùng là nhấp nút Post this entry và khoe với bạn bè!

Tham khảo ở blog của mình: http://360.yahoo.com/biboict

Còn tiếp.....
{emailalert}

Một số hình nền tham khảo tại http://www.backgroundcity.com

 

Background images are powered by http://backgroundcity.com