Thứ Hai, 27 tháng 10, 2014

Có nhiều bạn nhờ Hồng Designer tạo Widget thống kê bình luận cho blogger Top10 bài viết phổ biến nhất được sắp xếp theo bong bóng nhận xét. Widgt này được sử dụng hiện tại từ Yahoo! Pipes sử dụng JSON để phân tích và hiển thị mỗi bài với số lượng cao nhất của nội dung đăng tải trên đó. Sử CSS3, thiết kế theo kiểu đếm bình luận với bong bóng nhận xét. Widget này chỉ đơn giản là một công cụ cắt dán có thể được cài đặt trong vòng vài giây. Cho phép thêm widget nạp năng động và nhanh chóng này để blogger của bạn!

Widget thống kê bình luận cho blogger :

  • Đăng nhập blogger => Layout 
  • Nhấp vào "Thêm Tiện ích" 
  • Chọn tiện ích HTML / JavaScript 
  • Dán mã sau bên trong nó:
<style>
/* ######### Widget thống kê bình luận cho blogger by Hồng Designer ##########*/
.commentbubble {
background: #292D30;
width: 49px;
float: left;
margin: 2px 20px 35px 0px;
font-weight: bold;
font-size: 1.3em;
text-align: right;
font-family: georgia,Helvetica;
padding: 0px 0px 5px 0px;
text-align: right;
color: #FFF;
text-shadow: 4px 1px #202022;
position: relative;
top: 5px;

}
.commentbubble:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 0px;
top: 100%;
border-width: 5px 8px;
border-style: solid;
border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
top: 34px;
right: 6px;
}
</style>

<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ul style="list-style:none; ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = + feed.value.items[i].commentcount;
var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important;border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
document.write(pList);
//to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://ishare247.blogspot.com/
&ShowHowMany=6
&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>

Trong đó :

Thay thế bằng URL Blog của bạn http://ishare247.blogspot.com/
Thay 6 thành số bài viết bạn muốn hiển thị
Để thay đổi màu nền của các bong bóng bình luận, Đơn giản chỉ cần thay thế màu vàng đánh dấu mã màu thập lục phân (# 292D30) với màu sắc tùy chỉnh của bạn.
Để thay đổi màu Text của số bình luận Thay thế #FFF.
Thay thế #dedede nếu bạn muốn thay đổi màu sắc biên giới xuất hiện bên dưới mỗi tiêu đề bài viết. Nếu bạn không muốn hiển thị một đường viền bên dưới mỗi mục sau đó chỉ cần xóa dòng này: border-bottom: 1px #dedede tiêu tan; 

  • Lưu lại và kiểm tra thành quả

0 nhận xét:

Đăng nhận xét