Tổng hợp một số tiện ích cơ bản cho blogspot

Tạ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ỉ http://www.blogger.com (bạn có thể đăng nhập bằng tài khoản Gmail sẵn). 

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn Bố Cục

Bước 4: Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào

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 Cấu hình 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 CĐQTKD5A. 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>

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 dưới đây.

<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="Th&#7901;i ti&#7871;t m&#7897;t s&#7889; vùng &#7903; n&#432;&#7899;c ta" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48820.gif" height="41"/></p>
<p align="center"><font size="2"><b>Tp Hồ Chí Minh </b></font></p>
<p align="center"><img alt="Th&#7901;i ti&#7871;t Tp H&#7891; Chí Minh" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48900.gif" height="41"/></p>
<p align="center"><font size="2"><b>Huế</b></font></p>
<p align="center"><img alt="Th&#7901;i ti&#7871;t Hu&#7871;" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/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&#7901;i ti&#7871;t Cà Mau" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/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&#7901;i ti&#7871;t Nha Trang" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48877.gif" height="41"/></p>
</form>

5. 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

<div class="content">
<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>

6. 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.

<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>
</SELECT>

7. 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>
<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>

8. 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.

<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>

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

<iframe src="http://www.vietstock.com.vn/Transweb/giavang.htm" width="180" height="150" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>

10. Nhúng bảng tỷ giá ngoại tệ cho Blog:

<iframe src="http://www.vietstock.com.vn/Transweb/tygia.htm" width="180" height="240" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>

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

<iframe scrolling="yes" frameborder="1" width="240" src="http://bongda.com.vn/truyenhinh.aspx"height="300"></iframe>

Kết thúc phần 1 với 11 đ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.

Mr.Tùng