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 của bạn đã mang tính thời sự và giải trí đa phương tiện khá cao[r]
(1)T p h p mã ngu n Html/JavaScript c b n cho Blogger
ậ
ợ
ồ
ơ ả
16.07.2009Tạo Blog trào lưu IT giới trẻ “yêu chuộng” nay, tạo Blog khơng q khó nhiên để có Blog thật hay Pro địi hỏi bạn phải biết nhiều thứ tùy biến mã nguồn nhúng
HTML/JavaScript đối tượng vô quan trọng. Trong loạt viết “Những thủ thuật hay cho Blogger” phần chia với bạn đoạn mã nguồn HTML/JavaScript chọn lọc; mà làm chủ tốt “nó” Blog của bạn vơ đại chuyên nghiệp Bài viết minh họa dịch vụ Blogspot Google, dịch vụ Blog khác tiến hành tương tự.
1 Cách nhúng HTML BlogSpot:
o Hiện hầu hết tất dịch vụ tạo Blog BlogSpot, MSN, YahooPlus, Violet… hỗ trợ người quản trị cho phép nhúng vào đối tượng HTML/JavaScipt để thực tùy biến cao cấp Blog
o Đăng ký tài khoản tiến hành bước thiết kế cho Blog địa http://www.blogger.com (bạn đăng nhập 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 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 đối tượng nhúng (lưu ý: mặc định bố cục BlogSpot có nút Add a Gadget cho phép thêm đối tượng vào cột bên trái phần Footer bên dưới; thông thường đối tượng nhúng ưu tiên vào cột trái)
(2)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
(3)o Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau muốn bỏ đối tượng nhúng nhấp chọn nút
Remove)
2 Nhúng hộp văn cuộn vào Blog:
o Thường vị trí đoạn văn cuộn nên đặt vùng Header hay Footer giao diện Blog o Nhúng đoạn mã nguồn sau vào chức Configure HTML/JavaScript Blog:
<marquee style="color: #FF00FF; font-weight: bold" bgcolor="#F2FBFF"; direction= “left”>++ Ch o
à
m ng b n ghé th m Blog c a ++ Mong b n góp ý
ừ
ạ
ă
ủ
ạ
để
Blog ng y c ng phát tri n ++
à
à
ể
o Trong đó:Color (màu chữ), Bgcolor (màu hộp văn bản), direction (chiều di chuyển), giá trị màu sắc không nắm mã nhị phân tương ứng bạn điền tên màu tiếng anh3 Nhúng ngày tháng năm tiếng việt:
(4)<! // 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 : " + thisDay +" "+"ngày"+" "+ now.getDate() + " tháng " + monthNames[now.getMonth()] + " năm " + thisYear);
// > </script>
(5)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 thành phố lớn (Hà Nội, TP Hồ Chí Minh, Huế, Cà Mau, Nha Trang) nước theo tiêu chuần quốc tế: nhiệt độ, thời gian ẩm độ theo nguồn trang web dự báo thời tiết tiếng quốc tế http://banners.wunderground.com/, xem hình 4.
Hình 4
<p align="center"> Thời tiế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" >
(6)<p align="center">
<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ỏ phần dự báo Huế thì bạn tìm 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/ thành phố hay tỉnh Việt nam có mã số ảnh riêng, bạn tham khảo để chèn vào cho phù hợp với đối tượng mà muốn hiển thị (Ví dụ: Huế có mã ảnh tỉnh 48852.gif)
5 Chèn quảng cáo cố định hai bên giao diện Blog:
o Với đoạn mã bạn chèn vào LOGO quảng cáo cho đối tượng khác hai bên cố định giao diện Blog cách sử dụng liên kết LINK
(7)="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 Blog), không nên liên k t t i LOGO c a trang khác r t d x y
đị
ự
ế
ế ớ
ủ
ấ ễ ả
(8)Hình 5
o Ví dụ: Đối tượng báo giáo dục thời đại đoạn Code gồm 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 đối tượng VIOLYMPIC có Logo nhúng vào File Flash SWF, 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 Blog:
(9)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 Blog:
ạ
(10)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>
o Với đoạn Code bạn Edit lại 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 bạn trang bị từ điển ANH - Việt chuyên nghiệp <script src="http://bea.vn/course/blocks/dictionary_mc/clicksee.js">
(11)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:
<select style="font-size: 11px; width: 130px;" name="dict"> <option selected="true" value="ev"/>English - Vietnamese <option value="ve"/>Vietnamese - English
</select>
<div> Enter word:
<input style="font-size: 11px; width: 87px;" name="word" type="text"/> <input style="font-size: 11px;" value="Go" name="go" type="submit"/> </div>
<span style="font-size:90%; font-weight: bold;">© target="_blank">Cftanhiep Groups 2009</a>
o Từ điển Anh Việt hiển thị Blog, xem hình
(12)9 Tự tạo hộp tìm kiếm thơng tin Blog:
o Mặc dù bạn dễ dàng thêm vào Blog Gadget tìm kiếm Google, nhiên tự tay thiết kế cơng cụ riêng tìm kiếm điều thú vị nhiều, xem hình
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
<input id="b-query" maxlength="255" name="q" size="30" type="text"/> <input id="b-searchbtn" value="Search" type="submit"/>
</form>
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>
(13)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.
ể
ị
(14)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" height="300"></iframe>
o Hiển thị xem hình 12
Hình 12
13 Nhúng cảnh đẹp Việt Nam vào Blog:
o Hãy khách viếng thăm tour du lịch Việt Nam với Blog bạn mã nguồn sau
1 Nhúng theo m c
ặ đị
nh :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript" type="text/javascript">
2 Có thể thay đổi kích thước :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300">
3 Thêm thông tin tour du lịch :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"&tour=3>
(15)<script src="http://www.skydoor.net/gadget/vietnamtravel/random? format=javascript&width=300"&speed=2000>
o Hiển thị xem hình 13
14 Tổng kết: Kết thúc phần với 14 đoạn Code khác dựa tảng nhúng HTML/JavaScript Blog bạn trở nên đặc sắc chuyên nghiệp hẳn, hẹn gặp lại các phần loạt
Bài viết tổng hợp từ nhiều nguồn thông tin Online (và kinh nghiệm phân tích cá nhân)
http://thuthuatblogs.blogspot.com/, http://www.thuthuatblog.com/, http://www.quantrimang.com/, http://mangvn.org/, http://manguon.com/, http://www.vietstock.com.vn/, http://www.skydoor.net/, http://bongda.com.vn/ Xem hiển thị chi tiết đoạn Code test http://trandaiminhtri.blogspot.com/, thắc mắc xin gởi
trandaiminhtri2002@yahoo.com Trần Đại Minh Trí
Code nhúng cho đối tượng đặc biệt khác Blog 1 Nhúng RSS:
(16)-hợp chuẩn hiển thị máy người sử dụng Lúc người dùng tìm thấy thơng tin thông qua tiêu đề, đường link tóm tắt để xem tồn nội dung tin cách thuận tiện.
o Hầu hết trang Web theo kiểu tin tức - thời Online hỗ trợ chế độ RSS này, đặc biệt
cũng chuẩn Gadget nhúng mà BLOG hỗ trợ.
* Thao tác nhúng RSS vào Blog:
o Mở trang Web có hỗ trợ chuẩn RSS, ví dụ http://vnexpress.net
o Tìm nhấp chọn nút cơng cụ RSS, bảng liệt kê kênh chuẩn RSS trang web bạn lựa chọn kênh để
nhúng vào Blog mình, ví dụ tơi chọn kênh giải trí truyện Cười Vnexpress có địa cụ thể http://vnexpress.net/rss/gl/cuoi.rss, xem hình 1.
Hình 1
o Đăng nhập vào quyền quản trị Blog, chọn chức nhúng RSS tương ứng Chức khác nhau
(17)Hình 2
o Trong hộp thoại Configure Feed nhập vào đường link RSS chép VNExpress, xem hình 3.
Hình 3
(18)Hình 4
o Nhấp Save để kết thúc trình nhúng RSS vào Blog (tương tự bạn tiến hành thao tác nhúng kênh RSS
từ trang web tin tức khác như: thanhnien.com.vn, tuoitre.com.vn, nhacso.net…)
2 Cách chèn flash, mp3, video vào blog:
o Về dịch vụ BLOG đề có cơng cụ chun biệt riêng hỗ trợ nhúng multemedia vào máy – nhiên
khá gò bó mặt bố cục, thủ thuật đề cập tới việc sử dụng mã nguồn để Admin Blog tùy biến linh động
cho công việc thú vị
1 Chèn flash :
<embed quality="high" menu="true"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash" src="link file flash " type="application/x-shockwave-flash" width="500" height="273" loop="true">
(19)2 Chèn mp3 :
<embed width='280' height='50' type='application/x-mplayer2' src='URL' showstatusbar='1' loop='1' autostart='0'>
3 Chèn video :
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="URL"
name="MediaPlayer1" width="284" height="239" autostart="0" showcontrols="1"
volume="80">
T
ươ
ng t nh trên, thay URL b ng link c a video.
ự
ư
ằ
ủ
Hãy để ý phần src="URL" có đoạn code Nó phần quan trọng Hãy thay chữ URL đường link đến file nhạc bạn upload lên blog bạn Muốn để chế độ tự chạy để autostart='1', cịn khơng để autostart='0'
Đối với nhạc audio link phải tận dạng wma mp3 với nhạc hình tận wmv
Ví dụ code để chèn flash vào blog sau :
<embed quality="high" menu="true"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash" src="http://d.violet.vn/uploads/resources/511/0.doi_am.swf" 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ừ websites nhạc online vào Blog:
o Khi thưởng thức nhạc Music Online nay, để ý ta thấy luôn có đoạn Code ngay bên cho phép nhúng nhạc trực tuyến vào Blog, web, hay Forum riêng Với phương pháp
(20)Hình 5
(21)Hình 6
o Một số trang nhacso.net còn hỗ trợ nhúng chuẩn RSS vào BLOG cá nhân; nhiên dù sử dụng phương án
nhúng RSS hay Copy mã nguồn theo kiểu HTML/JavaScript chưa thật hiệu tiện lợi cho
khách viếng thăm Blog.
* Thủ thuật nhúng sưu tập nhạc cá nhân vào Blog:
o Hiện có trang www.nhaccuatui.com thực tốt thủ thuật này.
o Truy cập vào trang http://www.nhaccuatui.com/ đăng nhập tài khoản đăng ký trực tuyến.
o Lựa chọn nhạc yêu thích cần tạo sưu tập: chủ đề duyệt qua, cần đưa nhạc vào
(22)Hình 7
o Nhấp nút cơng cụ Nghe nhaccuatui phía cột menu bên trái giao diện trang web.
(23)Hình 8
o Sử dụng chế nhúng HTML/JavaScript để nhúng đoạn Code sưu tập nhạc tương ứng vào Blog mình, xem
(24)Hình 9
4 Chơi game Flash trực tuyến Blog:
o Nghe nhạc xong chơi Game Blog, phương pháp Relax thú vị mà chắn Blog của bạn thu hút nhiều khách viếng thăm.
o Truy cập vào trang Game Flash Online http://socvui.com/.
(25)Hình 10
o Sử dụng chế nhúng HTML/JavaScript để nhúng đoạn Code vào Blog (do game dạng Flash thường có giao
(26)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 tin cập nhật tin tức để nhúng vào Blog cá nhân.
o Truy cập vào địa http://www.baomoi.com/Widget/CreateWidget.aspx
(27)Hình 12
(28)Hình 13
6 Tổng kết: Kết thúc phần với thủ thuật đề cập thao tác nhúng đối tượng đặc biệt khác, lúc Blog cá nhân bạn mang tính thời giải trí đa phương tiện cao cấp, hẹn gặp lại phần loạt bài.