Tiện ích “Thông tin cần biết Lịch, thời tiết, ngoại tệ,...” cho Blogger
“Thông tin cần biết” là tiện ích được sử dụng rất phổ biến trên các trang Web tin tức ở VN, như báoVNExpress, Vietnamnet,…dưới nhiều dạng thức khác nhau. Tuy nhiên, tựu trung lại cũng chỉ chứa các thông tin như giá vàng, thời tiết, giá chứng khoán,…vv…
Cho dù nội dung trên Blog của bạn không liên quan gì đến các lĩnh vực đó, nhưng theo Namkna bạn cũng nên trang bị cho Blog của mình bởi đó là những “thông tin cần biết”, không lúc này thì lúc khác.
Và trong bài viết bên dưới, Namkna sẽ hướng dẫn các bạn tạo một bảng nội dung như hình dưới chỉ với 3 bước đơn giản :
Demo cho cả 2 dạng mình đang giới thiêu:
Ảnh minh họa.
Demo cho cả 2 dạng mình đang giới thiêu:
Ảnh minh họa.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Tạo một widget HTML\JavaScript và chèn vào đoạn code sau, Chọn 1 trong 2 dạng bên dưới nha.:Dạng 1: Dạng 2 cột.
<style type="text/css">
.thongtin img{width:24px;height:18px;margin:5px 5px -5px 0}
.thongtin li{margin:10px 0 20px}
</style>
<script language="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=500,height=350,left = 380,top = 180');");
}
</script>
<table border="0" width="100%" align="left" cellspacing="0" cellpadding="0" class="thongtin" style="border-bottom:1px solid #ddd">
<tr><td align="left" valign="top" width="50%">
<ul><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtfGpmo9YHQ2Fx3LG_ruKc4JfZPTJzSaB7aV0OlC5nqPaMd-KLx2wtTrj9tjXNimlyglU2gmXw20uGL9VUxHJ4ITrHVWf0Kib9Fto1EGvQbMj-TQgUpjJlR202dE8lnNoiMixhwOzJR9y/h120/ngoai-te-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=exchangerates')">Tỉ giá ngoại tệ</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRt4QZkBDUc9dY1pmGo4ZFGbucf3HEiZ5lwt2Se_U1qrlysxx-Lo8UH7tsmEUkAk_oc81ugYcRiSv0dvLvxeLj-9SSRWe6ufwYYe0-OEoRuN5pc94UKPT5800eC5vRay0dtRSdHblqvA5g/h120/gia-vang-namkna-blogspot-com.jpg"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=goldrates')">Bảng giá vàng</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigecUu5iNdjqU-Zhh1NWTGiqGKRzpUnXvdeXh_m_jLgDpOrFlYREb9opbCjws6lismfgVxFkFPTjaHzLprFJvzgOt0LtqufnnQWICz6NuUtdwxnR4-HCoHicDE72H0D8d5AorEHJEt_o5U/h120/oil-namkna-blogspot-com.png"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=oilrates')">Bảng giá dầu</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG36cxd-qNBDbRSKkl9LokwixhXpwlkEOQlwqNQTzy6bEGLftmVDwdKZ7gMQulmHBllcq7Zwis2k0u6ui1tmGDoXb-kL4BvxCC4wGFzdtu7_6eRTqbPtgL3on6Kbp-PU-x-aP-S4pRhL1A/h120/chung-khoan-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://chungkhoan.24h.com.vn/chungkhoan.php')">Giá chứng khoán</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl3x7qywp_2qUX3C8ghJ1ie4zSTfJTshzcdemm7_kh3CHJwGzb80Fa1_B0FpGkfyWsTbQdvX724OdhI-AKQQM724N2Vie0YhjS_6_YGhIzqDwQbWLyXfDYbtV3ftoK2IRKZnysYwh9YS87/h120/lick-phim-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://www.chieuphimquocgia.com.vn/lichphim/Default.aspx?MenuId=14')">Lịch chiếu phim</a></li>
</ul></td>
<td align="left" valign="top" width="50%">
<ul><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_jS4K5GDOncit52rx057f8HeXORHLSVhYpcGgF6l6Is_QMCbGff8CnV18IDgH7pAhktdVugYItBO1WuGqbgvJ926_liK9qumVEwZBRcWWfrdFm-QTrpNPZJm3SA9YZZs4czcbVPha1j8/h120/ket-qua-so-xo-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://vovnews.vn/Services/Infopage.aspx?svc=lotteryresults')">Kết quả xổ số</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9UogzvY9SZldJbPbVDWU2I8CwU5p5OnruLEhpvVucsmpdT1ZMiMuNyMODwSQDTzAt6R2SiTs0UJ6OByIlBcqOF6O6eyhePVZnoo_F34tpLlaqPCI37pzsCe6XCOgeOzBnCKSVa9ZlnHV7/h120/football-bong-da-namkna-blogspot-com.png"/><a href="javascript:popUp('http://baobongda.com.vn/lich-thi-dau/league/')">Lịch bóng đá</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgokUXSC1LE45FaUdavxFozZMgOKMHUbLGeKiLRHMAPCt97Gm2dZ6w_TxHEMPNDKxRx-Ev_LBzcL6AT3nQpu8LfLGb6AGLH2jKN_4kD_FTTwQwzBr4ptap8yHcDpKPKYoqniViQeO50m72_/h120/truyen-hinh-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=tvschedules')">Lịch truyền hình</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEcozFuCrKkM_8NftuYCRxkrV4CMNSiI6T5NL-X0inuGE8Uo8u1TEVtIe5gkAQ2QzpoYyjk-1OJ9NehddWdonfS3HVIWrFPljh2Tb8tLH8tgs83RGSXX0SjFyogpCDwkxoRYreeyth8jB/h120/thoi-tiet-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://vovnews.vn/Services/Infopage.aspx?svc=weathers')">Dự báo thời tiết</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnBso9mOV35VWWXRAOGJvqZkNg0bX391wWpbt4siCE2g95WIctetzS49iu1Pb-CbAQeSUA31tK5S9zTu2vJYgeSeXp6b2_DIDnBHCWdfk8ZtXog3wFmNXrmIpGSMmDHOIY1OtSe1-cVIl/h120/cay-ATM-namkna-blogspot-com.gif"/><a href="javascript:popUp('http://service.thesaigontimes.vn/atm/tracuuatm.aspx')">Điểm đặt ATM</a></li>
</ul></td></tr></table>
Dạng 2: Dạng 1 cột với hiệu ứng cuộn từ dưới lên:
<style type="text/css">
#namknaconnect{margin:0; padding: 0; height:200px; overflow: auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEillSXOSu5Fh2484AOEjbl3eiWXZI9XuRB-WlUkZjdzk8kAfmH_VoXU84xo3TMqdkGUjOZ8vK2rK7Hsv6HaRpN8G14HAZzBPaRVQhxyLXS4jwKY2oDWSFrHb2n_JE5hNPK-6j0HqN45VlR8/s1600/nen-thong-tin-can-bietnamkna-blogspot.gif) no-repeat bottom right; font-weight:bold}
#namknaconnect p {margin:0; padding:2px 10px}
.favicon {width:25px; height:25px; margin-right:5px}
.connect {width:48px; height:48px; margin:5px 10px -15px 0}
</style>
<div id="namknaconnect">
<script language="JavaScript">
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=500,height=350,left = 200,top = 120');");
}
</script>
<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' height='195' width='100%'>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPR2A8Fe-dWVripHCtS3WweqKG3RBqGDbWnXHRaEhNJl6MZydHVv60FnaIAJroyzX3b5eDNASJWziFOm2B-J-MlpdyyxiaHL_4HBUGcjFZcW5fvbRhICb_OpTmH5Og0kCsfRWsUiAsIDo/h120/Dollar-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=exchangerates')">Tỉ giá ngoại tệ</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSVZM_D2-3A3OwMd5hcjXAv8Nnh5pr2bMqXayQZIbNgMMX6C5JZYlj472qhgr2aFQtRN3dkk13ldauNGprM6EhzeGT9ETG_3aW_EOGA3I2IcbZ9c256LA9WcT4seZvaAOFclTz8FKKwpI/h120/gold-bullion-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=goldrates')">Bảng giá vàng</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNaaBaoK_zmlCH7RZuf7-8QerOvIHzNVMShQHs8TyphoR2AmXQgXf2utbfFbZ6KYlDu1980xoZrWmwxXod6_3vTXBLkfGnpG3NVOFJwUEm3vZD9YA4hanonWW1cED2RU88v4fd6_2fGSax/h120/telefono-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.muabanso1.vn/bancanbietchitiet.aspx?id=325')">Mã vùng điện thoại các tỉnh thành Việt Nam</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7pyXaNWl2b5Go87IqknaqeEFWNTakPHGUelT6-EyMZsAEEyZiJyHrmUyRvtrnPzqNY_FsuzSjwtHNR8R1KpN4Xp7_EKW8c0UHUarUZYm8d_drVLRLkO-JtTFy7OBmeHfrNJBei50XG2lL/h120/calendar2-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://thanhcavietnam.net/calendar/index.html')">Xem lịch âm dương</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU8g1TJZo8PGo4RCvlQatya02FBNlBO-jgaoY0IWAcAFm51B2MbntS5QL1-8xfMjyPVOQb_YLDIxksQQ_wVcUQshNPCMj3NlYUiI6kx9M53NAJ58N7EunJBpRVh-4NDc9iTGjhoRZxoUSO/h120/agt-multimedia-icone-namkna-blogspot-com.png" class="favicon" /> <a href="javascript:popUp('http://vietbao.vn/vn/lich-chieu-phim/')">Lịch chiếu phim</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZCyngg6eX59sdVTvY6GKuefvDI-Jt5E0R4uk62X083Pa7APZYPRv_mX5c7CvcWaNGGPCNJNG3mTOxS3aiXZSD0MUzrClpXuFLZVTHZmWpnXwwIUfLf3KYUKNeZUNnuhY04OyS4urRBQr/h120/Apps-world-clock-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.timeanddate.com/worldclock/')">Giờ các quốc gia trên thế giới</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KtY18hBWGQRNJlIAVVVTCCpFSrUF4dR-ps5dp7p3kNZ958zoxVwwvtnGQoBq7oXoBpwrp80X-MhI8vIVsm5iFI009AcxKVfgl6CWxXqwahb2NbnLdvhQ4Gpcg-tEFjbhGHvhvsHu-Ud8/h120/Aqua-Ball-Green-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.xosotructiep.vn/')">Kết quả xổ số</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBteAMTy6pI7_bWvrUcoq2k8j5GYbX_WwPdcaW6xcXB0CPWjlx-_A31s9F84tWkgYOBiGneE0AHwh-NAmI4LazpCyGvapxmyoE5qbsZhYwnR7IGsjucAQC9dFuDTvgpDpHIVaupZ39yWrD/h120/Games-Soccer-icon-namkna.png" class="favicon" /><a href="javascript:popUp('http://bongdaplus.vn/home.bbd')">Lịch bóng đá</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-3KMihCfed35j4uQCh5ANYaW4WiIJob5qtmH27ETAuX0y6SJQDTKeO73TUEgnUZMpiJv574S8p_1KpHUCqZZ-0ZLEiUcRt0LAhokE2gB_atNz3FTLZNL_w7B1Ytxqr1XI8EBtsiMUNEd/h120/Devices-video-television-icon-namkna-blogspot.png" class="favicon" /><a href="javascript:popUp('http://www.taichinhdientu.vn/services/infopage.aspx?svc=tvschedules')">Lịch truyền hình</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3v1665R3D7e4da4qiz8MN4uMmpR_LsoTwCIn7dOG9vTComesihDOoucNXSw3UTFf9MgyP9LU0e1YPTkPcnKYwQrCmUCHqULw-NjT0ZFcKt9IOzbwxQmwzkllyZEX5DxITwOXqhsmBb93-/h120/Sunny-Period-icon-namkna.png" class="favicon" /><a href="javascript:popUp('http://vov.vn/services/infopage.aspx?svc=weathers')">Dự báo thời tiết</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZsmYYpvyleOiRkOXxUYjdJ4qChKPlVJlpMls6IBlD-8VDn2OMFaOkgKbuRhv5Rrd5jKpbpniuZ4SzKojIfqRUW3sDDmZS6JbFwuqSIJ7OPlQfqa4RBW7Xg32dAwaJSSJ6uLxfUVEGP75/h120/maps-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.diadiem.com/')">Tìm đường trên bản đồ</a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7pNCCWdxZB6v-7RJU2e_agG0GOkIvPeLJqjPYsvTzMVIeC6thcY3BMGwDqNBufv5DkQ-SWk_duMugvm0Rgq4aunmTxWDJLQZ6VtHHjAXyWoucyN8Vl2d2sLWYtWmVjbenjAW5Fw_xdmlx/h120/Phone-icon-namkna-blogspot-com.png" class="favicon" /><a href="javascript:popUp('http://www.countrycallingcodes.com/')">Mã vùng điện thoại các nước trên Thế Giới</a></li>
</li></marquee>
</div>
5- Click chọn Lưu mẫu
Update ngày 21/12/2011 Thêm cho các bạn 2 tiện ích mới: Các bạn tạo một HTML/JavarScrip và dán vào nha.
Tiện ích 1: Giá vàng:
Code:
<div class='widget-content'> <iframe width="300" scrolling="no" height="236" frameborder="0" border="0" src="http://www.sjc.com.vn/chart/mini.php" name="I14"> Giá vàng SJC, biểu đồ giá vàng SJC</iframe></div>
Tiện ích 2: Dạng code một cột
Code:
<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://www.thienduongweb.com/tool/weather/?size=160&fsize=12&bg=images/bg.png&repeat=repeat-x&r=1&w=1&g=1&col=1&d=0" width="260"></iframe>
Tiện ích 3: Tiện ích dạng 2 cột:
<iframe frameborder="0" height="220" marginheight="0" marginwidth="0" scrolling="no" src="http://www.thienduongweb.com/tool/weather/?size=280&fsize=12&bg=images/bg.png&repeat=repeat-x&r=2&w=1&g=1&d=0" width="480"></iframe>
Chúc thành công!
