Tập hợp mã nguồn HTML Javascript cơ bản cho Blogger

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: 
++ 
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. 
 <!-- // 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); 
// --> 
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 
<font 
size="2">Thời tiết một số địa phương ở nước ta 
 Nhiệt độ - Thời Gian - Độ ẩm 
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt" 
 S-Format="TEXT/CSV" S-Label-Fields="TRUE" --> 
Hà Nội 
 <img alt="Thời tiết một số vùng 
ở nước ta" width="127" 
src="
bal/stations/48820.gif" height="41"/> 
Tp Hồ Chí Minh 
<img alt="Thời tiết Tp Hồ Chí Minh" 
width="127" 
src="
bal/stations/48900.gif" height="41"/> 
Huế 
<img alt="Thời tiết Huế" width="127" 
src="
bal/stations/48852.gif" height="41"/> 
Cà Mau 
<img alt="Thời tiết Cà Mau" width="127" 
src="
bal/stations/48914.gif" height="41"/> 
Nha Trang 
<img alt="Thời tiết Nha Trang" width="127" 
src="
bal/stations/48877.gif" height="41"/> 
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: 
Huế 
<img alt="Thời tiết Huế" width="127" 
src="
bal/stations/48852.gif" height="41"/>
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. 
HỖ TRỢ DẠY & HỌC <hr 
width=180 align="" 
<img border="1" src=""width="180" 
height="55"> <a target="_blank" 
href=""><img border="1" 
src=""width="180" 
height="55"> <a target="_blank" 
href=""><img border="1" 
src=""width="180" 
height="55"><a target="_blank" 
href=""> <img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""> <img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""><img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""><img 
border="1" src="" width="180" 
height="55"> <a target="_blank" 
href=""> <img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""> <img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""> <img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""> <img border="1" 
src="" width="180" 
height="55"> <a target="_blank" 
href=""> <embed border="1" 
src="" quality="high" wmode="transparent" 
type="application/x-shockwave-flash" width="180" height="60"> 
 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: 
 <a target="_blank" 
 href=""> <img border="1" 
 src="" width="180" 
 height="55"> 
 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à: 
 <a target="_blank" 
 href=""> <embed border="1" 
 src=""quality="high" wmode="transparent" 
 type="application/x-shockwave-flash" width="180" height="60"> 
 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: 
 <script language="JavaScript" src="" 
 type="text/javascript"> 
 showVietCal(); 
 <script 
 language="JavaScript">document.writeln(printSelectedMonth());</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"> 
 Website Liên Kết 
 --- TIN TỨC ONLINE --- 
 Vn Express 
 Báo Tuổi Trẻ 
 --- CNTT Việt nam ---- 
 Quản trị mạng 
 Diễn đàn Tin Học 
 ---Bộ máy tìm kiếm--- 
 Vina Seek 
 Google 
 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. 
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; 
} 
<form action="" 
style="margin:0px;" target="_blank" name="dictionary" onsubmit="return 
doSearch(this);" method="post"> 
 Dictionary: 
English - Vietnamese 
Vietnamese - English 
 Enter word: 
© <a 
href="" target="_blank">Cftanhiep Groups 
2009 
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: 
<form id="searchthis" action="" 
style="display:inline;" method="get"> 
Search this site 
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"> 
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"> 
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"> 
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"> 
2. Có thể thay đổi kích thước : 
<script 
src="
0"> 
3. Thêm các thông tin về tour du lịch : 
<script 
 src="
 0"&tour=3> 
 4. Thay đổi khoảng thời gian giữa hai bức ảnh : 
 <script 
 src="
 0"&speed=2000> 
 o Hiển thị xem hình 13. 
 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.