Tiện ích Top Commentators cho blogspot
Thứ Sáu, 23 tháng 12, 2011
Tiện ích Top Commentators 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.
Một vài thông tin của tiện ích :
- Không đếm comment của khách nặc danh.
- Chỉ thống kê được tối đa trong 200 comment mới nhất.
- Hiện thị ảnh đại diện (tất cả các author ngoại trừ nặc danh).
- Hiện thị số comment của từng người.
Xem DEMO
Hình ảnh minh họa
Để thực hiện các bạn chỉ việc tạo 1 widget HTML/javascript ở nơi muốn hiển thị rồi dán đoạn code bên dưới vào là được:
<style type="text/css">
.top-author ul li {
list-style:none;
width:250px;
height:45px!important;
border-bottom:1px solid #ccc;
margin-top:5px;
display:block!important;
}
.tau-cont {margin-left:38px;}
.tau-cont h4 {margin:0;padding:0;}
.tau-cont span {color:#555;}
img.tau-thumb {
float: left;
margin-right: 10px;
border: 1px solid #CCC;
padding: 0;
width: 36px;
height: 36px;
}
</style>
<script type="text/javascript">
var no_photo='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWW0l5Ae20WiEo6DrFoVP4PcBlyQSYt3u70ONTmWwYTJxVIeB4acilXcLkQ2-dJH0jweq2PEAhwQtdnFzk8viMTlOcNLij1XuyW2J0J24uNOBwc_yJGGQKfW1MaBT6c6hlTvYtdB41bMu/s50/blogger-nophoto.png';
var another_au='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5Wl8zsKFiYsF653csgceF_yd-gK1BfmgzZSQqmAXD4iPe7VxNoQ-lQ7ChHB8Bds3X0RTxXDNmI3_4thyphenhyphenwphLoz7EZvw32z3bxtzasuZedmuvApdWsIDbUT9dBSi8BfRk1zS54blnXdVW/s23/another-ico.png';
var au_nums=5;
var rcm_nums=100;
var homepage="http://www.fandung.com";
</script>
<div class="top-author">
<script type="text/javascript" src="http://fandung.googlecode.com/svn/trunk/js/top-author.js"></script>
</div>
Một vài lưu ý :.top-author ul li {
list-style:none;
width:250px;
height:45px!important;
border-bottom:1px solid #ccc;
margin-top:5px;
display:block!important;
}
.tau-cont {margin-left:38px;}
.tau-cont h4 {margin:0;padding:0;}
.tau-cont span {color:#555;}
img.tau-thumb {
float: left;
margin-right: 10px;
border: 1px solid #CCC;
padding: 0;
width: 36px;
height: 36px;
}
</style>
<script type="text/javascript">
var no_photo='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhWW0l5Ae20WiEo6DrFoVP4PcBlyQSYt3u70ONTmWwYTJxVIeB4acilXcLkQ2-dJH0jweq2PEAhwQtdnFzk8viMTlOcNLij1XuyW2J0J24uNOBwc_yJGGQKfW1MaBT6c6hlTvYtdB41bMu/s50/blogger-nophoto.png';
var another_au='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5Wl8zsKFiYsF653csgceF_yd-gK1BfmgzZSQqmAXD4iPe7VxNoQ-lQ7ChHB8Bds3X0RTxXDNmI3_4thyphenhyphenwphLoz7EZvw32z3bxtzasuZedmuvApdWsIDbUT9dBSi8BfRk1zS54blnXdVW/s23/another-ico.png';
var au_nums=5;
var rcm_nums=100;
var homepage="http://www.fandung.com";
</script>
<div class="top-author">
<script type="text/javascript" src="http://fandung.googlecode.com/svn/trunk/js/top-author.js"></script>
</div>
- var no_photo : avatar của tài khoản blogger chưa có ảnh đại diện.
- var another_au : avatar của tài khoản khác blogger.
- var au_nums=5; số tác giả được hiển thị
- var rcm_nums=100; số comment sẽ được khoanh vùng để thống kê (phải nhỏ hơn hoặc bẳng 200)
- var homepage="http://www.fandung.com"; thay http://www.fandung.com bằng tên miền của blog bạn.
Chúc các bạn thành công.
Thực hiện theo yêu cầu của Trần Việt Đức
- Update tiện ích recent posts
- Update bộ đếm số lần đọc bài viết cho blogspot - v3.1
- Tạo tab nội dung đơn giản với jQuery
- PNO - Recent posts : Thêm 1 style mới cho tiện ích Recent posts
- Pro TabNews mang phong cách của VnExpress
- Hiển thị bài viết ngoài trang chủ giống trang news.zing.vn
- Tiện ích Recent Comments cho cho 1 bài viết cụ thể
- Cách post code HTML, XML, Javascript ... vào bài viết với Greasemonkey
- Tiện ích Recent posts khá ấn tượng với jQuery
- [ Yêu cầu ] : Hiển thị bài viết ngoài trang chủ giống template Revolution City
- [ Yêu cầu ] : Tạo thanh HotNews cho blog (sử dụng mootools)
- [ Yêu cầu ] : Tạo sidebar trượt dọc theo blog
Comments[ 0 ]
Đăng nhận xét