code từ điển online

Trong loạt bài viết “Những thủ thuật hay cho các Blogger” ở phần 1 này tôi sẽ chia sẽ với các bạn những đoạn mã nguồn HTML/JavaScript chọn lọc; mà nếu làm chủ tốt “nó” Blog của bạn sẽ vô

T p h p mã ngu n Html/JavaScript c b n cho Blogger ậ ợ ồ ơ ả

HTML/JavaScript là một đối tượng vô cùng quan trọng.

Trong loạt bài viết “Những thủ thuật hay cho các Blogger” ở phần 1 này tôi sẽ chia sẽ với các bạn những đoạn mã nguồn HTML/JavaScript chọn lọc; mà nếu làm chủ tốt “nó” Blog của bạn sẽ vô cùng hiện đại và chuyên nghiệp Bài viết được minh họa trên dịch vụ Blogspot của Google, các dịch vụ Blog khác cũng được tiến hành tương tự.

1 Cách nhúng HTML trên BlogSpot:

o Hiện nay hầu hết tất cả các dịch vụ tạo Blog như BlogSpot, MSN, YahooPlus, Violet… đều hỗ trợ người quản trị cho phép nhúng vào các đối tượng HTML/JavaScipt để thực hiện các tùy biến cao cấp trên Blog.

o Đăng ký tài khoản và tiến hành các bước thiết kế cơ bản cho Blog tại địa chỉ http://www.blogger.com (bạn có thể đăng

nhập bằng tài khoản Gmail sẵn có ở đây) Đăng nhập vào quyền quản trị tài khoản > Chọn Layout > Page Elements: trên bố cục của Blog nhấp nút Add a page elements (hay Add a Gadget) ở cột bên phải để bắt đầu lựa chọn đưa vào các đối tượng nhúng (lưu ý: mặc định bố cục của BlogSpot có 2 nút Add a Gadget cho phép thêm đối tượng vào cột bên trái và phần Footer bên dưới; thông thường đối tượng nhúng sẽ ưu tiên vào cột trái).

o Trong cửa sổ Add a Gadget nhấp chọn nút HTML/JavaScript để nhúng vào mã nguồn, xem hình 1.

o Trên hộp thoại Configure HTML/JavaScript kế tiếp: đặt tên cho đối tượng vào khung Title và mã nguồn vào khung

Content, xem hình 2.

o Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau này nếu muốn bỏ đi đối tượng đã nhúng nhấp chọn nút

Remove)

2 Nhúng một hộp văn bản cuộn vào Blog:

o Thường vị trí của đoạn văn bản cuộn này nên đặt ở vùng Header hay Footer trên giao diện Blog.

o Nhúng đoạn mã nguồn sau vào chức năng Configure HTML/JavaScript của Blog:

<marquee style="color: #FF00FF; font-weight: bold" bgcolor="#F2FBFF"; direction= “left”>++ Ch o à

m ng các b n ghé th m Blog c a tôi ++ Mong các b n góp ý ừ ạ ă ủ ạ để Blog ng y c ng phát tri n ++ à à ể

o Trong đó: Color (màu chữ), Bgcolor (màu nền hộp văn bản), direction (chiều di chuyển), đối với giá trị các màu sắc

nếu không nắm được mã nhị phân tương ứng bạn có thể điền tên màu bằng tiếng anh

3 Nhúng ngày tháng năm bằng tiếng việt:

o Đoạn mã HTML sau sẽ hiển thị nội dung ngày tháng năm bằng tiếng việt trên Blog

<script language="" type="text/javascript">

<! // Array ofmonth Names

<! var monthNames = new Array("một","hai","ba","bốn","năm","sáu","bảy","tám","chín","mười","mười một","mười hai"); >

var monthNames = new Array("01","02","03","04","05","06","07","08","09","10","11","12");

var dayNames = new Array("Chủ nhật,","Thứ Hai,","Thứ Ba,","Thứ tư,","Thứ Năm,","Thứ Sáu,","Thứ Bảy,")

var now = new Date();

thisYear = now.getYear();

thisDay = dayNames[now.getDay()];

if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem

document.write("Hôm nay : " + thisDay +" "+"ngày"+" "+ now.getDate() + " tháng " + monthNames[now.getMonth()] + " năm " + thisYear);

// >

</script>

o Dùng chức năng nhúng HTML/JavaScript để tùy biến ở vị trí Header hay bên phải giao diện Blog, xem hình 3.

4 Nhúng bảng dự báo thời tiết vào Blog:

