Nhờ tiện ích này mà người đọc có thể dễ dàng phân biệt được đâu là tác giả - Admin của blog nếu blog của bạn cho phép nhiều người được quyền đăng bài viết.
Tuesday, 14 February 2012
Tiện ích Về tác giả ở cuối bài viết Blogger
Nhờ tiện ích này mà người đọc có thể dễ dàng phân biệt được đâu là tác giả - Admin của blog nếu blog của bạn cho phép nhiều người được quyền đăng bài viết.
Monday, 13 February 2012
Chèn link Google Search vào footer của bài viết
Ở 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).
Xem DEMO
Jquery Slider Tin Tức - News Slider
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.
các bạn xem hình bên dưới.
CSS bên dưới ( mọi người tự căn chỉnh nhé !) và đặt nó trên thẻ </head>
.
Xem DEMO
các bạn xem hình bên dưới.
Thursday, 9 February 2012
ANCData - 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 ở function showrecentposts(json) 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.
(ViewSource Demo để xem code)
Nhưng đặc điểm bất tiện của hàm này là với mỗi lần callback showrecentposts trong đoạn script ví dụ sau.
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 showrecentposts2, showrecentpost3, showrecentposts4 ...v.vv cho các tag mới.
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 callback duy nhất : ancdata. 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.
* Thuộc tính.
title : tiêu đề bài viết.
url : link bài viết.
label: nhãn bài viết.
img: ảnh bài viết
- img.f : file ảnh đầu tiên của bài viết kich thươc full khổ.
- 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.
content: nội dung toàn bộ bài viết.
snippet : nội dung tóm tắt gồm 120 ký tự.
date: ngày tháng năm gửi bài
- date.d : ngày
- date.m : tháng
- date.y : năm
author: tác giả gửi bài viết.
* Sử dụng :
B1: Bạn chỉ cần chèn đoạn mã sau vào sau thẻ <head> hoặc sau <body>
B2: Giờ bạn sẽ sử dụng ANCData một cách dễ dàng.
Giả sử mình muốn tạo ra một module có cấu trúc như hình sau.
Mình chỉ cần viết như sau :
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.
Note: Để gọi các biến trong thuộc tính, bạn cần thêm trước anc.thuoctinh
Muốn lấy một tag trong list tag bạn chỉ cần viết. anc.label.split(',')[vitri tag can lay]
Chúc các bạn thành công !
(ViewSource Demo để xem code)
Nhưng đặc điểm bất tiện của hàm này là với mỗi lần callback showrecentposts trong đoạn script ví dụ sau.
<script src="http://www.maphim.net/feeds/posts/default/-/Phim chiếu rạp?max-results=4&orderby=published&alt=json-in-script&callback=showrecentposts ">
</script>
</script>
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 showrecentposts2, showrecentpost3, showrecentposts4 ...v.vv cho các tag mới.
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 callback duy nhất : ancdata. 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.
* Thuộc tính.
title : tiêu đề bài viết.
url : link bài viết.
label: nhãn bài viết.
img: ảnh bài viết
- img.f : file ảnh đầu tiên của bài viết kich thươc full khổ.
- 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.
content: nội dung toàn bộ bài viết.
snippet : nội dung tóm tắt gồm 120 ký tự.
date: ngày tháng năm gửi bài
- date.d : ngày
- date.m : tháng
- date.y : năm
author: tác giả gửi bài viết.
* Sử dụng :
B1: Bạn chỉ cần chèn đoạn mã sau vào sau thẻ <head> hoặc sau <body>
<script src="http://anhnc.googlecode.com/svn/trunk/ANC/data/feed.js"></script> <script>
anc.home ="domain của bạn"; // (mặc định là maphim.net)
anc.post = sô lượng tối đa ; // (mặc định là 100)
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
</script>
anc.home ="domain của bạn"; // (mặc định là maphim.net)
anc.post = sô lượng tối đa ; // (mặc định là 100)
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
</script>
B2: Giờ bạn sẽ sử dụng ANCData một cách dễ dàng.
Giả sử mình muốn tạo ra một module có cấu trúc như hình sau.
Mình chỉ cần viết như sau :
<div class="box">
<h3>Phim hành động mới</h3>
<div class="bcontent">
<script src="http://www.maphim.net/feeds/posts/default/-/Hành động?max-results=4&orderby=published&alt=json-in-script&callback=ancdata">
</script>
<script>
for (var i =0; i< anc.max; i++){
document.write('<li><a href='+anc.url[i]+'>'+anc.title[i]+'</a></li>');
}
</script>
</div>
</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.<h3>Phim hành động mới</h3>
<div class="bcontent">
<script src="http://www.maphim.net/feeds/posts/default/-/Hành động?max-results=4&orderby=published&alt=json-in-script&callback=ancdata">
</script>
<script>
for (var i =0; i< anc.max; i++){
document.write('<li><a href='+anc.url[i]+'>'+anc.title[i]+'</a></li>');
}
</script>
</div>
</div>
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.
Note: Để gọi các biến trong thuộc tính, bạn cần thêm trước anc.thuoctinh
Muốn lấy một tag trong list tag bạn chỉ cần viết. anc.label.split(',')[vitri tag can lay]
Chúc các bạn thành công !
Sunday, 5 February 2012
Đưa Radio vào Blog của bạn (Yêu cầu)
Đáp ứng yêu cầu của giáo xứ phú giáo, 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. ..
Style CSS :
Đài của mình..
Chúc các bạn thành công !
Style CSS :
<style>
.radio{padding-top: 5px; border: 1px dashed #cccccc; width: 430px; position: fixed; bottom: 20px; right: 0px;}
li{list-style:none;float:left; margin-left: 10px; padding: 5px;}
li:hover{background-color: #494949; box-shadow: 1px 0px 3px;}
li:active{box-shadow: 2px 1px 3px;}
li.p{margin-left:30px; color: green; box-shadow: 2px 0px 3px 1px;}
li.p:hover{background:none;}
li.p span{text-decoration:blink;}
a{text-decoration:none; color: #888888; font-size: 12px;}
#player{margin-top:20px;}
</style>
.radio{padding-top: 5px; border: 1px dashed #cccccc; width: 430px; position: fixed; bottom: 20px; right: 0px;}
li{list-style:none;float:left; margin-left: 10px; padding: 5px;}
li:hover{background-color: #494949; box-shadow: 1px 0px 3px;}
li:active{box-shadow: 2px 1px 3px;}
li.p{margin-left:30px; color: green; box-shadow: 2px 0px 3px 1px;}
li.p:hover{background:none;}
li.p span{text-decoration:blink;}
a{text-decoration:none; color: #888888; font-size: 12px;}
#player{margin-top:20px;}
</style>
Đài của mình..
<div class="channel">
<li><a href="javascript:radio('vov1')">VOV1</a></li>
<li><a href="javascript:radio('vov2')">VOV2</a></li>
<li><a href="javascript:radio('vov3')">VOV3</a></li>
<li><a href="javascript:radio('vov4')">VOV4</a></li>
<li><a href="javascript:radio('vov5')">VOV5</a></li>
<li id="pl" class="p"></li>
</div>
<div id="player">Radio23h - Blog Radio, chia sẻ xúc cảm cuộc sống</div>
</div>
JavaScript<li><a href="javascript:radio('vov1')">VOV1</a></li>
<li><a href="javascript:radio('vov2')">VOV2</a></li>
<li><a href="javascript:radio('vov3')">VOV3</a></li>
<li><a href="javascript:radio('vov4')">VOV4</a></li>
<li><a href="javascript:radio('vov5')">VOV5</a></li>
<li id="pl" class="p"></li>
</div>
<div id="player">Radio23h - Blog Radio, chia sẻ xúc cảm cuộc sống</div>
</div>
<script>
function radio(channel){
var data = '<embed width="430" height="24" flashvars="&file='+channel+'.flv&streamer=rtmp://123.30.50.46:8080/live&skin=&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">';
document.getElementById("player").innerHTML = data;
document.getElementById("pl").innerHTML = channel+" playing<span>...</span>";
}
radio('vov3');
</script>
radio('vov3') ==> là đài mặc định bạn chạy đầu tiên.function radio(channel){
var data = '<embed width="430" height="24" flashvars="&file='+channel+'.flv&streamer=rtmp://123.30.50.46:8080/live&skin=&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">';
document.getElementById("player").innerHTML = data;
document.getElementById("pl").innerHTML = channel+" playing<span>...</span>";
}
radio('vov3');
</script>
Chúc các bạn thành công !
Tuesday, 24 January 2012
Nâng cấp ANCMedia 3.3 - add server.
Đầu năm đầu tháng khai xuân một bài. Chúc mọi người một năm mới đầy sức khoẻ, may mắn, hạnh phúc. Mình về tết cũng rảnh đôi chút, sửa lại cho mọi người tiện add server.. Chứ suốt ngày kêu ca và yêu cầu mình có 3 đầu 6 tay cũng không làm hết được. ^^
Mình đã tách riêng làm 2 file js..Mọi người có thể up lên google code. Nhưng để tiện edit các bạn nên down dropbox về và up file server lên đó.
* File server : http://anhnc.googlecode.com/svn/trunk/ANC/3.3/server.js
_Trong file server này gồm 2 phần chính: config và server.
Danh sách id các bạn có thể thay đổi tuỳ ý. Đã có nhiều bạn có host riêng, vì vậy mình đã làm thêm config cho Player, Proxy, Skin...
* File player: http://anhnc.googlecode.com/svn/trunk/ANC/3.3/player.js
_Vẫn là player có sẵn trong site, nhưng nếu dùng file đó để + file server sẽ không còn dùng được.
* Trong site chỉ cần paste 2 file này như sau vào dưới "anc_tp" hoặc </body>. Tốt nhất là dán dưới </body>
== > Phiên bản 3.3 này mình đã cải thiện vấn đề code, các player trước nhìn rất đau mắt, khó cấu hình CSS, nhiều đoạn code HTML bị thừa. Mọi người có thể nhìn vào hình dưới.
+) ANC_old
+) ANC_new
* ) Giờ vẫn đang nghỉ tết nên mình chưa có mạng add server lên site mình, do đó không có demo cho mọi người. Nhưng có thể xem video hướng dẫn tại đây..
*) Các lưu ý mình đã ghi trong file server, các bạn có thể đọc.
Chúc các bạn thành công !
* File server : http://anhnc.googlecode.com/svn/trunk/ANC/3.3/server.js
_Trong file server này gồm 2 phần chính: config và server.
* File player: http://anhnc.googlecode.com/svn/trunk/ANC/3.3/player.js
_Vẫn là player có sẵn trong site, nhưng nếu dùng file đó để + file server sẽ không còn dùng được.
* Trong site chỉ cần paste 2 file này như sau vào dưới "anc_tp" hoặc </body>. Tốt nhất là dán dưới </body>
<script src="http://anhnc.googlecode.com/svn/trunk/ANC/3.3/server.js"></script>
<script src="http://anhnc.googlecode.com/svn/trunk/ANC/3.3/player.js"></script>
<script src="http://anhnc.googlecode.com/svn/trunk/ANC/3.3/player.js"></script>
== > Phiên bản 3.3 này mình đã cải thiện vấn đề code, các player trước nhìn rất đau mắt, khó cấu hình CSS, nhiều đoạn code HTML bị thừa. Mọi người có thể nhìn vào hình dưới.
+) ANC_old
+) ANC_new
* ) Giờ vẫn đang nghỉ tết nên mình chưa có mạng add server lên site mình, do đó không có demo cho mọi người. Nhưng có thể xem video hướng dẫn tại đây..
*) Các lưu ý mình đã ghi trong file server, các bạn có thể đọc.
Chúc các bạn thành công !
Subscribe to:
Posts (Atom)