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

Chúng ta sẽ thiết lập cho blog hiệu ứng bắn pháo hoa: Pháo hoa sẽ nổ ngay giữa blog để chào mừng mọi người ghé thăm. Đây là một dạng nâng cấp của việc dùng ảnh động làm hình nền, nhưng “đẳng cấp” hơn. Bạn xem tham khảo tại http://tinyurl.com/2pty7r.

Để xây dựng hiệu ứng này, trước tiên, bạn tìm đến module “My Stuff” (hoặc phiên bản tiếng Việt có tên khác là “Góc riêng”), nhấn nút “Sửa” để chuyển sang phần chỉnh sửa code trong module này.

Bây giờ, bạn hãy nhấn Ctrl + A, sau đó nhấn phím mũi tên sang phải → . Bạn dùng phím ↑ để di chuyển lên trên, nhằm tìm đến mã “Nút chuyển vị trí”.

Về phần “Nút chuyển vị trí”, bạn xem lại bài “Làm Chủ Yahoo Mash phần XXV”, mục “49- Tạo Nút Chuyển Vị Trí” và bài “Làm Chủ Yahoo Mash phần XXVII”, mục “51- Sử Dụng Hiệu Quả Module “My Stuff”.

Ở đây, đoạn code mẫu mà chúng ta sử dụng có nội dung như bên dưới:

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

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

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

<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-mosh-blob-1201769046">Tuyên Ngôn Blogger

</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-mosh-blob-1200805826">Số Khách Thăm

</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;">Tin Tức</span>

</a><a href="#ypf-mosh-rss2-1201193345">RSS- Tin Nhanh 1

</a><a href="#ypf-mosh-rss2-1201239947">RSS- Tin Nhanh 2

</a><a href="#ypf-jbum-newt-1201197183">Tin Tức-NewsTicker

</a><a href="#ypf-jbum-dtube-1201196996">Tin-News Spinner

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

</a><a href="#ypf-jbum-ksco-1202145513">Kính Vạn Hoa-Kaleidoscope

</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>