o Đoạn mã HTML sau cho phép nhúng vào dự báo thời tiết của 5 thành phố lớn (Hà Nội, TP Hồ Chí Minh, Huế, Cà Mau, Nha Trang) trên cả nước theo 3 tiêu chuần quốc tế: nhiệt độ, thời gian và ẩm độ theo nguồn của trang web dự báo

thời tiết nổi tiếng quốc tế http://banners.wunderground.com/, xem hình 4.

Hình 4

<p align="center"> Thời tiết một số địa phương ở nước ta </b>

<p align="center"> Nhiệt độ - Thời Gian - Độ ẩm </p>

<hr color="#d49f9f" width="95%" size="1"/>

<form action=" WEBBOT-SELF " method="POST">

<! webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"

S-Format="TEXT/CSV" S-Label-Fields="TRUE" >

5 Chèn quảng cáo cố định ở hai bên giao diện Blog:

o Với đoạn mã này bạn có thể chèn vào các LOGO quảng cáo cho các đối tượng khác nhau ở hai bên cố định của giao diện Blog bằng cách sử dụng liên kết LINK

<div> H TR D Y & H C Ỗ Ợ Ạ Ọ </font>

="http://d.violet.vn/uploads/photo/961562.jpg " width="180" height="55"></a>

href="http://www.google.com.vn/"><img border="1"

src=" http://www.google.com.vn/intl/en_com/images/logo_plain.png "width="180"

height="55"></a>

href="http://vn.yahoo.com/"><img border="1"

src=" http://l.yimg.com/hb/i/vn/mastheads/logo_vn.png "width="180" height="55"></a>

href="http://translate.google.com.vn/"> <img border="1"

src=" http://www.google.com.vn/intl/vi/images/translate_beta_res.gif" width="180"

height="55"></a>

href="http://vdict.com/?autotranslation/"> <img border="1"

src=" http://vdict.com/templates/user/images/logo.gif" width="180" height="55"></a>

href="http://www.srem.com.vn"><img border="1"

src=" http://quangtri.edu.vn/image/SREM_BL_d.gif " width="180" height="55"></a>

href="http://www3.tuoitre.com.vn/TuyenSinh/Index.aspx?TopicID=210"><img border="1" src=" http://quangcao.tuoitre.com.vn/service/ts2009.gif " width="180" height="55"></a>

href="http://www.gdtd.com.vn/"> <img border="1"

src=" http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a>

href="http://www.catlinhschool.edu.vn/"> <img border="1"

src=" http://tieuhocdanghai.com/Images/banners/catlinh.gif" width="180" height="55"></a>

href="http://tieuhocdanghai.com/"> <img border="1"

src=" http://www.catlinhschool.edu.vn/Data/Images/Adv/logo.gif " width="180"

height="55"></a>

href="http://toantuoitho.nxbgd.com.vn/"> <img border="1"

src ="http://tieuhocdanghai.com/Images/banners/cs.jpg " width="180" height="55"></a> href="http://violympic.vn"> <embed border="1"

src=" http://violympic.vn/images/violympic.swf" quality="high" wmode="transparent"

type="application/x-shockwave-flash" width="180" height="60"></embed>

o Chú ý: Các link liên k t t i hình nh t ế ớ ả ươ ng ng ph i có th c (t t nh t b n nên t Upload c ứ ả ự ố ấ ạ ự ố

nh lên Host hay tr c ti p trên Blog), không nên liên k t t i LOGO c a trang khác vì r t d x y ra

tình tr ng ch t LINK Nh ng o n ạ ế ữ đ ạ Code m u xanh à l liên k t t i các hình nh à ế ớ ả đạ i di n cho ệ đố i

t ượ ng m b n mu n nhúng v o Blog, v i o n Code n y b n có th tùy bi n thêm v o hay xóa i à ạ ố à ớ đ ạ à ạ ể ế à đ các đố ượ i t ng m t cách tho i mái, xem hình 5 ộ ả

Hình 5

o Ví dụ: Đối tượng báo giáo dục thời đại trong đoạn Code trên gồm các lệnh:

<div>

href="http://www.gdtd.com.vn/"> <img border="1"

src= "http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a>

o Trong đoạn Code trên đối tượng VIOLYMPIC có Logo nhúng vào là một File Flash SWF, khi đó ta phải thay đổi mã

lệnh nhúng lại cho phù hợp là:

href="http://violympic.vn"> <embed border="1"

src=" http://violympic.vn/images/violympic.swf "quality="high" wmode="transparent"

