Làm chủ Yahoo Mash (Tiếp theo)

TPO – Tiếp theo, chúng ta sẽ khai thác mã CSS để xây dựng một trang blog cực kì ấn tượng, mang đậm dấu ấn cá nhân của bạn.

 Module “My Stuff” hỗ trợ rất tốt cho việc chạy các code HTML, và vì thế, chúng ta thường dùng module này để chứa những hiệu ứng âm thanh, hình ảnh, video, nhạc, mục lục, nút chuyển vị trí, đồng hồ,...để làm blog thêm sinh động hơn.

Tuy nhiên, vấn đề xảy ra khi bạn đưa quá nhiều đoạn mã vào trong module này, đó là nhiều đoạn code khác... không hoạt động khi đứng chung với những đoạn code khác, trong khi, nếu ở một mình thì nó chạy rất tốt.

Như vậy, vấn đề khi sử dụng module này, là bạn phải hiệu chỉnh lại các đoạn code để chúng có thể tương thích với nhau và hoạt động tốt, hài hoà và....hiển thị tốt trong module này.

Bây giờ, các đoạn code chúng ta đã đưa vào blog từ trước, gồm code video-nhạc, slideshow hình ảnh, game, mục lục, nút chuyển vị trí...Để đảm bảo hiển thị tốt các code, cũng như làm không gian blog được bố trí hợp lý, chúng ta nên sắp xếp lại vị trí của các đoạn code này.

Bây giờ, bạn hãy mở Yahoo Mash, sau đó, tìm đến module “My Stuff”, sau đó, copy các đoạn code có bên trong và đem vào lưu tạm trong Word.

Trước tiên, chúng ta sẽ đặt code “Mục Lục” lên vị trí đầu tiên, vì mọi người cần biết vị trí chính xác những bài viết của bạn trong blog, để tìm đến đọc. Nhưng, trước khi đặt “Mục Lục”, bạn cần một hình ảnh mô tả thật ấn tượng.

Bạn có thể thiết kế riêng về sau này, nhưng để “thực hành” ngay, bạn có thể dùng tạm đoạn code sau để đưa vào blog. Nó dùng hiệu ứng chữ “pháo hoa”

<a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/m.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/u.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/c.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/l.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/u.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/c.gif" border="0"></a>

Ngoài ra, vấn đề mà chúng ta hay gặp phải, là các đọan code khi đưa vào nhiều- sẽ chồng chéo lên nhau. Thêm vào đó,, nhiều cái xung đột với nhau, khiến nhiều đoạn code không hoạt động tốt.

Vì thế, giữa mỗi đoạn code, bạn nên chèn thêm lệnh sau vào, vừa giúp cho chúng tách rời với nhau để dễ phân biệt, lại giúp tất cả các code không “choãi” nhau. Lệnh đó như sau (tạm gọi là lệnh “Ngăn”):

<br />------------------------------

<br />------------------------------

<br />------------------------------

Bây giờ, chúng ta sẽ đưa nội dung vào “Mục Lục”. Trong các phần trước, chúng ta đã tạo ra một đoạn code chứa nội dung 500 entry, đủ để bạn dùng cho viết blog trong 5 - 6 năm. Tuy nhiên, bạn chỉ nên đưa vào từng 50 entry một nhằm không làm rối blog.

Khi đã viết hết 50 entry, bạn lại đưa thêm 50 mục lục nữa. Toàn bộ code sử dụng trong bài viết này, bạn có thể tải tại địa chỉ http://tinyurl.com/2l7xaj và xem ví dụ mẫu tại điạ chỉ http://tinyurl.com/2pty7r.

