Thể loại: ,

Mời xem các kênh truyền hình và một vài kênh phát thanh trực tuyến của Việt Nam.




(Xem chế độ đầy màn hình ở gốc hoặc nhấn chuột hai lần vào khung hình. Trình duyệt của bạn cần cài đặt flash để xem một số kênh)


Chọn kênh muốn xem:



LƯU Ý: Nếu không xem được truyền hình có thể do các nguyên nhân sau:

- Truyền hình không phát vào lúc bạn mở.

- Link truyền hình gặp lỗi do webserver nhà đài.

- Link truyền hình đã thay đổi nhưng chưa kịp cập nhật ở đây.

- Các kênh từ VTC1 -> DN2: Thường xuyên thay đổi link phát nên bạn có thể không xem được. Vui lòng để lại thông báo phía dưới.

Lần cuối cập nhật link: Ngày 10.10.2008.

Nếu bạn muốn làm các kênh truyền hình như thế này cho blog của mình hãy xem hướng dẫn tại đây.

Thể loại: ,

Những người thường xuyên chia sẻ tài liệu trên mạng không lạ gì các trang như RapidShare, MegaUpload,... Để được download phải đợi thời gian đếm ngược, nhập ký tự kiểm tra, giới hạn tốc độ và nhiều phiền toái khác mà trong đó không được cung cấp link trực tiếp đến file cần tải. Nếu bạn có tiền hãy mua một tài khoản Premium để xài. Rapidshare đã có đại lý ở Việt Nam là công ty Trường An, trụ sở tại Hà Nội. Nhưng muốn sử dụng miễn phí và cho phép dùng link trực tiếp thì sao? Hãy tìm dưới đây, những trang cung cấp dịch vụ này. Với link trực tiếp bạn có thể dùng làm playlist nhạc, đăng hình ảnh, chia sẻ tài liệu ... không quá phiền phức và rắc rối như các link chia sẻ kiểu trên.

Nhìn chung bạn phải đăng ký làm thành viên để sử dụng và quản lý các tệp tin của mình. Các trang này cho phép upload rất nhiều định dạng. Ngoài ra còn giúp bạn tạo ứng dụng chơi nhạc mp3 hay slide show hình ảnh. Dưới đây là danh sách nổi bậc:

  1. Uploadingit: www.uploadingit.com

  2. FileDen: www.fileden.com

  3. SnapDrive: www.snapdrive.net

  4. Boxstr: www.boxstr.com

  5. FileXooom: www.filexoom.com

  6. Hotlinkfiles: www.hotlinkfiles.com
Bảng so sánh chi tiết cho các tài khoản miễn phí (Thông số vào thời điểm bạn truy cập có thể khác với lúc bài viết này được đăng).


(Click trên hình để xem kích thước lớn)

Ngoài ra cũng đừng quên Google Pages (sử dụng tài khoản Google) cho sử dụng 100MB lưu trữ mọi tệp tin máy tính nhưng băng thông bị giới hạn, chính xác bao nhiêu thì không rõ.

Cập nhật:

Những tưởng Uploadingit.com với những ưu việt sẽ hoạt động tốt. Ai ngờ vừa rồi đã thông báo đóng cửa. Thêm vào đó Google Pages giới hạn băng thông có lẽ khoảng vài GB/tháng. TTB mới đưa nhạc nền lên chưa đầy 6h thì đã hết băng thông!

Cập nhật (26.01.2008):

Uploadingit.com đã hoạt động trở lại!

Thể loại: ,

Bạn có bao giờ nghe nói dùng del.icio.us để làm trình chơi nhạc trên blog hay website chưa? Kể cũng lạ, cái tên del.icio.us quá quen thuộc và nổi tiếng trong thế giới web 2.0 lưu trữ và chia sẻ bookmark lại có thể làm việc này. Thật ra del.icio.us có một công cụ mang tên Play Tagger có thể chơi các link nhạc mp3 trực tiếp mà bạn lưu trên trang của họ hoặc bạn có thể chèn thêm đoạn mã để chơi trên blog.

Đầu tiên cần vào trang http://del.icio.us/help/playtagger để copy đoạn JavaScript hoặc chép lại đoạn mã dưới đây:

<script type="text/javascript" src="http://images.del.icio.us/static/js/playtagger.js"></script>

Sau đó chèn bất cứ chỗ nào hỗ trợ HTML, ví dụ ở đây tôi sẽ chèn phía trên thẻ </body> trong Edit HTML (Chỉnh sửa HTML) của template trước khi lưu lại.



Cách làm link mp3

Như trên nêu, file âm thanh phải có định dạng mp3 và link đến file này phải là link trực tiếp như một siêu liên kết (hyperlink) khác mà bạn thường thấy.

<a href="link_đến_file_mp3"></a>

Bạn có thể bổ sung thêm tên của bài hát để dễ nhìn hơn.

