Tập hợp mã nguồn Html/JavaScript cơ bản cho Blogger

Tập hợp mã nguồn Html/JavaScript cơ bản cho Blogger

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.

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:
<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 ++ 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>
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
<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=" />bal/stations/48820.gif" height="41"/></p>