Sau khi đã đưa code Mục Lục, bạn lại chèn thêm lệnh “Ngăn” vào. Như vậy, đoạn mã đưa vào sẽ như sau (bạn nhớ điền địa chỉ id của module vào thay thế cho dấu ...cạnh chữ a href="# )

<span style="color: rgb(255, 0, 0); font-weight: bold;">Mục Lục Bài Viết Trong Blog</span>

<a href="#....">Entry 1

<a href="#....">Entry 2

<a href="#....">Entry 3

<a href="#....">Entry 4

<a href="#....">Entry 5

<a href="#....">Entry 6

<a href="#....">Entry 7

<a href="#....">Entry 8

<br />------------------------------

<br />------------------------------

<br />------------------------------

Sau đó, bạn chỉ việc đưa thêm các mã của video, nhạc, hình ảnh, game,...đồng thời, nhớ ngăn cách chúng bằng lệnh “Ngăn” ở trên là được. Những gì bạn đưa vào sẽ hiển thị rõ ràng và đầy đủ như bạn mong đợi.

Khi mọi đoạn code đã được đưa vào, bạn hãy đưa đoạn mã tạo nút chuyển vị trí. Sau khi đưa vào, nó sẽ không nằm trên module “My Stuff” mà bị “đẩy” dạt ra bên ngoài, do đó, đoạn code này khi đưa vào, sẽ không “chiếm dụng” không gian của module.

Dưới đây là đoạn code mẫu mà chúng ta đã dùng trước kia (chạy được trên mọi blog).

<div class="NGUYENTUVUONGNUTCHUYEN"><table width="87">
<tr>
<td>
</a>

<span style="color: rgb(255, 0, 0); font-weight: bold;">Vị Trí</span>

</a><a href="#ypf-uni-head">Trở Lại Đầu Trang

</a><a href="#ypf-coreid">Avarta

</a><a href="#ypf-mastfoot">Xuống Cuối Trang

<span style="color: rgb(255, 0, 0); font-weight: bold;">Bản Thân</span>

</a><a href="#ypf-profile">Giới Thiệu Bản Thân-About Me

</a><a href="#ypf-mydetails">Sở Thích Cá Nhân-My Detail

</a><a href="#ypf-pet">Con Vật Biểu Trưng-My Pet

<span style="color: rgb(255, 0, 0); font-weight: bold;">Bạn Bè</span>

</a><a href="#ypf-contacts">Danh Sách Bạn Bè-Friend

</a><a href="#ypf-mosh-mml2-1201751126">Khách-MyMashLog

</a><a href="#ypf-guestbook">Khung Comment-Conversation

<span style="color: rgb(255, 0, 0); font-weight: bold;">Hiệu Ứng</span>

</a><a href="#ypf-mystuff">MyStuff-ÂmThanh,Hình,Game

</a><a href="#ypf-tags">Từ Khóa-Tags

</a><a href="#ypf-rady-whnew-1202402421">Liên Kết Yahoo 360

<span style="color: rgb(255, 0, 0); font-weight: bold;">Tác Vụ</span>

</a><a href="#ypf-add-mod">Thêm Module

</a><a href="#ypf-style">ĐổiGiao Diện-Style Your Profile

</a><a href="#ypf-mystuff">Mục Lục
</td>
</tr>
</table></div>

Sau đoạn code này, bạn không đưa thêm bất kì mã gì vào sau nó. Về sau này, nếu muốn đưa thêm các đọan game, video, hình ảnh vào module này, bạn hãy tìm đến đoạn lệnh “Ngăn”, sau đó, thêm mã mới vào, rồi tách các đoạn mã với nhau bằng lệnh “Ngăn”. Như thế, nó sẽ hoạt động tốt.

Chú ý quan trọng nhất là bạn KHÔNG BAO GIỜ đưa bất kì mã nào vào sau mã tạo nút chuyển vị trí, vì nó sẽ hiển thị không tốt. Bạn xem xem ví dụ mẫu tại điạ chỉ http://tinyurl.com/2pty7r và toàn bộ code có trong ví dụ mẫu có thể tải tại địa chỉ http://tinyurl.com/2l7xaj

Còn tiếp

Cùng chuyên mục

Xem thêm Công nghệ

Cùng chủ đề

Mới - Nóng

Khám phá