<a href="link_đến_file_mp3">Tên_bài_hát</a>

Cuối cùng hãy nhấn vào nút play bên trái và bậc loa lên nghe một vài bản nhạc.

Bước chân vui
Bước nhảy thiên thần
Cảm ơn đêm nay
Cảm ơn em Sài Gòn
Có một vài điều anh muốn nói với em
Còn nhớ đêm nao
Còn đó chút hồng phai
Có bé quàng khăn đỏ
Cô gái Trung Hoa
Cơn mưa mùa đông
Chỉ yêu mình anh
Chia tay giữa hẹn hò
Dạ khúc

Đây là các địa chỉ mà bạn có thể tải lên các bài hát mình yêu thích sau đó lấy link trực tiếp đến chúng. Khuyên dùng: www.fileden.com.
Video làm mẫu:

Chúc một ngày vui!

Thể loại: , ,

Có nhiều cách thu hút lưu lượng truy cập vào blog, một trong những cách đó là trao đổi link, button, logo hay banner của bạn với một người khác cùng làm blog. Một nút bấm được thiết kế đẹp sẽ "ăn điểm" trước nhiều nút bấm khác. Nếu bạn là dân đồ họa, sẽ chẳng khó. Còn như tôi và nhiều người khác cũng chẳng cần phải gác tay lên trán suy nghĩ làm việc đó như thế nào mà chỉ cần biết các trang web hỗ trợ.


Kích thước các button cho blog thông thường là 80x15 pixels. Ngoài ra bạn có thể thiết kế các banner hoặc logo dạng chuẩn khác tùy theo nhu cầu của mình.

Dưới đây tôi hướng dẫn bạn cách tạo button ở trang http://www.invision-graphics.com/button_generator.html



Choose your border colors: Chọn các màu đường viềng.

Outer border: Đường viềng ngoài
Inner border: Đường viềng trong
Bar Position: Vị trí vạch ngang

Customize the left box: Tùy chỉnh box trái.

Text: Text nhập vào
Background: Màu nền
Text start: Vị trí pixel mà text bắt đầu.

Tương tự cho Customize the right box (Tùy chỉnh box phải).

Để dễ hiểu hãy xem hình minh họa sau:



Xin lưu ý bar position (vị trí vạch ngang) và text stat (vị trí pixel text bắt đầu) của right box phải cân đối trên chiều dài tối đa 80 pixels. Ví dụ tôi ước lượng chữ THU THUAT sẽ chiếm khoảng 52 pixel trái, vì vậy vạch ngang sẽ nằm ở khoảng pixel thứ 52 và text stat của right box sẽ nằm ở vị trí lệch về phải một chút, pixel thứ 55 chẳng hạn (Hình phía trên). Nào hãy xem, nhìn rất chuyên nghiệp!



Ngoài trang web trên, bạn có thể tìm thấy các địa chỉ dưới đây.


Tương tự như vậy, bạn có thể làm banner và logo cho blog yêu của mình với các thao tác chọn màu, kiểu, kích thước.

Một vài trang tạo banner:

Nhiều trang web 2.0 tạo logo, rất đẹp!


Nào, hãy nhanh tay thiết kế một button hoặc logo và gửi lại thông tin của bạn dưới bài viết này.

Thể loại: ,

Google hiện đứng đầu trong lĩnh vực tìm kiếm. Công cụ tìm kiếm này tỏ ra hiệu quả khi chiếm hơn 60% lượng khách truy cập vào Thủ Thuật Blog trong số hơn 60% nguồn khách đến từ công cụ tìm kiếm (xem thống kê dưới bài viết). Rất nhiều trang web, diễn đàn hay blog sử dụng công cụ này làm công cụ tìm kiếm chính. Đặc biệt các trang tiếng Việt có thể tìm kiếm nguồn thu khi tham gia chương trình quảng cáo Adsense for search hiển thị quảng cáo ở kết quả tìm kiếm. Ngoài ra có một cách khác để sử dụng công cụ này thông qua dịch vụ Custom Search Engine (Tìm kiếm tùy chỉnh).

Bước 1. Thiết lập

Trước tiên hãy vào địa chỉ http://www.google.com/cse/ và click trên nút Create a Custom Search Engine. Bạn có thể được yêu cầu đăng nhập tài khoản Google hoặc chấp nhận các điều kiện sử dụng. Tiếp tục bạn sẽ thấy xuất hiện trang web yêu cầu điền các thông tin như hình.



Basic information

- Search engine name: Đặt tên cho công cụ tìm kiếm

- Search engine description: Miêu tả công cụ tìm kiếm

- Search engine keywords: Nhập từ khóa cho công cụ tìm kiếm

- Search engine language: Chọn ngôn ngữ. Nếu blog của bạn là tiếng Việt hãy chọn Vietnamese.

What do you want to search? (Bạn muốn tìm kiếm gì?)

Chọn một trong ba lựa chọn

