Lịch âm dương, liên kết, tỷ giá và ...còn nữa!

CODE HAYTạo Blog là một trong những trào lưu IT được giới trẻ
“yêu chuộng” nhất hiện nay, tạo Blog không quá khó tuy nhiên
để có được một Blog thật hay và Pro thì đòi hỏi bạn phải biết
nhiều thứ trong đó tùy biến mã nguồn nhúng 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ỉ (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.
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.

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 ++</marquee>
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.
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ế
xem hình 4.
Hình 4
<p align="center"><img border="0" width="24" src="thoitiet.gif" height="20"/><font size="2"><b>Thời tiết một
số địa phương ở nước ta </b></font></p>
<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" >
<p align="center"><font size="2"><b>Hà Nội</b></font></p>
<p align="center">&nbsp;<img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127"
src=" />" height="41"/></p>
<p align="center"><font size="2"><b>Tp Hồ Chí Minh </b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127"
src=" />" height="41"/></p>

<p align="center"><font size="2"><b>Huế</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127"
src=" />" height="41"/></p>
<p align="center"><font size="2"><b>Cà Mau</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127"
src=" />" height="41"/></p>
<p align="center"><font size="2"><b>Nha Trang</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127"
src=" />" height="41"/></p>
o Nếu muốn bỏ đi phần dự báo của Huế thì bạn tìm và xóa đoạn mã
tương ứng:
<p align="center"><font size="2"><b>Huế</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127"
src=" />" height="41"/></p>
o Lưu ý: tại trang chủ mỗi
một thành phố hay tỉnh của Việt nam có một mã số ảnh riêng, bạn có
thể tham khảo ở đây để chèn vào cho phù hợp với đối tượng mà mình
muốn hiển thị (Ví dụ: Huế có mã ảnh tỉnh là 48852.gif)
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><font color="#FF0000"size="3">HỖ TRỢ DẠY & HỌC</font></div>
<div><hr width=180 align=""</a></div><div><a target="_blank"
href=" <img border="1"
src="
height="55"></a></div> <div><a target="_blank"
href=" border="1"
src=" />" height="55"></a></div> <div><a target="_blank"
href=" border="1"

src="
height="55"></a></div><div><a target="_blank"
href=" <img border="1"
src="
width="180" height="55"></a></div> <div><a target="_blank"
href=" <img border="1"
src=" width="180"
height="55"></a></div> <div><a target="_blank"
href=""><img border="1"
src=" width="180"
height="55"></a></div> <div><a target="_blank"
href="
border="1" src=" width="180"
height="55"></a></div> <div><a target="_blank"
href=" <img border="1"
src=" width="180"
height="55"></a></div> <div><a target="_blank"
href=" <img border="1"
src=" width="180"
height="55"></a></div> <div><a target="_blank"
href=" <img border="1"
src=" width="180"
height="55"></a></div> <div><a target="_blank"
href=" <img border="1"
src=" width="180"
height="55"></a></div> <div><a target="_blank"
href=""> <embed border="1"
src=" quality="high"
wmode="transparent" type="application/x-shockwave-flash" width="180"
height="60"></embed> </object></a> </div>

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><a target="_blank"
href=" <img border="1"
src="
width="180" height="55"></a></div>
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à:
<div><a target="_blank"
href=""> <embed border="1"
src=" />" wmode="transparent" type="application/x-shockwave-flash"
width="180" height="60"></embed> </object></a> </div>
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.
Hình 6
o Mã nguồn nhúng vào Blog:
<div class="content">
<center><a name="amlich"></a>
<script language="JavaScript" src="

type="text/javascript"></script>
<script language="JavaScript">showVietCal();</script>
<script
language="JavaScript">document.writeln(printSelectedMonth());</script></center></div>
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>
<OPTION value=#> TIN TỨC ONLINE </OPTION>
<OPTION value=>Vn
Express</OPTION>
<OPTION value=>Báo Tuổi
Trẻ</OPTION>
<OPTION value=#> CNTT Việt nam </OPTION>
<OPTION value=>Quản trị
mạng</OPTION>
<OPTION value=>Diễn đàn Tin
Học</OPTION>
<OPTION value=#> Bộ máy tìm kiếm </OPTION>
<OPTION value=>Vina
Seek</OPTION>
<OPTION
value=>Google</OPTION>
</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.
<script
src=" />>
<script language="javascript">
function doSearch(obj){
window.open(" +
obj.dict.value + "&word=" + obj.word.value, "quickview",
"status=0,toolbar=0,scrollbars=1,width=500,height=400,location=0");
return false;
}
</script>
<form action="
style="margin:0px;" target="_blank" name="dictionary" onsubmit="return
doSearch(this);" method="post">
<div style="padding-bottom:6px"> Dictionary: <br/>
<select style="font-size: 11px; width: 130px;" name="dict">
<option selected="true" value="ev"/>English - Vietnamese
<option value="ve"/>Vietnamese - English
</select></div>
<div> Enter word:<br/>
<input style="font-size: 11px; width: 87px;" name="word" type="text"/>
<input style="font-size: 11px;" value="Go" name="go" type="submit"/>
</div> </form>
<span style="font-size:90%; font-weight: bold;">© <a
href=" target="_blank">Cftanhiep Groups
2009</a></span></p>
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.
Hình 9
o Mã nguồn:
<p align="left">
<form id="searchthis" action=" />style="display:inline;" method="get">
<strong>Search this site<br/></strong>
<input id="b-query" maxlength="255" name="q" size="30" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>
10. Nhúng bảng tỷ giá vàng vào Blog:
o Mã nguồn:
<iframe src="
width="180" height="150" scrolling="yes" frameborder="0"
marginheight="0" marginwidth="0"></iframe>
o Hiển thị xem hình 10.
Hình 10
11. Nhúng bảng tỷ giá ngoại tệ cho Blog:
o Mã nguồn:
<iframe src="
width="180" height="240" scrolling="yes" frameborder="0"
marginheight="0" marginwidth="0"></iframe>
o Hiển thị xem hình 11.
Hình 11
12. Nhúng lịch xem truyền hình Việt Nam vào Blog:
o Mã nguồn:
<iframe scrolling="yes" frameborder="1" width="240"

src="
height="300"></iframe>
o Hiển thị xem hình 12.
Hình 12
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="
type="text/javascript"></script>
2. Có thể thay đổi kích thước :
<script src=" />3. Thêm các thông tin về tour du lịch :
<script src=" />format=javascript&width=300"&tour=3></script>
4. Thay đổi khoảng thời gian giữa hai bức ảnh :
<script src=" />format=javascript&width=300"&speed=2000></script>
o Hiển thị xem hình 13.
Hình 13
( Người sưu tầm PHAN VĂN SƠN )