Thứ Hai, 3 tháng 1, 2011

Hướng dẫn sử dụng Yahoo! 360 Plus

Yahoo! đã chính thức phát hành thử nghiệm phiên bản mới của Yahoo! 360 dành cho người Việt Nam với nhiều tính năng nổi bậc. Đây là phiên bản Việt hóa Yahoo! Blog Hồng Kông mà nhiều người biết tiếng Hoa đã có dịp sử dụng. Hôm nay chúng ta sẽ lần lượt khám phá các tính năng và tìm hiểu cách sử dụng của phiên bản mới này.

TẠO BLOG:

Chỉ cần có tài khoản Yahoo! bạn có thể đăng nhập tại đây khai báo các thông tin và chấp nhận điều kiện sử dụng để tạo blog. Xin lưu ý, người đủ 18 tuổi trở lên mới được phép sử dụng dịch vụ.




GIAO DIỆN BLOG:

Sau khi tạo blog xong, bạn có thể thưởng thức giao diện của Yahoo! 360 Plus với các bố trí trải đều trang. Giao diện của Yahoo! 360 Plus được thiết kế khá ấn tượng với menu ngang chứa các thao tác chính nằm trên cùng và các thành phần khác nằm trên các cột.



Trên menu ngang chính gồm:


  • BLOG: Chứa link trở về trang chủ blog của bạn.
  • Sáng tác: Nơi viết entry mới.
  • Admin: Nơi quản lý các thư mục (tạo mới, xóa, chuyển bài viết qua thư mục khác), hình ảnh (tạo, xóa album, đưa hình ảnh lên), comment, bài viết liên quan, blog yêu thích,... Trong khi tôi đang viết bài này Yahoo! 360 Plus đang thử nghiệm tính năng video (xem và tải video lên) từ Yahoo! Blog Hồng Kông, tính năng này hứa hẹn sẽ bổ sung khi Việt hóa hoàn chỉnh.
  • Bố trí: Bố trí (Chọn kiểu bố trí trang), Theme (Thay đổi theme), Module mới (Thêm module mới).
  • Tùy chỉnh: Tùy chỉnh các thông số cơ bản (URL, Blog yêu thích, xem thống kê).
  • Bạn bè Blog: Quản lý danh sách bạn bè.

VIẾT ENTRY VÀ COMMENT

Cải tiến đáng kể nhất của Yahoo! 360 chính là ở bộ soạn thảo entry hoành tráng với nhiều tùy chọn được bố trí hợp lý. Trong đó đáng kể nhất là việc phân loại bài viết theo thư mục cụ thể (thư mục được tạo trước đó trong Admin -> Các thư mục), chọn tâm trạng cho bài viết (Biều tượng sẽ xuất hiện phía trước tiêu đề entry), phân quyền người được xem entry, cho hay không cho phép comment. Ngoài ra bạn còn có thể tùy chọn ngày đăng bài, theo đó các bài viết sẽ xuất hiện trên blog theo ngày được chọn....


Khi bạn bè ghé xem blog của bạn họ có thể viết nội dung comment ở chế độ HTML ngay dưới bài viết theo phân quyền công khai hay riêng rẻ. Và bạn có thể trả lời cho từng comment dễ dàng.


Không chỉ thế Yahoo! 360 Plus còn cho phép comment lên hình ảnh trên các album.



THIẾT LẬP BLOG

Click vào ba menu ngang Admin, Tùy chỉnhBạn bè Blog bạn có thể đến cùng một trang thiết lập blog trong đó bao gồm Thiết lập cơ bảnnâng cao.



Với thiết lập cơ bản, bạn có thể chỉnh sử thông tin cá nhân ở Thông tin riêng (Cũng có thể chỉnh sửa ở Sửa hồ sơ phía dưới ảnh của bạn trên giao diện), chọn URL cho blog, chọn ảnh hiển thị và nhập nội dung Blast (cũng có thể chỉnh sửa trên giao diện).

Với thiết lập nâng cao, ở Thư mục riêng chúng ta có thể tạo thư mục mới, chuyển bài viết sang thư mục khác (bằng cách click lên thư mục có bài viết và chọn bài để chuyển). Tương tự như vậy thao tác cho ảnh ở Quản lý Album. Ngoài ra bạn có thể quản lý các blog mình yêu thích, sổ bạn bè, sổ đen (những người mình "làm ngơ") tại thiết lập này.


TÙY CHỈNH GIAO DIỆN BLOG