- Only sites I select (Chỉ trang tôi chọn).
- The entire web, but emphasize sites I select (Toàn bộ nhưng nhấn mạnh trang tôi chọn).
- The entire web (Toàn bộ trang).

Select some sites (Chọn một số trang web)

Nhập vào trang bạn chọn, ở đây chúng ta dùng Blogger. Vì vậy hãy nhập theo cú pháp:

blogcuaban.blogspot.com

Select an edition (Chọn xuất bản)

Hãy chọn Standard Edition để sử dụng miễn phí. Nếu không muốn xuất hiện quảng cáo thì click vào Do not show ads on results pages.

Click I have read and agree to the Terms of Service để chấp nhận điều kiện trước khi click Next để tiếp tục. Bạn sẽ được đưa đến trang có hình sau và nhấn Finish.


Photo Sharing and Video Hosting at Photobucket

Chúng ta sẽ đến trang quản lý, trong đó chúng ta có thể tạo một trang chủ riêng với công cụ tìm kiếm cũng như thêm vào các tiện ích của Google vào homepage, xem thống kê (statistics) hay xóa công cụ đã tạo (delete) và quan trọng nhất nhấn control panel để tùy chỉnh hoặc lấy code.



Bước 2. Cấu hình hiển thị

Quan sát thực đơn hàng ngang để tùy chỉnh cho công cụ tìm kiếm của riêng bạn.



Basic: Những thay đổi cơ bản về chọn ngôn ngữ, mã chữ.

Sites: Nhập các trang web mà bạn muốn chỉ tìm kiếm trong những trang này. Cụ thể ở đây là địa chỉ blog của bạn.

Refinements: Tạo các nhãn ưu tiên cho kết quả tìm kiếm.

Look and feel: Chọn kiểu công cụ, chọn màu sắc kết quả, thêm logo...

Code: Lấy mã cho vào blog, cụ thể xin đọc bên dưới.

Make money: Khai báo thêm tài khoản Google Adsense nếu bạn muốn kiếm tiền từ các kết quả tìm kiếm. Nếu chưa có, hãy tham khảo bài hướng dẫn này trước khi đăng ký.

Preview: Xem trước. Các menu còn lại bạn không cần quan tâm lắm.

Bước 3. Lấy mã:

Có hai lựa chọn. Lựa chọn đầu cho kết quả xuất hiện trên blog, bạn cần phải lấy mã hộp tìm kiếm nằm trong Search box code và mã kết quả tìm kiếm nằm trong Search results code. Mã kết quả này phải được đặt trên blog bằng cách thêm widget HTML/JavaScript và cần thiết phải chỉnh lại kích thước var googleSearchFrameWidth hợp với kích thước nơi xuất hiện. Đây là cách mà tôi sử dụng.



Hình. Lựa chọn 1


Hình. Lựa chọn 2

Ở lựa chọn thứ hai, kết quả tìm kiếm sẽ xuất hiện nhanh hơn ở một trang được hosting bởi Google.





Hình. Thống kê từ Google Analytics

Chúc bạn thành công!

Thể loại: ,

Blogger vừa trình làng một tiện ích mới tạo slideshow ảnh trên blog. Đây quả là một bổ sung thú vị vì blog thể hiện cá tính của người chủ và chia sẻ ảnh thể hiện sự khác biệt trong hàng triệu triệu blog. Điểm đặc biệt của công cụ này: Ảnh biểu diễn không nằm dưới nền flash như thường thấy (Dạng này mất thời gian để tải trình biểu diễn, không kể trình duyệt người dùng chưa cài Adobe Flash Player nên không thể xem được ảnh) mà thông qua một đoạn JavaScript lưu trên máy chủ của Blogger.

Hiện thời, bạn có ba nguồn chính để lấy ảnh (Picasa Web Albums, Flickr, Photobucket) và một nguồn thông qua feed. Ảnh được lấy tự động bằng từ khóa (keyword) trên các trang chia sẻ này, vì vậy bạn không cần phải mất thời gian đưa ảnh lên cũng như bị giới hạn số lượng ảnh mình có. Tuy nhiên bạn cũng có thể dùng ảnh của chính bạn bằng cách khai báo các thông tin đến tên người dùng hay dùng link feed kết nối ảnh hay album ở chế độ public.

Để sử dụng tiện ích, bạn phải dùng Blogger mới (template ở dạng layout) và chọn Add a Page Element (Thêm phần tử trang), chọn tiếp Add to blog ở tiện ích Slideshow nằm trên layout của mình.




Hình. Giao diện cài đặt slideshow

Các bước tiến hành

1. Đặt tên cho tiện ích (Title).

2. Khai báo nguồn lấy ảnh (Source). Chọn một trong bốn nguồn: Picasa Web Albums, Flickr, Photobucket, Other.

3. Tùy chọn (Option):

Tùy theo nguồn lấy ảnh, nội dung tiếp theo sẽ khác nhau.