Như đã nói, đoạn code của “Nút chuyển vị trí” là cuối cùng. Sau nó, bạn không nên đặt bất kì code nào khác vì nó sẽ hiển thị không tốt. Do đó, trong đoạn code của “Nút chuyển vị trí”, ở mã “Ngăn” (như mô tả ở bên dưới)…

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

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

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

 … bạn hãy điền tiếp đoạn mã “Pháo hoa” cho blog, nội dung đoạn code bắn pháo hoa như ở bên dưới (đoạn code này có thể tải tại http://tinyurl.com/34qz7d )

<div class="NGUYENTUVUONGPHAOHOA"><table width="87">

<tr>

<td>

<p align="center"> <embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false"

src="http://img337.imageshack.us/img337/5432/fireworksanimatedwe0.gif" width=200 height=100 wmode="transparent">

<br>

Nên nhớ là giữa code của “Pháo hoa” và code “Nút chuyển vị trí” không có mã ngăn. Như vậy, đoạn code liên hợp của chúng sẽ trông như sau (đoạn code này có thể tải tại http://tinyurl.com/34qz7d )

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

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

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

<div class="NGUYENTUVUONGPHAOHOA"><table width="87">

<tr>

<td>

<p align="center"> <embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false"

src="http://img337.imageshack.us/img337/5432/fireworksanimatedwe0.gif" width=400 height=300 wmode="transparent">

<br>

<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-mosh-blob-1201769046">Tuyên Ngôn Blogger

</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-mosh-blob-1200805826">Số Khách Thăm

</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;">Tin Tức</span>

</a><a href="#ypf-mosh-rss2-1201193345">RSS- Tin Nhanh 1

</a><a href="#ypf-mosh-rss2-1201239947">RSS- Tin Nhanh 2

</a><a href="#ypf-jbum-newt-1201197183">Tin Tức-NewsTicker

</a><a href="#ypf-jbum-dtube-1201196996">Tin-News Spinner

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

</a><a href="#ypf-jbum-ksco-1202145513">Kính Vạn Hoa-Kaleidoscope

</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>

Bây giờ, bạn hãy nhấn “Save” hoặc “Lưu” để lưu lại các thiết lập vừa đặt lên blog Yahoo Mash. Sau đó, bạn cuộn chuột xuống dưới cùng để tìm đến module “Tạo phong cách cho trang của bạn”, rồi điền đoạn mã căn chỉnh vị trí cho pháo hoa.

Đoạn mã như bên dưới, tôi mặc định pháo hoa sẽ nằm ở bên trái blog để blog trông ấn tượng nhất (vì “Nút chuyển vị trí” nằm ở bên phải và Nội dung blog nằm ở giữa). Bạn có thể thay đổi nó sang chỗ khác bằng cách thay chữ left ở bên dưới thành chữ right.

#ypf-mystuff .NGUYENTUVUONGPHAOHOA{ position:fixed; top:0px; left:0px; font-size: 10px; }

 70 - Bắn những… cái khác trong blog

Hiệu ứng bắn pháo hoa trên blog dựa trên cơ sở sử dụng một ảnh động nhưng được tách riêng khỏi module “My Stuff- Góc riêng”, nên nếu không thích bắn pháo hoa, bạn có thể bắn những... thứ khác. Nếu có những tấm ảnh động đẹp, bạn cũng có thể dùng cách này để đưa nó ra bề mặt của blog.

- Cách 1: cách thực hiện rất đơn giản, bạn chỉ việc mở module “My Stuff- Góc riêng” ra, sau đó, thay liên kết “http://img337.imageshack.us/img337/5432/fireworksanimatedwe0.gif” trong mã bắn pháo hoa thành đường dẫn đến một tấm ảnh động khác (dạng gif. hoặc ảnh flash có dạng swf.) rồi đưa nó vào blog là xong.

Nên nhớ, ảnh động phải có nền màu trắng, vì nếu chọn loại nền màu khác, nó sẽ che mất nội dung của blog bên dưới.

Chẳng hạn, mã bắn pháo hoa là

<div class="NGUYENTUVUONGPHAOHOA"><table width="87">

<tr>

<td>

<p align="center"> <embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false"

src="http://img337.imageshack.us/img337/5432/fireworksanimatedwe0.gif" width=400 height=300 wmode="transparent">

<br>

 Và bạn có một ảnh động với đường dẫn là

http://www.taochu.com/messages/01-16.gif

Sau khi đưa vào, bạn sẽ có đọan mã mới trong module “My Stuff- Góc riêng” như sau:

<div class="NGUYENTUVUONGPHAOHOA"><table width="87">

<tr>

<td>

<p align="center"> <embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false"

src="http://www.taochu.com/messages/01-16.gif" width=400 height=300 wmode="transparent">

<br>

- Cách 2: trong trường hợp đoạn hình ảnh là một nhóm hình, bạn thay nguyên phần mã như bên dưới sang mã của nhóm hình đó.

<p align="center"> <embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false"

src="http://img337.imageshack.us/img337/5432/fireworksanimatedwe0.gif" width=400 height=300 wmode="transparent">

Chẳng hạn, tôi có mã của nhóm hình “Xin chào các bạn đã đến blog” như sau

<a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/h.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/i.gif" border="0"></a>

Thì tôi sẽ thay thế nó cho nguyên đoạn mã

<p align="center"> <embed allowScriptAccess="never" allowNetworking="internal" enableJavaScript="false"

src="http://img337.imageshack.us/img337/5432/fireworksanimatedwe0.gif" width=400 height=300 wmode="transparent">

Và như vậy, đoạn mã trong module “My Stuff - Góc riêng” sẽ là

<div class="NGUYENTUVUONGPHAOHOA"><table width="87">

<tr>

<td>

<a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/h.gif" border="0"></a> <a href="http://www.taochu.com"><img src="http://taochu.com/gen/gimg/35/i.gif" border="0"></a>

<br>

Một số ảnh động đẹp bạn có thể tham khảo tại:

- http://tinyurl.com/2ghc3l

- http://tinyurl.com/38na5h

- http://tinyurl.com/yumcw6

- http://tinyurl.com/2ylmur

- http://tinyurl.com/2a5wmw

- http://tinyurl.com/3bqydh

- http://tinyurl.com/3yveca

Còn tiếp