type="application/x-shockwave-flash" width="180" height="60"></embed>

6 Lịch âm dương trên Blog:

o Là người việt nam chắc chắn Blog của bạn sẽ chuyên nghiệp và mang cá tính hơn với một cuốn lịch âm dương hiển thị để khách viếng thăm tiện việc tra cứu, xem hình 6

<script language="JavaScript">showVietCal();

<script language="JavaScript">document.writeln(printSelectedMonth());

7 T o ComboBox trên Blog: ạ

o Việc nhúng một ComboBox để liên kết nhanh tới các đối tượng khác nhau sẽ giúp bạn tiết kiệm được thời gian thiết kế

và không gian hiển thị trên giao diện Blog, xem hình 7

Hình 7

o Mã nguồn:

<SELECT onchange="if (this.value != '#') window.open(this.value, '_blank');"

style="font-family: Arial; font-size: 8pt; height: 23; width: 123">

<OPTION selected value=#>Website Liên Kết

<OPTION value=#> TIN TỨC ONLINE

-<OPTION value=http://www.vnexpress.net>Vn Express

<OPTION value=http://www.tuoitre.com.vn>Báo Tuổi Trẻ

<OPTION value=#> - CNTT Việt nam

<OPTION value=http://www.quantrimang.com>Quản trị mạng

<OPTION value=http://www.diendantinhoc.com>Diễn đàn Tin Học

<OPTION value=#> -Bộ máy tìm

kiếm -<OPTION value=http://www.vinaseek.com>Vina Seek

<OPTION value=http://www.google.com.vn>Google

</SELECT>

o Với đoạn Code này bạn cũng có thể Edit lại một cách thật dễ dàng.

8 Nhúng từ điển Anh - Việt vào Blog:

o Với đoạn mã nguồn sau Blog của bạn sẽ được trang bị một quyển từ điển ANH - Việt hết sức chuyên nghiệp

<div style="padding-bottom:6px"> Dictionary:

<select style="font-size: 11px; width: 130px;" name="dict">

<option selected="true" value="ev"/>English - Vietnamese

<option value="ve"/>Vietnamese - English

</select>

<div> Enter word:

<input style="font-size: 11px; width: 87px;" name="word" type="text"/>

<input style="font-size: 11px;" value="Go" name="go" type="submit"/>

</div>

<span style="font-size:90%; font-weight: bold;">© target="_blank">Cftanhiep Groups 2009</a>

o Từ điển Anh Việt hiển thị trên Blog, xem hình 8

Hình 8

9 Tự tạo hộp tìm kiếm thông tin trên Blog:

o Mặc dù bạn có thể dễ dàng thêm vào Blog Gadget tìm kiếm của Google, tuy nhiên nếu tự tay thiết kế được một công

cụ riêng về tìm kiếm thì điều đó sẽ thú vị hơn nhiều, xem hình 9

<strong>Search this site

<input id="b-query" maxlength="255" name="q" size="30" type="text"/>

<input id="b-searchbtn" value="Search" type="submit"/>

</form>

10 Nhúng b ng t giá v ng v o Blog: ả ỷ à à

o Mã nguồn:

<iframe src=" http://www.vietstock.com.vn/Transweb/giavang.htm " width="180" height="150"

scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>

o Hiển thị xem hình 10

12 Nhúng lịch xem truyền hình Việt Nam vào Blog:

13 Nhúng cảnh đẹp Việt Nam vào Blog:

o Hãy để cho khách viếng thăm cùng đi một tour du lịch Việt Nam cùng với Blog của bạn bằng mã nguồn sau

1 Nhúng theo m c nh : ặ đị

<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript" type="text/javascript">

2 Có thể thay đổi kích thước :

<script src="http://www.skydoor.net/gadget/vietnamtravel/random?

format=javascript&width=300"&speed=2000>

o Hiển thị xem hình 13

14 Tổng kết: Kết thúc phần 1 với 14 đoạn Code khác nhau dựa trên nền tảng nhúng HTML/JavaScript Blog của bạn

đã trở nên đặc sắc và chuyên nghiệp hơn hẳn, hẹn gặp lại ở các các phần tiếp theo của loạt bài

Bài viết được tổng hợp từ nhiều nguồn thông tin Online (và kinh nghiệm phân tích của cá nhân) như