- Nguồn từ Picasa Web Albums

Có hai lựa chọn: nhập từ khóa (Keyword) hoặc chọn album (Albulm). Trường hợp chọn Album bạn phải cung cấp tên người dùng (Username, cùng tài khoản với Gmail hay Blogger) và chọn album (Album).


- Nguồn từ Flickr

Tương tự có thể nhập từ khóa (Keyword) hoặc nhận tên người dùng Flickr (Cùng tài khoản với Yahoo!).



- Nguồn từ Photobucket

Tương tự có thể nhập từ khóa (Keyword).



- Nguồn khác (Other):

Cung cấp link Feed đến nguồn ảnh.




4. Click chọn cho phép mở ảnh gốc ở cửa sổ mới của trình duyệt (Open links in new window).

5. Nhấn Save Changes (Lưu thay đổi) để lưu lại, kéo và thả đến vị trí mình muốn trước khi nhấn Save trên layout để kết thúc.

Cách lấy link Feed trực tiếp.

a. Đối với Picasa Web Albums:

Bấm biểu tượng Feed màu vàng nằm bên phải thanh địa chỉ trình duyệt Firefox.



Ví dụ link feed mà bạn thấy ở trên như thế này:

http://picasaweb.google.com/data/feed/base/user/d.v.nhan/albumid/5097001277429502593?kind=photo&alt=rss&hl=en_US

b. Đối với Flickr:

Đăng nhập và chọn You -> Your Photos, bạn kéo xuống dưới gốc trái tìm biểu tượng như hình. Click phải chuột chọn Copy Link Location (Firefox) hay Copy Shortcut (Internet Explorer).



Link có dạng:

http://api.flickr.com/services/feeds/photos_public.gne?id=7632316@N06&lang=en-us&format=rss_200


c. Đối với Photobucket:

Cách lấy link tương tự như Flickr.



Link feed có dạng:

http://feed240.photobucket.com/albums/ff259/thuthuatblog/posts/feed.rss

Và cuối cùng thay vì chọn nguồn ảnh như ba lựa chọn đầu, hãy chọn Other, lấy link feed và dùng như hướng dẫn ở Nguồn khác (Other). Lựa chọn này giúp bạn dễ dàng lấy ảnh từ các dịch vụ cung cấp ảnh trực tuyến khác mà không bị giới hạn bởi những dịch vụ nổi tiếng trên.

Thể loại: , ,

Yahoo! 360 đã được chính thức thông báo đóng cửa, nhưng ngôi nhà của bạn ở đây vẫn chưa biết sẽ được di chuyển về đâu. Sau khi hãng Yahoo! khai trương thử nghiệm Yahoo! Mash thì nhiều blogger đã bắt đầu làm quen và dọn nhà đến dịch vụ mới này. Trong giai đoạn "hóa độ" bạn có thể thưởng thức sự giao thoa của hai dịch vụ bằng cách đưa lên Yahoo! Mash bài viết từ Yahoo! 360.

Công việc này rất đơn giản, bạn cần biết link lấy RSS của blog Yahoo! 360 và module đọc RSS của Yahoo! Mash.

Bước 1. Lấy link RSS của blog ở Yahoo! 360

Trước tiên bạn hãy đăng nhập Yahoo! 360, chọn My Blog và kéo xuống dưới entry cuối cùng tìm biểu tượng RSS như hình.



Nếu bạn không thấy biểu tượng này đồng nghĩa với việc blog của bạn đã không chọn chế độ ai cũng được xem (public). Hãy click vào Edit Blog Settings (Hoặc Settings -> Blog Settings) sau đó tìm và chỉnh như hình dưới đây trước khi quay lại My Blog để tìm biểu tượng vừa nêu.



Khi đã tìm thấy biểu tượng RSS, bạn hãy click vào và chép liên kết nằm trên thanh địa chỉ trình duyệt.



Như vậy địa chỉ RSS đến blog của mình có dạng: http://blog.360.yahoo.com/rss-gVK1m4c1bfQiMXHn

Bước 2. Thêm module đọc RSS vào Yahoo! Mash

