Bài soạn Tổng hợp code cho blog

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ỉ http://www.blogger.com (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: <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 ++ 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. 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 4. Hình 4 <p align="center"> Thời tiết một số địa phương ở nước ta </b> <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ủ http://banners.wunderground.com/ 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> ="http://d.violet.vn/uploads/photo/961562.jpg " width="180" height="55"></a> 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> 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> 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> href="http://vdict.com/?autotranslation/"> <img border="1" src="http://vdict.com/templates/user/images/logo.gif" width="180" height="55"></a> href="http://www.srem.com.vn"><img border="1" src="http://quangtri.edu.vn/image/SREM_BL_d.gif" width="180" height="55"></a> 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> href="http://www.gdtd.com.vn/"> <img border="1" src="http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a> href="http://www.catlinhschool.edu.vn/"> <img border="1" src="http://tieuhocdanghai.com/Images/banners/catlinh.gif" width="180" height="55"></a> href="http://tieuhocdanghai.com/"> <img border="1" src="http://www.catlinhschool.edu.vn/Data/Images/Adv/logo.gif" width="180" height="55"></a> href="http://toantuoitho.nxbgd.com.vn/"> <img border="1" src="http://tieuhocdanghai.com/Images/banners/cs.jpg" width="180" height="55"></a> 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> 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. 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> href="http://www.gdtd.com.vn/"> <img border="1" src="http://www.gdtd.com.vn/images/top-banner.gif" 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="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> 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="http://mangvn.org/nukeviet/js/amlich.js" 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=http://www.vnexpress.net>Vn Express <OPTION value=http://www.tuoitre.com.vn>Báo Tuổi Trẻ <OPTION value=#>--- CNTT Việt nam ---- <OPTION value=http://www.quantrimang.com>Quản trị mạng <OPTION value=http://www.diendantinhoc.com>Diễn đàn Tin Học <OPTION value=#>---Bộ máy tìm kiếm--- <OPTION value=http://www.vinaseek.com>Vina Seek <OPTION value=http://www.google.com.vn>Google </SELECT> [...]... Hiển thị xem hình 13 14 Tổng kết: Kết thúc phần 1 với 14 đ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 của loạt bài Bài viết được tổng hợp từ nhiều nguồn thông tin Online (và kinh nghiệm phân tích của cá nhân) như http://thuthuatblogs.blogspot.com/, http://www.thuthuatblog.com/, http://www.quantrimang.com/,... đoạn Code nhúng vào Blog tương ứng, xem hình 10 Hình 10 o Sử dụng cơ chế nhúng HTML/JavaScript để nhúng đoạn Code vào Blog (do các game dạng Flash thường có giao diện tương tác tương đối lớn nên nhúng vào vị trí Footer trên Blog là hợp lý nhất), xem hình 11 Hình 11 5 Nhúng baomoi.com vào Blog: o Trang thông tin Online baomoi.com cho phép xây dựng bản tin cập nhật các tin tức mới nhất để nhúng vào Blog. .. type="application/x-shockwave-flash" width="500" height="273" loop="true"> Hãy nhúng đoạn code này vào blog để xem kết quả 3 Nhúng link nhạc từ các websites nhạc online vào Blog: o Khi thưởng thức một bài nhạc trên các Music Online hiện nay, nếu để ý ta sẽ thấy luôn luôn có những đoạn Code ngay bên dưới cho phép nhúng bài nhạc trực tuyến này vào Blog, web, hay Forum riêng của mình Với phương pháp này chỉ cần tận dụng... một VideoClip nhúng vào Blog theo kiểu Copy mã nguồn từ trang nhaccuatui.com, xem hình 6 Hình 6 o Một số trang như nhacso.net còn hỗ trợ nhúng chuẩn RSS vào BLOG cá nhân; tuy nhiên dù sử dụng phương án nhúng RSS hay Copy mã nguồn từng bài một theo kiểu HTML/JavaScript thì cũng chưa thật hiệu quả và tiện lợi cho khách viếng thăm Blog * Thủ thuật nhúng bộ sưu tập nhạc cá nhân vào Blog: o Hiện nay chỉ có... HTML/JavaScript để nhúng đoạn Code bộ sưu tập nhạc tương ứng vào Blog của mình, xem hình 9 Hình 9 4 Chơi game Flash trực tuyến trên Blog: o Nghe nhạc xong có thể chơi Game ngay trên Blog, đây đúng là một phương pháp Relax thú vị mà chắc chắn Blog của bạn sẽ thu hút rất nhiều khách viếng thăm o Truy cập vào trang Game Flash Online http://socvui.com/ o Chọn Game cần nhúng vào Blog, nhấp nút Chia sẻ game... http://bongda.com.vn/ Xem hiển thị chi tiết các đoạn Code đã test tại http://trandaiminhtri.blogspot.com/, mọi thắc mắc xin gởi về trandaiminhtri2002@yahoo.com Trần Đại Minh Trí Code nhúng cho các đối tượng đặc biệt khác trên Blog 1 Nhúng RSS: o RSS là một tiêu chuẩn định dạng tài liệu dựa trên XML, bằng cách tóm lược thông tin vào một đoạn dữ liệu ngắn gọn hợp chuẩn hiển thị trên máy của người sử dụng Lúc... thuộc tính cho hộp thông tin baomoi.com nhúng vào Blog như: hiển thị bao nhiêu tin, kiểu hiển thị kèm hình hay không, chiều cao - độ rộng hộp…., xem hình 12 Hình 12 o Sao chép đoạn mã nguồn tương ứng tạo thành, rồi nhúng vào Blog bằng Gadget HTML/JavaScript, xem hình 13 Hình 13 6 Tổng kết: Kết thúc phần 2 với 5 thủ thuật được đề cập về thao tác nhúng các đối tượng đặc biệt khác, lúc này Blog cá nhân... o Từ điển Anh Việt hiển thị trên Blog, xem hình 8 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 Hình 9 o Mã nguồn: . theo của loạt bài. Bài viết được tổng hợp từ nhiều nguồn thông tin Online (và kinh nghiệm phân tích của cá nhân) như http://thuthuatblogs.blogspot.com/,. 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