http://thuthuatblogs.blogspot.com/, http://www.thuthuatblog.com/, http://www.quantrimang.com/, http://mangvn.org/, http://manguon.com/, http://www.vietstock.com.vn/, http://www.skydoor.net/, http://bongda.com.vn/ Xem hiển thị chi tiết các đoạn Code đã test tại http://trandaiminhtri.blogspot.com/, mọi thắc mắc xin gởi về

hợp chuẩn hiển thị trên máy của người sử dụng Lúc này người dùng có thể tìm thấy những thông tin mới nhất thông qua những tiêu đề, đường link tóm tắt để xem toàn bộ nội dung tin một cách thuận tiện.

o Hầu hết các trang Web theo kiểu tin tức - thời sự Online hiện nay đều hỗ trợ chế độ RSS này, và đặc biệt hơn đây

cũng là một trong những chuẩn Gadget nhúng mà các BLOG đều hỗ trợ.

* Thao tác nhúng RSS vào Blog:

o Mở trang Web có hỗ trợ chuẩn RSS, ví dụ http://vnexpress.net

o Tìm và nhấp chọn nút công cụ RSS, trong bảng liệt kê các kênh chuẩn RSS của trang web bạn lựa chọn một kênh để

nhúng vào Blog của mình, ví dụ ở đây tôi chọn kênh giải trí truyện Cười của Vnexpress có địa chỉ cụ thể là

http://vnexpress.net/rss/gl/cuoi.rss, xem hình 1.

Hình 1

o Đăng nhập vào quyền quản trị trên Blog, chọn chức năng nhúng RSS tương ứng Chức năng này có thể hơi khác nhau trên các dịch vụ Blog, ở đây tôi minh họa trên BlogSpot nên chọn công cụ tương ứng là Feed, xem hình 2.

Hình 2

o Trong hộp thoại Configure Feed nhập vào đường link RSS đã sao chép được trên VNExpress, xem hình 3.

Hình 3

o Nhấp nút Continue và chờ đợi giây lát để Blog cập nhập dữ liệu từ máy chủ Vnexpress, xem hình 4.

Hình 4

o Nhấp Save để kết thúc quá trình nhúng RSS vào Blog (tương tự như vậy bạn hãy tiến hành thao tác nhúng kênh RSS

từ các trang web tin tức khác như: thanhnien.com.vn, tuoitre.com.vn, nhacso.net…)

2 Cách chèn flash, mp3, video vào blog:

o Về cơ bản thì các dịch vụ BLOG đề có những công cụ chuyên biệt riêng hỗ trợ nhúng multemedia vào máy – tuy nhiên

khá gò bó về mặt bố cục, thủ thuật này đề cập tới việc sử dụng mã nguồn để Admin Blog có thể tùy biến linh động hơn

cho công việc thú vị này.

1 Chèn flash :

<embed quality="high" menu="true"

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?

P1_Prod_Version=ShockwaveFlash" src="link của file flash " type="application/x-shockwave-flash"

width="500" height="273" loop="true">

Trong đó hãy thay thế link của file flash bằng link của flash mà các bạn muốn hiển thị Nếu muỗn flash load nhanh hơn thì file này nên được up trên host của các bạn Ví dụ với BlogSpot chúng ta hãy up lên chính trang riêng của

T ươ ng t nh trên, thay URL b ng link c a video ự ư ằ ủ

Hãy để ý phần src="URL" có ở cả 2 đoạn code trên Nó là phần quan trọng nhất Hãy thay thế chữ URL bằng đường link đến file nhạc bạn upload lên blog của bạn Muốn để chế độ tự chạy thì để autostart='1', còn không thì để autostart='0'

Đối với nhạc audio link phải tận cùng là dạng wma hoặc mp3 còn với nhạc hình thì tận cùng là wmv

Ví dụ code để chèn flash vào blog như sau :

<embed quality="high" menu="true"

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?

P1_Prod_Version=ShockwaveFlash" src="http://d.violet.vn/uploads/resources/511/0.doi_am.swf"

type="application/x-shockwave-flash" width="500" height="273" loop="true">

Hãy nhúng o n code n y v o blog đ ạ à à để xem k t qu ế ả

3 Nhúng link nhạc từ các websites nhạc online vào Blog:

o Khi thưởng thức một bài nhạc trên các Music Online hiện nay, nếu để ý ta sẽ thấy luôn luôn có những đoạn Code ngay bên dưới cho phép nhúng bài nhạc trực tuyến này vào Blog, web, hay Forum riêng của mình Với phương pháp này chỉ

cần tận dụng Gadget HTML/JavaScript như phần 1 đã giới thiệu ta có thể thực hiện nhúng dễ dàng, xem hình 5