Ở bước này bạn chuyển qua Yahoo! Mash (http://mash.yahoo.com) và chọn thực đơn Modules



Chọn module Blog Module (RSS 2.0) và click Grab it.



Cách khác:

Ở Your Profile bạn tìm module Customize this page by adding cool stuff, chọn Blog Module (RSS 2.0) và vị trí hiển thị (main column: cột chính, right column: cột phải) rồi bấm Do it!.




Hồ sơ của bạn bây giờ có thêm module này, chỉ cần dán liên kết RSS ở bước 1 vào ô và nhấn Save để hoàn tất.



Hiển thị như hình dưới đây. Hãy click trên hình bạn có thể xem Yahoo! Mash của tôi xem sao nhé!


Thể loại: ,

Tháng 11, lá vàng rơi trên từng góc phố. Mùa thu kết thúc nhường chỗ cho mùa đông lạnh lẽo. Chiều cơn gió đông uốn mình đuổi theo cô gái Sài Gòn mặt chiếc áo mỏng chạy xe trên đường. Chiếc lá thu cuối cùng rơi đầy trên trang nhật ký điện tử, như kéo hồn tôi vào góc kỷ niệm của một thời thơ dại...Hì hì sến quá! Các bạn mến, hôm nay tôi giới thiệu cách đưa đoạn JavaScript hiệu ứng lá vàng rơi nói riêng và cách đưa đoạn JavaScript nói chung lên blog. Bạn biết đấy, JavaScript là một ngôn ngữ kịch bản tuyệt vời, bởi sự tiện lợi, lạ và đẹp mắt theo ý đồ của người lập trình. Ngôn ngữ này có thể làm gần như tất cả những gì bạn muốn trên nền web. Nào chúng ta sẽ bắt tay vào tìm hiểu.

Hình thức đoạn JavaScript trên blog?

Cách 1. Nhiều đoạn mã JavaScript có thể chèn trực tiếp như hướng dẫn dưới. Tuy nhiên đây không phải là cách tối ưu, chưa kể giữa Blogger cũ và mới khác nhau về cấu trúc nên bạn có thể sẽ gặp lỗi khi sử dụng cách này.

Cách 2. Lưu đoạn JavaScript thành tệp tin .js và đưa lên một trang lưu trữ miễn phí như Google Pages (Tài khoản cùng với Gmail) sau đó lấy link thay cho link_đến_file_JavaScript.

<script src='link_đến_file_JavaScript' type='text/javascript'/>

Trong đó link_đến_file_JavaScript có dạng http://d.v.nhan.googlepages.com/leavesfall.js. Và như vậy bạn sẽ có đoạn mã (Đây là đoạn mã mà tôi đang dùng cho hiệu ứng lá vàng rơi mà bạn đang thấy vào thời điểm bài hướng dẫn này):

<script src='http://d.v.nhan.googlepages.com/leavesfall.js' type='text/javascript'/>

Cách chèn vào Blogger

Để chèn vào blog bạn chỉ cần sử dụng đoạn mã hoàn chỉnh như ở cách 2 đưa vào liền kề phía dưới thẻ <body> hoặc phía trên thẻ </body> nếu muốn xuất hiện ngay khi trang hiển thị hoặc sau khi trang hiện lên đầy đủ trên cửa sổ trình duyệt. Xem hình.




Cách tạo tệp tin .js

Nếu bạn có kiến thức về JavaScript, bạn có thể viết đoạn mã theo ý thích của mình để đưa lên blog. Và khi đó bạn có thể dùng các trình soạn thảo web như Dreamweaver lưu lại thành tệp tin .js (Hỗ trợ Unicode). Trường hợp bạn tham khảo từ những trang web trên mạng, hãy copy vào Notepad (Start-> All Programs -> Accessories -> Notepad) và thay đổi một vài thông tin như sau:

1. Thay đổi liên kết đến hình ảnh hoặc nội dung văn bản hiển thị của đoạn mã. Ví dụ ở đây tôi sẽ đổi link đến hình ảnh bông tuyết (snow.gif) bằng http://i240.photobucket.com/albums/ff259/thuthuatblog/jseff/snow.gif

2. Bỏ đi đoạn văn bản khai báo (<script type="text/javascript">) và đóng lại (</script>) JavaScript trước khi lưu lại tệp tin .js.

<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

Sau khi thay đổi đoạn code nằm trong tệp tin .js của bạn sẽ có dạng như sau:

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="http://i240.photobucket.com/albums/ff259/thuthuatblog/jseff/snow.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0;                        // set coordinate variables
xp[i] = Math.random()*(doc_width-50);  // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;         // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random();     // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() {  // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) {  // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}


Cách lưu thành tập tin .js cũng giống như cách thành tập tin .wpl mà tôi đã giới thiệu.

Dưới đây là một số tập tin .js hoàn chỉnh với các hiệu ứng rơi hiển thị trên Firefox (FF) cũng như Internet Explorer (IE). Hãy click phải chuột chọn Save Target As (IE) hay Save Link As (FF) để tải về trước khi đưa lên Google Pages của bạn.

Các hiệu ứng rơi:

- Dollar rơi (Mau nặt dùm đem đổi ngân hàng nhé! ;-) ): Tải về | Xem trước.

- Lá rơi, nhiều lá cùng màu và kích thước: Tải về | Xem trước.

- Lá rơi, nhiều lá cùng màu và khác kích thước: Tải về | Xem trước.

- Lá rơi, nhiều lá khác màu và kích thước: Tải về | Xem trước.

- Hình trái tim rơi (Ôi tình yêu của tôi!): Tải về | Xem trước.

- Sao rơi: Tải về | Xem trước.