A. Chỉnh sửa các module hiển thị trang:

Yahoo! 360 Plus cho phép người dùng tùy chỉnh cách bố trí các module trên blog bằng cách kéo thả chúng đến vị trí mới tương tự như Yahoo! Mash. Để có thể kéo thả bạn cần click trên Bố trí và bắt đầu thao tác.

Nếu muốn xóa đi các module trên blog chúng ta phải cũng phải chọn Bố trí trước đó. Tương tự như vậy bạn có thể thay đổi riêng cho một số module đặc biệt sau:

1. Chỉnh sửa tiêu đề, miêu tả blog, hình nền, màu sắc và định dạng hiển thị (module Tên blog):




2. Chỉnh sửa cách hiển thị entry (module Bài mới nhất): Chế độ hiển thị bài viết, số lượng bài viết hiển thị, màu sắc,...




3. Chỉnh sửa thông tin các trang web yêu thích (module Website yêu thích):




4. Chỉnh sửa module do bạn tự thêm vào (Module trống):




B. Chọn kiểu bố trí trang:

Để chọn kiểu bố trí trang bạn chỉ cần nhấn Bố trí ở menu ngang và nhấn tiếp Bố trí ở menu hiện ngay sau đó.


Yahoo! 360 Plus có 5 kiểu bố trí trang: 2 kiểu 2 cột và 3 kiểu còn lại 3 cột.



B. Chọn theme:

Kế bên chọn kiểu bố trí, chúng ta dễ dàng chọn theme cho blog của mình. Có gần 100 theme đã được thiết kế sẵn, nếu có kiến thức về đồ họa bạn có thể tạo theme riêng của chính mình ở Chế độ tự chỉnh sửa (Hỗ trợ cả CSS).




C. Thêm module:

Nếu cảm thấy các module có trên trang chưa đủ, chúng ta có thể thêm vào bằng cách chọn Thêm module và vị trí xuất hiện trước khi nhấn thao tác xong.

Yahoo! 360 Plus có 4 module chức năng được làm sẵn: Ảnh Blog (Hiển thị ảnh trong Album lên blog), Blog yêu thích (Xem bài viết mới trong các Blog yêu thích), Tìm (Công cụ tìm kiếm thông tin trong Yahoo! 360plus và Blog của tôi), Blog về tôi (Bài viết của bạn bè nói về bạn).

Ngoài ra còn có đến 10 module cột tự thiết kế hỗ trợ HTML (Không hỗ trợ flash như trong entry hay comment).




KẾT NỐI VÀ QUẢN LÝ BẠN BÈ

Khi muốn một ai đó trở thành bạn bè, bạn chỉ cần xem blog họ, nhấn Thêm bạn và chọn mối quan hệ.



Danh sách bạn bè sẽ được đưa vào Bạn bè BLOG theo phân nhóm dễ dàng cho việc phân quyền riêng tư cho mỗi bài viết.



QUẢN LÝ TIN NHẮN
Nhiều người bảo phiên bản mới của Yahoo! 360 Plus không có Quick comment. Thật ra nếu bạn để ý module Bảng tin nhắn này, chức năng của nó không những tương tự mà còn hay hơn chỉ có điều nội dung tin nhắn không hiển thị trên trang giao diện ngoài.




QUẢN LÝ HÌNH ẢNH

Trên Yahoo! 360 Plus việc quản lý ảnh tương tự như quản lý entry, chúng ta có thể tạo album với tên riêng thông qua menu ngang Admin ->Album, di chuyển hình ảnh sang album khác, xóa hình ảnh, hay cho hiển thị hình ảnh trên trang giao diện (click trên menu ngang Bố trí -> Thêm module -> Ảnh blog).

Để đưa ảnh lên album bạn cũng sử dụng menu ngang này (Admin -> Tải lên). Theo đó các ảnh được tải lên phải có định dạng JPG và dung lượng không được vượt quá 2MB.

Thêm nữa chúng ta cũng có thể xem và quản lý ảnh từ module Album trên giao diện trang.




Và còn nhiều phần khác, bạn từ từ khám phá nhé!

Xin lưu ý vào thời điểm bài viết này được đăng, Yahoo! vẫn chưa cho phép chuyển các entry, comment, friends list, pageview từ nền blog cũ sang blog mới.

Bảng mã màu thập lục

