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ác[r]
(1)1 Cách nhúng HTML BlogSpot:
o Hiện hầu hết tất dịch vụ tạo Blog BlogSpot, MSN, YahooPlus,
Violet… hỗ trợ người quản trị cho phép nhúng vào đối tượng HTML/JavaScipt
để thực tùy biến cao cấp Blog
o Đăng ký tài khoản tiến hành bước thiết kế cho Blog địa http://www.blogger.com (bạn đăng nhập 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: bố cục 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 đối tượng nhúng (lưu ý: mặc định bố cục BlogSpot có nút
Add a Gadget cho phép thêm đối tượng vào cột bên trái phần Footer bên dưới; thông thường đối tượng nhúng ư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
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
(2)Hình 2
o Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau muốn bỏ đối tượng nhúng nhấp chọn nút Remove)
2 Nhúng hộp văn cuộn vào Blog:
o Thường vị trí đoạn văn cuộn nên đặt vùng Header hay Footer giao diện Blog
o Nhúng đoạn mã nguồn sau vào chức Configure HTML/JavaScript Blog: <marquee style=”color: #FF00FF; font-weight: bold” bgcolor=”#F2FBFF”; direction= “left”>++ Chào mừng bạn ghé thăm Blog ++ Mong bạn góp ý để Blog ngày phát triển ++</marquee>
o Trong đó:Color (màu chữ), Bgcolor (màu hộp văn bản), direction (chiều di chuyển), giá trị màu sắc không nắm mã nhị phân tương ứng bạn điền tên màu tiếng anh
3 Nhúng ngày tháng năm tiếng việt:
(3)<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 : ” + thisDay +” “+”ngày”+” “+ now.getDate() + ” tháng ” + monthNames[now.getMonth()] + ” năm ” + thisYear);
// –> </script>
(4)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 thành phố lớn (Hà Nội, TP Hồ Chí Minh, Huế, Cà Mau, Nha Trang) nước theo tiêu chuần quốc tế: nhiệt độ, thời gian ẩm độ theo nguồn trang web dự báo thời tiết tiếng quốc tế
(5)Hình 4
<p align=”center”><img border=”0″ width=”24″ src=”thoitiet.gif” height=”20″/><font size=”2″><b>Thời tiế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”> <img alt=”Thời tiết một số vùng ở nước ta” width=”127″
(6)<p align=”center”><font size=”2″><b>Tp Hồ Chí Minh </b></font></p>
<p align=”center”><img alt=”Thời tiết Tp Hồ Chí Minh” width=”127″
src=”http://banners.wunderground.com/banner/gizmotimetemp_both/language/engl ish/global/stations/48900.gif” height=”41″/></p>
<p align=”center”><font size=”2″><b>Huế</b></font></p>
<p align=”center”><img alt=”Thời tiết Huế” width=”127″ src=”http://banners.wunderground.com/banner/gizmotimetemp_both/language/engl ish/global/stations/48852.gif” height=”41″/></p>
<p align=”center”><font size=”2″><b>Cà Mau</b></font></p>
<p align=”center”><img alt=”Thời tiết Cà Mau” width=”127″ src=”http://banners.wunderground.com/banner/gizmotimetemp_both/language/engl ish/global/stations/48914.gif” height=”41″/></p>
<p align=”center”><font size=”2″><b>Nha Trang</b></font></p>
<p align=”center”><img alt=”Thời tiết Nha Trang” width=”127″ src=”http://banners.wunderground.com/banner/gizmotimetemp_both/language/engl ish/global/stations/48877.gif” height=”41″/></p>
</form>
o Nếu muốn bỏ phần dự báo Huế thì bạn tìm xóa đoạn mã tương ứng: <p align=”center”><font size=”2″><b>Huế</b></font></p>
<p align=”center”><img alt=”Thời tiết Huế” width=”127″
src=”http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48852.gif” height=”41″/></p>
o Lưu ý: tại trang chủ http://banners.wunderground.com/ thành phố hay tỉnh Việt nam có mã số ảnh riêng, bạn tham khảo để chèn vào cho phù hợp với đối tượng mà muốn hiển thị (Ví dụ: Huế có mã ảnh tỉnh 48852.gif) 5 Chèn quảng cáo cố định hai bên giao diện Blog:
o Với đoạn mã bạn chèn vào LOGO quảng cáo cho đối tượng khác hai bên cố định giao diện Blog cách sử dụng liên kết LINK
(7)<div><hr width=180 align=”"</a></div><div><a target=”_blank” href=”http://butnghien.vn/”> <img border=”1″
src=”http://d.violet.vn/uploads/photo/961562.jpg“width=”180″ height=”55″></a></div> <div><a target=”_blank”
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></div> <div><a target=”_blank”
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></div><div><a target=”_blank”
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></div> <div><a target=”_blank”
href=”http://vdict.com/?autotranslation/”> <img border=”1″ src=“http://vdict.com/templates/user/images/logo.gif” width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://www.srem.com.vn”><img border=”1″
src=”http://quangtri.edu.vn/image/SREM_BL_d.gif” width=”180″ height=”55″></a></div> <div><a target=”_blank”
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></div> <div><a target=”_blank”
href=”http://www.gdtd.com.vn/”> <img border=”1″
src=”http://www.gdtd.com.vn/images/top-banner.gif” width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://www.catlinhschool.edu.vn/”> <img border=”1″
src=”http://tieuhocdanghai.com/Images/banners/catlinh.gif” width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://tieuhocdanghai.com/”> <img border=”1″
src=”http://www.catlinhschool.edu.vn/Data/Images/Adv/logo.gif” width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://toantuoitho.nxbgd.com.vn/”> <img border=”1″
src=”http://tieuhocdanghai.com/Images/banners/cs.jpg” width=”180″ height=”55″></a></div> <div><a target=”_blank”
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> </object></a> </div>
(8)Hình 5
o Ví dụ: Đối tượng báo giáo dục thời đại đoạn Code gồm lệnh: <div><a target=”_blank”
href=”http://www.gdtd.com.vn/”> <img border=”1″
src=“http://www.gdtd.com.vn/images/top-banner.gif” width=”180″ height=”55″></a></div>
o Trong đoạn Code đối tượng VIOLYMPIC có Logo nhúng vào File Flash SWF, ta phải thay đổi mã lệnh nhúng lại cho phù hợp là:
<div><a target=”_blank”
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> </object></a> </div>
(9)o Là người việt nam chắn Blog bạn chuyên nghiệp mang cá tính với lịch âm dương hiển thị để khách viếng thăm tiện việc tra cứu, xem hình
Hình 6
o Mã nguồn nhúng vào Blog:
<div>
<center><a name=”amlich”></a>
<script language=”JavaScript” src=”http://mangvn.org/nukeviet/js/amlich.js” type=”text/javascript”></script>
<script language=”JavaScript”>showVietCal();</script> <script
language=”JavaScript”>document.writeln(printSelectedMonth());</script></center></div >
(10)o Việc nhúng ComboBox để liên kết nhanh tới đối tượng khác giúp bạn tiết kiệm thời gian thiết kế không gian hiển thị giao diện Blog, xem hình
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=http://www.vnexpress.net>Vn Express</OPTION> <OPTION value=http://www.tuoitre.com.vn>Báo Tuổi Trẻ</OPTION> <OPTION value=#>— CNTT Việt nam —-</OPTION>
<OPTION value=http://www.quantrimang.com>Quản trị mạng</OPTION> <OPTION value=http://www.diendantinhoc.com>Diễn đàn Tin Học</OPTION> <OPTION value=#>—Bộ máy tìm kiếm—</OPTION>
<OPTION value=http://www.vinaseek.com>Vina Seek</OPTION> <OPTION value=http://www.google.com.vn>Google</OPTION> </SELECT>
(11)o Với đoạn mã nguồn sau Blog bạn trang bị từ điển ANH – Việt chuyên nghiệp
<script src=”http://bea.vn/course/blocks/dictionary_mc/clicksee.js”></script>
<script language="javascript"> function doSearch(obj){
window.open("http://bea.vn/course/blocks/dictionary_mc/dic/search.php?dict=" + 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="http://bea.vn/course/blocks/dictionary_mc/dic/search.php" 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="http://trandaiminhtri.blogspot.com/" target="_blank">Cftanhiep Groups 2009</a></span></p>
(12)Hình 8
9 Tự tạo hộp tìm kiếm thơng tin Blog:
o Mặc dù bạn dễ dàng thêm vào Blog Gadget tìm kiếm Google, nhiên tự tay thiết kế công cụ riêng tìm kiếm điều thú vị nhiều, xem hình
Hình 9 o Mã nguồn: <p align="left">
<form id="searchthis" action="http://trandaiminhtri.blogspot.com/search" 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="http://www.vietstock.com.vn/Transweb/giavang.htm" width="180" height="150" scrolling="yes" frameborder="0"
marginheight="0" marginwidth="0"></iframe>
(13)Hình 10
11 Nhúng bảng tỷ giá ngoại tệ cho Blog:
o Mã nguồn:
<iframe src=”http://www.vietstock.com.vn/Transweb/tygia.htm" width="180" height="240" scrolling="yes" frameborder="0" marginheight="0"
marginwidth="0"></iframe>
o Hiển thị xem hình 11
(14)o Mã nguồn:
<iframe scrolling=”yes” frameborder=”1″ width=”240″
src=”http://bongda.com.vn/truyenhinh.aspx” 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 khách viếng thăm tour du lịch Việt Nam với Blog bạn 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”></script>
2 Có thể thay đổi kích thước :
<script src=”http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300″></script> 3 Thêm thông tin tour du lịch :
<script src=”http://www.skydoor.net/gadget/vietnamtravel/random? format=javascript&width=300″&tour=3></script>
(15)<script src=”http://www.skydoor.net/gadget/vietnamtravel/random? format=javascript&width=300″&speed=2000></script>
o Hiển thị xem hình 13
Hình 13
14 Tổng kết: Kết thúc phần với 14 đoạn Code khác dựa tảng nhúng
hủ m