Các hiệu ứng bay:

- Máy bay bay: Tải về | Xem trước.

- Bướm bay: Tải về | Xem trước.

- Đôi mắt dõi theo con trỏ chuột: Tải về | Xem trước.

- Sủi bọt (Không có bay đâu nhé!): Tải về | Xem trước.

Ngoài ra bạn có thể tìm kiếm các loại khác như đồng hồ theo con chuột, hiệu ứng rơi, nhồi bóng ... tại Dynamic Drive , eChip, Éditeur JavaScript và nhiều địa chỉ khác. Một số hiệu ứng có cách đưa vào blog hơi khác một chút, nếu bạn không rõ hãy liên hệ email để được giúp đỡ.

Chúc thành công!

Thể loại: ,

Tuần vừa qua bận nhiều việc nên tôi không có thời gian bổ sung bài viết cho blog. Hôm nay chúng ta lại tiếp tục với một hướng dẫn về hiển thị tiêu đề và ẩn nội dung bài đăng theo nhãn dành cho bạn đọc dùng Blogger mẫu kiểu cũ không muốn hiển thị bài đăng theo cách truyền thống. Với thủ thuật này, khi người đọc bấm vào nhãn muốn xem, các bài đăng trên nhãn này chỉ hiển thị tiêu đề còn nội dung được ẩn đi, người đọc chỉ việc click vào dòng ghi chú để mở hoặc đóng nội dung, rất giống với kiểu Peekaboo dành cho Blogger mới tuy nhiên không có phần tóm tắt.

Các bước tiến hành như sau:

Bước 1. Sao lưu template hiện thời của bạn.

Bước 2. Thêm CSS vào style. Bạn chỉ cần chép đoạn mã dưới chèn giữa hai thẻ <style> và </style>.
.posthidden {display:none}
.postshown {display:inline}

Bước 3. Thêm JavaScript vào header. Bạn sẽ sử dụng đoạn JavaScript dưới đây đưa vào giữa hai thẻ <head> và </head>. Đoạn mã này chứa hàm điều khiển ẩn hiện bài đăng.
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
  whichpost.className="posthidden";
}
else {
  whichpost.className="postshown";
}
}
</script>
Bước 4. Cuối cùng bạn chỉ cần vào Edit HTML (Chỉnh sửa HTML) tìm đoạn mã sau:
  <!-- Begin .post -->
 <div class="post"><a name="<$BlogItemNumber$>"></a>
        <BlogItemTitle>
   <h3 class="post-title">
  <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
  <$BlogItemTitle$>
  <BlogItemUrl></a></BlogItemUrl>
   </h3>
   </BlogItemTitle>

          <div class="post-body">
 <div>
     <$BlogItemBody$>
   </div>
   </div>
Và thay thế bằng:
 <!-- Begin .post -->
 <div class="post"><a name="<$BlogItemNumber$>"></a>
       <BlogItemTitle>   
  <h3 class="post-title">
 <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
       <$BlogItemTitle$>
       <BlogItemUrl></a></BlogItemUrl>
  </h3>
  </BlogItemTitle>
  <span class="posthidden" id="<$BlogItemNumber   <span class="posthidden" id="<$BlogItemNumber$>1">
amp;gt;1">
     <$BlogItemBody$><br />
  </span>
  <p>
  <a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
  [+/-] Ẩn/Hiện bài đăng này</a>
  </p>
   </div>
Tất nhiên bạn có thể thay đổi đoạn văn bản [+/-] Ẩn/Hiện bài đăng này theo ý thích. Sau khi đưa các đoạn mã trên bạn lưu lại mẫu của mình. Hãy xem cách hiển thị trên blog test: thuthuatblog1.blogspot.com.

Ngoài hiển thị như bài viết này, bạn còn biết cách làm bài đăng chỉ hiển thị phần tóm tắt và ẩn đi phần nội dung mà Khánh đã giới thiệu dành cho Blogger kiểu cũ. Với Blogger kiểu mới, bạn có thể xem bài hướng dẫn trước đây, còn cách hiển thị giống hướng dẫn này sẽ được cập nhật trong thời gian tới.

Với mỗi kiểu có ưu nhược điểm riêng. Ở cách này, bạn không cần thay đổi cấu trúc đăng bài, tuy nhiên không có phần tóm tắt sau tiêu đề. Nhưng được cái lợi là bạn chỉ cần thay đổi một lần trong template của mình.

Thể loại: ,

Thời gian vừa qua sự việc diễn viên tuổi teen Hoàng Thùy Linh đóng phim XXX đã làm xôn xao cộng đồng Blogger Việt Nam, các diễn đàn cũng như một số trang web đưa tin nóng xoay quanh vụ scandal này. Sự tai tiếng rồi cũng sẽ qua, hãy tha thứ cho người có lỗi và chúng ta lại tiếp tục cuộc sống học tập hay lao động thường nhật. Hôm nay tôi giới thiệu với các bạn một vài kiến thức về CSS dùng để chỉnh sửa style của bạn ở Yahoo! Mash.