Đây là bảng mã màu (lấy từ http://tips-for-new-bloggers.blogspot.com) mà bạn có thể dùng cho việc chỉnh sửa màu sắc.


Tên màuMàu
Black#000000 
Grey0#150517 
Grey18#250517 
Grey21#2B1B17 
Grey23#302217 
Grey24#302226 
Grey25#342826 
Grey26#34282C 
Grey27#382D2C 
Grey28#3b3131 
Grey29#3E3535 
Grey30#413839 
Grey31#41383C 
Grey32#463E3F 
Grey34#4A4344 
Grey35#4C4646 
Grey36#4E4848 
Grey37#504A4B 
Grey38#544E4F 
Grey39#565051 
Grey40#595454 
Grey41#5C5858 
Grey42#5F5A59 
Grey43#625D5D 
Grey44#646060 
Grey45#666362 
Grey46#696565 
Grey47#6D6968 
Grey48#6E6A6B 
Grey49#726E6D 
Grey50#747170 
Grey#736F6E 
Slate Grey4#616D7E 
Slate Grey#657383 
Light Steel Blue4#646D7E 
Light Slate Grey#6D7B8D 
Cadet Blue4#4C787E 
Dark Slate Grey4#4C7D7E 
Thistle4#806D7E 
Medium Slate Blue#5E5A80 
Medium Purple4#4E387E 
Midnight Blue#151B54 
Dark Slate Blue#2B3856 
Dark Slate Grey#25383C 
Dim Grey#463E41 
Cornflower Blue#151B8D 
Royal Blue4#15317E 
Slate Blue4#342D7E 
Royal Blue#2B60DE 
Royal Blue1#306EFF 
Royal Blue2#2B65EC 
Royal Blue3#2554C7 
Deep Sky Blue#3BB9FF 
Deep Sky Blue2#38ACEC 
Slate Blue#357EC7 
Deep Sky Blue3#3090C7 
Deep Sky Blue4#25587E 
Dodger Blue#1589FF 
Dodger Blue2#157DEC 
Dodger Blue3#1569C7 
Dodger Blue4#153E7E 
Steel Blue4#2B547E 
Steel Blue#4863A0 
Slate Blue2#6960EC 
Violet#8D38C9 
Medium Purple3#7A5DC7 
Medium Purple#8467D7 
Medium Purple2#9172EC 
Medium Purple1#9E7BFF 
Light Steel Blue#728FCE 
Steel Blue3#488AC7 
Steel Blue2#56A5EC 
Steel Blue1#5CB3FF 
Sky Blue3#659EC7 
Sky Blue4#41627E 
Slate Blue#737CA1 
Slate Grey3#98AFC7 
Violet Red#F6358A 
Violet Red2#E4317F 
Deep Pink#F52887 
Deep Pink2#E4287C 
Deep Pink3#C12267 
Deep Pink4#7D053F 
Medium Violet Red#CA226B 
Violet Red3#C12869 
Firebrick#800517 
Violet Red4#7D0541 
Maroon4#7D0552 
Maroon#810541 
Maroon3#C12283 
Maroon2#E3319D 
Maroon1#F535AA 
Magenta#FF00FF 
Magenta1#F433FF 
Magenta2#E238EC 
Magenta3#C031C7 
Medium Orchid#B048B5 
Medium Orchid1#D462FF 
Medium Orchid2#C45AEC 
Medium Orchid3#A74AC7 
Medium Orchid4#6A287E 
Purple#8E35EF 
Purple1#893BFF 
Purple2#7F38EC 
Purple3#6C2DC7 
Purple4#461B7E 
Dark Orchid4#571B7E 
Dark Orchid#7D1B7E 
Dark Violet#842DCE 
Dark Orchid3#8B31C7 
Dark Orchid2#A23BEC 
Dark Orchid1#B041FF 
Plum4#7E587E 
Pale Violet Red#D16587 
Pale Violet Red1#F778A1 
Pale Violet Red2#E56E94 
Pale Violet Red3#C25A7C 
Pale Violet Red4#7E354D 
Plum#B93B8F 
Plum1#F9B7FF 
Plum2#E6A9EC 
Plum3#C38EC7 
Thistle#D2B9D3 
Thistle3#C6AEC7 
Lavendar Blush2#EBDDE2 
Lavendar Blush3#C8BBBE 
Thistle2#E9CFEC 
Thistle1#FCDFFF 
Lavendar#E3E4FA 
Lavendar Blush#FDEEF4 
Light Steel Blue1#C6DEFF 
Light Blue#ADDFFF 
Light Blue1#BDEDFF 
Light Cyan#E0FFFF 
Slate Grey1#C2DFFF 
Slate Grey2#B4CFEC 
Light Steel Blue2#B7CEEC 
Turquoise1#52F3FF 
Cyan#00FFFF 
Cyan1#57FEFF 
Cyan2#50EBEC 
Turquoise2#4EE2EC 
Medium Turquoise#48CCCD 
Turquoise#43C6DB 
Dark Slate Grey1#9AFEFF 
Dark Slate Grey2#8EEBEC 
Dark Slate Grey3#78C7C7 
Cyan3#46C7C7 
Turquoise3#43BFC7 
Cadet Blue3#77BFC7 
Pale Turquoise3#92C7C7 
Light Blue2#AFDCEC 
Dark Turquoise#3B9C9C 
Cyan4#307D7E 
Light Sea Green#3EA99F 
Light Sky Blue#82CAFA 
Light Sky Blue2#A0CFEC 
Light Sky Blue3#87AFC7 
Sky Blue#82CAFF 
Sky Blue2#B0E2FF 
Light Sky Blue4#566D7E 
Sky Blue#6698FF 
Light Slate Blue#736AFF 
Light Cyan2#CFECEC 
Light Cyan3#AFC7C7 
Light Cyan4#717D7D 
Light Blue3#95B9C7 
Light Blue4#5E767E 
Pale Turquoise4#5E7D7E 
Dark Sea Green4#617C58 
Medium Aquamarine#348781 
Medium Sea Green#306754 
Sea Green#4E8975 
Dark Green#254117 
Sea Green4#387C44 
Forest Green#4E9258 
Medium Forest Green#347235 
Spring Green4#347C2C 
Dark Olive Green4#667C26 
Chartreuse4#437C17 
Green4#347C17 
Medium Spring Green#348017 
Spring Green#4AA02C 
Lime Green#41A317 
Spring Green#4AA02C 
Dark Sea Green#8BB381 
Dark Sea Green3#99C68E 
Green3#4CC417 
Chartreuse3#6CC417 
Yellow Green#52D017 
Spring Green3#4CC552 
Sea Green3#54C571 
Spring Green2#57E964 
Spring Green1#5EFB6E 
Sea Green2#64E986 
Sea Green1#6AFB92 
Dark Sea Green2#B5EAAA 
Dark Sea Green1#C3FDB8 
Green#00FF00 
Lawn Green#87F717 
Green1#5FFB17 
Green2#59E817 
Chartreuse2#7FE817 
Chartreuse#8AFB17 
Green Yellow#B1FB17 
Dark Olive Green1#CCFB5D 
Dark Olive Green2#BCE954 
Dark Olive Green3#A0C544 
Yellow#FFFF00 
Yellow1#FFFC17 
Khaki1#FFF380 
Khaki2#EDE275 
Goldenrod#EDDA74 
Gold2#EAC117 
Gold1#FDD017 
Goldenrod1#FBB917 
Goldenrod2#E9AB17 
Gold#D4A017 
Gold3#C7A317 
Goldenrod3#C68E17 
Dark Goldenrod#AF7817 
Khaki#ADA96E 
Khaki3#C9BE62 
Khaki4#827839 
Dark Goldenrod1#FBB117 
Dark Goldenrod2#E8A317 
Dark Goldenrod3#C58917 
Sienna1#F87431 
Sienna2#E66C2C 
Dark Orange#F88017 
Dark Orange1#F87217 
Dark Orange2#E56717 
Dark Orange3#C35617 
Sienna3#C35817 
Sienna#8A4117 
Sienna4#7E3517 
Indian Red4#7E2217 
Dark Orange3#7E3117 
Salmon4#7E3817 
Dark Goldenrod4#7F5217 
Gold4#806517 
Goldenrod4#805817 
Light Salmon4#7F462C 
Chocolate#C85A17 
Coral3#C34A2C 
Coral2#E55B3C 
Coral#F76541 
Dark Salmon#E18B6B 
Salmon1#F88158 
Salmon2#E67451 
Salmon3#C36241 
Light Salmon3#C47451 
Light Salmon2#E78A61 
Light Salmon#F9966B 
Sandy Brown#EE9A4D 
Hot Pink#F660AB 
Hot Pink1#F665AB 
Hot Pink2#E45E9D 
Hot Pink3#C25283 
Hot Pink4#7D2252 
Light Coral#E77471 
Indian Red1#F75D59 
Indian Red2#E55451 
Indian Red3#C24641 
Red#FF0000 
Red1#F62217 
Red2#E41B17 
Firebrick1#F62817 
Firebrick2#E42217 
Firebrick3#C11B17 
Pink#FAAFBE 
Rosy Brown1#FBBBB9 
Rosy Brown2#E8ADAA 
Pink2#E7A1B0 
Light Pink#FAAFBA 
Light Pink1#F9A7B0 
Light Pink2#E799A3 
Pink3#C48793 
Rosy Brown3#C5908E 
Rosy Brown#B38481 
Light Pink3#C48189 
Rosy Brown4#7F5A58 
Light Pink4#7F4E52 
Pink4#7F525D 
Lavendar Blush4#817679 
Light Goldenrod4#817339 
Lemon Chiffon4#827B60 
Lemon Chiffon3#C9C299 
Light Goldenrod3#C8B560 
Light Golden2#ECD672 
Light Goldenrod#ECD872 
Light Goldenrod1#FFE87C 
Lemon Chiffon2#ECE5B6 
Lemon Chiffon#FFF8C6 
Light Goldenrod Yellow#FAF8CC 

Đưa truyền hình trực tuyến lên Google Blogger theo kiểu chọn kênh

Theo yêu cầu của nhiều bạn muốn được sử dụng truyền hình trực tuyến theo kiểu chọn kênh như có trên Thủ Thuật Blog. Bài viết này tôi sẽ giúp bạn làm một chương trình truyền hình trực tuyến hay kênh âm nhạc cho đọc giả của bạn có thể chọn kênh hoặc bài hát được liệt kê sẵn. Làm hướng dẫn này tốn nhiều thời gian và chính bản thân tôi mất hơn 6h cho việc tìm hiểu code, sưu tầm các logo và nhất là tìm kiếm link phát truyền hình trực tuyến của nhà đài. Chúng ta sẽ bắt đầu qua 4 bước chính.

Bước 1: Đoạn mã điều khiển đổi kênh

Mỗi lần chọn kênh, blog của bạn không phải tải lại việc này điều khiển bởi một đoạn JavaScript. Đây chính là đoạn mã bạn cần: changesource.js, nhấn phải chuột chọn Save Link As ... (Mozilla Firefox) hoặc Save Target As ... (Internet Explorer) tải về máy và lưu file này lên Google Pages để lấy link đưa vào đoạn code dưới.

<script src='LINK_ĐẾN_FILE.JS' type='text/javascript'/>
Hoặc
<script src='LINK_ĐẾN_FILE.JS' type='text/javascript'></script>

Và chèn đoạn mã này vào giữa hay thẻ <body></body> trong Edit HTML (Chỉnh sửa HTML) hoặc nhiều vị trí khác. Nếu chưa hiểu cách dùng tệp tin .js xin xem thêm hướng dẫn.

Bước 2: Đoạn mã trong iframe

Hãy copy hết đoạn mã trong hộp sau vào Notepad (Start -> All Programs -> Accessories -> Notepad) lưu thành tệp tin .html và đưa lên Google Pages để lấy link dùng cho bước kế tiếp.

Trong đó nguồn phát chương trình được tô đậm là kênh bạn chọn trước sẽ được mở đầu tiên khi trang vừa hiển thị. Bạn có thể thay bằng kênh khác tìm bên dưới. Cách lưu thành tệp tin này giống như lưu thành tệp tin .wpl.

<html>
<body>

<OBJECT id=winMediaPlayerID
 codeBase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715
 type=application/x-oleobject height=346
 standby="Loading Microsoft Windows Media Player components..."
 width=385 classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6
 name=winMediaPlayer >     
<PARAM NAME="URL" VALUE="mms://www.vtc.com.vn:556/VTC5_05">
<PARAM NAME="rate" VALUE="1"><PARAM NAME="balance" VALUE="0">
<PARAM NAME="currentPosition" VALUE="0">
<PARAM NAME="defaultFrame" VALUE="0">
<PARAM NAME="playCount" VALUE="1">
<PARAM NAME="CursorType" VALUE="-1">
<PARAM NAME="autoStart" VALUE="1">
<PARAM NAME="currentMarker" VALUE="0">
<PARAM NAME="invokeURLs" VALUE="-1">
<PARAM NAME="volume" VALUE="50">
<PARAM NAME="mute" VALUE="0">
<PARAM NAME="stretchToFit" VALUE="-1">
<PARAM NAME="windowlessVideo" VALUE="0">
<PARAM NAME="enabled" VALUE="1">
<PARAM NAME="fullScreen" VALUE="0">
<PARAM NAME="enableErrorDialogs" VALUE="0">
<embed type="application/x-mplayer2" id="winMediaPlayerID" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src="mms://210.245.126.153/VTV3/"
name=MediaPlayerTV
width="385"
height="346"
AutoSize="1"
AutoStart="1"
ClickToPlay="1"
DisplaySize="1"
EnableContextMenu="1"
EnableFullScreenControls="1"
EnableTracker="1"
Mute="0"
PlayCount="1"
ShowControls="1"
ShowAudioControls="1"
ShowDisplay="0"
ShowGotoBar="0"
ShowPositionControls="1"
ShowStatusBar="1"
ShowTracker="1">
</embed>
</OBJECT>

</body>
</html>

Bước 3: Hiển thị nội dung tệp tin ở bước 2 bằng iframe

Sau khi đã đưa lên lấy link và chúng ta sẽ tạo một iframe (một trang web nằm trong trang web khác) được đặt nằm giữa <div id="MediaPlayer"></div> như sau:
<div id="MediaPlayer">
<iframe marginwidth="0" marginheight="0" src="LIÊN_KẾT_ĐẾN_FILE.HTML_TẠO_Ở_BƯỚC_2" frameborder="0" height="346" scrolling="no" width="385"></iframe></div>
Nếu quan sát mã nguồn blog của tôi bạn sẽ thấy:
<div id="MediaPlayer" align="center">
<iframe marginwidth="0" marginheight="0" src="http://d.v.nhan.googlepages.com/tvovtv3.html" frameborder="0" height="346" scrolling="no" width="385"></iframe></div>

Trong đó kích thước (height và width) có thể thay đổi theo ý thích của mình hoặc giữ lại. Sau đó sử dụng đoạn mã trên chèn vào tiện ích HTML/JavaScript của Blogger hay chèn thẳng vào bài viết hoặc nơi mà bạn muốn kênh truyền hình hiển thị và kèm theo danh sách kênh bên dưới.

Bước 4: Đoạn code chọn kênh

<a href="#" onclick="changeSource('LINK_KÊNH_TRUYỀN_HÌNH_HOẶC_TỆP_TIN_MEDIA')">TÊN_KÊNH</a>

Nếu muốn dùng ảnh thay TÊN_KÊNH. Bạn có thể lấy các ảnh được làm sẵn có trong truyền hình trực tuyến của Thủ Thuật Blog. Vì băng thông của Photobucket trên tài khoản của tôi có hạn nên bạn hãy lưu các hình này vào tài khoản của bạn.

<a href="#" onclick="changeSource('LINK_KÊNH_TRUYỀN_HÌNH_HOẶC_TỆP_TIN_MEDIA')"><img border="0" src="LINK_ĐẾN_ẢNH_KÊNH_TRUYỀN_HÌNH"</a>
Đoạn code này đặt vào nơi thuận tiện để đọc giả của bạn có thể chọn kênh khác dễ dàng.

Danh sách các kênh truyền hình trực tuyến:
  1. Phim trực tuyến Tuổi Trẻ Online: mms://media.tuoitre.com.vn/BroadCast
  2. Tuổi Trẻ Video Online: http://www3.tuoitre.com.vn/media/PlayList.aspx?TVO=-1
  3. Truyền hình Thanh Niên: http://www3.tuoitre.com.vn/media/PlayList.aspx?THTN=-1
  4. TV Info: mms://222.255.31.252/InfoTVChannel
  5. VTV1: mms://210.245.126.153/VTV1/
  6. VTV2: mms://210.245.126.153/VTV2/
  7. VTV3: mms://210.245.126.153/VTV3/
  8. VTV4: mms://210.245.126.153/VTV4/
  9. HTV7: mms://203.210.215.251/HTV7
  10. (Cập nhật 31/12/2007)
  11. HTV9: mms://203.210.215.251/HTV9
  12. (Cập nhật 31/12/2007)
  13. VTC1: rtsp://www.vtc.com.vn:556/VTC1_01
  14. VTC2: rtsp://www.vtc.com.vn:556/VTC2_02
  15. VTC3: rtsp://www.vtc.com.vn:557/VTC3_03
  16. VTC4: rtsp://www.vtc.com.vn:556/VTC4_04
  17. VTC5: rtsp://www.vtc.com.vn:556/VTC5_05
  18. Hà Nội TV: rtsp://203.162.1.181/HTV
  19. Đồng Nai 1: rtsp://www.dongnai.gov.vn/dn1
  20. Đồng Nai 2: rtsp://www.dongnai.gov.vn/dn1
  21. TH Vĩnh Long: mms://210.245.121.111/thvl
  22. VietNamNet TV: rtsp://tv.vietnamnet.vn/live
Các kênh radio trực tuyến:
  1. VOV1: rtsp://210.245.0.62/vov1
  2. VOV2: rtsp://210.245.0.62/vov2
  3. VOV3: rtsp://210.245.0.62/vov3
  4. VOV6: rtsp://210.245.0.62/vov6
  5. VOH FM 99MHz: http://www.voh.com.vn/data/sound/20070313084600FMLSX07h00p110307QC.mp3
  6. Bình Dương: rtsp://203.162.163.37/fm

Ngoài ra, có thể thêm các kênh quốc tế bằng việc "mổ xẻ" trang www.wwitv.com. Nếu rành về PhotoShop chúng ta có thể đưa logo các kênh lên cùng một ảnh và mỗi vùng trên ảnh này có logo tương ứng với mỗi kênh sẽ có một link kết nối đến kênh đó. Cách này rất thuận tiện vì chỉ cần một ảnh cho tất cả các kênh.

Hướng dẫn đến đây là kết thúc. Tuy nhiên nếu bạn muốn có thêm thông báo đang kết nối truyền hình hoặc thông báo truyền hình không phát vào lúc đọc giả xem thì hãy đọc tiếp bước 5.

Bước 5: Thông báo "đang kết nối" và "báo lỗi"

Chỉ cần dùng đoạn code sau lưu lại thành file .asx và đưa lên Google Pages. Thay vì đặt link trực tiếp, mỗi kênh bạn tạo một tệp tin .asx riêng và kèm theo hình ảnh thông báo đang kết nối cũng như báo lỗi.

Hãy thử xem truyền hình trên Thủ Thuật Blog bạn sẽ thấy nó xuất hiện như thế nào. Sẽ có thông báo kết nối khi chọn kênh mới hay báo lỗi nếu kênh đó không phát hoặc link nguồn sai.

<ASX version = "3.0">
<entry clientskip="no" skipifref="no">
<REF HREF="LINK_HÌNH_BÁO_ĐANG_KẾT_NỐI"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/>

</entry>
<entry clientskip="no" skipifref="no">
<Ref href = "LINK_KÊNH_TRUYỀN_HÌNH"/>
</entry>
<entry clientskip="no" skipifref="no"><REF HREF="LINK_HÌNH_BÁO_LỖI"/><DURATION VALUE="10:00:03.00"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/></entry></ASX>

Ví dụ
<ASX version = "3.0">
<entry clientskip="no" skipifref="no">
<REF HREF="http://i240.photobucket.com/albums/ff259/thuthuatblog/posts/ttb_tvol_logo.gif"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/>

</entry>
<entry clientskip="no" skipifref="no">
<Ref href = "mms://210.245.0.62/vov1"/>
</entry>
<entry clientskip="no" skipifref="no"><REF HREF="http://i240.photobucket.com/albums/ff259/thuthuatblog/posts/ttb_tvol_error.gif"/><DURATION VALUE="10:00:03.00"/><PARAM NAME="ShowWhileBuffering" VALUE="true"/></entry></ASX>

Bạn có thể làm các hình này bằng cách tham khảo các hình Thủ Thuật Blog đã làm: đang kết nối, báo lỗi.

Hãy để lại comments phía dưới bài viết giúp mọi người tham khảo cách làm của bạn nhé!

Xem các kênh truyền hình trực tuyến và nghe radio online

Ngay nay với tốc độ kết nối Internet băng thông rộng, nhiều hãng truyền hình lớn đã phát trực tuyến. Bạn có thể "rinh" chương trình truyền hình về blog của mình để xem.

Dưới đây là hướng dẫn bạn làm việc với VTV (Đài truyền hình Việt Nam).

Qua các bài trước bạn đã làm quen với cách đăng một video. Bây giờ hãy sử dụng lại đoạn mã này.

<embed showdisplay="0" showstatusbar="1" showcontrols="1" autostart="1" type="application/x-mplayer2" src="LIÊN KẾT ĐẾN CÁC KÊNH" space="0" align="middle" height="350" width="350"></embed>


Bạn cần biết LIÊN KẾT ĐẾN CÁC KÊNH trên VTV và thay dòng chữ đó bằng các liên kết bên dưới.

VTV1: mms://210.245.126.153/VTV1/

VTV2: mms://210.245.126.153/VTV2/

VTV3: mms://210.245.126.153/VTV3/

VTV4: mms://210.245.126.153/VTV4/

Lưu ý bạn nên để autostart="1" để chương trình truyền hình tự động phát khi hiển thị blog. Tôi đã đã kiểm tra autostart="0" thì truyền hình không chịu "hát".

Tương tự như vậy bạn có thể đưa các chương trình của đài tiếng nói Việt Nam lên blog

VOV1: mms://210.245.0.62/vov1

VOV2: mms://210.245.0.62/vov2

VOV6: mms://210.245.0.62/vov2

Nhớ thay đổi width và height cho phù hợp. Chúc bạn thành công!

Hướng dẫn chèn đoạn mã JavaScript vào Blogger

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 đỡ.

Hình nền cho blog

Nhiều bạn hỏi tôi chèn hình nền như thế nào? Cách dưới đây tôi hướng dẫn bạn chèn hình nền vào blog. Trước tiên bạn phải có hình nền sẳn. Nếu bạn là dân chuyên về đồ họa, có thể design cho mình một cái tùy thích. Thông thường bạn có thể chọn hình nền có kích thước nhỏ lặp lại hay một hình đầy đủ toàn màn hình. Theo thống kê, kích thước màn hình 1024x728 được dùng nhiều nhất. Bạn có thể download gói wallpaper 3D chứa nhều ảnh rất đẹp với kích thước này, sau đó đưa GooglePages hay các trang chia sẻ ảnh để lấy liên kết.


NỀN MÀU

Bạn có thể đổi màu nền cho blog bằng cách vào Template | Fonts and Color. Trong khung nhỏ phía bên trái, bạn chọn Page Background Color và chọn màu mình muốn.

Bạn có thể sửa lại màu nền trong đây nếu bạn biết mã màu.
background-color:#E31122;


HÌNH NỀN CHO HEADER
(Xem chi tiết).

HÌNH NỀN CHO SIDEBAR

Để chèn hình nền cho sidebar bạn vào Template | Edit HTML, kéo thanh trượt xuống phía dưới tìm cho được đoạn mã và chèn bên như bên dưới:

#sidebar-wrapper {
 background-image: url(LIÊN KẾT ĐẾN HÌNH ẢNH);


Trong đó LIÊN KẾT ĐẾN HÌNH ẢNH phải là liên kết đến hình ảnh. Có dạng như: http://www.vidu.com/hinh.jpg

Click SAVE CHANGES để lưu lại. Nếu blog bạn có nhiều sidebar-wrapper, bạn cũng làm tương tự.

HÌNH NỀN CHO MAIN


Tương tự như vậy bạn có thể chèn hình nền cho main-wrapper phía dưới dòng.
#main-wrapper {


HÌNH NỀN CHO TOÀN BỘ TRANG

Tương tự nhưng bạn chèn phía dưới.
body {


HÌNH ẢNH LẶP


Theo mặc định, hình nền của bạn sẽ bị lặp lại tùy thuộc vào kích cở hình cũng như cách bố trí trang và ký tự có trên blog của bạn. Nếu hình ảnh bạn dùng có kích thước nhỏ, cần lặp lại để phủ đầy trang thì quả là tuyệt. Còn ảnh kích thước lớn, không muốn lặp lại thì sao? Bạn chỉ việc thêm đoạn mã này phía dưới dòng liên kết đến ảnh.
background-repeat: no-repeat;


VỊ TRÍ HÌNH NỀN

Nếu bạn cần điều chỉnh vị trí hình nền hãy sử dụng đoạn mã này bên dưới các đoạn mã trên.

background-position: Y X;

Hãy tưởng tượng hệ tọa độ OXY, trong đó:

Y: trục tung, canh dọc.
X: trục hoành, canh ngang.

Giá trị của nó là:

Y: top, center, bottom (đầu, giữa, cuối)
X: left, center, right (trái, giữa, phải)


Ví dụ:

Bạn muốn hình nền nằm phía dưới, góc trái: background-position: bottom left;
Bạn muốn hình nền canh giữa trên: background-position: center center;

CỐ ĐỊNH HÌNH NỀN

Để cố định hình nền bạn đặt dòng sau phía dưới đoạn mã liên kết đến ảnh.

background-attachment: fixed;