Thứ Năm, 14 tháng 11, 2013

Chèn HTML/Javascript vào Blogger(phan 2)

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=”http://butnghien.vn/”&gt; <img border=”1″ src=”http://d.violet.vn/uploads/photo/961562.jpgwidth=”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/”&gt; <img border=”1″ src=
http://www.google.com.vn/intl/vi/images/translate_beta_res.gif&#8221;
width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://vdict.com/?autotranslation/”&gt; <img border=”1″ src=
http://vdict.com/templates/user/images/logo.gif&#8221;
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/”&gt; <img border=”1″
src=”http://www.gdtd.com.vn/images/top-banner.gif&#8221; width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://www.catlinhschool.edu.vn/”&gt; <img border=”1″ src=”http://tieuhocdanghai.com/Images/banners/catlinh.gif&#8221; width=”180″ height=”55″></a></div> <div><a target=”_blank”
href=”http://tieuhocdanghai.com/”&gt; <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/”&gt; <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”&gt; <embed border=”1″ src=”http://violympic.vn/images/violympic.swf&#8221; 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.
[Image]
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=”http://www.gdtd.com.vn/”&gt; <img border=”1″
src=
http://www.gdtd.com.vn/images/top-banner.gif&#8221; 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=”http://violympic.vn”&gt; <embed border=”1″ src
=”http://violympic.vn/images/violympic.swfquality=”high” 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.
[Image]
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&#8221; 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
[Image]
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>
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=”http://bea.vn/course/blocks/dictionary_mc/clicksee.js”></script&gt;
<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>
o Từ điển Anh Việt hiển thị trên Blog, xem hình 8.
[Image]
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.
[Image]
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>
o Hiển thị xem hình 10.
[Image]
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.
[Image]
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=”http://bongda.com.vn/truyenhinh.aspx&#8221; height=”300″></iframe>
o Hiển thị xem hình 12.
[Image]
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=”http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&#8221; type=”text/javascript”></script>
2. Có thể thay đổi kích thước :
3. Thêm các thông tin về tour du lịch :
4. Thay đổi khoảng thời gian giữa hai bức ảnh :
o Hiển thị xem hình 13.
[Image]
Hình 13

Không có nhận xét nào:

Đăng nhận xét