Yahoo! Mash là gì?

Cái tên Yahoo! Mash ngày càng được nhiều người biết đến sau khi hãng Yahoo! chính thức công bố sẽ đóng cửa Yahoo! 360 và công bố sẽ phát triển một dịch thay thế Yahoo! 360 vào đầu năm tới. Đây quả là tin buồn cho cộng đồng blogger Việt Nam quen thuộc và thích sự đơn giản của Yahoo! 360. Yahoo! Mash hứa hẹn cung cấp nhiều tính năng nổi bậc kế thừa từ các mạng xã hội khác như MySpace, Facebook,... bên cạnh các tính năng kết nối giữa những người dùng từ Yahoo! 360. Yahoo! Mash hứa hẹn sẽ trở thành mạng xã hội ảo cạnh tranh với những tên tuổi nổi bậc khác trên thế giới, trong khi đó tại Việt Nam đây sẽ là cái tên thống trị cộng đồng ảo bởi sự phổ biến, áp đảo của số lượng người dùng các dịch vụ Yahoo! khác (Yahoo! Mail, Yahoo! Messenger, Flickr...).

Chỉnh sửa giao diện chính ở Yahoo! Mash thông qua CSS

Yahoo! Mash đang trong quá trình hoàn thiện và bố sung nhiều module khác vì vậy bài viết về các tính năng tôi xin hẹn lại thời gian tới. Bây giờ chúng ta sẽ tìm hiểu cách chỉnh sửa hồ sơ ở Yahoo! Mash thông qua một số kiến thức về CSS. Đây là thay đổi chính làm cho Yahoo! Mash của bạn không giống với bất cứ người nào. Các thay đổi này liên quan đến: màu nền, hình nền, màu đường viền, kiểu đường viền,...


THAY ĐỔI BẰNG KHUNG ĐIỀU CHỈNH

