tag:blogger.com,1999:blog-824339285869534372024-03-14T09:25:34.860+07:00BlOg FD - FanDungPhan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.comBlogger307125tag:blogger.com,1999:blog-82433928586953437.post-66520962645702973662012-07-02T08:50:00.001+07:002012-07-02T09:23:01.493+07:00Giải pháp Blogger bị chặn 02/07/2012<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-L1RCN11hj64/T_D-Hg5MGfI/AAAAAAAAArw/io18od3R0iw/s1600/stop.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="319" src="http://1.bp.blogspot.com/-L1RCN11hj64/T_D-Hg5MGfI/AAAAAAAAArw/io18od3R0iw/s320/stop.jpg" width="320" /></a></div><span style="color: black;">Thứ 2 đầu tuần thức dậy đã bị chặn rồi </span>lại ngồi check IP <br />
<br />
<span style="font-size: small;"><b>Demo test </b></span><span style="font-size: small;"><b>thử</b></span><span style="font-size: small;"><b> ok : <a href="http://www.topphimtuan.com/" target="_blank">http://www.topphimtuan.com</a></b></span><br />
<b><br />
or : <a href="http://www.helloximo.com/" target="_blank">http://www.helloximo.com</a></b><br />
<br />
Giải pháp:<br />
<br />
Các bạn truy cập<b> <i>Domain</i> Manager</b> xóa hết các <b>Records </b> cũ, rồi DNS tới địa chỉ IP sau là ok<br />
<b><br />
</b><b><span style="font-size: medium;">74.125.71.121</span></b> <br />
<br />
Chúc vui vẻ <img alt="" border="0" class="inlineimg" src="http://freecode.vn/for@um/images/smilies/new1/xinchao[1].gif" title="xinchao" />Unknownnoreply@blogger.com31tag:blogger.com,1999:blog-82433928586953437.post-23557837132209264102012-06-28T09:56:00.001+07:002012-06-28T10:05:43.241+07:00Các truy vấn cơ bản với Blogspot<div dir="ltr" style="text-align: left;" trbidi="on">
Hầu như ai cũng biết đến một câu truy vấn thông dụng, hôm nay mình sẽ giúp các bạn hiểu rõ hơn một chút, làm BlogSpot nghe chừng lại càng đơn giản ..Rất thuận tiện cho các bạn trong việc RipTemp, Design Template cho BlogSpot.<br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-6ZziOiwt-ts/T-vHyp2Rh4I/AAAAAAAAEg8/LIQWxf1KNhc/s1600/nosql.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="189" src="http://3.bp.blogspot.com/-6ZziOiwt-ts/T-vHyp2Rh4I/AAAAAAAAEg8/LIQWxf1KNhc/s320/nosql.png" width="320" /></a></div>
Mình muốn nhắc đến câu lệnh này :<br />
<br />
<div class="codeview">
/feeds/posts/default/-/ThuthuatBlog?start-index=1&max-results=44&alt=json-in-script&callback=ancdata</div>
<br />
<br />
Trước tiên, mình được biết Cơ sở dữ liệu của Blogspot là một file XML. Nó là một dạng CSDL NoSQL.<br />
<br />
NoSQL :<br />
<br />
<blockquote class="tr_bq">
Là những cơ sở dữ liệu không dùng mô hình dữ liệu quan hệ để quản lý dữ liệu, có thể lưu trữ, xử lý từ một lượng rất nhỏ cho tới hàng petabytes dữ liệu trong hệ thống có độ chịu tải, lỗi cao với những đòi hỏi về tài nguyên phần cứng thấp.</blockquote>
<br />
<blockquote class="tr_bq">
Một số đặc điểm nhận dạng cho thế hệ database mới này bao gồm: schema-free, hỗ trợ mở rộng dễ dàng, API đơn giản, eventual consistency (nhất quán cuối) và/hoặc transactions hạn chế trên các thành phần dữ liệu đơn lẻ, không giới hạn không gian dữ liệu,...</blockquote>
<br />
Như vậy các bạn chỉ cần tập trung vào nghiên cứu phần API (Truy vấn bằng Json) của nó. Tuy nhiên, vấn đề đó chỉ dành cho các bạn ưa tìm hiểu thôi..<br />
<br />
Nhưng câu lệnh mình đưa ra có nghĩa ra sao, chúng ta cùng phân tích. Minh sẽ giải thích một cách đơn giản nhất.<br />
<br />
Truy vấn Tag (Label) :<br />
<br />
<div class="codeview">
/feeds/posts/default/-/<span style="color: red;">label</span>?start-index=<span style="color: red;">vitribatdau</span>&max-results=<span style="color: red;">soluonglayra</span>&alt=json-in-script&callback=<span style="color: red;">hamgoi</span></div>
<span style="color: red;"><br /></span><br />
Truy vấn Search (Tìm kiếm)<br />
<br />
<div class="codeview">
/feeds/posts/default/?q=<span style="color: red;">tukhoa</span>&start-index=<span style="color: red;">vitribatdau</span>&max-results=<span style="color: red;">soluonglayra</span>&alt=json-in-script&callback=<span style="color: red;">hamgoi</span></div>
<br />
<br />
Truy vấn bài viết mới xuất bản<br />
<br />
<div class="codeview">
/feeds/posts/default/?start-index=<span style="color: red;">vitribatdau</span>&max-results=<span style="color: red;">soluonglayra</span>&alt=json-in-script&callback=<span style="color: red;">hamgoi</span></div>
<br />
<span style="color: red;"><br /></span><br />
Những câu lệnh truy vấn trên mình muốn đưa tới cho các bạn đã biết và sử dụng thành thạo blogspot. Trong thời gian tới, mình sẽ cố gắng nghiên cứu sâu làm hoàn thiện tools ANCLoad Data cho tất cả các bạn chưa biết hoặc đã biết tới các câu lênh truy vấn trên đều có thể sử dụng.<br />
<br />
Mình là <b><span style="color: blue;">Anh.NC</span></b> đến từ Blog<b> <a href="http://anctemp.blogspot.com/" target="_blank">ANCTemp</a></b></div>Unknownnoreply@blogger.com12tag:blogger.com,1999:blog-82433928586953437.post-71966954645793423742012-06-19T11:54:00.003+07:002012-06-19T11:55:40.361+07:00Nâng cấp ANC Gdata lên phiên bản 2.<div dir="ltr" style="text-align: left;" trbidi="on">
Dự án này của mình xuất phát từ cái lười thực tại và cần độ chính xác cao. <a href="http://www.fandung.com/2011/12/lay-link-youtube-hanh-loat-cho-ancmedia.html" target="_blank">Gdata</a> (v.1) có lẽ với nhiều blogger chuyên về post phim thì chắc rất rõ.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-_xmAPrmM-TE/T-AGGC59UtI/AAAAAAAAEWI/xCtDf8wWnN8/s1600/itgatevn_43797890000.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="http://4.bp.blogspot.com/-_xmAPrmM-TE/T-AGGC59UtI/AAAAAAAAEWI/xCtDf8wWnN8/s320/itgatevn_43797890000.jpg" width="320" /></a></div>
<br />
<br />
Phiên bản này mình đã hỗ trợ nhiều cả cho các loại blog hay lấy link lên các diễn đàn. Tự động đánh số hay không đánh số.<br />
<br />
Lấy hàng loạt link youtube tại đây : <a href="http://www.maphim.net/p/gdata.html" target="_blank"> Gdata</a><br />
<br />
Một số hình ảnh :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-LC4L-KpvGAM/T-AFjTVTX6I/AAAAAAAAEVg/xjkLCywGpTY/s1600/main.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="http://3.bp.blogspot.com/-LC4L-KpvGAM/T-AFjTVTX6I/AAAAAAAAEVg/xjkLCywGpTY/s400/main.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-oSnEmboljFY/T-AFkcF1X0I/AAAAAAAAEVo/36L00faEIWg/s1600/v1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="http://4.bp.blogspot.com/-oSnEmboljFY/T-AFkcF1X0I/AAAAAAAAEVo/36L00faEIWg/s400/v1.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-LzkPavEKDGo/T-AFlBBeLFI/AAAAAAAAEVw/fPtTCPwfcKQ/s1600/v2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="http://4.bp.blogspot.com/-LzkPavEKDGo/T-AFlBBeLFI/AAAAAAAAEVw/fPtTCPwfcKQ/s400/v2.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-8i3780eBfrQ/T-AFlj55EjI/AAAAAAAAEV4/OgS-TKEH8AQ/s1600/v3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="http://3.bp.blogspot.com/-8i3780eBfrQ/T-AFlj55EjI/AAAAAAAAEV4/OgS-TKEH8AQ/s400/v3.JPG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-uxepYOAL_zE/T-AFmrAHylI/AAAAAAAAEV8/dw5XeTBkSpQ/s1600/v4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="http://4.bp.blogspot.com/-uxepYOAL_zE/T-AFmrAHylI/AAAAAAAAEV8/dw5XeTBkSpQ/s400/v4.JPG" width="400" /></a></div>
<br />
Link gửi vào đang ở dạng playlist.<br />
<br />
VD : http://www.youtube.com/playlist?list=PL99314DC79111E253&feature=plcp<br />
<br />
Phiên bản tới sẽ cập nhập thêm chức năng lấy video từ người dùng, từ khoá tìm kiếm .. .v.v</div>Unknownnoreply@blogger.com11tag:blogger.com,1999:blog-82433928586953437.post-88151503199908179622012-06-18T02:52:00.001+07:002012-06-18T09:27:21.479+07:00Hướng dẫn config domain cho hầu hết các mạng.<div dir="ltr" style="text-align: left;" trbidi="on">
Chắc có lẽ cũng nhiều bạn băn khoăn như mình. Hôm nay mình sẽ làm rõ vẫn đề để tất cả cùng hiểu, tại sao site các bạn lại không vào được
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Ru0YkpMT63k/T96SA6vECLI/AAAAAAAAETc/qSXPZdXV_Lw/s1600/help.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Ru0YkpMT63k/T96SA6vECLI/AAAAAAAAETc/qSXPZdXV_Lw/s1600/help.jpg" /></a></div>
<br />
<br />
Một lá thư được gửi cho mình :<br />
<br />
<span style="color: #3d85c6;"><i>Hiện nay nhà mạng VNPT đã chặn blogspot rất chặc chẽ, nhiều website sử dụng blogspot có tên miền riêng như www.fandung.com, www.vnblogspot.com, www.marketingvn.name.vn,... vào lúc được lúc không, lúc không được thì nhiều hơn, đặc biệt vào buổi tối và thứ 7, CN. Nhưng mình thấy website của bạn www.maphim.net vào lúc nào cũng được, chưa bao giờ mình thấy không vào được.</i></span><br />
<span style="color: #3d85c6;"><i><br /></i></span><br />
<span style="color: #3d85c6;"><i>Vậy bạn có thể chỉ giúp mình cách mà bạn áp dụng cho www.maphim.net được không?</i></span><br />
<span style="color: #3d85c6;"><i><br /></i></span><br />
<span style="color: #3d85c6;"><i>Mình đang rất cần sự giúp đỡ về việc này, mong bạn sẽ giúp mình!</i></span><br />
<span style="background-color: white;">.</span><br />
Thứ nhất, các site lớn như fandung, vnblogspot cấu hình ra sao ?<br />
<br />
Các đàn anh vẫn sử dụng ghs.google.com, với fandung có lẽ là do bận gì đó hoặc công tác quên chăm sóc blog của mình. VnBlogspot thì khách viếng chủ yếu là ở Blogitem nên có lẽ không quan tâm tình trạng này.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oREtQ7nteqI/T9401BWR-OI/AAAAAAAAESc/6eZuTQyURbg/s1600/ANCGroup-ANC-Group-Blogspot-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="http://2.bp.blogspot.com/-oREtQ7nteqI/T9401BWR-OI/AAAAAAAAESc/6eZuTQyURbg/s400/ANCGroup-ANC-Group-Blogspot-.jpg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ghF4bkr1Pc8/T9401h7EEaI/AAAAAAAAESk/GgdE0gjvkZU/s1600/ANCGroup-ANC-Group-Blogspot3-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="http://2.bp.blogspot.com/-ghF4bkr1Pc8/T9401h7EEaI/AAAAAAAAESk/GgdE0gjvkZU/s400/ANCGroup-ANC-Group-Blogspot3-.jpg" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-OwYKGJzG3BY/T943bY8SvmI/AAAAAAAAES8/NlL-qS_uPqE/s1600/ANCGroup-duypham-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="142" src="http://2.bp.blogspot.com/-OwYKGJzG3BY/T943bY8SvmI/AAAAAAAAES8/NlL-qS_uPqE/s400/ANCGroup-duypham-.jpg" width="400" /></a></div>
<br />
<br />
<br />
Thứ 2, domain bạn gửi thư cho mình.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-hXbZSypXDoA/T9402nDN4YI/AAAAAAAAES0/cc64pv9YRXU/s1600/ANCGroup-marketing-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="http://3.bp.blogspot.com/-hXbZSypXDoA/T9402nDN4YI/AAAAAAAAES0/cc64pv9YRXU/s400/ANCGroup-marketing-.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Thứ 3 là domain maphim.net
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Jxqvw6c8NJ0/T9402GP2DKI/AAAAAAAAESs/zg1pIasV9kA/s400/ANCGroup-maphim.net-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="http://3.bp.blogspot.com/-Jxqvw6c8NJ0/T9402GP2DKI/AAAAAAAAESs/zg1pIasV9kA/s400/ANCGroup-maphim.net-.jpg" width="400" /></a></div>
<br />
BlogSpot<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--ZDXE4FGudc/T944J5CuVGI/AAAAAAAAETE/QegO6T6hta8/s1600/ANCGroup-teteit-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="http://2.bp.blogspot.com/--ZDXE4FGudc/T944J5CuVGI/AAAAAAAAETE/QegO6T6hta8/s400/ANCGroup-teteit-.jpg" width="400" /></a></div>
<br />
Blogger<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Fy-butlaWms/T94499cAVuI/AAAAAAAAETQ/F8tH0bVEsAk/s1600/ANCGroup-blogger-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="121" src="http://1.bp.blogspot.com/-Fy-butlaWms/T94499cAVuI/AAAAAAAAETQ/F8tH0bVEsAk/s400/ANCGroup-blogger-.jpg" width="400" /></a></div>
<br />
<br />
Hiện tại thì chưa có thời gian nghiên cứu kỹ hết các cách giúp blogspot thoát khỏi tình trạng này. Nếu có cách hay mình sẽ sớm chia sẻ và cập nhật.<br />
<br />
<br />
Mình đã thêm cả 2 ip : <b>74.125.51.121</b> và <b>216.239.34.21, </b>nếu bị chặn khung giờ nào thì sẽ tự động đổi sang ip còn lại..<br />
<br />
(Ping lúc : 2h30 // 18.06.2012)<br />
<br /></div>Unknownnoreply@blogger.com24tag:blogger.com,1999:blog-82433928586953437.post-27636537474252282262012-06-09T17:02:00.000+07:002012-06-09T17:25:46.587+07:00Khắc phục hiện tượng chặn web của VNPT.<div dir="ltr" style="text-align: left;" trbidi="on">
Hôm qua mình đau đầu với cái mạng VNPT. Chả hiểu sao nó lại chặn web của mình, trong khi đó domain blogger.com và *.blogspot.com lại vào ngon lành. Chả nhẽ lại chuyển về cái domain free à. Thế thì bao nhiêu công lao gây dựng đi tong sao ?<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-KaH0ujZNVuw/T9MfEle5I-I/AAAAAAAAEGc/WaBhyb_rwXg/s1600/19535-117043-hcm-lap-dat-internet-toc-do-cao-vnpt.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="http://4.bp.blogspot.com/-KaH0ujZNVuw/T9MfEle5I-I/AAAAAAAAEGc/WaBhyb_rwXg/s320/19535-117043-hcm-lap-dat-internet-toc-do-cao-vnpt.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Phải chăng là câu nói đúng ?</td></tr>
</tbody></table>
<br />
<br />
Ngồi suy nghĩ một lúc. Đã tìm ra !<br />
<br />
Hôm trước tất cả các dịch vụ của Google bị VNPT làm nháo nhác cả lên, trong khi đó mình dùng ké wifi FPT của hàng xóm thì chả làm sao. Đến một số file js của mình cũng "Not Found". Ắt hẳn nó đã chặn cái NameSever của Google rồi <span style="color: red;">(ghs.google.com.).</span><br />
<span style="color: red;"><br /></span><br />
Ping thử 2 domain :<br />
<br />
= > <a href="http://maphim.net/">maphim.net</a> của mình nó ra ip <b><span style="color: #3d85c6;">67.208.74.71</span></b><br />
= > blogger.com và blogspot.com thì là <b><span style="color: #3d85c6;">74.125.71.191</span></b><br />
<b><span style="color: #3d85c6;"><br /></span></b><br />
<b><span style="color: #3d85c6;"><br /></span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-jHJ1RJ028vA/T9MevHzQXSI/AAAAAAAAEGU/faUQb96RKJY/s1600/pingma.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="http://3.bp.blogspot.com/-jHJ1RJ028vA/T9MevHzQXSI/AAAAAAAAEGU/faUQb96RKJY/s400/pingma.png" style="cursor: move;" width="400" /></a></div>
<b><span style="color: #3d85c6;"><br /></span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-ZYLO1lY2Byo/T9MeuHkTGTI/AAAAAAAAEGM/QomtZUWBocM/s1600/pingha.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="http://4.bp.blogspot.com/-ZYLO1lY2Byo/T9MeuHkTGTI/AAAAAAAAEGM/QomtZUWBocM/s400/pingha.png" width="400" /></a></div>
<br />
<b><span style="color: #3d85c6;"><br /></span></b><br />
<b><span style="color: #3d85c6;"><br /></span></b><br />
Nhiều bạn chắc đã ngấm ra rồi...<br />
<br />
Mình xem lại, mình đặt Cname cho domain của mình hướng về host Google. Hic, bảo sao. Trang của anh Dũng thì không bị sao (fandung.com), vậy là chắc chắn anh Dũng đã add cả <b>A Record</b> với ip là <b>74.125.53.121 </b>như hướng dẫn trước đây tại trang Support của Blogger.<br />
<br />
Hiện tại mình vào thì không thấy, nhưng trên mạng rất nhiều bài hướng dẫn, mọi người có thể tìm từ khoá sau :<br />
<br />
<span style="color: red;">"add domain vào blogspot"</span><br />
<b><br /></b><br />
<b>Kết luận : </b>Khi add domain mọi người nên đổi CName thành A Record với ip là 74.125.53.121 nhé.<br />
Yên tâm dùng cái này, nếu VNPT mà chặn thì đảm bảo VNPT sẽ sớm phá sản.<br />
<br />
Chúc mọi người thành công !<br />
<br />
(Suzuki_aka & ANC Group)</div>Unknownnoreply@blogger.com25tag:blogger.com,1999:blog-82433928586953437.post-38461426726266545642012-06-09T16:58:00.003+07:002012-06-10T18:07:18.259+07:00Giải pháp VNPT chặn blogger ngày 09/06/2012<b style="color: red;">Chú ý </b>: Nhiều bạn DNS sai do chưa DNS được www <span style="background-color: black; color: blue;"></span><span style="color: blue;"><span style="color: black;">nên vẫn chưa được </span></span><b style="color: blue;"><span style="color: black;"><br />
</span></b><br />
<b style="color: blue;"><span style="color: black;"> - Xóa bỏ DNS tới</span> ghs.google.com</b><b> trước khi DNS tới 4 IP. </b><br />
<b> - DNS cả <span style="color: blue;">root</span> và <span style="color: blue;">www</span> tới IP . Trong đó<span style="background-color: blue; color: red;"></span> phải DNS <span style="color: blue;">www</span> tới 4 IP là<span style="background-color: white;"></span> quan trọng nhất . vì blogger chỉ nhận <span style="color: blue;">www</span> , <span style="color: blue;">root </span>chỉ có tác dụng </b><b>chuyển hướng</b><b> tới <span style="color: blue;">www</span> khi vào Blogger chọn -> cài đặt -> Xuất bản -> Đánh dấu ô chuyển hướng <span style="color: blue;">hoặc</span> </b><b>chuyển hướng</b><b> ở CP Domain </b><b>Manager</b><br />
<b> - Để kiểm tra -> Ở PC chọn Start -> Run... -> hiện ra cửa sổ nhập vào : <span style="color: blue;">ping www.domain.com -t <span style="color: black;">-> Enter để xem đã DNS về 1 trong 4 IP chưa . ( nhớ là phải có www nha )</span></span></b><br />
<b> ---------------------------------------------------------------------------</b> <br />
Đang buồn on Y!M thì thấy mấy bạn PM blogger ko vào được do mạng VNPT chặn.<br />
Nay mình sẽ hướng dẫn giải pháp tạm thời để mọi người có thể truy cập được blog của bạn dù là mạng gì mà không cần sử dụng đến phần mềm hỗ trợ.<br />
Thực chất hiện tại VNPT đang chặn IP liên quan đến DNS <b>ghs.google.com. </b>chứ không chỉ chặn riêng đuôi <b>.blogspot.com</b> như trước.<br />
Nguyên nhân chặn mình nghĩ vì VN sử dụng <b>facebook, blogspot ... </b>(đường truyền quốc tế) nhiều mà chưa thu được lại lợi nhuận do giá thành cao hơn đường truyền trong nước nên nhà mạng tạm khóa IP để ko bị thua lỗ.<br />
<b>Demo test thử site mình ok : <a href="http://www.topphimtuan.com/">http://www.topphimtuan.com</a></b><br />
Vì vậy ta có thể sử 4 IP blogger của google để DNS sử dụng cho ổn định<br />
Các bạn truy cập <b>Domain Manager</b> để DNS cấu hình tới 4 địa chỉ IP lần lượt như sau<br />
<b>216.239.32.21</b><br />
<b>216.239.34.21</b><br />
<b>216.239.36.21</b><br />
<b>216.239.38.21</b><br />
<br />
Hình ảnh ví dụ domain DNS tại sitelutions.com , với<b> <span style="color: red;">root</span> </b>và<b> <span style="color: red;">www</span></b><span style="color: red;"> </span>đều add = IP cho ổn định ( kể cả sub )<br />
<div style="color: blue;"><b><br />
</b></div><div style="color: blue;"><b>1. Chọn [Advanced Config & DDNS] để DNS</b></div><a href="http://3.bp.blogspot.com/-uBGmRMWOIxE/T9McnOYiBdI/AAAAAAAAArc/_e-zL7E19Oc/s1600/chondns-helloximo.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="http://3.bp.blogspot.com/-uBGmRMWOIxE/T9McnOYiBdI/AAAAAAAAArc/_e-zL7E19Oc/s1600/chondns-helloximo.JPG" width="827" /></a><br />
<div style="color: blue;"><b><br />
</b></div><div style="color: blue;"><b>2. Chọn [Add Record] DNS tới 4 IP trên</b></div><a href="http://2.bp.blogspot.com/-RYHPvAQliTc/T9McmWfxW5I/AAAAAAAAArY/2Q7yOO_2Mfo/s1600/add+dns-helloximo.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="543" src="http://2.bp.blogspot.com/-RYHPvAQliTc/T9McmWfxW5I/AAAAAAAAArY/2Q7yOO_2Mfo/s1600/add+dns-helloximo.JPG" width="774" /></a><br />
<br />
Với các Domain Manager khác cũng DNS tương tự<br />
<i>Chúc các bạn thành công</i>Unknownnoreply@blogger.com28tag:blogger.com,1999:blog-82433928586953437.post-63686514118585362692012-04-24T22:22:00.001+07:002012-04-24T22:41:44.941+07:00Tạo thumb cho bài đăng phổ biến<div dir="ltr" style="text-align: left;" trbidi="on">
" Ức chế quá với cái thumb, bé tý xíu thế này, xấu thật... "<br />
<br />
Đã bao giờ bạn phải thốt lên như thế này chưa. Định dạng mặc định của ảnh trong <i><b>Blog</b> </i> và <b><i>PopularPosts</i> </b>là 72x72. Nhiều bạn không thích với định dạng này nhưng vẫn phải cố sử dụng như một sự ép buôc. Nhưng nếu dân tình kêu ca nhiều thì chắc Google cũng phải nghĩ đến giải pháp cho một cái biến ảnh ban đầu. Chờ thì hơi sốt ruột.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Nzd2fUX7LQw/T5bHebiUdhI/AAAAAAAADbc/a3hR5bkd3Gc/s1600/watch-on-thumbnail-timex-competition-1.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="237" src="http://4.bp.blogspot.com/-Nzd2fUX7LQw/T5bHebiUdhI/AAAAAAAADbc/a3hR5bkd3Gc/s320/watch-on-thumbnail-timex-competition-1.jpeg" width="320" /></a></div>
<br />
<br />
Mình đã tìm ra một quy luật rất hay muồn chia sẻ cùng các bạn, nếu các bạn để ý link thumb này sẽ có định dạnh như sau.<br />
<br />
<div class="codeview">
VD : http://2.bp.blogspot.com/-aNmJv1T0OD8/T47tik6x-EI/AAAAAAAAAEw/_O8hvj2xbSM/<b><span style="color: red;">s72-c</span></b>/xem-phim-Giay+thuy+tinh-maphim.net.JPG</div>
<br />
Hãy chú ý đến phần mình bôi đỏ, đó chính là định dạng mà Google quy định. Nếu bạn thay thử các con số khác vào số 72 ta sẽ được các hình ảnh tương ứng với kích cỡ đó. Và nó là hình vuông.<br />
<br />
Kích thước tối đa là 2000px.<br />
<br />
Từ đó mình viết lên một hàm <b>convertThumb</b> có chức năng tương ứng <b>createSummaryAndThumb, </b>sử dụng thì chắc không khó. Áp dụng với cả 2 widget mà Blogspot đã cho. Mình nghĩ ưu điểm của hàm này so với hàm của các Blogger nước ngoài sẽ nhanh và tốt hơn.<br />
<br />
<div style="text-align: center;">
<a href="http://radio23h.maphim.net/" target="_blank">Demo </a></div>
<br />
<b>Hàm convert :</b><br />
<br />
<div class="codeview">
<br />
function converthumb(img,s,w,h,url,tit){<br />
if(Number(s) > 2000){s = 2000;}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>img = img.replace(/s72/gi,"s"+s+"");<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if(url != "" || tit != ""){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>data = '<img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/>';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}else{<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>data = '<a href="'+url+'" rel="'+tit+'"><img alt="'+tit+'" src="'+img+'" width="'+w+'" height="'+h+'"/></a>';<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>document.write(data);<br />
}<br />
<br /></div>
<br />
Các biến truyền vào :<br />
<div class="codeview">
<b>- img</b> là link của các biến sau : data:post.thumbnailUrl (Blog), data:post.thumbnail (PopularPosts)<br />
- s : kích thước bạn muốn convert từ 72 sang.<br />
- w : chiều rộng của ảnh được hiển thị.<br />
- h : chiều cao của ảnh được hiển thị.<br />
- url : là link truyền vào data:post.href (PopularPosts), data:post.url (Blog)<br />
- tit : tiêu đề truyền vào data:post.title (cả 2)</div>
<br />
Sử dụng<br />
<br />
<i><span style="color: orange;"> - Đầu tiên bạn copy và save với định dạng file convert.js sau đó up lên host nào đó.</span></i><br />
<br />
<b><span style="color: #cc0000;">1. Blog</span></b><br />
<b><span style="color: #cc0000;"><br /></span></b><br />
VD: mình muốn lấy ảnh 800, rộng 300, cao 250<br />
<br />
<div class="codeview">
<br />
<b:if cond='data:post.thumbnailUrl'><br />
<script><br />
converthumb("<data:post.thumbnailUrl/>","800","300","250","","<data:post.title/>");<br />
</script><br />
<b:else/><br />
<img src="http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg" width="300" height="250"/> <span style="color: #6aa84f;"><!-- nếu không có thumb sẽ hiển thị ảnh này --></span><br />
</b:if><br />
<br /></div>
<br />
<b><span style="color: #cc0000;">2. PopularPosts</span></b><br />
<br />
Tương tự:<br />
<br />
<div class="codeview">
<br />
<b:if cond='data:post.thumbnail'><br />
<script><br />
converthumb("<data:post.thumbnail />","800","300","250","","<data:post.title/>");<br />
</script><br />
<b:else/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><a class='poster' expr:rel="data:post.title" expr:href='data:post.href'><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><img expr:alt="data:post.title" border='' height='250px' src='http://megafun.vn/dataimages/201203/original/images682717_thienthan3.jpg' width='300px'/><br />
</a><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
</b:if><br />
<br /></div>
Theo yêu cầu của <i>netdohoa.com</i><br />
<br />
<i>Chúc các bạn thành công !</i></div>Unknownnoreply@blogger.com23tag:blogger.com,1999:blog-82433928586953437.post-47074944735130640092012-04-23T02:32:00.000+07:002012-04-23T02:42:49.948+07:00Tạo lại header cho chuẩn Seo<div dir="ltr" style="text-align: left;" trbidi="on">
Như các bạn đã biết BlogSpot giờ không thua kém các người anh em cùng họ. Phần mô tả đã cung cấp đầy đủ đến tận các bài viết con (item).. Nhưng nhiều bạn chưa biết cách vận dụng hết các chức năng đó. Trong phần đầu tiên này mình sẽ giới thiệu về phần "Mô tả", có thể coi đây là tóm tắt nội dung của bài viết, giúp cho các rotbot có thể tìm kiêm dễ dàng.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-PX9iBPNkTyg/T5RcpfRStTI/AAAAAAAADWU/KaObzOHA1_s/s1600/meta-tag-blogspot.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="258" src="http://2.bp.blogspot.com/-PX9iBPNkTyg/T5RcpfRStTI/AAAAAAAADWU/KaObzOHA1_s/s320/meta-tag-blogspot.jpg" width="320" /></a></div>
<br />
<br />
Đầu tiên, các bạn vào phần<span style="color: #cc0000;"> Cài đặt >> Tuỳ chọn tìm kiếm >></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-h6dU2dQSIKA/T5RZXM-4wtI/AAAAAAAADWE/DL6Aus6CguM/s1600/mote.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="http://2.bp.blogspot.com/-h6dU2dQSIKA/T5RZXM-4wtI/AAAAAAAADWE/DL6Aus6CguM/s400/mote.PNG" width="400" /></a></div>
<br />
- Bật phần mô tả lên, nội dung mà bạn gõ vào chính là phần mô tả ở trang home.<br />
<br />
- Để hiện phần mô tả cho trang con thì làm như thế nào.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-pIVh1oj8kUI/T5RZ7pmnpFI/AAAAAAAADWM/Sbeq9REYuTk/s1600/mote2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://3.bp.blogspot.com/-pIVh1oj8kUI/T5RZ7pmnpFI/AAAAAAAADWM/Sbeq9REYuTk/s400/mote2.PNG" width="237" /></a></div>
<br />
- Bạn copy một đoạn trong bài viết và dán vào dây.<br />
<br />
Bạn có thể <span style="color: #0b5394;">viewsource</span> trang sau để thấy rõ :<br />
<br />
<div style="text-align: center;">
<a href="http://www.maphim.net/2012/04/vicky-va-bau-vat-cua-chua-full.html" target="_blank">http://www.maphim.net/2012/04/vicky-va-bau-vat-cua-chua-full.html</a></div>
<br />
<b><span style="color: #cc0000;">Nhưng câu hỏi đặt ra như sau, nhiều khi bạn quên không copy, hay với data 1k bài viết có sẵn của bạn phải làm sao để có 1k mô tả. Bạn phải đi copy cho từng bài :((..Phát ốm luôn. !</span></b><br />
<br />
Mình sẽ chỉ các bạn các fix sau đây.<br />
<br />
Copy và thay thế đoạn code bạn đang có nằm giữa <head> và <b:skin><br />
<br />
<div class="codeview">
<b:include data='blog' name='all-head-content'/><br />
<span style="color: #6aa84f;"><!-- title, keyword --></span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:if cond='data:blog.url == data:blog.homepageUrl'><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><title><data:blog.pageTitle/></title><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta content=' <span style="color: #cc0000;">nhập các từ khoá của bạn</span> ' name='keywords'/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:else/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:if cond='data:blog.pageType == "item"'><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><title><span style="color: #cc0000;">Thủ thuật</span> <data:blog.pageName/> | <span style="color: #cc0000;">24h online</span> </title><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:else/><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><title><data:blog.pageName/> - <span style="color: #cc0000;">Teteit</span> </title><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></b:if><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta name="keywords" expr:content="data:blog.pageName + &quot; <span style="color: #cc0000;">nhập các từ khoá của bạn</span> &quot;" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></b:if><br />
<span style="color: #6aa84f;"><!-- meta --></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta name="robots" content="index, follow" /><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta content="index, follow" name="GOOGLEBOT" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta content="index, follow" name="yahooBOT" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta name="author" content="suzuki_aka"/><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span style="color: #6aa84f;"><!-- mota --></span><span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:if cond='data:blog.metaDescription == &quot;&quot;'><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><b:if cond='data:blog.url != data:blog.homepageUrl'><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><meta name="description" expr:content="data:blog.pageName + &quot; <span style="color: #cc0000;">nhập các mô tả chung, hoặc từ khoá</span> &quot;" /><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></b:if><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span></b:if></div>
<br />
<i>Các từ khoá <span style="color: #cc0000;">màu đỏ</span> là phần bạn sẽ thay. </i><br />
<br />
= > Cho dù bạn có quên copy thì bạn vẫn có một mô tả, nhưng để có 1 mô tả đẹp thì bạn nên copy một đoạn nhỏ vào mô tả tìm kiếm. Và giờ có 1k bài viết bạn cũng chả lo ngại gì.<br />
<br />
Thêm một lưu ý rằng dòng lệnh :<br />
<br />
<div class="codeview">
<b:include data='blog' name='all-head-content'/>
</div>
<br />
<br />
rất quan trọng với blogspot, nếu có trót lỡ bỏ thì bạn hay thêm nó vào, nếu không bạn sẽ mất một vài index đấy ;)) . Nó bao gồm cả biến : <i><span style="color: #cc0000;">data:blog.metaDescription </span>(mình hay dùng nó thay cho data:post.snippet).</i><br />
<br />
Bài viết sau chắc mình sẽ giới thiệu một số page 404 độc độc, nghịch nghịch một chút. Giờ cũng muộn rồi nên ngừng gõ ở đây.<br />
<br />
<i>Chúc các bạn thành công !</i></div>Unknownnoreply@blogger.com11tag:blogger.com,1999:blog-82433928586953437.post-11756527970081636872012-03-22T18:39:00.002+07:002012-03-26T02:37:21.939+07:00BlogSpot cải thiện tính năng SEO cho blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: left;">
<a href="http://1.bp.blogspot.com/-LhKv6lkPISk/T2sMxuAw-_I/AAAAAAAACmc/di5-D9_iseY/s1600/sieuluoi001.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" border="0" height="320" src="http://1.bp.blogspot.com/-LhKv6lkPISk/T2sMxuAw-_I/AAAAAAAACmc/di5-D9_iseY/s320/sieuluoi001.PNG" title="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" width="97" /></a>Blogger hôm nay đã cập nhật nhiều tính năng SEO mới cho Blogger. Phải tranh thủ xem qua mới rõ hết được, có lẽ giao diện blog cũ sẽ không được nâng cấp thêm. Các bạn hãy vào giao diện Blog mới để thiết kế tuỳ chỉnh. Địa chỉ giao diện mới <i><b><a href="http://draft.blogger.com/" target="_blank">tại đây.</a></b></i></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
Một số điểm mới có thể kể ở đây, cụ thể là :<br />
<br /></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<b><i>1. Thẻ mô tả </i></b><br />
<br />
- Tuy đã được hỗ trợ trong phần cài đặt chính nhưng nó vẫn được gom nhóm vào phần tìm kiếm chung cho blog của bạn. Hãy bật nó lên lần nữa nhé.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b><i> 2. Lỗi và chuyển hướng</i></b><br />
<br /></div>
<div style="text-align: left;">
- Bạn đã có thể tạo thông báo lỗi bằng các đoạn mã, hay ảnh hiển thị.</div>
<div style="text-align: left;">
- Tính năng chuyển hướng mới đã được cải thiện, giờ bạn có thể dùng javascript để tạo thêm các link cho mình. Một các hack tag SEO cho blog, mình sẽ sớm công bố tiện ích này, gộp chung nó vào phần tìm kiếm theo tag, keywords của từ khoá.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cxZST0QyrK4/T2sMybtPvWI/AAAAAAAACmk/9fgtn6GAkjw/s1600/sieuluoi002.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" border="0" height="155" src="http://2.bp.blogspot.com/-cxZST0QyrK4/T2sMybtPvWI/AAAAAAAACmk/9fgtn6GAkjw/s320/sieuluoi002.PNG" title="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" width="320" /></a></div>
<br /></div>
<div>
- Mọi người có thể check thử link sau : ..<a href="http://sieuluoi.blogspot.com/tag/sieuluoi.html" target="_blank"> sieuluoi</a>, bạn sẽ nhận được thông báo <span style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; text-align: center;"><span style="color: red; font-style: italic;">Rất tiếc, trang bạn đang tìm trong blog này không tồn tại. </span></span>Nhưng với vài thủ thuật nhỏ ta sẽ biến nó thành một phần của Blog, như một Website hoàn thiện, hay đúng hơn là hoàn thiện.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-wRsOvCQ7Gks/T2sMz_jNxXI/AAAAAAAACmo/kv4QsTpSPtQ/s1600/sieuluoi003.PNG" imageanchor="1" style="display: inline !important; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" border="0" height="98" src="http://1.bp.blogspot.com/-wRsOvCQ7Gks/T2sMz_jNxXI/AAAAAAAACmo/kv4QsTpSPtQ/s320/sieuluoi003.PNG" title="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" width="320" /></a></div>
<br />
<b><i>3. Robots.txt và tuỳ chỉnh tìm kiếm của Robots.txt.</i></b><br />
<br />
- Với dự án mở của Blogger này ta có thể mở phần /search bị đóng lâu nay của Blogger.<br />
<br />
<blockquote class="tr_bq">
<span style="text-align: -webkit-auto; white-space: pre-wrap;">User-agent: *</span> Disallow: /search == > Allow: /search<br />
Allow: /</blockquote>
<pre style="text-align: -webkit-auto; white-space: pre-wrap; word-wrap: break-word;"></pre>
- Chưa biết có thăng thêm index lên Google không nhưng mình tin là có.</div>
<div>
- Tuỳ chỉnh các thẻ meta robots mà không cần mó tay vào code temp blog.</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-oKbViPGofGk/T2sM0pnSdMI/AAAAAAAACmw/LZxjGyuCiTA/s1600/sieuluoi004.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" border="0" height="265" src="http://4.bp.blogspot.com/-oKbViPGofGk/T2sM0pnSdMI/AAAAAAAACmw/LZxjGyuCiTA/s400/sieuluoi004.PNG" title="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" width="400" /></a></div>
<div>
<br /></div>
<div>
<b><i>Kết chung lại, </i></b> blogger đang càng ngày càng thân thiện với người dùng, trong năm tới và kể cả ngay về sau này nó còn tiếp tục miễn phí không thì mình không đoán được. Chỉ biết bay giờ mình yêu BlogSpot, một thứ ngon bổ rẻ.</div>
</div>Unknownnoreply@blogger.com27tag:blogger.com,1999:blog-82433928586953437.post-45252644482082402502012-03-09T21:20:00.000+07:002012-03-09T21:25:17.027+07:00ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.<div dir="ltr" style="text-align: left;" trbidi="on">
Lâu lắm không viết Blog, tại công việc cũng nhiều... Phần vì quá bận, phần vì yêu cầu các bạn riêng rẽ hay không thồng nhất, nên một vài Plugin mình ngừng chia sẻ và phát triển thêm. <br />
<br />
Plugin mới này mình cũng mới test thử và hiệu quả cũng rất tốt. Còn về khách quan mà nói, mình không phải một dân chuyên SEM, SEO. Nên kinh nghiệm về SEO và SEM còn hạn chế. Có một pro đã nói plugin này không an toàn với Sanbox của Google, hoặc index từ Google. Do vậy các bạn nên cân nhắc khi sử dụng tool này.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-1HOwJAtgdGY/T1oRqQqM5AI/AAAAAAAACX0/JynKVMf-ooU/s1600/Keywords-SEO.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="http://2.bp.blogspot.com/-1HOwJAtgdGY/T1oRqQqM5AI/AAAAAAAACX0/JynKVMf-ooU/s400/Keywords-SEO.jpg" width="400" /></a></div>
<br />
<br />
Nói sơ qua về plugin này, nó có thể nói là một công cụ mạnh cho việc tạo và hỗ trợ thêm về từ khoá cho site của bạn. Đôi khi bạn hay phải cập nhật từ khoá hot cho site, nhưng công việc bận rộn, khiến bạn không thể rảnh tay mà cập nhật được. Mình làm tool này mong làm giảm nhẹ việc đó. Tất cả các từ khoá sẽ được cập nhật từ người dùng, các từ khoá tìm kiếm nhiều nhất, hot nhất đều được tự động thêm vào sau mỗi ngày, mỗi giờ, tuỳ vào tuỳ chỉnh của bạn.<br />
<br />
<b><i>Sử dụng như sau: </i></b><br />
<br />
1. Hãy đăng ký một nick tại <a href="http://www.maphim.net/p/go.html?url=https://id.tynt.com/account/sign_up" target="_blank">đây</a> (có thể coi đây là trang lưu trữ thông tin keywords cho site bạn.)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-WEy5oh-JNkQ/T1oK9VD24MI/AAAAAAAACXc/HcECNrqd5GY/s1600/mp001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="http://1.bp.blogspot.com/-WEy5oh-JNkQ/T1oK9VD24MI/AAAAAAAACXc/HcECNrqd5GY/s400/mp001.png" width="400" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
2. Đăng nhập vào vào phần chữ đỏ sau để lấy <a href="http://www.maphim.net/p/go.html?url=https://id.tynt.com/api/key" target="_blank">KeyAPI</a> cho site.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oQqxzzpD5yU/T1oL0NtIsLI/AAAAAAAACXk/wUb2MlOeMFQ/s1600/mp002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-oQqxzzpD5yU/T1oL0NtIsLI/AAAAAAAACXk/wUb2MlOeMFQ/s320/mp002.png" width="296" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
Lấy KeyAPI tại <a href="http://www.maphim.net/p/go.html?url=https://id.tynt.com/api/key" target="_blank">đây</a> : các bạn cần phải lấy bao gồm <span style="background-color: white; color: black; display: inline ! important; float: none; font-family: 'trebuchet MS',verdana,helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: right; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Your secret API key & </span><span style="background-color: white; color: black; display: inline ! important; float: none; font-family: 'trebuchet MS',verdana,helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: right; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Your site guid </span><br />
<span style="background-color: white; color: black; display: inline ! important; float: none; font-family: 'trebuchet MS',verdana,helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: right; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br /></span><br />
3. Sử dụng ANCKeywords để tạo keywords cho site từ KeyAPI lấy được.<br />
<br />
<i>Tạo một file js vào cho đoạn mã sau upload lên Google Code.</i><br />
<br />
<br />
<div class="codeview">
//Begin code<br />
<pre style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: black; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; word-wrap: break-word;">var aseo = {
tag:"{các từ khoá liên quan đến site bạn, 4 từ, ngăn nhau bởi dấu ,}",num:"",ap:"Tên site hoặc domain",as:'Lời giới thiệu'
}
veo = "{domain},{subdomain}";
function s_write(keysite,keyapi)
{
surl = 'https://api.tynt.com/publisher/v1/keyword/inbound?site_guid='+keysite+'&api_key='+keyapi+'&hours=<b style="color: red;">24</b>&callback=ancseo';
var sr = document.createElement('script');
sr.src = surl;
document.getElementsByTagName('head')[0].appendChild(sr);
sdata = "if(document.location.protocol=='http:'){"
+"var Tynt=Tynt||[];Tynt.push('"+keysite+"');"
+'Tynt.i={"ap":"'+aseo.ap+'","as":"'+aseo.as+'","st":true};'
+"(function(){var s=document.createElement('script');"
+'s.async="async";s.type="text/javascript";'
+"s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();}";
var srr = document.createElement('script');
srr.innerHTML = sdata;
document.getElementsByTagName('head')[0].appendChild(srr);
}
function ancseo(x){
num_seo = x.data.length;
for(var i=0; i<num_seo; i++){
veo += x.data[i];
}
var meta = document.createElement('meta');
meta.name = 'keywords';
meta.content = veo.replace(/\,[\d]*/gi,",") + aseo.tag;
document.getElementsByTagName('head')[0].appendChild(meta);
aseo.tag = veo + aseo.tag;
}
function diseo(name,content){
var mt = document.createElement('meta');
mt.name = name;
mt.content = content;
document.getElementsByTagName('head')[0].appendChild(mt);
}</pre>
//Endcode
</div>
<br />
Sau khi tạo xong bạn lấy link và chèn vào phần header đoạn code sau.<br />
<br />
<div class="codeview">
<script src="//Link file của bạn"></script><br />
<script><br />
/*--- Auto SEO Update Keyword ---*/ <br />
s_write('{<span style="background-color: white; color: black; display: inline ! important; float: none; font-family: 'trebuchet MS',verdana,helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: right; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Your site guid</span>}','{<span style="background-color: white; color: black; display: inline ! important; float: none; font-family: 'trebuchet MS',verdana,helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: right; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Your secret API key</span>}');</div>
</script><br />
<br />
Số <b><span style="color: red;">24</span></b> bạn có thể thay thành các số sau: 1, 8, 12, 24. Đây là thời gian update keywords cho các bạn.<br />
<br />
Kết quả từ sau một đêm của mình các bạn có thể xem và cho nhận xét.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UuzQTipFzAM/T1oO74tGV_I/AAAAAAAACXs/EIkddBDNEGk/s1600/%E1%BA%A2nh+ch%E1%BB%A5p+m%C3%A0n+h%C3%ACnh_2012-03-09_202907.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="66" src="http://4.bp.blogspot.com/-UuzQTipFzAM/T1oO74tGV_I/AAAAAAAACXs/EIkddBDNEGk/s400/%E1%BA%A2nh+ch%E1%BB%A5p+m%C3%A0n+h%C3%ACnh_2012-03-09_202907.png" width="400" /></a></div>
<br />
<i>Chúc các bạn thành công !</i></div>Unknownnoreply@blogger.com22tag:blogger.com,1999:blog-82433928586953437.post-17812062839825433832012-02-10T04:32:00.001+07:002012-02-10T05:13:54.268+07:00ANCData - Plugin load feed Blogger version 1Đây là công cụ đặc biệt, có lẽ rất được nhiều người mong đợi. Công cụ này được mình phát triển khi rip blog. Đôi khi bạn thấy các site của pro (HelloXimo) rip chạy rất nhanh và mượt. Tại sao vậy ? Câu hỏi nằm ở <i><span style="color: #3d85c6;">function <b><span style="color: black;">showrecentposts</span></b></span>(json)</i> của js mà nhiều blog vẫn đang dùng. Đây là một hàm lọc feed (hay file .xml) của Blogger. Việc sử dụng feed sẽ đem lại tốc độ cao hơn so với dùng biến có sẵn mà mình đã giới thiệu ở một số bài viết trước.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-mU2UasnG4DY/TzQ-VDS1saI/AAAAAAAACUM/U-cg94hIXpc/s1600/Rss-feeds-subscribers+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="http://4.bp.blogspot.com/-mU2UasnG4DY/TzQ-VDS1saI/AAAAAAAACUM/U-cg94hIXpc/s320/Rss-feeds-subscribers+copy.jpg" width="320" /></a></div>
<br />
<br />
<br />
<div style="text-align: center;">
<b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;"><a href="http://play.maphim.net/z/run.html" target="_blank">DEMO</a></b></div>
<br />
<i>(ViewSource Demo để xem code)</i><br />
<br />
Nhưng đặc điểm bất tiện của hàm này là với mỗi lần callback <i><span style="color: #3d85c6;"><b><span style="color: black;">showrecentposts </span></b></span></i><span style="color: #3d85c6;"><span style="color: black;">trong đoạn script ví dụ sau.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"><br /></span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">
</span></span><br />
<div class="codeview">
<span style="color: #3d85c6;"><span style="color: black;"><script src="http://www.maphim.net/feeds/posts/default/-/Phim chiếu rạp?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=<b><span style="color: #3d85c6;"><span style="color: black;">showrecentposts </span></span></b><span style="color: #3d85c6;"><span style="color: black;"></span></span><span style="color: #3d85c6;"><span style="color: black;">"><br /></script>
</span></span></span></span></div>
<br />
<span style="color: #3d85c6;"><span style="color: black;"><br /></span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">Ta lại phải đổi tên hàm callback để lấy feed cho một tag mới. Nói khác đi, chúng ta lại phải copy y sì một hàm </span></span><i><span style="color: #3d85c6;"><b><span style="color: black;">showrecentposts</span></b></span></i>2, <i><span style="color: #3d85c6;"><b><span style="color: black;">showrecentpost3, </span></b></span></i><i><span style="color: #3d85c6;"><b><span style="color: black;">showrecentposts</span></b></span></i>4 ...v.vv cho các tag mới.<br />
<br />
<span style="color: #3d85c6;"><span style="color: black;">Vậy, ANCData là gì ? Chắc bạn cũng đoán ra từ VD trên. Nó là một plugin load feed. Nhưng nó chỉ là một hàm <i>callback </i>duy nhất : <b><i>ancdata. </i></b>Có vẻ với những ai chưa nghe về load feed sẽ rất khó mường tượng. Nhưng bạn chỉ cần sử dụng ANCData sẽ không cần phải vọc nhiều.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"><br /></span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">* Thuộc tính. </span></span><br />
<div class="codeview">
<span style="color: #3d85c6;"><span style="color: black;"><br /></span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">title : tiêu đề bài viết.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">url : link bài viết.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">label: nhãn bài viết.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">img: ảnh bài viết</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"> - img.f : file ảnh đầu tiên của bài viết kich thươc full khổ.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"> - img.i72: file ảnh mặc định của google nếu bạn up lên, hoặc sử dụng các sản phẩm ảnh của google.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">content: nội dung toàn bộ bài viết.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">snippet : nội dung tóm tắt gồm 120 ký tự.</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">date: ngày tháng năm gửi bài</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"> - date.d : ngày</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"> - date.m : tháng</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"> - date.y : năm</span></span><br />
<span style="color: #3d85c6;"><span style="color: black;"></span></span><br />
<span style="color: #3d85c6;"><span style="color: black;">author: tác giả gửi bài viết.</span></span>
</div>
<br />
<br />
* Sử dụng :<br />
<br />
B1: Bạn chỉ cần chèn đoạn mã sau vào sau thẻ <head> hoặc sau <body><br />
<br />
<div class="codeview">
<script src="http://anhnc.googlecode.com/svn/trunk/ANC/data/feed.js"></script>
<script><br />
anc.home ="domain của bạn"; // (mặc định là maphim.net)<br />
anc.post = sô lượng tối đa ; // (mặc định là 100) <br />
anc.img.no = "ảnh hiển thị khi bài viết không có ảnh"; // mặc định là ảnh của maphim.net<br />
</script></div>
<br />
B2: Giờ bạn sẽ sử dụng ANCData một cách dễ dàng.<br />
<br />
<br />
Giả sử mình muốn tạo ra một module có cấu trúc như hình sau.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-EeJQgzqcFS0/TzQ4HUM2byI/AAAAAAAACT8/F6RvJm2Xaeg/s1600/v1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="http://4.bp.blogspot.com/-EeJQgzqcFS0/TzQ4HUM2byI/AAAAAAAACT8/F6RvJm2Xaeg/s320/v1.PNG" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-FV4jyq8qFJU/TzQ4IcttqdI/AAAAAAAACUA/lTFNdXjfyd4/s1600/v2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="54" src="http://2.bp.blogspot.com/-FV4jyq8qFJU/TzQ4IcttqdI/AAAAAAAACUA/lTFNdXjfyd4/s320/v2.PNG" width="320" /></a></div>
<br />
<br />
Mình chỉ cần viết như sau :<br />
<br />
<div class="codeview">
<div class="box"><br />
<h3>Phim hành động mới</h3><br />
<div class="bcontent"><br />
<script src="http://www.maphim.net/feeds/posts/default/-/Hành động?max-results=4&amp;orderby=published&amp;alt=json-in-script&amp;callback=ancdata"><br />
</script><br />
<script><br />
<br />
for (var i =0; i< anc.max; i++){<br />
document.write('<li><a href='+anc.url[i]+'>'+anc.title[i]+'</a></li>');<br />
}<br />
</script><br />
</div><br />
</div><br />
<br /></div>
Không chỉ dừng ở đó, bạn có thể tạo nhiều tag giống nhau ngoài tag Hành động kể trên, chỉ với một hàm callback duy nhất. Đây chỉ là VD đơn giản sử dụng ANCData, bạn có thể tạo riêng cho mình các modum hợp lý từ các thuộc tính mình đã đưa.<br />
<br />
Version 1 chưa áp dụng cho comment. Sẽ tiếp tục phát triển trong các phiên bản sau nếu có thời gian.<br />
<br />
<br />
Note: Để gọi các biến trong thuộc tính, bạn cần thêm trước <b>anc.thuoctinh</b><br />
Muốn lấy một tag trong list tag bạn chỉ cần viết. <b>anc.label.split(',')[vitri tag can lay]</b><br />
<br />
<i>Chúc các bạn thành công !</i>Unknownnoreply@blogger.com19tag:blogger.com,1999:blog-82433928586953437.post-8879832515202907922012-02-06T04:48:00.000+07:002012-03-26T02:38:42.025+07:00Đưa Radio vào Blog của bạn (Yêu cầu)<div dir="ltr" style="text-align: left;" trbidi="on">
Đáp ứng yêu cầu của <a href="http://www.blogger.com/profile/10574656972775244322"><b>giáo xứ phú giáo</b></a>, trong nhưng ngày đầu năm này có lẽ anh Dũng cũng bận cho việc ... Va lung tung .. Không có thời gian chăm sóc blog được. Còn riêng mình cũng tung hoành khắp nơi, bận ăn, bận uống bù hết cả đầu. Đọc thấy yêu cầu này phù hợp với khả năng, giúp bạn một chút chút. ..<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-MELXwZ-0_aQ/Ty75Jd4ky3I/AAAAAAAACT0/Ww2N4bOktwo/s1600/Radio23h.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" border="0" height="268" src="http://3.bp.blogspot.com/-MELXwZ-0_aQ/Ty75Jd4ky3I/AAAAAAAACT0/Ww2N4bOktwo/s400/Radio23h.jpg" title="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" width="400" /></a></div>
<br />
<br />
<div style="text-align: center;">
<b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;"><a href="http://play.maphim.net/z/radio23h.html" target="_blank">DEMO</a></b></div>
<br />
Style CSS :<br />
<br />
<div class="codeview">
<style><br />
.radio{padding-top: 5px; border: 1px dashed #cccccc; width: 430px; position: fixed; bottom: 20px; right: 0px;}<br />
li{list-style:none;float:left; margin-left: 10px; padding: 5px;}<br />
li:hover{background-color: #494949; box-shadow: 1px 0px 3px;}<br />
li:active{box-shadow: 2px 1px 3px;}<br />
<br />
li.p{margin-left:30px; color: green; box-shadow: 2px 0px 3px 1px;}<br />
li.p:hover{background:none;}<br />
li.p span{text-decoration:blink;}<br />
<br />
a{text-decoration:none; color: #888888; font-size: 12px;}<br />
#player{margin-top:20px;}<br />
</style></div>
<br />
Đài của mình..<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-q3I9qyrtgro/Ty73txRJ4wI/AAAAAAAACTs/CjRuWQvFca0/s1600/Rdio.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" border="0" height="49" src="http://2.bp.blogspot.com/-q3I9qyrtgro/Ty73txRJ4wI/AAAAAAAACTs/CjRuWQvFca0/s320/Rdio.PNG" title="Maphim.Net | Xem phim Online, xem phim han, phim 47, tron bo" width="320" /></a></div>
<br />
<div class="codeview">
<div class="channel"><br />
<li><a href="javascript:radio('vov1')">VOV1</a></li><br />
<li><a href="javascript:radio('vov2')">VOV2</a></li><br />
<li><a href="javascript:radio('vov3')">VOV3</a></li><br />
<li><a href="javascript:radio('vov4')">VOV4</a></li><br />
<li><a href="javascript:radio('vov5')">VOV5</a></li><br />
<li id="pl" class="p"></li><br />
</div><br />
<div id="player">Radio23h - Blog Radio, chia sẻ xúc cảm cuộc sống</div><br />
</div><br />
<br /></div>
JavaScript<br />
<br />
<div class="codeview">
<script><br />
function radio(channel){<br />
var data = '<embed width="430" height="24" flashvars="&amp;file='+channel+'.flv&amp;streamer=rtmp://123.30.50.46:8080/live&amp;skin=&amp;autostart=true" allowfullscreen="true" allowscriptaccess="always" quality="high" name="mpl" id="mpl" style="undefined" src="http://player.longtailvideo.com/player5.9.swf" type="application/x-shockwave-flash">';<br />
<br />
document.getElementById("player").innerHTML = data;<br />
document.getElementById("pl").innerHTML = channel+" playing<span>...</span>";<br />
}<br />
radio('vov3'); <br />
</script><br />
<br />
<br /></div>
radio('vov3') ==> là đài mặc định bạn chạy đầu tiên.<br />
<br />
<i>Chúc các bạn thành công !</i></div>Unknownnoreply@blogger.com23tag:blogger.com,1999:blog-82433928586953437.post-13692070689706877012012-01-04T12:00:00.000+07:002012-01-04T12:51:13.685+07:00[Updated] K14 - Pro Menu (với hiệu ứng prodown)<div style="text-align: justify;">Lấy ý tưởng từ việc thực hiện demo cho bài viết <a href="http://www.fandung.com/2009/03/code-tao-menu-thanh-menu-ngang.html">Tạo Menu Thanh menu ngang có sổ dọc xuống</a> mình dự định sẽ updated thủ thuật lên bằng việc tạo các giao diện khác nhau cho menu khi xem ở các trang khác nhau, ví dụ như các trang label. Nhưng sau đó mình nhớ đến kênh14 cũng có menu như vậy (chỉ khác là không có dropdown) mà giao diện lại đẹp nữa, nên mình quyết định Rip menu này. Và ở bài này menu sẽ không có hiệu ứng dropdown, mình dự định sẽ thêm hiệu ứng dropdown trong thời gian tới.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-ZcdjRwb9pCY/TvsglBVIHqI/AAAAAAAACNc/bybe3Z4rImU/s1600/k14-promenu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="250" src="http://2.bp.blogspot.com/-ZcdjRwb9pCY/TvsglBVIHqI/AAAAAAAACNc/bybe3Z4rImU/s400/k14-promenu.png" style="border: 1px solid #418539; padding: 2px;" width="300" /></a></div><br />
<div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://demo.fandung.com/search/label/Label3?demo=pro_menu" target="_blank">DEMO</a></b></div><br />
<div style="text-align: center;"><i>Hình ảnh minh họa :</i></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-u-V0ldw3tlY/Tvsm6u4WiYI/AAAAAAAACNo/KeaWkdLQxVQ/s1600/promenu-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="157" src="http://2.bp.blogspot.com/-u-V0ldw3tlY/Tvsm6u4WiYI/AAAAAAAACNo/KeaWkdLQxVQ/s400/promenu-2.png" style="border: 1px solid #418539; padding: 2px;" width="400" /></a></div><br />
<div style="background: none repeat scroll 0% 0% rgb(239, 239, 239); border: 1px solid rgb(204, 204, 204); color: red; padding: 10px; text-align: center;"><i><b>Updated:</b> Đã cập nhật hiệu ứng sổ dọc cho menu, các bạn có thể xem ở bên dưới</i></div><br />
Do làm biếng design giao diện cho nó, nên mình lấy hình nên bên kênh 14 về rồi fix lại để giới thiệu cho mọi người. Và sau đây là 1 số tính năng của nó :<br />
- Tự động thay đổi giao diện của menu cho các trang định sẵn.<br />
- có hiệu ứng trang hiện hành (current) trên menu.<br />
- có 6 kiểu giao diện cho các lựa chọn để thay đổi.<br />
<br />
<b><span style="color: blue;">Sau đây là các bước thực hiện :</span></b><br />
- Tạo 1 widget <b>HTML/javascript</b> ở nơi muốn đặt menu <i>(tốt nhất là trên <b>header</b> của blog)</i>, sau đó dán đoạn code bên dưới vào :<br />
<div class="codeview"><style type="text/css"><br />
#promenu ul li a:hover {text-decoration:none;}<br />
#promenu {<br />
background-repeat: repeat-x;<br />
background-image: url(http://2.bp.blogspot.com/-CAiNwOD8ZxA/Tv31TJIe4kI/AAAAAAAACN0/7cd5Z_NcdV4/s400/1-6-bg.png);<br />
width: 100%;<br />
height: 32px;<br />
}<br />
.menu {<br />
list-style: none;<br />
width: 100%;<br />
margin: auto!important;<br />
}<br />
.menu li {<br />
float: left;<br />
text-align: center;<br />
padding:0!important;<br />
}<br />
.menu li a {<br />
color: white;<br />
}<br />
.menu .active, .menu li:hover {<br />
background-position: 0 -34px;<br />
float: left;<br />
}<br />
.menu .active span, .menu span:hover {<br />
background-position: 100% -34px;<br />
float: left;<br />
line-height: 30px;<br />
height: 30px;<br />
}<br />
.menu li a span {<br />
font: 12px/31px Tahoma;<br />
font-weight: 700;<br />
display: block;<br />
text-align: center;<br />
padding: 0 8px 0 9px;<br />
}<br />
.menusep {<br />
background-position: 0 0;<br />
height: 32px;<br />
line-height: 32px;<br />
width: 2px;<br />
}<br />
</style><br />
<br />
<script type="text/javascript"><br />
//<![CDATA[<br />
var <b><span style="color: #3f3f3f;">style1</span></b>=["0px","http://2.bp.blogspot.com/-jD-t7t4sj2o/Tvqdg0eQkKI/AAAAAAAACME/tLwUVbK60qM/s318/style1-sp.png"];<br />
var <b><span style="color: #a02e0b;">style2</span></b>=["-40px","http://2.bp.blogspot.com/-f16OTLOYr8E/TvqdhFEeJlI/AAAAAAAACMA/Yu09XevCqHs/s318/style2-sp.png"];<br />
var <b><span style="color: #bb1d68;">style3</span></b>=["-80px","http://2.bp.blogspot.com/-dEyh5KIz8fw/TvqdmGUVEeI/AAAAAAAACNE/e6kcm5Yp0dM/s318/style3-sp.png"];<br />
var <b><span style="color: #3e8237;">style4</span></b>=["-120px","http://2.bp.blogspot.com/-2xZHcRiVK7s/TvqdiExbcqI/AAAAAAAACMg/iOGIMpuWO4c/s318/style4-sp.png"];<br />
var <b><span style="color: #026984;">style5</span></b>=["-160px","http://2.bp.blogspot.com/-GGrN1FfltwU/Tvqdje5FCfI/AAAAAAAACMs/fRlPK4rFUns/s318/style5-sp.png"];<br />
var <b><span style="color: #69411e;">style6</span></b>=["-200px","http://2.bp.blogspot.com/-OrAhQGI__is/TvqdkKrM4kI/AAAAAAAACM8/dFaWRKt9Kns/s318/style6-sp.png"];<br />
<br />
var m0=["http://demo.fandung.com","Home","home_id"];<br />
var m1=["link_menu1","Menu1","m_id1"];<br />
var m2=["link_menu2","Menu2","m_id2"];<br />
var m3=["link_menu3","Menu3","m_id3"];<br />
var m4=["link_menu4","Menu4","m_id4"];<br />
var m5=["link_menu5","Menu5","m_id5"];<br />
var m6=["link_menu6","Menu6","m_id6"];<br />
<br />
var ttmenu = [m0,m1,m2,m3,m4,m5,m6];<br />
<br />
var n=ttmenu.length;<br />
var list_menu=[];<br />
var list_active=[];<br />
var c_menu='';<br />
var m_homepage='http://demo.fandung.com';<br />
var h_cond=m_homepage+'/search';<br />
<br />
var active_cond = location.href;<br />
var home_cond=active_cond.split("?")[0];<br />
<br />
var bg_pos='';<br />
var sp_img='';<br />
<br />
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=<b><span style="color: #bb1d68;">style3</span></b>[0];sp_img=<b><span style="color: #bb1d68;">style3</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=<b><span style="color: #3e8237;">style4</span></b>[0];sp_img=<b><span style="color: #3e8237;">style4</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=<b><span style="color: #026984;">style5</span></b>[0];sp_img=<b><span style="color: #026984;">style5</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=<b><span style="color: #69411e;">style6</span></b>[0];sp_img=<b><span style="color: #69411e;">style6</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
else {bg_pos=<b><span style="color: #3f3f3f;">style1</span></b>[0];sp_img=<b><span style="color: #3f3f3f;">style1</span></b>[1];}<br />
<br />
var mcss = document.createElement('style');<br />
mcss.type = 'text/css';<br />
mcss.innerHTML = '#promenu {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';<br />
document.body.appendChild(mcss);<br />
<br />
c_menu +='<div id="promenu"><ul class="menu">';<br />
<br />
for (var i=0;i<n;i++) {<br />
<br />
if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}<br />
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}<br />
<br />
list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';<br />
c_menu +=list_menu[i];<br />
if (i<n-1) {c_menu +='<li class="menusep"> </li>';} <br />
}<br />
c_menu +='</ul></div>';<br />
document.write(c_menu);<br />
<br />
//]]><br />
</script></div><br />
<b><span style="color: blue;">Một vài hướng dẫn :</span></b><br />
- Việc đầu tiên là thay <b>http://demo.fandung.com</b> thành tên miền của blog bạn, nhớ là không có dấu (/) theo sau tên miền.<br />
- Để thêm menu, bớt menu, thay đổi tên hiển thị của menu, thay đổi link liên kết của menu,... các bạn chỉnh sửa ở đoạn code như bên dưới :<br />
<div class="codeview">...<br />
...<br />
var m0=["http://demo.fandung.com","Home","home_id"];<br />
var m1=["link_menu1","Menu1","m_id1"];<br />
var m2=["link_menu2","Menu2","m_id2"];<br />
var m3=["link_menu3","Menu3","m_id3"];<br />
var m4=["link_menu4","Menu4","m_id4"];<br />
var m5=["link_menu5","Menu5","m_id5"];<br />
var m6=["link_menu6","Menu6","m_id6"];<br />
<br />
var ttmenu = [m0,m1,m2,m3,m4,m5,m6];<br />
...<br />
...</div>- <b>http://demo.fandung.com</b> thay bằng địa chỉ trang chủ của blog bạn<br />
- <b>link_menu1, link_menu2, ...</b> là đia chỉ liên kết của các menu.<br />
- <b>Menu1, Menu2, ...</b> là tên hiển thị của các menu.<br />
- nếu muốn thêm nhiều menu nữa thì các bạn thêm code tương tự như bên dưới :<br />
<div class="codeview">...<br />
...<br />
var m0=["http://demo.fandung.com","Home","home_id"];<br />
var m1=["link_menu1","Menu1","m_id1"];<br />
var m2=["link_menu2","Menu2","m_id2"];<br />
var m3=["link_menu3","Menu3","m_id3"];<br />
var m4=["link_menu4","Menu4","m_id4"];<br />
var m5=["link_menu5","Menu5","m_id5"];<br />
var m6=["link_menu6","Menu6","m_id6"];<br />
<span style="background-color: lime;">var m7=["link_menu7","Menu7","m_id7"];<br />
var m8=["link_menu8","Menu8","m_id8"];</span><br />
<br />
var ttmenu = [m0,m1,m2,m3,m4,m5,m6<span style="background-color: lime;">,m7,m8</span>];<br />
...<br />
...</div>- để tùy chọn style cho menu ở mỗi trang, các bạn chỉnh sửa ở đoạn code bên dưới :<br />
<div class="codeview">...<br />
...<br />
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=<b><span style="color: #bb1d68;">style3</span></b>[0];sp_img=<b><span style="color: #bb1d68;">style3</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=<b><span style="color: #3e8237;">style4</span></b>[0];sp_img=<b><span style="color: #3e8237;">style4</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=<b><span style="color: #026984;">style5</span></b>[0];sp_img=<b><span style="color: #026984;">style5</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=<b><span style="color: #69411e;">style6</span></b>[0];sp_img=<b><span style="color: #69411e;">style6</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
else {bg_pos=<b><span style="color: #3f3f3f;">style1</span></b>[0];sp_img=<b><span style="color: #3f3f3f;">style1</span></b>[1];}<br />
...<br />
...</div>- <b>ttmenu[1][0], ttmenu[2][0], ..., ttmenu[6][0]</b> ; đây là các phần tử trong mảng 2 chiều <b>ttmenu</b>, tương ứng với địa chỉ liên kết của các menu :<b> Menu1, Menu2, ..., Menu6</b><br />
- ở trên <b>menu0</b>, tức là menu <b>HOME</b> mình cho style mặc định là <b>style1</b>. cùng style với các trang liên kết không có trong menu <i>(ví dụ các trang archive hoặc trang bài viết, ...)</i> , hoặc các liên kết không được chọn style để hiển thị.<br />
- code trên sẽ được hình dung như bên dưới :<br />
<div class="codeview">Menu0 ------ style1<br />
Menu1 ------ style2<br />
Menu2 ------ style3<br />
Menu3 ------ style4<br />
Menu4 ------ style5<br />
Menu5 ------ style6<br />
Menu6 ------ style2<br />
Trang khác ------ style1</div>- Nếu muốn thay đổi style cho các trang, các bạn chỉ cần đổi tên <i><b>style1, style2,...</b></i> thành các style khác là được. tức là các vị trí trong code bên dưới :<br />
<div class="codeview">...<br />
...<br />
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=<span style="background-color: lime;">style2</span>[0];sp_img=<span style="background-color: lime;">style2</span>[1];}<br />
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=<span style="background-color: lime;">style3</span>[0];sp_img=<span style="background-color: lime;">style3</span>[1];}<br />
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=<span style="background-color: lime;">style4</span>[0];sp_img=<span style="background-color: lime;">style4</span>[1];}<br />
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=<span style="background-color: lime;">style5</span>[0];sp_img=<span style="background-color: lime;">style5</span>[1];}<br />
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=<span style="background-color: lime;">style6</span>[0];sp_img=<span style="background-color: lime;">style6</span>[1];}<br />
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=<span style="background-color: lime;">style2</span>[0];sp_img=<span style="background-color: lime;">style2</span>[1];}<br />
else {bg_pos=<span style="background-color: lime;">style1</span>[0];sp_img=<span style="background-color: lime;">style1</span>[1];}<br />
...<br />
...</div><br />
- Nếu như có nhiều menu thì các bạn cứ thêm code như bên dưới để chọn style cho nó :<br />
<div class="codeview">...<br />
...<br />
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=<b><span style="color: #bb1d68;">style3</span></b>[0];sp_img=<b><span style="color: #bb1d68;">style3</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=<b><span style="color: #3e8237;">style4</span></b>[0];sp_img=<b><span style="color: #3e8237;">style4</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=<b><span style="color: #026984;">style5</span></b>[0];sp_img=<b><span style="color: #026984;">style5</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=<b><span style="color: #69411e;">style6</span></b>[0];sp_img=<b><span style="color: #69411e;">style6</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
<span style="background-color: lime;">else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=<b><span style="color: #bb1d68;">style3</span></b>[0];sp_img=<b><span style="color: #bb1d68;">style3</span></b>[1];}<br />
else if (active_cond.indexOf(ttmenu[8][0])!=-1) {bg_pos=<b><span style="color: #3e8237;">style4</span></b>[0];sp_img=<b><span style="color: #3e8237;">style4</span></b>[1];}</span><br />
else {bg_pos=<b><span style="color: #3f3f3f;">style1</span></b>[0];sp_img=<b><span style="color: #3f3f3f;">style1</span></b>[1];}<br />
...<br />
...</div>- lưu ý :<b> ttmenu[7][0]</b>, và <b>ttmenu[8][0]</b> là liên kết của các <b>Menu7</b>, và <b>Menu8</b>. <br />
- nếu muốn chỉ 1 trang nào đó có giao diện đặc biệt khác với các trang còn lại <i>(ở đây mình ví dụ là trang <b>Menu1</b>)</i> thì đoạn code ở trên sẽ chỉ còn như bên dưới :<br />
<div class="codeview">...<br />
...<br />
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=<b><span style="color: #a02e0b;">style2</span></b>[0];sp_img=<b><span style="color: #a02e0b;">style2</span></b>[1];}<br />
else {bg_pos=<b><span style="color: #3f3f3f;">style1</span></b>[0];sp_img=<b><span style="color: #3f3f3f;">style1</span></b>[1];}<br />
...<br />
...</div>- Đoạn code trên có nghĩa là chỉ có trang <b>Menu1</b> là có giao diện riêng biệt là <b>Style2</b>, còn các trang khác sẽ có giao diện <b>Style1</b>.<br />
<br />
<i>Như vậy mình hướng dẫn đã xong. các bạn cứ test thử, nếu có trục trặc gì mình sẽ fix lại bài viết và cập nhật thêm hướng dẫn.</i><br />
<br />
<div style="color: red; text-align: center;"><b><span style="font-size: x-large;">----- UPDATED -----</span></b></div><div style="color: blue; text-align: center;"><span style="font-size: large;"><b>K14 - Promenu (với hiệu ứng sổ dọc)</b></span></div>- ở bản update này, mình sẽ cập nhật thêm tính năng thêm submenu cho menu chính. Tính năng này mình kết hợp từ bài viết "Tạo menu nằm ngang với hiệu ứng sổ dọc".<br />
- Để thực hiện việc cập nhật này, các bạn phải xem lại bài viết <a href="http://www.fandung.com/2009/03/code-tao-menu-thanh-menu-ngang.html" target="_blank">Tạo Menu Thanh menu ngang có sổ dọc xuống</a><br />
<br />
<div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://demo.fandung.com/search/label/Label3?demo=pro_menu" target="_blank">DEMO</a></b></div><div style="text-align: center;"><br />
<i>Hình ảnh minh họa :</i></div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-qxgbC5SJU80/TwPkmgj8TlI/AAAAAAAACOQ/RyXOAb9FaF8/s1600/k14-updated.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="112" src="http://4.bp.blogspot.com/-qxgbC5SJU80/TwPkmgj8TlI/AAAAAAAACOQ/RyXOAb9FaF8/s400/k14-updated.jpg" style="border: 1px solid #418539; padding: 2px;" width="400" /></a></div><br />
- Sau đây là code mẫu của thủ thuật đã updated, các bạn thực hiện theo hướng dẫn của bài này và bài <b>Tạo Menu Thanh menu ngang có sổ dọc xuống</b> để có thể chỉnh sửa lại từ code mẫu :<br />
<div class="codeview"><script src="http://fandung.googlecode.com/svn/trunk/js/dropdown2.js" type="text/javascript"></script><br />
<br />
<style type="text/css"><br />
#promenu ul li a:hover {text-decoration:none;}<br />
#promenu {<br />
background-repeat: repeat-x;<br />
background-image: url(http://2.bp.blogspot.com/-CAiNwOD8ZxA/Tv31TJIe4kI/AAAAAAAACN0/7cd5Z_NcdV4/s400/1-6-bg.png);<br />
width: 100%;<br />
height: 32px;<br />
}<br />
.menu {<br />
list-style: none;<br />
width: 100%;<br />
margin: auto!important;<br />
}<br />
.menu li {<br />
float: left;<br />
text-align: center;<br />
padding:0!important;<br />
}<br />
.menu li a {<br />
color: white;<br />
height:30px;<br />
display:block;<br />
}<br />
.menu .active, .menu li:hover {<br />
background-position: 0 -34px;<br />
float: left;<br />
}<br />
<br />
.menu .active span, .menu span:hover {<br />
background-position: 100% -34px;<br />
float: left;<br />
line-height: 30px;<br />
height: 30px;<br />
}<br />
<br />
.menu li a span {<br />
font: 12px/31px Tahoma;<br />
font-weight: 700;<br />
display: block;<br />
text-align: center;<br />
padding: 0 8px 0 9px;<br />
}<br />
.menusep {<br />
background-position: 0 0;<br />
height: 32px;<br />
line-height: 32px;<br />
width: 2px;<br />
}<br />
.promenu_sub {<br />
background-repeat: repeat-x;<br />
background-image: url(http://2.bp.blogspot.com/-uScedrU5qn8/TwPW0bQZQmI/AAAAAAAACOE/YYAy3pE_uQQ/s240/1-6-bg_sub2.png);<br />
margin-top:1px;<br />
padding:1px;<br />
color: #fff;;<br />
margin: 1 1px;<br />
padding: 7px 12px;<br />
font-weight:bold;<br />
font-family:Arial, Helvetica, sans-serif;<br />
font-size:12px;<br />
cursor:pointer;<br />
border-top:1px solid #ededed;<br />
}<br />
</style><br />
<br />
<script type="text/javascript"><br />
//<![CDATA[<br />
var style1=["0px","http://2.bp.blogspot.com/-jD-t7t4sj2o/Tvqdg0eQkKI/AAAAAAAACME/tLwUVbK60qM/s318/style1-sp.png"];<br />
<br />
var style2=["-40px","http://2.bp.blogspot.com/-f16OTLOYr8E/TvqdhFEeJlI/AAAAAAAACMA/Yu09XevCqHs/s318/style2-sp.png"];<br />
<br />
var style3=["-80px","http://2.bp.blogspot.com/-dEyh5KIz8fw/TvqdmGUVEeI/AAAAAAAACNE/e6kcm5Yp0dM/s318/style3-sp.png"];<br />
<br />
var style4=["-120px","http://2.bp.blogspot.com/-2xZHcRiVK7s/TvqdiExbcqI/AAAAAAAACMg/iOGIMpuWO4c/s318/style4-sp.png"];<br />
<br />
var style5=["-160px","http://2.bp.blogspot.com/-GGrN1FfltwU/Tvqdje5FCfI/AAAAAAAACMs/fRlPK4rFUns/s318/style5-sp.png"];<br />
<br />
var style6=["-200px","http://2.bp.blogspot.com/-OrAhQGI__is/TvqdkKrM4kI/AAAAAAAACM8/dFaWRKt9Kns/s318/style6-sp.png"];<br />
<br />
var m0=["http://demo.fandung.com","Home","home_id"];<br />
var m1=["/search/label/Label1","Label1","id1"];<br />
var m2=["/search/label/Label2","Label2","id2"];<br />
var m3=["/search/label/Label3","Label3","id3"];<br />
var m4=["/search/label/Label4","Label4","id4"];<br />
var m5=["/search/label/Label5","Label5","id5"];<br />
var m6=["/search/label/Label6","Label6","id6"];<br />
var m7=["/search/label/Label7","Label7","id7"];<br />
var m8=["/search/label/Label8","Label8","id8"];<br />
var m9=["/search/label/Label9","Label9","id9"];<br />
<br />
var ttmenu = [m0,m1,m2,m3,m4,m5,m6,m7,m8,m9];<br />
var n=ttmenu.length;<br />
var list_menu=[];<br />
var list_active=[];<br />
var c_menu='';<br />
var m_homepage='http://demo.fandung.com/';<br />
var h_cond=m_homepage+'search';<br />
<br />
var active_cond = location.href;<br />
var home_cond=active_cond.split("?")[0];<br />
<br />
var bg_pos='';<br />
var sp_img='';<br />
<br />
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}<br />
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}<br />
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}<br />
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}<br />
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}<br />
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}<br />
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}<br />
else {bg_pos=style1[0];sp_img=style1[1];}<br />
<br />
var mcss = document.createElement('style');<br />
mcss.type = 'text/css';<br />
mcss.innerHTML = '#promenu, .promenu_sub {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';<br />
document.body.appendChild(mcss);<br />
<br />
// submenu<br />
function otab(){document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}<br />
<br />
function submn(submn_link,submn_text){ document.write('<tr><td onmouseover="this.style.background=\'url(http://2.bp.blogspot.com/-CAiNwOD8ZxA/Tv31TJIe4kI/AAAAAAAACN0/7cd5Z_NcdV4/s400/1-6-bg.png) repeat-x 0 '+bg_pos+'\'" onmouseout="this.style.background=\'url(http://2.bp.blogspot.com/-uScedrU5qn8/TwPW0bQZQmI/AAAAAAAACOE/YYAy3pE_uQQ/s240/1-6-bg_sub2.png) repeat-x 0 '+bg_pos+'\'" class="promenu_sub" onclick="window.location.href=\''+submn_link+'\'">'+submn_text+'</td></tr>');}<br />
<br />
function ctab(){document.write('<\/table>');}<br />
<br />
function otab(child_id){document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}<br />
<br />
//submenu<br />
<br />
c_menu +='<div id="promenu"><ul class="menu">';<br />
<br />
for (var i=0;i<n;i++) {<br />
<br />
if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}<br />
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}<br />
<br />
list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';<br />
c_menu +=list_menu[i];<br />
if (i<n-1) {c_menu +='<li class="menusep"> </li>';} <br />
}<br />
c_menu +='</ul></div>';<br />
document.write(c_menu);<br />
<br />
//]]><br />
</script><br />
<br />
<script type="text/javascript"><br />
otab("id1_child");<br />
submn('link_submenu1.1','Submenu 1.1');<br />
submn('link_submenu1.2','Submenu 1.2');<br />
ctab();<br />
at_attach("id1", "id1_child", "hover", "y", "pointer");<br />
<br />
otab("id2_child");<br />
submn('link_submenu2.1','Submenu 2.1');<br />
ctab();<br />
at_attach("id2", "id2_child", "hover", "y", "pointer");<br />
<br />
otab("id3_child");<br />
submn('link_submenu3.1','Submenu 3.1');<br />
ctab();<br />
at_attach("id3", "id3_child", "hover", "y", "pointer");<br />
<br />
otab("id4_child");<br />
submn('link_submenu4.1','Submenu 4.1');<br />
submn('link_submenu4.2','Submenu 4.2');<br />
submn('link_submenu4.3','Submenu 4.3');<br />
submn('link_submenu4.4','Submenu 4.4');<br />
submn('link_submenu4.5','Submenu 4.5');<br />
submn('link_submenu4.6','Submenu 4.6');<br />
ctab();<br />
at_attach("id4", "id4_child", "hover", "y", "pointer");<br />
<br />
otab("id5_child");<br />
submn('link_submenu5.1','Submenu 5.1');<br />
submn('link_submenu5.2','Submenu 5.2');<br />
ctab();<br />
at_attach("id5", "id5_child", "hover", "y", "pointer");<br />
<br />
otab("id6_child");<br />
submn('link_submenu6.1','Submenu 6.1');<br />
ctab();<br />
at_attach("id6", "id6_child", "hover", "y", "pointer");<br />
<br />
otab("id7_child");<br />
submn('link_submenu7.1','Submenu 7.1');<br />
submn('link_submenu7.2','Submenu 7.2');<br />
submn('link_submenu7.3','Submenu 7.3');<br />
ctab();<br />
at_attach("id7", "id7_child", "hover", "y", "pointer");<br />
<br />
otab("id8_child");<br />
submn('link_submenu8.1','Submenu 8.1');<br />
submn('link_submenu8.2','Submenu 8.2');<br />
submn('link_submenu8.3','Submenu 8.3');<br />
submn('link_submenu8.4','Submenu 8.4');<br />
submn('link_submenu8.5','Submenu 8.5');<br />
submn('link_submenu8.6','Submenu 8.6');<br />
submn('link_submenu8.7','Submenu 8.7');<br />
ctab();<br />
at_attach("id8", "id8_child", "hover", "y", "pointer");<br />
</script></div><div style="color: red;"><i>- bản updated vẫn chưa hoàn thiện ở phần hiện hiệu ứng thay đổi style cho menu ở các trang submenu, mình sẽ fix sớm khi có thể. </i></div>Phan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.com48tag:blogger.com,1999:blog-82433928586953437.post-63676475240020663222011-12-30T14:56:00.002+07:002011-12-30T15:07:19.250+07:00Chèn Chabox Gtalk vào BlogSpot.<div dir="ltr" style="text-align: left;" trbidi="on">
Nếu site bạn rất nhiều bạn bè có tài khoản Google, tại sao không thử chèn thêm một ChatBox để tăng tình năng trò chuyện kết bạn cho Blog. Việc đơn giản phải làm là bạn chỉ cần nhúng một iframe của Google cho sẵn.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-F02qW6CVPB0/Tv1xMIFYERI/AAAAAAAAB5U/SCCFnr1wVq8/s1600/dailymix28214_371fd.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/-F02qW6CVPB0/Tv1xMIFYERI/AAAAAAAAB5U/SCCFnr1wVq8/s320/dailymix28214_371fd.jpg" width="239" /></a></div>
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://www.tv.maphim.net/" target="_blank">DEMO</a></b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-jpXsvKDx-rA/Tv1tx4xnZMI/AAAAAAAAB40/SF3z8QYpo-k/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://3.bp.blogspot.com/-jpXsvKDx-rA/Tv1tx4xnZMI/AAAAAAAAB40/SF3z8QYpo-k/s320/1.PNG" width="320" /></a></div>
<br />
Các bạn coppy và cài đặt nhé. Và nhớ chỉnh lại CSS. của mình.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-yVonx6kMB90/Tv1t0ny_yKI/AAAAAAAAB48/9XJncB_AKk0/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://4.bp.blogspot.com/-yVonx6kMB90/Tv1t0ny_yKI/AAAAAAAAB48/9XJncB_AKk0/s320/2.PNG" width="320" /></a></div>
<br />
<div class="codeview">
<style><br />
#chat{position:fixed; top:0px; left:1px;}<br />
.bt{background:url('http://cdn1.iconfinder.com/data/icons/androiddevicons/dialog.png') no-repeat; width: 48px; height: 48px;}<br />
#cbody{border-radius: 3px 10px 0px #444;}<br />
</style><br />
<div id="chat"><br />
<div class="bt" onclick="toggle()" ></div><br />
<p id="cbody" style="display:none;"><br />
<iframe height="350" frameborder="0" width="300" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&amp;relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay"></iframe><br />
</p><br />
</div><br />
<script><br />
var $_ = function(x){return document.getElementById(x);}<br />
<br />
function toggle(){<br />
var ck = $_("cbody").style.display;<br />
if(ck != "none"){<br />
$_("cbody").style.display = "none";<br />
}<br />
if(ck != "block"){<br />
$_("cbody").style.display = "block";<br />
}<br />
}<br />
</script><br />
<br /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<i>Chúc bạn thành công !</i></div>
</div>Unknownnoreply@blogger.com16tag:blogger.com,1999:blog-82433928586953437.post-56174872235124907732011-12-30T01:44:00.002+07:002011-12-30T05:27:38.599+07:00Jquery Slider Tin Tức - News Slider<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Hẳn nhiều bạn cần slide này... mình đã phát triển phiên bản thumbail cho site phim. Nhưng gà CSS quá nên đắp chiếu, lấy silder của trang tin tức này cho các bạn dùng.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-9N9UPzGJBhM/Tvy2VrfqaqI/AAAAAAAAB2E/ZKnN4FVjk4Y/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="http://3.bp.blogspot.com/-9N9UPzGJBhM/Tvy2VrfqaqI/AAAAAAAAB2E/ZKnN4FVjk4Y/s320/Capture.PNG" width="320" /></a></div>
<br />
<br />
Nói về jquery thì mình cũng chả rành lắm, đến từ jquery viết còn hay nhầm thì các bạn chắc cũng đoán được. Phần slider rip của gostep.info, các bạn có thể vào đó xem.<br />
<br />
<div style="text-align: center;">
<b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://www.tv.maphim.net/" target="_blank">DEMO</a></b></div>
<br />
Mình cũng hơi buồn ngủ, các bạn setup luôn nhé.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-exUKlAmmjQw/Tvy01OT1_MI/AAAAAAAAB14/7jsbPSqfr24/s1600/slide.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="136" src="http://3.bp.blogspot.com/-exUKlAmmjQw/Tvy01OT1_MI/AAAAAAAAB14/7jsbPSqfr24/s320/slide.PNG" width="320" /></a></div>
<br />
CSS (Cái này cũng gà lắm, mọi người tự căn chỉnh nhé !)<br />
<br />
<div class="codeview">
<style><br />
ul#ticker {<br />
font: "Helvetica,Arial";<br />
height: 26px;<br />
overflow: hidden;<br />
text-align: right;<br />
color: red;<br />
font-size: 12px;<br />
line-height: 28px;<br />
background: #444;<br />
}<br />
ul#ticker strong,ul#ticker strong a {<br />
color: green;<br />
font-size: 10px;<br />
padding-right: 5px;<br />
text-transform: uppercase;<br />
}<br />
#ticker a {<br />
text-decoration: none;<br />
}<br />
ul#ticker a {<br />
color: white;<br />
text-decoration: none;<br />
}<br />
ul, li {<br />
list-style: none outside none;<br />
}<br />
ul#ticker .meta-comments a,.meta-sep,.meta-date{<br />
color: #777777;<br />
}<br />
</style><br />
<br /></div>
<br />
Javascript<br />
<br />
<div class="codeview">
<script src="<span class="st">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/<i>jquery</i>.<i>min</i>.<i>js</i></span>"></script><br />
<script src="http://anhnc.googlecode.com/svn/trunk/p/news.js"></script><br />
<script src="/feeds/posts/default?max-results=<b style="color: red;">12</b>&amp;orderby=published&amp;alt=json-in-script&amp;callback=news"></script><br />
<br />
<br />
Phần numberposts (<b style="color: red;">12</b>) có thể unlimit nhé ;))<br />
<br />
<i>Chúc các bạn thành công !</i></div>
</div>Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-82433928586953437.post-21740097545308418092011-12-26T04:21:00.003+07:002011-12-26T12:32:24.407+07:00Quà tặng âm nhạc cho BlogSpot<div dir="ltr" style="text-align: left;" trbidi="on">Hehe, gần tết rồi.. thêm không khí cho cho Blog của bạn chút nhỉ. Hôm nay giới thiệu với các bạn một Plugin mới. <b style="color: orange;">Quà tặng âm nhạc</b>, điều không tưởng phải không, chỉ có ở các 4rum. Nhờ có load feed comment của anh Dũng, mình mới dám nghĩ đến tạo ra cái gì đó mới lại từ tiện ịch này.<br />
<br />
<div style="text-align: center;"><b style="background: none repeat scroll 0% 0% rgb(36, 189, 226); border: 1px solid rgb(74, 220, 255); color: white; padding: 5px 10px;">Xem <a href="http://www.teteit.blogspot.com/" target="_blank">DEMO</a> | <a href="http://sonhaine.blogspot.com/2011/12/q.html" target="_blank">GỬI LỜI CHÚC</a></b></div><br />
Lâu nay ẩn danh cũng vì đang làm đồ án, rảnh tay mới code được.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-mWJTLsjlr08/TveVdsyBV6I/AAAAAAAABxQ/u-Vz80ge4lw/s1600/nghenhacvui.info-1308220963-qua+tang.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://4.bp.blogspot.com/-mWJTLsjlr08/TveVdsyBV6I/AAAAAAAABxQ/u-Vz80ge4lw/s320/nghenhacvui.info-1308220963-qua+tang.jpg" width="320" /></a></div><br />
Mình cũng không rành lắm CSS, vậy nên mình chỉ viết js thôi. Các bạn code theo phong cách riêng của mình nhé, mới làm hiện bài hát đầu tiên. Có thêm thời gian mới tạo được thêm 2 cái nút tiến lùi, chắc cũng trước tết thôi. ^^! Chờ nhé.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-jJu-CeBqdV0/TveTncsod6I/AAAAAAAABxE/H1f4g_KLmIk/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_040451.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="122" src="http://4.bp.blogspot.com/-jJu-CeBqdV0/TveTncsod6I/AAAAAAAABxE/H1f4g_KLmIk/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_040451.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Nhaccuatui.com</td></tr>
</tbody></table><div class="separator" style="clear: both; text-align: center;"><br />
</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-Ab-oIDFge98/TvecdFjd0yI/AAAAAAAABxo/6m8igVlqKDI/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_044843.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="145" src="http://1.bp.blogspot.com/-Ab-oIDFge98/TvecdFjd0yI/AAAAAAAABxo/6m8igVlqKDI/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_044843.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mp3.zing.vn</td></tr>
</tbody></table><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-UjN3s_MfNxc/TveceLgIW9I/AAAAAAAABxs/CcDwhm05utw/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045114.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="132" src="http://4.bp.blogspot.com/-UjN3s_MfNxc/TveceLgIW9I/AAAAAAAABxs/CcDwhm05utw/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045114.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Nhacso.net</td></tr>
</tbody></table><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/-_N1YuJwy2Oo/TvecetedF3I/AAAAAAAABx0/ehrLvVvG3Hc/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045303.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="122" src="http://3.bp.blogspot.com/-_N1YuJwy2Oo/TvecetedF3I/AAAAAAAABx0/ehrLvVvG3Hc/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045303.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Music.soha.vn</td></tr>
</tbody></table><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-oavIo6bcz6U/TvecfVDhxsI/AAAAAAAABx8/HfSqSK__exU/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045529.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="177" src="http://4.bp.blogspot.com/-oavIo6bcz6U/TvecfVDhxsI/AAAAAAAABx8/HfSqSK__exU/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045529.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Nhac.vui.vn</td></tr>
</tbody></table><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/-jdjUQEWwc8o/TvecgThDRbI/AAAAAAAAByE/fiMSeWb08PM/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045736.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="105" src="http://1.bp.blogspot.com/-jdjUQEWwc8o/TvecgThDRbI/AAAAAAAAByE/fiMSeWb08PM/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-26_045736.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Zippshare và *.mp3</td></tr>
</tbody></table><i>Tha hồ chọn lựa skin ;))</i><br />
<br />
Để sử dụng tiện ích, các bạn tạo một trang mới hoặc một bài mới. Tạo một widget HTML mới, dán code sau vào.<br />
<br />
CSS <br />
<br />
<div class="codeview"><style type="text/css"><br />
#tomusic{border:1px dashed #444; padding: 5px; width: 680px;}<br />
#avmusic img{padding: 1px; width: 120px;}<br />
#avmusic a{position: relative; left:0px; bottom:-px;}<br />
#anc_chuc{width:90%; height: 95px; float: right;}<br />
.process{<br />
background: url("http://dl.dropbox.com/u/52283085/47/sr.gif") no-repeat scroll right top transparent;<br />
color: #EDE7C2;<br />
display: block;<br />
float: left;<br />
font-size: 13px;<br />
height: 33px;<br />
margin-left: -13px !important;<br />
margin-top: 80px;<br />
padding-right: 9px;<br />
position: absolute;<br />
text-shadow: 1px 1px 1px #131212;<br />
z-index: 100;<br />
}<br />
.process a{text-decoration:none; color: #888888;}<br />
.process span {<br />
background: url("http://dl.dropbox.com/u/52283085/47/gc.png") no-repeat scroll 0 0 transparent !important;<br />
float: left;<br />
height: 33px;<br />
padding: 5px 0 0 8px;<br />
}<br />
</style></div><br />
<br />
JavaScript<br />
<br />
<div class="codeview"><script type="text/javascript"><br />
var cm_desc = 50; // Để 50 chắc là đủ (sô ký tự hiển thị)<br />
var homepage = "domain";<br />
postID = "id_bai_qua_tang_am_nhac";<br />
<br />
var cm_ava = new Array();<br />
cm_ava['openid'] = "http://lh6.googleusercontent.com/-uf0uxbEp4Zs/TgNJppowi6I/AAAAAAAAB1c/qmkdGd12iJY/openid.png";<br />
cm_ava['livej'] = "http://lh4.googleusercontent.com/-ncOJFLxjHTc/TgNJpWhHBVI/AAAAAAAAB1Y/bg87urldP3k/livej.png";<br />
cm_ava['wp'] = "http://lh3.googleusercontent.com/-pI1VhTlH9ss/TgNJot558TI/AAAAAAAAB1E/A469MiNkEVg/wp.png";<br />
cm_ava['typepad'] = "http://lh4.googleusercontent.com/-QEKJ1rr4D2o/TgNJoZSTvII/AAAAAAAAB1A/ml5MtgyRfhE/typepad.png";<br />
cm_ava['aim'] = "http://lh4.googleusercontent.com/-CY3WnoiAnk8/TgNJokYOjeI/AAAAAAAAB1M/a_56pS5vvG8/aim.png";<br />
cm_ava['url'] = "http://lh5.googleusercontent.com/-lz5ikgnJDZw/TgNJoPiZ00I/AAAAAAAAB08/qLvloo_HaHo/url.png";<br />
cm_ava['anon'] = "http://lh4.googleusercontent.com/-u-xJmUDbxGI/TgNJpJS8hEI/AAAAAAAAB1U/sC51rFWinQE/guest.png";<br />
<br />
</script><br />
<script src="http://anhnc.googlecode.com/svn/trunk/p/qtan.js" type="text/javascript"></script><br />
<script><br />
M.p(M.r());<br />
</script> </div><br />
File js này các bạn hãy edit lại nhé. Mình làm cho nó giống cấu trúc site mình thôi.<br />
<br />
<div class="codeview" style="text-align: center;">http://anhnc.googlecode.com/svn/trunk/p/qtan.js</div><br />
Cấu trúc gửi bài hát như sau:<br />
<br />
<div class="codeview">[m]link bài hát|nguoi_nhan|Lời muốn nói[/m] </div><br />
<i>Chúc mọi người thành công !</i></div>Unknownnoreply@blogger.com47tag:blogger.com,1999:blog-82433928586953437.post-89829152119433117682011-12-24T12:02:00.014+07:002011-12-25T00:26:09.740+07:00Tiện ích Top Commentators cho blogspot<div style="text-align: justify;">Tiện ích <b>Top Commentators</b> cho phép hiển thị những đọc giả có lượng comment nhiều nhất. Hiện tại có 1 số blog đã có tiện ích này nhưng họ đã mã hóa code và không chia sẻ, đối với 1 số bạn không rành về javacript sẽ không đọc được các đoạn mã này. Hôm nay nhân tiện có người hỏi về thủ thuật này nên mình cũng xin chia sẻ để mọi người dùng.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-wjPa1ZIGJTE/TvVnjoiaE6I/AAAAAAAACLw/X1nzytNiJIc/s1600/top-commentators.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="250" src="http://4.bp.blogspot.com/-wjPa1ZIGJTE/TvVnjoiaE6I/AAAAAAAACLw/X1nzytNiJIc/s400/top-commentators.png" style="border: 1px solid #2f6dc0; padding: 2px;" width="300" /></a></div><br />
<b>Một vài thông tin của tiện ích :</b><br />
- Không đếm comment của khách nặc danh.<br />
- Chỉ thống kê được tối đa trong 200 comment mới nhất.<br />
- Hiện thị ảnh đại diện (tất cả các author ngoại trừ nặc danh).<br />
- Hiện thị số comment của từng người.<br />
<br />
<div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://demo.fandung.com/2011/12/demo-tien-ich-top-commentators.html" target="_blank">DEMO</a></b></div><br />
<div style="text-align: center;"><i>Hình ảnh minh họa</i></div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-Mco8XGpKIIs/TvVGqdXLC8I/AAAAAAAACLk/kPAY4wJ15jk/s1600/top-author.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="308" src="http://4.bp.blogspot.com/-Mco8XGpKIIs/TvVGqdXLC8I/AAAAAAAACLk/kPAY4wJ15jk/s400/top-author.png" style="border: 1px solid #ccc; padding: 2px;" width="324" /></a></div><br />
Để thực hiện các bạn chỉ việc tạo 1 widget<b> HTML/javascript </b>ở nơi muốn hiển thị rồi dán đoạn code bên dưới vào là được:<br />
<div class="codeview"><style type="text/css"><br />
.top-author ul li {<br />
list-style:none;<br />
width:250px;<br />
height:45px!important;<br />
border-bottom:1px solid #ccc;<br />
margin-top:5px;<br />
display:block!important;<br />
}<br />
.tau-cont {margin-left:38px;}<br />
.tau-cont h4 {margin:0;padding:0;}<br />
.tau-cont span {color:#555;}<br />
img.tau-thumb {<br />
float: left;<br />
margin-right: 10px;<br />
border: 1px solid #CCC;<br />
padding: 0;<br />
width: 36px;<br />
height: 36px;<br />
}<br />
</style><br />
<br />
<script type="text/javascript"><br />
var no_photo='http://lh6.googleusercontent.com/-cchblzXPp8I/TgNJpMz-aMI/AAAAAAAAB1Q/NAzNcNF-dxk/s50/blogger-nophoto.png';<br />
var another_au='http://lh3.googleusercontent.com/-OHvAL1zTgZM/TtInH36F1jI/AAAAAAAACB8/Jhnxo7yCjlc/s23/another-ico.png';<br />
var au_nums=5;<br />
var rcm_nums=100;<br />
var homepage="http://www.fandung.com";<br />
</script><br />
<div class="top-author"><br />
<script type="text/javascript" src="http://fandung.googlecode.com/svn/trunk/js/top-author.js"></script><br />
</div></div><b><span style="color: blue;">Một vài lưu ý :</span></b><br />
- <b>var no_photo</b> : avatar của tài khoản blogger chưa có ảnh đại diện.<br />
- <b>var another_au</b> : avatar của tài khoản khác blogger.<br />
- <b>var au_nums=5;</b> số tác giả được hiển thị<br />
- <b>var rcm_nums=100;</b> số comment sẽ được khoanh vùng để thống kê (phải nhỏ hơn hoặc bẳng 200)<br />
- <b>var homepage="http://www.fandung.com";</b> thay <b>http://www.fandung.com</b> bằng tên miền của blog bạn.<br />
<br />
<b>Chúc các bạn thành công.</b><br />
<br />
<div style="text-align: right;"><span style="font-size: x-small;"><i>Thực hiện theo yêu cầu của <a href="http://www.blogger.com/profile/01789523088118881561" target="_blank"><b>Trần Việt Đức</b></a></i></span></div>Phan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.com21tag:blogger.com,1999:blog-82433928586953437.post-44902560637142016042011-12-23T11:29:00.001+07:002011-12-23T11:32:06.121+07:00Chèn link Google Search vào footer của bài viết<div style="text-align: justify;">Ở thủ thuật này, theo như yêu cầu, mình sẽ tạo 1 link text nhỏ ở dưới mỗi bài viết. Khi click vào link này thì lập tức sẽ mở ra 1 cửa sổ mới của trang Google với nội dung tìm kiếm chính là tiêu đề bài viết mà bạn đang xem. Như yêu cầu thì tiện ích sẽ thay thế cho việc copy tiêu đề bài viết và dán vào google để tìm kiếm. Thủ thuật này cũng là 1 cách để cho các bạn có thể kiểm tra xem bài biết của bạn đứng thứ bao nhiêu trong kết quả tìm kiếm của google (với từ khóa chính là tiêu đề bài viết).</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-F-MEkWzS250/TvQDSEgwQUI/AAAAAAAACLY/uybDEqk_dQ4/s1600/g-search-link.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="250" src="http://3.bp.blogspot.com/-F-MEkWzS250/TvQDSEgwQUI/AAAAAAAACLY/uybDEqk_dQ4/s400/g-search-link.png" style="border: 1px solid #3d515c; padding: 2px;" width="300" /></a></div><br />
<div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://demo.fandung.com/2011/12/demo-chen-google-search-link-vao-footer.html" target="_blank">DEMO</a></b></div><br />
<b><span style="color: blue;">Sau đây là các bước thực hiện :</span></b><br />
<b>1.</b> Vào <b>thiết kế</b><br />
<b>2.</b> Vào <b>chỉnh sửa code HTML</b><br />
<b>3.</b> Nhấp chọn <i>mở rộng mẫu tiện ích</i><br />
<b>4.</b> Tìm đoạn code như bên dưới :<br />
<div class="codeview"><div class='post-footer-line post-footer-line-3'></div>- nếu không tìm thấy đoạn mã này, bạn có thể tìm các đoạn mã bên dưới :<br />
<div class="codeview"><div class='post-footer'></div><b>hoặc :</b><br />
<div class="codeview"><data:post.body/></div><br />
<b>5.</b> Sau khi tìm được 1 trong các đoạn code trên, các bạn dán đoạn code bên dưới vào ngay sau nó :<br />
<div class="codeview"><div class='google-search-link' style='text-align:center;'><br />
<form action='http://www.google.com.vn/search' method='get' name='search-pt' target='_blank'><br />
<input autocomplete='off' expr:value='data:post.title' id='search-text' name='q' style='display:none;' tabindex='7' type='text'/><br />
<a href='#' onclick='document[&quot;search-pt&quot;].submit()'>=== click search google ===</a> <br />
</form><br />
</div></div>- các bạn có thể thay dòng <b>=== click search google ===</b> thành đoạn text khác mà các bạn thích.<br />
<br />
<b>6. Save template.</b><br />
<br />
<b>Chúc các bạn thành công.</b><br />
<br />
<div style="text-align: right;"><span style="font-size: x-small;"><i>Theo yêu cầu của <a href="http://www.blogger.com/profile/17175170721363050062"><b>ChoiBlogs.blogspot.com</b></a></i></span></div>Phan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.com21tag:blogger.com,1999:blog-82433928586953437.post-74222798538581327142011-12-22T22:30:00.003+07:002011-12-23T19:31:05.629+07:00SlideTab Recent posts (jQuery)<div class="pthumb"><a href="http://3.bp.blogspot.com/-4uhJrGVqQvo/TvNN1kDHKsI/AAAAAAAACLM/STRCgtOEfT4/s1600/slidetab-jquery2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0" src="http://3.bp.blogspot.com/-4uhJrGVqQvo/TvNN1kDHKsI/AAAAAAAACLM/STRCgtOEfT4/s400/slidetab-jquery2.png" width="260" /></a></div><div style="text-align: justify;">Phải nói là ở blog của mình tiện ích recent posts rất nhiều, nhiều là do mỗi cái có giao diện khác nhau, chứ về cơ bản thì nó đều như nhau, và đa phần là do các bạn yêu cầu. Và bài này cũng không ngoại lệ. Bài này mình rip lại giao diện theo yêu cầu, chỉ có khác là thay nội dung của nó bằng tiện ích Recent Posts mà thôi.</div><br />
<div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://demo.fandung.com/2011/12/demo-slidetab-jquery.html" target="_blank">DEMO</a></b></div><div style="text-align: center;"><i><br />
</i></div><div style="text-align: center;"><i>Hình minh họa : </i></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-bmWidhPf3co/TvNDqtDbwUI/AAAAAAAACK0/6oJCfFQUHr8/s1600/slidetab.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="103" src="http://3.bp.blogspot.com/-bmWidhPf3co/TvNDqtDbwUI/AAAAAAAACK0/6oJCfFQUHr8/s400/slidetab.jpg" width="400" /></a></div><br />
<b><span style="color: blue;">Sau đây là các bước thực hiện :</span></b><br />
- Vào code template (<b>thiết kế</b> -> <b>chỉnh sửa code HTML</b>), và chèn đoạn mã code bên dưới vào trước thẻ đóng </head><br />
<div class="codeview"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></div>- lưu ý là nếu trong code template của bạn đã có file <b>jquery.min.js</b> thì không cần chèn vào nữa, hiện tại jquery đã ra bản <b>1.7.1</b><br />
<br />
- tiếp theo, tạo 1 widget HTML/javascript và chèn đoạn code bên dưới :<br />
<div class="codeview"><style type="text/css"><br />
#slidearea {<br />
height: 242px;<br />
overflow: hidden;<br />
margin: 0px 20px 0 20px;<br />
position: relative;<br />
width: 960px;<br />
background: url(http://4.bp.blogspot.com/_xpQK9GsnDPs/TOxSyMhIKWI/AAAAAAAAAms/5jwLO9VyuHo/s000/slider.png) no-repeat;<br />
}<br />
#gallerycover {<br />
overflow: hidden;<br />
margin: 15px 30px 0 30px;<br />
width: 900px;<br />
}<br />
.mygallery {<br />
overflow: hidden;<br />
visibility: visible; <br />
position: relative; z-index: 2; <br />
left: 0px; <br />
width: 900px; <br />
}<br />
.mygallery ul {<br />
margin:0;<br />
padding:0; <br />
position: relative; <br />
list-style-type: none; <br />
z-index: 1; <br />
width: 2700px; <br />
left: -1620px; <br />
}<br />
.mygallery ul li {<br />
overflow: hidden;<br />
float: left; <br />
width: 180px; <br />
height: 210px;<br />
}<br />
.mytext {<br />
position: relative;<br />
margin: 0 5px 0 5px;<br />
width: 170px;<br />
height: 210px;<br />
display: inline;<br />
float: left;<br />
color: #C4C4C4;<br />
}<br />
.mytext p {<br />
padding: 0 0;<br />
color: #555;<br />
font-size: 12px;<br />
line-height: 20px;<br />
width: 170px;<br />
text-shadow: 1px 1px 0 #F6F6F6;<br />
}<br />
.mytext h2 {<br />
padding: 5px 0;<br />
color: black;<br />
width: 170px;<br />
font-size: 14px;<br />
font-weight: bold;<br />
}<br />
.mytext h2 a:link, .mytext h2 a:visited {<br />
color: black;<br />
text-decoration: none;<br />
outline: none;<br />
}<br />
.mytext h2 a:hover {color:#888;}<br />
img.sidim {<br />
width: 170px;<br />
height: 100px;<br />
}<br />
.prevb {<br />
float: left;<br />
width: 20px;<br />
height: 35px;<br />
z-index: 200;<br />
background: url(http://4.bp.blogspot.com/_xpQK9GsnDPs/TOxSyrTi7KI/AAAAAAAAAmw/i4FOV7EzbIQ/s000/prev.png)!important;<br />
position: absolute;<br />
left: 5px;<br />
bottom: 110px;<br />
}<br />
.nextb {<br />
float: right;<br />
width: 20px;<br />
height: 35px;<br />
z-index: 200;<br />
background: url(http://3.bp.blogspot.com/_xpQK9GsnDPs/TOxSzDyhK7I/AAAAAAAAAm0/EOkU1_3E9Y0/s000/next.png)!important;<br />
position: absolute;<br />
right: 5px;<br />
bottom: 110px;<br />
display: block;<br />
}<br />
</style><br />
<br />
<script src="http://fandung.googlecode.com/svn/trunk/js/slide-mygallery.js" type="text/javascript"></script><br />
<br />
<script stype="text/javascript"><br />
var $jx = jQuery.noConflict();<br />
$jx(function() {<br />
$jx(".mygallery").jCarouselLite({<br />
btnNext: ".nextb",<br />
btnPrev: ".prevb",<br />
visible: 5,<br />
auto: 3000,<br />
speed: 1000,<br />
easing: "backout" <br />
});<br />
});<br />
</script><br />
<br />
<div id="slidearea"><br />
<div id="gallerycover"><br />
<div class="mygallery"><br />
<ul><br />
<script type="text/javascript"><br />
var mode = "all";<br />
var g_numposts = 10;<br />
var g_numcontents = 15;<br />
var g_label="B-advance";<br />
var homepage="http://www.fandung.com";<br />
</script><br />
<br />
<script src="http://fandung.googlecode.com/svn/trunk/js/feed-mygallery.js" type="text/javascript"></script><br />
</ul><br />
<br />
<div class="clear"></div><br />
</div><br />
</div><br />
<a class="prevb" href="#"></a><br />
<a class="nextb" href="#"></a><br />
</div></div><br />
<b><span style="color: blue;">Hướng dẫn tùy chỉnh :</span></b><br />
- <b>visible: 5</b> đây là số bài viết sẽ được hiển thị ra ngoài, như trong demo là 3.<br />
- <b>auto: 3000</b> đây là thời gian chạy auto, 3000 tương ứng với 3 giây, tức là sau 3 giây tự động chuyển bài.<br />
- <b>speed: 1000</b> là tốc độ chuyển bài viết khi click vào button left hoặc right (mũi tên màu cam)<br />
<i>- <b>Lưu ý </b>: nếu không muốn chạy auto, thì bạn bỏ dòng <b>auto: 3000,</b> trong đoạn code javascript, tức là đoạn script ở trên chỉ còn như bên dưới :</i><br />
<div class="codeview"><script stype="text/javascript"><br />
var $jx = jQuery.noConflict();<br />
$jx(function() {<br />
$jx(".mygallery").jCarouselLite({<br />
btnNext: ".nextb",<br />
btnPrev: ".prevb",<br />
visible: 5,<br />
speed: 1000,<br />
easing: "backout" <br />
});<br />
});<br />
</script></div>- <b>var mode = "all";</b> là chế độ hiển thị theo cả blog hoặc theo 1 nhãn nào đó, nếu giá trị là <b>all</b> thì hiển thị các bài viết mới của blog, nếu giá giá trị là <b>single</b> thì sẽ hiển thị bài viết theo nhãn được chọn (là biến <b>g_label</b> bên dưới)<br />
- <b>var g_numposts = 10;</b> là số bài viết sẽ load <i>(lưu ý là số bài viết sẽ load (<b>g_numposts</b>) khác với số bài viết sẽ được hiển thị (<b>visible:</b> {giá trị thiết lập})</i> )<br />
- <b>var g_numcontents = 15;</b> số chữ (là các chuỗi ngăn cách bằng dấu khoảng trắng) sẽ được hiển thị ở đoạn mô tả bài viết.<br />
- <b>var g_label="B-advance";</b> tên nhãn sẽ được chọn nếu hiển thị ở chế độ <b>mode = "single";</b><br />
- <b>var homepage="http://www.fandung.com";</b> thay <b>http://www.fandung.com</b> thành tên domain của blog bạn, ví dụ <b>http://YOUR-BLOG-NAME.blogspot.com</b><br />
<br />
- Ngoài ra nếu tiện ích rộng quá thì các bạn tùy chỉnh lại các thông số về chiều dài và rộng trong code CSS.<br />
<br />
- Thủ thuật này xin lưu ý là hơi nặng, nên bạn nào thật sự thích thì hãy sử dụng, còn không thì có thể tham khảo thôi.<br />
<br />
<div style="text-align: right;"><i><span style="font-size: x-small;">Thực hiện theo yêu cầu của <a href="http://www.blogger.com/profile/07879600814733859248" target="_blank"><b>Việt Nam</b></a></span></i></div>Phan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.com35tag:blogger.com,1999:blog-82433928586953437.post-84494331488513572002011-12-17T22:54:00.006+07:002011-12-18T03:25:13.632+07:00[Update] Tạo Menu Thanh menu ngang có sổ dọc xuống<div style="text-align: center;"><span style="font-size: 130%;"><span style="color: red; font-weight: bold;">Create Dropdown Menu</span></span></div><div style="text-align: justify;"><a href="http://tbn1.google.com/images?q=tbn:nFEBBELoZbO7DM:http://www.clker.com/cliparts/3/b/0/d/12065698671516857163pitr_red_menu_icon_set_2.svg.med.png"><img alt="" border="0" src="http://tbn1.google.com/images?q=tbn:nFEBBELoZbO7DM:http://www.clker.com/cliparts/3/b/0/d/12065698671516857163pitr_red_menu_icon_set_2.svg.med.png" style="cursor: pointer; float: left; height: 111px; margin: 0pt 10px 10px 0pt; width: 116px;" /></a><b><span style="color: #ff6600;">[FD BlOg]</span> - Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.</b></div><br />
Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.<br />
<br />
<b><span style="color: red;">Update 17/12/2011: </span></b><br />
<br />
<div style="text-align: justify;"><i><span style="color: red;">- Đây có thể nói là 1 trong các bài viết có lượng view lớn nhất trên BlOg FD, và cũng là bài viết có nhiều comment phàn nàn nhất về việc bài viết khó hiểu, hoặc không làm được. Hôm nay mình sẽ fix lại bài hướng dẫn. Và nhân tiện mình cũng fix lại code của thủ thuật để cho tiện và cho đẹp hơn 1 chút.</span></i></div><i></i><br />
<div style="text-align: justify;"><i><i><span style="color: red;">- Ở thủ thuật cũ, phần chèn link của các menu phụ (menu con) chỉ góm gọn trong các link của các nhãn, trong bài fix này các link của menu con sẽ cơ động hơn, không còn phải theo khuôn mẫu link như thế này <b>http://YOUR-BLOG-NAME.blogspot.com/search/label/LABEL-NAME</b>, tức là có thể chèn các link khác như link của 1 bài viết nào đó chẳng hạn.</span></i></i></div><br />
<br />
<div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;">Xem <a href="http://demo.fandung.com/2011/12/demo-menu-dropdown.html" target="_blank">DEMO</a></b></div><br />
<div style="text-align: center;"><i>Hình ảnh minh họa :</i></div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-fL7N_n6JVd4/Tuyym93SUyI/AAAAAAAACKE/-CUnZXQW1jY/s1600/drop-down-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="309" src="http://4.bp.blogspot.com/-fL7N_n6JVd4/Tuyym93SUyI/AAAAAAAACKE/-CUnZXQW1jY/s400/drop-down-menu.jpg" style="border: 1px solid #88bb22; padding: 1px;" width="400" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-HXp_xMuunuM/TuzUi07NWEI/AAAAAAAACKQ/KHOWSigt-Zo/s1600/type1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="141" src="http://3.bp.blogspot.com/-HXp_xMuunuM/TuzUi07NWEI/AAAAAAAACKQ/KHOWSigt-Zo/s400/type1.png" style="border: 1px solid #88bb22; padding: 1px;" width="400" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-cffbZg_6ne0/TuzUxWSiVvI/AAAAAAAACKc/LMcb9Y4_EZs/s1600/type2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="141" src="http://2.bp.blogspot.com/-cffbZg_6ne0/TuzUxWSiVvI/AAAAAAAACKc/LMcb9Y4_EZs/s400/type2.png" style="border: 1px solid #543e2e; padding: 1px;" width="400" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-mu61Tc_hGro/TuzVIhEC_4I/AAAAAAAACKo/26_GGCmePo0/s1600/type3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="141" src="http://3.bp.blogspot.com/-mu61Tc_hGro/TuzVIhEC_4I/AAAAAAAACKo/26_GGCmePo0/s400/type3.png" style="border: 1px solid #7f017d; padding: 1px;" width="400" /></a></div><br />
Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ:<b> giải trí , học tập</b>... và các mục<b> giải trí, học tập </b>sẽ là 1 <span style="color: #3333ff; font-weight: bold;">menu chính</span>, còn các trang <b>nhãn</b> hoặc 1 trang bài viết nào đó sẽ là 1 <span style="color: #3333ff; font-weight: bold;">menu phụ.</span><br />
<br />
Thứ 2 là xác định nơi đặt<b> menu</b>, thông dụng nhất sẽ là ở trên phần <b>header</b>.Như vậy các bạn phải tạo 1 widget <b>HTML/Javascript</b> vào <b>header</b> rồi dán code của thủ thuật vào.<br />
<br />
<span style="color: red; font-weight: bold;">☼ Bây giờ ta bắt đầu vô chi tiết:</span><br />
<b>1.</b> Đăng nhập blog<br />
<b>2.</b> Vào <b>Bố cục </b>(layout)<br />
<b>3.</b> Vào <b>chỉnh sửa code HTML</b> (không cần nhấp chọn <b>mở rộng tiện ích</b>)<br />
<b>4.</b>Chèn đọan code sau vào ngay bên dưới thẻ mở <span style="color: red; font-weight: bold;"><head></span><br />
<br />
<div class="codeview"><script src="<span style="color: #3333ff; font-weight: bold;">http://fandung.googlecode.com/svn/trunk/js/dropdown2.js</span>" type="text/javascript"><br />
</script></div><br />
<span style="color: #660000;">- nếu chèn code ở <b>bước 4</b> vào template mà submenu không hiển thị, thì các bạn chèn nó vào ngay trong widget <b>HTML/javascript</b> chưa code thủ thuật, tức là chèn chung với code ở <b>bước 6</b> bên dưới, và chèn ngay trên cùng. <i>(updated 18/12/2011)</i></span><br />
<br />
<b>5. Save template</b> lại.<br />
<b>6.</b> Quay trở lại <b>bố cục</b>, vào <b>phần tử trang</b>, tạo 1 cái widget <b>HTML/Javascript</b>,sau đó dán đọan code bên dưới vào.<br />
<br />
<span style="color: red; font-weight: bold;">►CODE:</span><br />
<br />
<div class="codeview"><style type="text/css"><br />
<b>.nav23</b>{<br />
height: 27px;<br />
padding: 2px 0 0;<br />
margin-right:5px;<br />
background-image: url(http://sites.google.com/site/fdblogsite/Home/fd.gif); <br />
width: 100%;<br />
border-top:1px solid #bbb;<br />
border-bottom:1px solid #ffdab6;<br />
}<br />
<br />
.<b>nav23</b> a, .<b>nav23</b> a:visited {<br />
color:#000;<br />
font-weight:bold;<br />
font-family:Arial, Helvetica, sans-serif;<br />
text-decoration:none;<br />
font-size:12px;<br />
padding: 5px 10px;<br />
display: block;<br />
float:left;<br />
border-right:1px solid #f17813;<br />
}<br />
.nav23 a:hover {<br />
background-image: url(http://lh3.googleusercontent.com/-vae9HQe5xDo/TuyKac1p8sI/AAAAAAAACJ4/GJVNhHKKJ-g/s26/nav23-bg-hv.png);<br />
color:#FFF;<br />
}<br />
<span style="color: red; font-weight: bold;">.nav23sub</span>{<br />
background:#F57900;<br />
margin-top:1px;<br />
padding:1px;<br />
color: #fff;;<br />
margin: 1 1px;<br />
padding: 5px 10px;<br />
font-weight:bold;<br />
font-family:Arial, Helvetica, sans-serif;<br />
font-size:12px;<br />
border-top:1px #ffc185 solid;<br />
cursor:pointer;<br />
}<br />
</style><br />
<br />
<script type="text/javascript"><br />
<br />
var bg_submenu="#F57900"; <i><span style="color: blue;">// màu nền của submenu</span></i><br />
var bg_hv_submenu="#24BDE2"; <i><span style="color: blue;">// màu nền của submenu khi rê chuột</span></i><br />
<br />
function otab(){<br />
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');<br />
}<br />
function submn(submn_link,submn_text){<br />
document.write('<tr><td onmouseover="this.style.background=\''+<b>bg_hv_submenu</b>+'\'" onmouseout="this.style.background=\''+<b>bg_submenu</b>+'\'" class="<span style="color: red; font-weight: bold;">nav23sub</span>" onclick="window.location.href=\''+<b>submn_link</b>+'\'">'+<b>submn_text</b>+'</td></tr>');<br />
}<br />
function ctab(){document.write('<\/table>');}<br />
<br />
function otab(child_id){document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');<br />
}<br />
<br />
<span style="color: #009900; font-style: italic;">// end of define functions!</span><br />
<br />
</script><br />
<div class="<b>nav23</b>"><br />
<a id="<span style="color: red; font-weight: bold;">idmenu1</span>" href="#" ><span style="color: red; font-weight: bold;">Menu 1</span></a><br />
<a id="<span style="color: #3333ff; font-weight: bold;">idmenu2</span>" href="#"><span style="color: #3333ff; font-weight: bold;">Menu 2</span></a><br />
<a id="<span style="color: #ff6600; font-weight: bold;">idmenu3</span>" href="#"><span style="color: #ff6600; font-weight: bold;">Menu 3</span></a><br />
<a id="<span style="color: #009900; font-weight: bold;">idmenu4</span>" href="#"><span style="color: #009900; font-weight: bold;">Menu 4</span></a><br />
<a id="<span style="color: #cc33cc; font-weight: bold;">idmenu5</span>" href="#"><span style="color: #cc33cc; font-weight: bold;">Menu 5</span></a><br />
<a id="<b>idmenu6</b>" href="#"><b>Menu 6</b></a><br />
<a id="<span style="color: #339999; font-weight: bold;">idmenu7</span>" href="#"><span style="color: #339999; font-weight: bold;">Menu 7</span></a><br />
</div><br />
<br />
<script type="text/javascript"><br />
otab("<span style="color: red; font-weight: bold;">idmenu1_child</span>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu1.1</span>','Submenu 1.1');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu1.2</span>','Submenu 2.1');<br />
ctab();<br />
at_attach("<span style="color: red; font-weight: bold;">idmenu1</span>", "<span style="color: red; font-weight: bold;">idmenu1_child</span>", "hover", "y", "pointer");<br />
<br />
otab("<span style="color: #3333ff; font-weight: bold;">idmenu2_child</span>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu2.1</span>','Submenu 2.1');<br />
ctab();<br />
at_attach("<span style="color: #3333ff; font-weight: bold;">idmenu2</span>", "<span style="color: #3333ff; font-weight: bold;">idmenu2_child</span>", "hover", "y", "pointer");<br />
<br />
otab("<span style="color: #ff6600; font-weight: bold;">idmenu3_child</span>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu3.1</span>','Submenu 3.1');<br />
ctab();<br />
at_attach("<span style="color: #ff6600; font-weight: bold;">idmenu3</span>", "<span style="color: #ff6600; font-weight: bold;">idmenu3_child</span>", "hover", "y", "pointer");<br />
<br />
otab("<span style="color: #009900; font-weight: bold;">idmenu4_child</span>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu4.1</span>','Submenu 4.1');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu4.2</span>','Submenu 4.2');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu4.3</span>','Submenu 4.3');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu4.4</span>','Submenu 4.4');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu4.5</span>','Submenu 4.5');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu4.6</span>','Submenu 4.6');<br />
ctab();<br />
at_attach("<span style="color: #009900; font-weight: bold;">idmenu4</span>", "<span style="color: #009900; font-weight: bold;">idmenu4_child</span>", "hover", "y", "pointer");<br />
<br />
otab("<span style="color: #cc33cc; font-weight: bold;">idmenu5_child</span>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu5.1</span>','Submenu 5.1');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu5.2</span>','Submenu 5.2');<br />
ctab();<br />
at_attach("<span style="color: #cc33cc; font-weight: bold;">idmenu5</span>", "<span style="color: #cc33cc; font-weight: bold;">idmenu5_child</span>", "hover", "y", "pointer");<br />
<br />
otab("<b>idmenu6_child</b>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu6.1</span>','Submenu 6.1');<br />
ctab();<br />
at_attach("<b>idmenu6</b>", "<b>idmenu6_child</b>", "hover", "y", "pointer");<br />
<br />
otab("<span style="color: #339999; font-weight: bold;">idmenu7_child</span>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu7.1</span>','Submenu 7.1');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu7.2</span>','Submenu 7.2');<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu7.3</span>','Submenu 7.3');<br />
ctab();<br />
at_attach("<span style="color: #339999; font-weight: bold;">idmenu7</span>", "<span style="color: #339999; font-weight: bold;">idmenu7_child</span>", "hover", "y", "pointer");<br />
</script></div><br />
- <span style="color: red; font-style: italic; font-weight: bold;">Chú ý :</span> <br />
<div style="padding: 0pt 0pt 0pt 30px;">+ <b>Menu 1, Menu 2, ... Menu 7</b> là các menu chính (menu cha)<br />
+ <b>Submenu 1.1, Submenu 2.1, ... Submenu 7.1, ...</b> là tên các menu phụ (menu con)<br />
+ <b>link_submenu1.1, link_submenu1.2, ... link_submenu7.1, ...</b> là link liên kết của các menu phụ ví dụ như : <i>http://www.fandung.com/search/label/B-basic</i> hoặc <i>http://www.fandung.com/p/contact.html</i><br />
+ Nếu các menu chính có liên kết đến thì các bác bạn thay kí tự # trong code của nó thành link liên kết nào đó. Ví dụ như bên dưới :<br />
<div class="codeview"><a id="<span style="color: red; font-weight: bold;">idmenu1</span>" href="<span style="background-color: lime;">http://www.fandung.com</span>" ><span style="color: red; font-weight: bold;">Menu 1</span></a></div>+ Các code cùng màu (<span style="color: red; font-weight: bold;">đỏ</span>, <span style="color: #3333ff; font-weight: bold;">xanh dương</span>, <span style="color: #009900; font-weight: bold;">xanh</span>, <span style="color: #ff6600; font-weight: bold;">cam</span>, <b>đen</b>, <span style="color: #cc33cc; font-weight: bold;">tím</span>, <span style="color: #339999; font-weight: bold;">xanh xám</span>)sẽ liên kết với nhau (kiểu : <b>cha - con</b>)<br />
+ Ví dụ 1 đoạn code :<br />
<div class="codeview">otab("idmenu1_child");<br />
submn('link_submenu1.1','Submenu 1.1');<br />
submn('link_submenu1.2','Submenu 1.2');<br />
ctab();<br />
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");</div>- Đây là code để hiển thị các menu con của Menu chính (cha) có tên là <b>Menu 1</b>, và code của menu cha là bên dưới :<br />
<div class="codeview"><a <i><span class="Apple-style-span" style="color: red;">id="idmenu1"</span></i> href="#" >Menu 1</a></div>- Bạn lưu ý dòng <b>id="idmenu1"</b> trong code trên, chữ <b>idmenu1</b> này bắt buộc phải giống với chữ <b>idmenu1</b> trong code của menu con, tức là đoạn code này :<br />
<div class="codeview">otab("<b><span class="Apple-style-span" style="color: red;">idmenu1</span></b>_child");<br />
submn('link_submenu1.1','Submenu 1.1');<br />
submn('link_submenu1.2','Submenu 1.2');<br />
ctab();<br />
at_attach("<b><span class="Apple-style-span" style="color: red;">idmenu1</span></b>", "<b><span class="Apple-style-span" style="color: red;">idmenu1</span></b>_child", "hover", "y", "pointer");</div>- Nếu muốn tạo thêm nhiều menu con cho menu cha <i>(ví dụ đối với menu cha <b>Học Tập</b> như trong code mẫu)</i>, ta sẽ thêm code như bên dưới :<br />
<div class="codeview">otab("idmenu1_child");<br />
submn('link_submenu1.1','Submenu 1.1');<br />
submn('link_submenu1.2','Submenu 1.2');<br />
<span class="Apple-style-span" style="color: blue;">submn('link_submenu1.3','Submenu 1.3');</span><br />
<span class="Apple-style-span" style="color: blue;">submn('link_submenu1.4','Submenu 1.4');</span><br />
ctab();<br />
at_attach("idmenu1", "idmenu1_child", "hover", "y", "pointer");</div>- Còn nếu như các bạn muốn 1 menu chính nào đó không có submenu thì các bạn chỉ việc xóa code của submenu, lấy ví dụ ở <b>Menu 6</b>, thì ta sẽ xóa đoạn code như bên dưới :<br />
<div class="codeview">...<br />
...<br />
...<br />
otab("<b>idmenu6_child</b>");<br />
submn('<span style="color: #660000; font-weight: bold;">link_submenu6.1</span>','Submenu 6.1');<br />
ctab();<br />
at_attach("<b>idmenu6</b>", "<b>idmenu6_child</b>", "hover", "y", "pointer");<br />
...<br />
...<br />
...</div>- Nếu muốn thêm 1 menu nữa (ví dụ <b>Menu 8</b>) thì ta thêm code tương tự ở 2 phần như bên dưới :<br />
<div class="codeview">...<br />
...<br />
...<br />
<a id="idmenu6" href="#">Menu 6</a><br />
<a id="idmenu7" href="#">Menu 7</a><br />
<span style="background-color: lime;"><a id="idmenu8" href="#">Menu 8</a></span><br />
</div><br />
...<br />
...<br />
...<br />
otab("idmenu7_child");<br />
submn('link_submenu7.1','Submenu 7.1');<br />
submn('link_submenu7.2','Submenu 7.2');<br />
submn('link_submenu7.3','Submenu 7.3');<br />
ctab();<br />
at_attach("idmenu7", "idmenu7_child", "hover", "y", "pointer");<br />
<br />
<span style="background-color: lime;">otab("idmenu8_child");<br />
submn('link_submenu8.1','Submenu 8.1');<br />
submn('link_submenu8.2','Submenu 8.2');<br />
ctab();<br />
at_attach("idmenu8", "idmenu8_child", "hover", "y", "pointer");</span><br />
<br />
</script></div></div><br />
Bạn nên đặt <b>menu</b> này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật <b>"Thêm tiện ích"</b> vào phần <b>header</b> thì có thể xem <a href="http://fandung.blogspot.com/2009/04/chen-them-khung-them-tien-ich-cho-phan.html">ở đây</a>.<br />
<br />
<div style="text-align: center;"><b><span style="color: red; font-size: x-large;">-------------- BONUS --------------</span></b></div><br />
- Trong demo mình có 4 mẫu menu, ở trên là code của <b>mẫu 0</b>, và đây là code của 3 mẫu còn lại, các bạn có thể download về tham khảo :<br />
<div class="codeview">http://fandung.googlecode.com/svn/trunk/menu_type1.txt<br />
http://fandung.googlecode.com/svn/trunk/menu_type2.txt<br />
http://fandung.googlecode.com/svn/trunk/menu_type3.txt</div>- để có được 1 menu với màu sắc như ý muốn, các bạn thay đổi các giá trị mã màu như trong code highlight bên dưới là được :<br />
<div class="codeview"><style type="text/css"><br />
.nav23 {<br />
height: 27px;<br />
padding: 2px 0 0;<br />
margin-right:5px;<br />
width: 100%;<br />
border-top:1px solid #bbb;<br />
border-bottom:1px solid #ffdab6;<br />
background-color:<span style="background-color: lime;">#88bb22</span>; <br />
}<br />
<br />
.nav23 a, .nav23 a:visited {<br />
color:#fff;<br />
font-weight:bold;<br />
font-family:Arial, Helvetica, sans-serif;<br />
text-decoration:none;<br />
font-size:12px;<br />
padding: 5px 10px;<br />
display: block;<br />
float:left;<br />
border-right:1px solid <span style="background-color: lime;">#528500</span>;<br />
}<br />
<br />
.nav23 a:hover {<br />
background-color:<span style="background-color: lime;">#528500;</span><br />
}<br />
<br />
.nav23sub {<br />
margin-top:1px;<br />
padding:1px;<br />
color: #fff;;<br />
margin: 1 1px;<br />
padding: 5px 10px;<br />
font-weight:bold;<br />
font-family:Arial, Helvetica, sans-serif;<br />
font-size:12px;<br />
cursor:pointer;<br />
background:<span style="background-color: lime;">#97cf26</span>;<br />
border-top:1px <span style="background-color: lime;">#d7ff86</span> solid;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
var bg_submenu="<span style="background-color: lime;">#97cf26</span>"; <br />
var bg_hv_submenu="<span style="background-color: lime;">#528500</span>"; <br />
...<br />
...<br />
...</div><span style="color: red; font-size: 130%;"><b>Chúc các bạn thành công.</b></span>Phan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.com153tag:blogger.com,1999:blog-82433928586953437.post-9165156900885058682011-12-15T02:30:00.001+07:002011-12-18T02:07:12.474+07:00[3.0.2] Nâng cấp ANCMedia Player cho trang phim<div dir="ltr" style="text-align: left;" trbidi="on">
Như đã được giới thiệu trên FD Blog : <a href="http://www.fandung.com/2011/11/tich-hop-ancplay-media-player-cho.html" target="_blank"><b style="color: red;">ANCMedia</b></a> v.2, đã được rất nhiều người chú ý. Tuy nhiên nó vẫn còn nhiều điểm cần phải sửa và nâng cấp. Không phụ lòng mọi người, mình đã dành một ngày chủ nhật quý báu của mình để nâng cấp lên <b><span style="color: red;">ANCMedia</span></b> v.3.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-9pH5gNI_9Ts/Tt2PalCCu6I/AAAAAAAABe0/U7Tr4vr_oSk/s1600/ancmedia.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="http://1.bp.blogspot.com/-9pH5gNI_9Ts/Tt2PalCCu6I/AAAAAAAABe0/U7Tr4vr_oSk/s320/ancmedia.jpg" width="320" /></a></div>
Trong v.3 mình tập trung nâng cấp các yêu cầu của bạn.<br />
<ol style="text-align: left;">
<li>Nâng cấp các server tăng nhiều hơn.</li>
<li>Thêm logo cho trình player.</li>
<li>Link id cho phim. = ><span style="background-color: orange;"> </span><span style="background-color: orange; color: red;"><blink>Nâng cấp thành công !</blink></span><span style="background-color: red; color: white;"><span style="background-color: orange;"> </span> </span>= > <a href="http://www.fandung.com/2011/12/ancmedia-v3.html#v3.0.1">Click V3.0.1! </a></li>
</ol>
Các bạn có thể xem qua dưới đây.<br />
<br />
<div style="text-align: center;">
<span style="background-attachment: scroll; background-color: #24bde2; background-image: none; background-position: 0% 0%; border-radius: 2px 2px 2px 2px; padding: 5px 10px;">Xem <a href="http://sonhaine.blogspot.com/search/label/Phim%20demo" target="_blank"><b>Demo</b></a></span> </div>
<br />
1. <b>Cài đặt</b><br />
<br />
Giống version 2, tuy nhiên sẽ đơn giản hơn nhiều.<br />
<br />
Vẫn thêm 2 thẻ div có id lần lượt vào temp của bạn.<br />
<br />
<div class="codeview">
<i><div id="anc_pl" ></div><br />
<div id="anc_tp" ></div></i></div>
<br />
Tuỳ ý bạn đặt nhé, không quan trọng là nó phải nằm ở đâu, chủ yếu người xem trang bạn dễ sử dụng hơn.<br />
<br />
Tiếp đó, thêm đoạn code sau trước <b></body></b><br />
<br />
<br />
<div class="codeview">
<script src="http://anhnc.googlecode.com/svn/trunk/ver2/ancmedia.js"></script> <script><br />
//<![CDATA[<br />
<br />
var anc = {<br />
width : "80%", height : "450", id1: "Blog1", id2:"anc_pl",id3: "anc_tp", home: "Maphim.net",<br />
logo : "http://2.bp.blogspot.com/-xwLxZaIcs8k/Tr6g09EcZaI/AAAAAAAABSo/12m5iuww1Qo/s1600/logo_2.png" <br />
};<br />
ANCMedia.call(anc);<br />
M.pl(M.r());<br />
<br />
//]]><br />
</script> </div>
<br />
Giải thích thêm :<br />
<br />
<div class="codeview">
<b>width:</b> <i>chiều rộng của player (đơn vị px, cm, em, %...)</i><br />
<b>height: </b><i>chiều cao của player (đơn vị px, cm, em, %...)</i><br />
<b>id1 :</b> <i> id chứa ShortCode dạng [id], <id></i><br />
<b>id2 : </b> <i> id chưa Player</i><br />
<b>id3 :</b> <i>hiển thị tập phim.</i><br />
<b>logo: </b><i>logo site của bạn add cho player.</i><br />
<b>home </b><i>: hiển thị tên server cho link .mp4, một link (tức chế độ xem Full) bằng domain của bạn.</i></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-IobImxBAGEY/Tt2UCSWhsrI/AAAAAAAABe8/BP01N6SBVOg/s1600/fandungtip2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="356" src="http://3.bp.blogspot.com/-IobImxBAGEY/Tt2UCSWhsrI/AAAAAAAABe8/BP01N6SBVOg/s400/fandungtip2.jpg" width="400" /></a></div>
<br />
2. <b>Sử dụng</b><br />
<br />
Để tránh một số lỗi mà các bạn đang than vãn về hiển thị của ANCMedia, mình đã fix lại cách post phim. Các bạn có thể dùng cả 2 cách sau.<br />
<br />
<div class="codeview">
1. <id>Link phim</id><br />
2. [id]Link phim[/id] </div>
<br />
Sử dụng cách mới đó là <i><id></i>, các bạn thêm vào temp của mình một định nghĩa CSS cho thẻ <i><id></i> là color trùng với màu nền trang của bạn. VD: Site mình là http://maphim.net, có màu nền là #F0f0f0. Vậy mình phải thêm vào CSS là<br />
<br />
<div class="codeview">
id{color: #F0f0f0; display: none; background: #F0f0f0;} </div>
<br />
Nếu ai chưa hiểu cách post có thể qua <a href="http://www.fandung.com/2011/11/tich-hop-ancplay-media-player-cho.html" target="_blank"><b><span style="color: red;">ANCMedia</span></b></a> v.2 để xem, mình không giới thiệu lại nữa.<br />
<br />
Hỗ trợ các server sau :<br />
<div class="codeview">
"google.com","nhaccuatui.com","clip.vn","phimvang.org",".mp4",".flv","banbe.net","youtube.com","videobb.com","novamov.com","vidxden.com","2shared.com","4shared.com","cyworld.vn","dailymotion.com","videozer.com </div>
<br />
Dạng link post phim:<br />
<br />
<div class="codeview">
http://www.youtube.com/watch?v=Qigx0HbS7bA<br />
http://videobb.com/video/hn6WGrQcNnOu<br />
http://www.novamov.com/video/4ysd2p7v16db7<br />
http://www.cyworld.vn/v2/myhome/video/detail/homeid/12001054026/post/5408/Warrior 2011 clip1<br />
http://www.vidxden.com/s0c5muac9igy/Kido_Night_01.flv.html<br />
http://banbe.net/1172070183/video/index/detail/id/8890<br />
http://video.google.com/videoplay?docid=-8153436258414727634<br />
http://clip.vn/watch/MC-Tran-Thanh-the-hien-tai-nang-ca-hat,hdOl?fea-id=181<br />
http://phimvang.org/xem-phim/hung-dong-the-twilight-saga-breaking-dawn-part-1-2011/sv6/28201111.html<br />
http://www.nhaccuatui.com/nghe?L=IU5yMLjZEx3U<br />
http://www.4shared.com/video/8h74u-Bw/vietsub_ky_bang_ha.html<br />
http://123.30.111.58/phim/jimmy/m2/OldMasterQandLittleOceanTiger2011_111126.mp4?start=0</div>
<br />
<br />
<br />
Riêng server <i>.flv</i> bạn có thể sửa thành đuôi link post phim thành <i>.anc</i> thì mới chạy được. Xin lỗi vì bất tiện này.<br />
<br />
3. <b>Kết</b><br />
* Hiện tại đã có tới 15 server đã được cập nhật, tiến tới sẽ tăng số server lên thành 60, đáp ứng hết nhu cầu của các bạn.<br />
* Tiếp tục phát triển nâng cấp chức năng link id.<br />
* Phát triển chế độ bảo mật cho link phim. Hiện tại đang được sử dụng tại http://maphim.net.<br />
<br />
<b><span style="color: red;">Update</span></b>: Fix chức năng hiển thị tên server.<br />
<br />
*Nếu bạn post link dạng <id>Tên phim(Hoặc tập số bao nhiêu);link phim;linkphim2...|</id><br />
<br />
- Post phim để <i><b>tên</b></i> thì các part có cùng <b><i>tên</i></b> với nó sẽ hiển thị chung có dạng "Ten-1", "Ten-2"..<br />
<br />
<br />
<div class="codeview">
Code <br />
<id>Media;link1;link2;link3|</id> <br />
Hiển thị<br />
Media-1| Media-2| Media-3<br />
<br /></div>
- Post phim để <i><b>số</b></i> thì sao.<br />
<br />
<div class="codeview">
Code <br />
<id>1;link1;link2;link3|</id> <br />
Hiển thị<br />
1a| 1b| 1c</div>
<i><br />
</i><br />
<i><span style="color: red;">* <span style="color: black;">(05/12/2011)Nâng cấp thêm Gdata Youtube, lấy playlist trên Youtube, các bạn paste id Gdata với dạng :</span></span></i><br />
<br />
<i><span style="color: red;"><span style="color: black;">anc.yl/id Gdata -- > <a href="http://sonhaine.blogspot.com/2011/12/gdata-youtube.html" target="_blank">Tester</a></span></span></i><br />
<i><span style="color: red;"><span style="color: black;"> </span></span><br />
</i><br />
<div id="v3.0.1">
<i><span style="color: red;"><span style="color: black;"><span style="color: red;">*</span> (15/12/2011) Nâng cấp thành công link id, file update : http://anhnc.googlecode.com/svn/trunk/ver2/anc3.0.1.js</span></span></i><br />
<i><span style="color: red;"><span style="color: black;">Kiểm nghiệm: Hãy so sánh sự khác nhau của các link sau.</span></span></i><br />
<i><span style="color: red;"><span style="color: black;"> </span></span><br />
</i><br />
<i><span style="color: red;"><span style="color: black;">Tập 1 : <a href="http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=0,1%20" target="_blank">http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=0,1 </a></span></span></i><br />
<i><span style="color: red;"><span style="color: black;">Tập 3: <a href="http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=2,1%20" target="_blank">http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=2,1 </a></span></span></i><br />
<i><span style="color: red;"><span style="color: black;">Tập 11: <a href="http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=10,1">http://www.maphim.net/2011/11/phim-tieu-thu-i-hoc-2011-50-tap.html#p=10,1</a></span></span></i><br />
<i><span style="color: red;"><span style="color: black;"> </span></span><br />
</i><br />
<i><span style="color: red;"><span style="color: black;">Tiện ích giúp bạn chia sẻ link cho bạn bè dễ dang hơn.</span></span></i><br />
<br />
<i><span style="color: red;"><span style="color: black;">Các bạn tìm và thay ancmedia.js = > anc3.0.1.js</span></span></i><br />
<i><span style="color: red;"><span style="color: black;">Thêm dưới dòng M.pl(M.r()); đoạn code sau : M.pl(M.glink(M.r()));</span></span></i><br />
<i><span style="color: red;"><span style="color: black;"> </span></span><br />
</i> </div>
<i>* (18/12/2011) Nâng cấp hoàn chỉnh cho ANCMedia ver 3.0.2 = > Thông tin cập nhật tại :</i><br />
<br />
<a href="http://play.maphim.net/media/v3.0.1/" target="_blank"> http://play.maphim.net/</a><br />
<br />
<i>Chúc bạn thành công ! </i></div>Unknownnoreply@blogger.com138tag:blogger.com,1999:blog-82433928586953437.post-59040945029308828732011-12-14T21:53:00.000+07:002011-12-15T02:41:36.944+07:00Ngẫu hứng Blogger (3)<div dir="ltr" style="text-align: left;" trbidi="on">
Các bài viết trước, mình có chú trọng nhắc đến đối tượng "Data". Gọi nó là đối tượng không biết là đúng hay sai. Nhưng cùng là newbie với nhau, nói theo ý hiểu của mình. Sai thì nhờ unnewbie chỉ giúp.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-2E1xxViAOx4/Tuh-XOyGzAI/AAAAAAAABnM/BPyvDfw_8yk/s1600/Ojingogo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="http://3.bp.blogspot.com/-2E1xxViAOx4/Tuh-XOyGzAI/AAAAAAAABnM/BPyvDfw_8yk/s320/Ojingogo.jpg" width="320" /></a></div>
<br />
Chủ đề hôm này, tên tiếng Anh chuẩn là "<i><b>Layouts Data Tags</b></i>". Có nhiều loại data khác nhau với mục đích chỉ dùng trong các widget phù hợp. Data được nhận biết theo 2 dạng sau. Thứ nhất là <code><data:name/> </code> , name ở đây có thể là một đối tượng dữ liệu không có thuộc tính riêng (VD: <data:content>... ). Thứ 2 là dạng </data:content><code><data:name1.name2/></code>, name1 là đối tượng, name2 là thuộc tính riền của nó (VD: post.title, post.url...).<br />
<br />
Có các loại widget phổ biến sau :<br />
<br />
<table style="margin-left: auto; margin-right: auto;"><tbody>
<tr> <td>Globally Available Data<br />
Page Header<br />
Blog Posts<br />
Blog Archives<br />
Profile<br />
Text / HTML / JavaScript</td><td width="80px"><br /></td><td>Feed<br />
Picture<br />
Labels<br />
List<br />
Link List<br />
Logo</td></tr>
</tbody></table>
<br />
Với số lượng widget kể trên, chúng ta không thế nào nhớ hết được tất các các biến data của nó. Các biến đó mình cũng tham khảo bên support blogger. Đừng nghĩ ở đây ai hơn ai nhé, mình cũng chỉ như các bạn, đang chập chững bước vào đây. Nhưng mình đang thấy nhiều bạn đang tìm cách học sai, không nắm được căn bản, chắc sẽ mày mò rất lâu, một năm, 2 năm... chắc mới có thể ngẫm ra. Các bạn đọc và chịu khó thực hành, code nhiều các bạn sẽ luận ra và nhớ hết đa số các biến. ^^! .. Chém nhiều quá ! Giờ quan tâm chủ yếu đến Blog Post, phần trung tâm của BlogSpot. Các biến trong widget này bao gồm : <span style="color: #990000;">feedLinks, olderPageUrl, oderPageTitle, </span><b style="color: #990000; font-weight: normal;">newerPageUrl, </b><b style="color: #990000; font-weight: normal;">newerPageTitle, </b><b style="color: #990000; font-weight: normal;">commentLabel, </b><b style="color: #990000; font-weight: normal;">authorLabel, </b><b style="color: #990000; font-weight: normal;">timestampLabel, </b><b style="color: #990000; font-weight: normal;">postLabelsLabel, </b><b style="color: #990000; font-weight: normal;">backlinksLabel, </b><b style="font-weight: normal;"><span style="color: #990000;">posts... </span></b><br />
<br />
<b style="font-weight: normal;"><span style="color: #990000;"> <span style="color: black;">Để sử dụng các biến này, bạn phải tạo widget phù hợp đó là type = "<span style="color: #cc0000;">Blog</span>", kèm theo đó là có luồng tương ứng. Mình sẽ liệt kê kèm theo dưới đây, liệt kê theo sơ đồ luồng code dưới dây cho các bạn dễ hình dung nhé.</span></span></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Bm2wujjogN8/TuieQ6W707I/AAAAAAAABnc/45_1XX-6d5I/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-14_195625.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="http://1.bp.blogspot.com/-Bm2wujjogN8/TuieQ6W707I/AAAAAAAABnc/45_1XX-6d5I/s320/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-14_195625.png" width="320" /></a></div>
<br />
Trước hết, <b style="font-weight: normal;">các bạn để ý cho mình nhé, luồng nào chứa khai báo <i><b>var, </b></i>nó sẽ có một vòng lặp Loop bên trong. Vì nó thuộc dạng danh sách (các bạn có thể phóng to ảnh để theo dõi). Để đưa một biến vào thuộc tính của thẻ HTML như href, src, title ...Các bạn phải thêm từ khoá expr để BlogSpot khi biên dịch có thể hiểu được đây là biến data chứ không phải giá trị của thẻ HTML.</b><br />
<br />
<b>1</b><b><b style="font-weight: normal;">. </b><span style="color: #990000;"></span></b><b style="font-weight: normal;"> </b><b>Nextprev</b><b style="font-weight: normal;"> : Luồng chứa nhóm điều hướng, hiển thị link bài viết cũ và mới.</b><br />
<br />
<b style="font-weight: normal;">Bao gồm các biến được quan tâm : </b><br />
<br />
<b style="font-weight: normal;">data:newerPageUrl, data:newerPageTitle (Nhóm bài viết mới)</b><br />
<b style="font-weight: normal;">data:olderPageUrl, data:olderPageTitle (Nhóm bài viết cũ.)</b><br />
<b style="font-weight: normal;">data:blog.homepageUrl,data:homeMsg (Nhóm trang chủ - Hiển thị )</b><br />
<br />
<b>2. ShareButtons</b> : Chia sẻ liên kết bài viết với mạng XH. Cái này các bạn tìm hiểu thêm nhé, cũng không khó, mình không đưa vào, vì sợ bài viết dài.<br />
<br />
<b>3. Backlinks </b>: Phần tạo liên kết bài viết giữa các site, cái này chắc để sau. Nếu các bạn cần mình sẽ giới thiệu, mình cũng không mò vào đây vì không dùng nó mấy :D<br />
<br />
<b>4. Post </b>: Đứa con mà các bạn chăm sóc nhiều nhất. nơi đây chứa biến name1: <i><b>post</b></i>, gồm các thuộc tính name2 sau:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-2ALw5kyqXy0/TuitqueB9KI/AAAAAAAABnk/E49IyzTwom0/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-14_210651.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="http://2.bp.blogspot.com/-2ALw5kyqXy0/TuitqueB9KI/AAAAAAAABnk/E49IyzTwom0/s400/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-14_210651.png" width="400" /></a></div>
<br />
<b>5. Status message</b> : Đây là thanh Navigation của bạn.<br />
<br />
<b>6. Main</b> : Phần này quan trọng với trang đây. Các bạn có thể tưởng tượng nơi đây là nơi tập trung các dữ liệu bên ngoài vào. Trích xuất, lọc thành biến : <i>post (posts), coment(coments), link (links)..</i>và đưa ra các hàm con (hàm con có thể hiểu ở đây là các luồng đã xét ở trên). Xét thấy sự phù hợp giữa name trong main và id của các luồng kể trên, dữ liệu sẽ được rót vào các luồng có (luồng bên ngoài)id = name(main) đó.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Z217RJdFJac/TuieQAJcIUI/AAAAAAAABnU/i9JIlAsx-tw/s1600/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-14_195534.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="http://1.bp.blogspot.com/-Z217RJdFJac/TuieQAJcIUI/AAAAAAAABnU/i9JIlAsx-tw/s320/%25E1%25BA%25A2nh+ch%25E1%25BB%25A5p+m%25C3%25A0n+h%25C3%25ACnh_2011-12-14_195534.png" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Cũng có thể điều đó là ngược lại, đây là hàm chính, hãy nhìn sự sắp xếp từ trên xuống. Các hàm con được gọi vào và sắp xếp theo thứ tự mà ta từng thấy :<i> Thanh Navigation, Bài viết, Link điều hướng, Feeds...</i><br />
<br />
Phần này mình cũng chỉ hiểu mơ hồ, biết sao nói vậy. Nếu các bạn thấy sai, mình sẽ edit lại. Nhưng mình dám chắc mình đang nói đúng. Vậy có thể coi Main là cái thùng lớn, dữ liệu được lọc thông qua các ống include có id và name tương ứng nhau. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: red;"><span style="color: black;"><b>7. Comments</b></span></span><br />
<span style="color: red;"><span style="color: black;"> Nơi chứa comment biến tương ứng từ số 24 -- > 30 trong bảng trên.</span></span><br />
<br />
<i><b>Kết lại.</b></i><br />
Còn rất nhiều biến data đang chờ bạn khám phá, các bạn có thể đoc thêm <a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=47270" target="_blank">tại đây</a>. Nếu nắm rõ sơ qua một chút cấu trúc của BlogSpot, cho dù là tiếng Anh thì bạn vẫn có thể hiểu nó đang nói gì. Mong có nhiều bạn đọc nó, hiểu nó hơn mình và tìm ra nhiều thủ thuật hay. Để Blog trở thành một nơi làm việc rẻ nhất, đông vui nhất. Khả năng diễn dải có hạn, cho dù mình biết nhưng chưa chắc đã nói được hết ý đang suy nghĩ, nếu có điều gì đó làm các bạn nhức nhối, xin bỏ qua cho mình.<br />
<br />
Cảm ơn đã đọc bài viết của mình. Hẹn trong các chia sẻ tới. Bye !<br />
<br /></div>Unknownnoreply@blogger.com16tag:blogger.com,1999:blog-82433928586953437.post-48349636555526293272011-12-14T07:26:00.006+07:002011-12-14T14:39:10.432+07:00Ngẫu hứng Blogger (2)<div dir="ltr" style="text-align: left;" trbidi="on">Do tên gọi kia hơi dài, mình xin được phép đổi tên chủ đề "Bạn biết gì về BlogSpot, hãy chia sẻ cung tôi". Trong số 2 này mình sẽ nói về các đối tượng bên trong của widget, bao gồm : Include (Luồng), Data (Dữ liệu), Loop (Vòng lặp), If/Else (Biểu thức điều kiện).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-8gXFupz7NQk/Tuf-3DcGkkI/AAAAAAAABm0/i-mkYr25l_I/s1600/fandung.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="http://3.bp.blogspot.com/-8gXFupz7NQk/Tuf-3DcGkkI/AAAAAAAABm0/i-mkYr25l_I/s400/fandung.jpg" width="400" /></a></div><br />
Nhắc đến <a href="http://www.fandung.com/2011/12/ban-biet-gi-ve-blogspot-hay-chia-se.html" target="_blank">bài trước</a>, bạn đã thử thực hành với 2 đối tượng section và widget chưa. Nếu chưa, hãy làm thử đi nhé. Đơn giản hãy chỉ tạo thử một section header, trong đó chứa một widget HTML, bạn cho nó hiển thị hình ảnh trong 3 trang khác nhau : index, item, static page.<br />
<br />
<b>C.Luồng (Include)</b><br />
<br />
Luồng là một đối tượng con, nằm trong widget. Hiểu nôm na, nó như một ống dẫn truyền dữ liệu từ CSDL vào widget. Do vậy nếu tạo widget mà không có luồng, sẽ có lỗi xảy ra.<br />
<br />
Cấu tạo một luồng như sau :<br />
<br />
<div class="codeview"><code><b:includable id='{tên id}' var='{Biến}'><br />
{Nội dung hiển thị}<br />
</b:includable></code></div><br />
Giải thích : <br />
<div class="codeview"><br />
<b>id</b>: Định danh duy nhất trong widget để luồng tham chiếu.<br />
<b>var</b> : Biến đặt cho luồng truyền giá trị vào, và ở đây nó là một giá trị tham chiếu.</div><br />
Điều kiện bắt buộc là như mình đã nói ở trên, thêm vào đó, mỗi widget phải có một id = 'main'. Và để cho chắc ăn, id của luồng ta để mặc định là <span style="color: orange;">main </span>. Vấn để tạo id mới và sau đó luồng có tham chiếu đến được không. Mình xin trả lời là có, nhưng mình không dám chắc...Vì chưa thử bao giờ ^^!<br />
<br />
Luồng không những truyền dữ liệu, nó còn dùng để lấy dữ liệu trong các vòng lặp. Một VD đơn gian đó là lấy tiêu đề của các bài post. Nghĩ hình dung và kết nối, các bạn đơn giản có thể hiểu, ta đang dùng javascript để lọc feed.<br />
<br />
<div class="codeview"><code><b:includable id='main'><br />
<b:loop var='i' values='posts'><br />
<span style="color: red;"> <b><b:include name='post' data='i'/></b></span><br />
</b:loop><br />
</b:includable><br />
<br />
<b:includable id='post' var='p'><br />
Tiêu đề: <data:p.title/><br />
</b:includable></code> </div><br />
Ở đây bạn chú ý vào dòng màu đỏ, vòng lặp loop bên ngoài duyệt tất cả các bài viết (posts), chọn ra một bài viết trong đó (post), với dữ liệu là i.<br />
<br />
Chú ý đến cấu trúc trên và có thể sử dụng với các điều kiện sau:<br />
<br />
<div class="codeview"><b>name</b>: Tương ứng gấn như một id, nhưng hiện thị mình thấy nó giống một class hơn.<br />
<b>data</b> : dữ liệu truyền vào, ngầm hiểu chính là nội dung bài viết, tác giả, số comment ...</div><br />
<b>D. Dữ liệu (Data)</b><br />
<br />
Nhăc đến data, chác nhiều người sẽ hiểu. Có thể nói nó là đối tượng quan trong nhất, nó mang lại cái hồn cho Blog. Vì vậy nói ở đây chắc không thể nào có thể nói hết. Mình sẽ dành một bài viết riêng cho nó.<br />
<br />
Các bạn còn nhớ type của widget của bài viết trước chứ. Mỗi loại widget sẽ có một loại data riêng. Vì vậy bạn không thể làm cái điều "râu ông nọ cắm cằm bà kia" được.<br />
<br />
Nói qua về nó, nó có dạng sau <i>data:name1.name2</i>. Trong đó, name1 sẽ là đối tượng chính, name2 thường là các thuộc tính đi kém theo sau đó. Mình thấy nói về phần này rất hay, chắc có lẽ xin khất ở bài sau.<br />
<br />
<b>E. Vòng lặp (Loop)</b><br />
<br />
Dùng để lọc ra một phần tử trong một nhóm phần tử : nhóm bài viết(posts), nhóm nhãn(labels), nhóm bình luận (coments)...<br />
Cấu trúc :<br />
<br />
<div class="codeview"><code><b:loop var='{biến chạy, phần tử con}' values='{nhóm phần tử}'><br />
{Lặp nội dung ở đây}<br />
</b:loop></code></div><br />
Hình dung đơn giản thì đây là vòng lặp foreach, phần tử con được lấy ra trong nhóm phần tử.<br />
<br />
VD :<br />
<br />
<div class="codeview"><code><b:loop var='i' values='data:posts'><br />
<h2><data:i.title/></h2><br />
</b:loop></code></div><br />
<b>F. BT Điều kiện (If/Else)</b><br />
<br />
Biểu thức so sánh đưa ra kết quả đúng và sai..<br />
Cấu trúc :<br />
<br />
<div class="codeview"><code><b:if cond='{điều kiện}'> <br />
{hiển thị nội dung nếu là đúng}<br />
<b:else/><br />
</code><code> {hiển thị nội dung nếu là sai}</code><br />
<code> </b:if></code></div><br />
Điều kiện ở đây thường là so sánh các đối tượng data với giá trị đã biết để tạo ra các kết quả đúng và sai. Một VD đơn giản là so sánh số bài viết, nếu lớn hơn 1 hiển thị 'A', nhỏ hơn bằng 1 hiển thị 'a'.<br />
<br />
<div class="codeview"><code><b:if cond='data:post.numComments > 1'><br />
<font color="red">A</font> <br />
<b:else/><br />
<font color="red">a</font> <br />
</b:if></code></div><br />
<br />
Nó có thể năm ngoài widget, tuy nhiêu không được đặt biểu thức if/else giữa widget và include.<br />
<br />
<b>Tổng kết.</b><br />
<br />
Qua đây bạn chắc bạn đã thực sự hiểu sơ qua về cấu trúc của một BlogSpot. Biết được ai là cha, ai là con. Mình xin được tổng kết lại các phần đã giới thiệu đơn giản như sau:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-wU4t7Y_tf2g/Tuf7KVc4uKI/AAAAAAAABmk/HtwL8cgfjmk/s1600/fandung_tut2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="http://2.bp.blogspot.com/-wU4t7Y_tf2g/Tuf7KVc4uKI/AAAAAAAABmk/HtwL8cgfjmk/s320/fandung_tut2.png" width="320" /></a></div>Có gì sai hãy bổ sung, góp ý với mình nhé. Rất cảm ơn. Hẹn các bạn ở bài viết tới.<i><b> Layouts Data Tags.</b></i> </div>Unknownnoreply@blogger.com19tag:blogger.com,1999:blog-82433928586953437.post-39605701149544865942011-12-13T17:36:00.002+07:002011-12-14T14:40:16.850+07:00Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://1.bp.blogspot.com/-cfXGK8VEQwI/TugF1XGWbGI/AAAAAAAABm8/8gmnrDan08E/s1600/multiple-authors-blog.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com/-cfXGK8VEQwI/TugF1XGWbGI/AAAAAAAABm8/8gmnrDan08E/s1600/multiple-authors-blog.png" /></a>Mình cũng mới tham gia FanDung Blog. Nhưng xem qua chưa có chuyên mục nào giới thiệu hay tìm hiểu sơ lược về BlogSpot. Mà hầu như chỉ tập chung chủ yếu vào "<i><b>hack</b></i>". Với những người vọc nhiều, am hiểu sơ qua về các ngôn ngữ lập trình, chuyện hack nó chả có gì là khó. Nhưng đối với nhiều bạn mới tham gia viết Blog như mình, cũng cần có thêm kinh nghiệm về BlogSpot. Mình yêu BlogSpot vì tính năng tuỳ biến của nó. Nói đơn giản hơn : Ngon - Bổ - Rẻ.<br />
<br />
Chính vì lý do đó, mình viết bài viết "<b><i>Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.</i></b>" để chia sẻ nhưng gì mình biết, để mọi người cùng tham khảo, cùng vọc. Và lớn hơn nữa nó sẽ thành chuyên mục TUT sử dụng BlogSpot quen thuộc của mọi người. Cũng mong nó sẽ hỗ trợ phần nào đó phần design của các bạn tốt hơn.<br />
<br />
Trong bai viết này, mình chỉ nói sơ qua về một số đối tượng Blogspot. Nếu nói điều gì đó chưa đúng hay sai về lý thuyết mong được đóng góp của mọi người, dù sao mình cũng không phải dân làm web ^^!. Không dám múa rìu qua mắt thợ :D<br />
<br />
<b>A</b>.<b>Section</b><br />
<br />
Đầu tiên, thứ mình biết được đầu tiên là trong BlogSpot được chia làm các khối lớn. Các khối này được nằm trong thẻ <code><section>, </code> các khối section này chứa các widget, HTML hay các tiện ích thêm vào mà các bạn vẫn hay dùng. Trong một trang bạn có thể chia làm nhiều <code><section> </code>.Không cứ bắt buộc theo temp chuẩn là chỉ có header, main, sibar đâu nhé. Các bạn có thể tuỳ biến thêm các section cho trang của mình.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-Si0C77hnBNI/Tucle2qyIbI/AAAAAAAABmI/XlMebx4MTcE/s1600/Fandung_tut1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="218" src="http://1.bp.blogspot.com/-Si0C77hnBNI/Tucle2qyIbI/AAAAAAAABmI/XlMebx4MTcE/s320/Fandung_tut1.png" width="320" /></a></div><br />
<br />
Và lưu ý nhé, section mình nói trên phài đặt trong thẻ đóng và mở là<br />
<code><b:section {thuộc tính}></b:section.></code><br />
<br />
Nó là thẻ bắt buộc phải có trong một template, nếu không có một thẻ này, BlogSpot sẽ báo lỗi khi up template.<br />
<br />
<b><i>Và kể từ nay trở về sau, các bạn sẽ tử hiểu các cấu trúc thành phần cấu tạo nên BlogSpot cũng sẽ phải nằm trong thẻ đóng, mở <b:></b:></i></b><br />
<br />
Mỗi <section> trong template được tạo như sau.<br />
<br />
<div class="codeview"><code><b:section id='{tên id}' class='{tên class}' maxwidgets="{số lượng}" showaddelement="{yes, no}"> <br />
</b:section></code></div><br />
Giải thích thuộc tính như sau :<br />
<br />
<div class="codeview">id: Là tên duy nhất đặt cho section.<br />
class: dùng để code CSS cho section.<br />
maxwidgets: Số lượng widget có thể nằm trong. Widget tý sẽ kể đến ^^!<br />
showaddelement: Có cho phép thêm phần tử vào section không.</div><br />
Ngoài ra, còn có thêm một thuộc tính <b>growth: </b>định dạng kiểu dáng của section<b> "</b>horizontal","vertical" (nằm, đứng). Nhưng mình nghĩ cũng chả khi nào dùng đến, vì bo CSS rồi. Thuộc tính id sẽ là bắt buộc, các thuộc tính còn lại là tuỳ biến, tức là có hoặc không.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-lqCUIxTijE4/TucqXBMAY2I/AAAAAAAABmQ/pnqADffuZMc/s1600/section.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="http://1.bp.blogspot.com/-lqCUIxTijE4/TucqXBMAY2I/AAAAAAAABmQ/pnqADffuZMc/s400/section.png" width="400" /> </a></div><div class="separator" style="clear: both; text-align: left;"><b>B.Widget </b></div><br />
Widget ta có thể tạm hiểu là một phần tử con của Section.<br />
<br />
Tạo một widget :<br />
<br />
<div class="codeview"> <code><b:widget id="{tên id}" type='{loại}' locked="{yes,no}" title="{Tên Widget}"/></code></div><br />
Giải thích :<br />
<br />
<br />
<div class="codeview"><b>id</b>: Trường thuộc tính duy nhất và bắt buộc, BlogSpot thường dựa vào id để lưu lại cấu hình về css, cũng như data của nó. Mỗi khi bạn restore hay thay thế temp mới, các dữ liệu sẽ tự động đẩy vào các widget trống.<br />
<b>type</b>: Bao gốm các dạng sau : <span style="color: orange;">BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList,List, Logo, BlogProfile, Navbar, VideoBar, NewsBar, ListView ....</span> Trong đó HTML được chúng ta sử dung nhiều nhất.<br />
<b>locked</b>: Được phép di chuyển hay không ở trong phần tử trang.<br />
<b>title</b><b> : </b>Tên widget<b>.</b></div><br />
Ngoài ra còn một số thuộc tính :<br />
<br />
<div class="codeview"><b>pageType</b><span style="font-weight: normal;"> </span><b><span style="font-weight: normal;">(cho phép hiển thị ở trang nào) : Giá trị : <span style="color: orange;">all, </span></span></b><span style="color: orange;">archive, main, item</span><b><span style="color: orange;"> </span> - > </b>phần này dành cho phân trang rất hay, các bạn không cần dùng đến if để kiểm tra pageType nữa.<br />
<b></b><br />
<b>mobile</b><span style="font-weight: normal;">: (cho phép hiển thị với điện thoại di động không) : Giá trị: yes, no.</span> </div><br />
Trong blog của bạn, tất cả các thẻ <section> <b:section> và <widget><b:widget> sẽ được thay thế bằng thẻ <div></b:widget></b:section>, mà sẽ có ID quy định. Do vậy, các bạn có thể bo CSS bằng chính các id mà bạn đã đặt.<br />
<br />
Giờ bài viết đã dài, mình cũng hơi mỏi tay rồi. Hẹn các bạn trong số tiếp theo. Trong bài sau mình sẽ giới thiệu về : Include (Luồng), Data(Dữ liệu), Loop (Vòng lặp), If/Else (Biểu thức điều kiện)<br />
<br />
Xin hẹn các bạn trong bài viết sau. Cảm ơn về ý kiến của các bạn !</div>Unknownnoreply@blogger.com22tag:blogger.com,1999:blog-82433928586953437.post-955133388432742752011-12-12T21:38:00.002+07:002011-12-14T14:41:27.649+07:00Blogger chính thức add avatar vào comment feed<div style="text-align: justify;">Mấy bữa nay ngồi mày mò vài thứ nên ko biết chút thông tin mới nào về blogger. Hôm nay đi dạo 1 vòng mình mới thấy. Nhân tiện đây mình giới thiệu luôn cho mọi người. Trước kia, khi blogger chưa add avatar vào comment feed thì mình có giới thiệu cho các bạn 1 thủ thuật recent comment có avatar, khi đó mình phải dùng tới php để lấy ảnh, nên load rất chậm, và rất ít người dùng. Nay blogger đã add avatar vào feed rồi thì chúng ta không còng phải lo về vấn đề load chậm nữa.</div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-ufrmP9b47fA/TuYRErtuePI/AAAAAAAACIY/AtkcRnIQEus/s1600/rcomment-avatar-update.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="250" src="http://1.bp.blogspot.com/-ufrmP9b47fA/TuYRErtuePI/AAAAAAAACIY/AtkcRnIQEus/s400/rcomment-avatar-update.png" style="border: 1px solid #555; padding: 2px;" width="300" /></a></div><br />
Nhân tiện hôm nay mình cũng sẽ update lại thủ thuật recent comment mà mình đã giới thiệu trước đó. Ngoài việc cập nhật cho avatar cho tiện ích, mình còn fix 1 lỗi mà trước kia post thủ thuật mình đã không để ý. đó là trong trường hợp bài viết bị xóa (không phải xóa vĩnh viễn) thì thủ thuật bị lỗi và không chạy được.<br />
<br />
<div style="text-align: center;">Các bạn có thể xem demo ở đây :</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><b style="background: #24bde2; border: 1px solid #4adcff; color: white; padding: 5px 10px;"><a href="http://apps.fandung.com/p/top-50-new-comments.html" target="_blank">DEMO</a></b></div><br />
Để update thủ thuật, các bạn chỉ việc cập nhật lại file js trong bài hướng dẫn trước. Nếu ai chưa từng thực hiện thủ thuật thì vào lại bài cũ để xem hướng dẫn. <br />
Link : <a href="http://www.fandung.com/2011/06/recent-comments-voi-anh-ai-dien.html">http://www.fandung.com/2011/06/recent-comments-voi-anh-ai-dien.html</a> <br />
<br />
<b>File js đã update :</b><br />
<div class="codeview">http://fandung.googlecode.com/svn/trunk/js/recent-comment-avatar.js</div>Phan Dũnghttp://www.blogger.com/profile/04749296400753058357noreply@blogger.com25