T p h p mã ngu n Html/JavaScript c b n cho Bloggerậ ợ ồ ơ ả
16.07.2009
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ỉ (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.

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.

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:

<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">Hà Nội</b>
<p align="center">&nbsp;
<p align="center">Tp Hồ Chí Minh </b>
<p align="center">
<p align="center">Huế</b>
<p align="center">
<p align="center">Cà Mau</b>
<p align="center">
<p align="center">Nha Trang</b>
<p align="center">
</form>
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">Huế</b>
<p align="center">
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>H TR D Y & H CỖ Ợ Ạ Ọ </font>
=" " width="180" height="55"></a>
href=" border="1"
src="
height="55"></a>

<div>
href=" <img border="1"
src=" width="180" height="55"></a>
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>
href=""> <embed border="1"
src=" wmode="transparent"
type="application/x-shockwave-flash" width="180" height="60"></embed>
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>
<script language="JavaScript" src=" type="text/javascript">
<script language="JavaScript">showVietCal();
<script language="JavaScript">document.writeln(printSelectedMonth());
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 value=#>--- TIN TỨC ONLINE ---
<OPTION value=>Vn Express

<span style="font-size:90%; font-weight: bold;">© target="_blank">Cftanhiep Groups 2009</a>
o Từ điển Anh Việt hiển thị trên Blog, xem hình 8.