Sau khi đăng nhập Yahoo! Mash (http://mash.yahoo.com) bạn chọn thực đơn My Profile và tìm module Style this profile để tiến hành chỉnh sửa. Nói thêm về khái niệm module. Yahoo! Mash quản lý từng dịch vụ riêng biệt. Mỗi khung trên hồ sơ đảm nhận một dịch vụ riêng do người lập trình viết gọi là module, có thể kéo thả đến vị trí khác. Ví dụ dưới đây là một module dùng để ấy ảnh từ Flickr.




Bây giờ chúng ta làm quen với khung chỉnh đơn giản này, nhập hoặc lựa chọn thông tin từng mục:

1. Hình nền

Background Image URL: Nhập link đến hình (Có thể lưu hình này ở các trang chia sẻ ảnh trực tuyến). Ở đây định dạng hình ảnh không ghi rõ, như vậy bạn không bị giới hạn ảnh phải là .jpg như ở Yahoo! 360. Đây quả là tin vui cho những ai thích dùng ảnh động (ảnh có phần mở rộng .gif).

Kế bên liên kết đến hình bạn chọn thuộc tính ở thực đơn xổ xuống. Trong đó:

- Tile: Hình ảnh lặp đầy màn hình (Thích hợp cho hình nền có kích thước nhỏ, hình ảnh sẽ lặp lại lắp đầy cửa sổ trang)

- Center: Hình ảnh nằm giữa màn hình (Thích hợp cho hình nền có kích thước đúng kích thước chuẩn, kích thước được dùng nhiều nhất 1024 x 768 pixels, hình ảnh chỉ hiện thị một lần)

- Bottom: Hình ảnh dưới màn hình (Thích hợp cho hình nền có kích thước ngang đúng kích thước chuẩn, kích thước ngang được dùng nhiều nhất 1024 pixels, hình ảnh chỉ hiện thị một lần)

- Top: Hình ảnh trên màn hình (Thích hợp cho hình nền có kích thước ngang đúng kích thước chuẩn, kích thước ngang được dùng nhiều nhất 1024 pixels, hình ảnh chỉ hiện thị một lần)

Fixed position: Cố định vị trí hình nền, nghĩa là hình nền sẽ đứng yên khi bạn kéo chuột lên xuống.

2. Màu sắc: Nhập hoặc click vào ô kế bên để chọn giá trị màu

Module Color: Màu nền của module

Font Color: Màu chữ

Border Color: Màu đường viền

Link Color: Màu link





THAY ĐỔI BẰNG MÃ LỆNH

Chưa dừng lại, bạn có thể thay đổi chúng bằng CSS nâng cao khi click vào show advanced CSS. Khung ở chế độ này sẽ hiển thị như hình. Bạn đưa vào đây các đoạn mã ở hướng dẫn dưới, nhấn Preview để xem trước, Apply hay Cancel để sử dụng hay hủy bỏ. Click switch to basic mode quay lại như cách thay đổi trên.





Đây là đoạn mã sử dụng hình nền:
body {
background-color: #giá_trị_màu_thập_lục;
background-image: url(liên_kết_đến_hình_ảnh);
background-repeat: từ_khóa_lặp;
background-position: từ_khóa_canh_dọc từ_khóa_canh_ngang;
background-attachment: từ_khóa;
}

Giải thích:

background-color (màu nền), background-image (hình nền), background-repeat (hình nền lặp), background-position (vị trí hình nền), background-attachement (cố định kiểu nền)

giá_trị_màu_thập_lục: sáu ký tự giá trị màu, bạn có thể lấy từ bài viết này hay trang web www.colorschemer.com
liên_kết_đến_hình_ảnh: liên kết đến ảnh
từ_khóa_lặp: repeat (lặp), repeat-y (lặp dọc), repeat-x (lặp ngang), no-repeat (không lặp)
từ_khóa_canh_dọc: top(trên), center(giữa), bottom(dưới)
từ_khóa_canh_ngang: left(trái), center(giữa), right(phải)
từ_khóa: scroll (cuộn), fixed (cố định)

Đây là đoạn mã sử dụng tên hay tiêu đề của module
.mod .hd h3 {
font-family: font_chữ;
color: #giá_trị_màu_thập_lục;
font-weight: kiểu_chữ;
font-size: kích_thước_chữ;
}

Giải thích:

font-family (font chữ), color (màu chữ), font-weight (kiểu chữ), font-size (kích thước chữ)

font_chữ: Hãy dùng một trong các font: Arial, Vernada, Times, Tahoma để hiển thị tiếng Việt
kiểu_chữ: bold (đậm), italic (nghiêng)
kích_thước_chữ: Hãy dùng giá trị phần trăm để hiển thị kích thước lớn hay nhỏ hơn so với bình thường. Ví dụ: 200%.
.mod {
background: #giá_trị_màu_thập_lục;
border: giá_trị_đậm_nét_của_đường_viềnpx kiểu_đường_viềng #giá_trị_màu_thập_lục;
font-family: font_chữ;
color: #giá_trị_màu_thập_lục;
font-size: kích_thước_chữ;
}

Giải thích:

Background (màu nền), các thuộc tích khác tương tự như trên. Riêng với đường viền (border) như sau:

giá_trị_đậm_nét_của_đường_viền: hay đơn vị điểm ảnh của màn hình, là độ dày hay mỏng của đường viền, thường bạn sẽ dùng 1, 2, 3 hay nhiều hơn. Nếu không dùng thì hãy bỏ đi, nhưng hồ sơ của bạn sẽ trông xấu gớm!
kiểu_đường_viền: dotted (kiểu chấm), dashed (kiểu gạch), solid (kiểu liền nét)

Ngoài ra bạn còn có thể bổ sung thêm text-align(canh vị trí text), line-height (khoảng cách giữa các dòng), word-spacing (khoảng cách giữa các từ)

text-align: từ_khóa;
line-height: giá_trị_đơn_vị_điểm_ảnh_màn_hình;
word-spacing: giá_trị_đơn_vị_màn_hình;

Giải thích:

từ_khóa: left(trái, mặc định), center(giữa), right(phải)
giá_trị_đơn_vị_điểm_ảnh_màn_hình: giá trị pixel

Lưu ý: Bạn có thể sử dụng hình nền cho các module bằng cách chèn đoạn mã liên quan đến hình nền tương tự như trên. Khi đó, bạn chỉ cần dùng màu nền cho hồ sơ (background-color) là đủ.

Ví dụ về một CSS hoàn chỉnh của một hồ sơ:

body {
background-color: #47a4ab;
background-image: url(http://img.avatars.yahoo.com/users/1ZWtxUv09AAEBWIE_sI82IrgQ17UE.large.jpg);
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
}

.mod .hd h3 {
font-family:Arial, sans-serif;
color:#ffff00;
font-weight: bold;
font-size:150%;
}

.mod {
background:#9de0f1;
border:1px solid #ff00ff;
font-family: Vernada, sans-serif;
color:#000000;
text-align: right;
font-size:105%;
}

Yahoo! Mash hiện đang ở phiên bản thử nghiệm, để dùng thử bắt buộc bạn phải có người mời. Hãy để lại địa chỉ email của bạn dưới comment của bài viết này hoặc gửi thư đến dv2n@yahoo.com tôi sẽ gửi invitation cho bạn. Ngoài ra nếu bạn sử dụng lại bài viết của tôi đề nghị ghi rõ nguồn gốc. Đó là cách tôn trọng công sức của tác giả cũng như tôn trọng chính bạn. Thêm vào đó bạn có thể đăng ký nhận các bài viết cập nhật qua email nằm bên góc trái trên cùng.

Chúc bạn một ngày vui.

Tải game ho ly mới | tai au mobile