Tạo widget hiển thị tổng số bài viết cho blog

Posts Counter (bộ đếm bài viết) cũng là một widget được nhiều blogger sử dụng. Nó giúp độc giả biết được tổng số bài viết mà bạn đã xuất bản, đồng thời cũng có thể giúp họ biết được blog của bạn đã có bài mới chưa. Bài viết này mình sẽ hướng dẫn các bạn tạo một widget như vậy cho Blogger.

Bước 1: Tại trang quản trị, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts, dán đoạn code bên dưới vào phần nội dung:

<!--Posts Counts by kjmagic.blogspot.com-->
<script style="text/javascript">
// Posts Counts for Blogger by kjmagic.blogspot.com
function numposts(json) {
document.write('<div id="totalposts">');
document.write('<div id="titlep">KJ Magic</div>');
document.write('<div id="descriptionp">Trang chia sẻ kiến thức<br/> và giải trí tổng hợp !</div>');
var _0x13e7=["\x57\x65\x20\x68\x61\x76\x65\x20\x61\x20\x74\x6F\x74\x61\x6C\x20\x6F\x66\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x75\x6E\x74\x70\x22\x3E\x20","\x24\x74","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x66\x65\x65\x64","\x20\x50\x6F\x73\x74\x73\x20\x3C\x2F\x64\x69\x76\x3E\x20\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x70\x6F\x73\x74\x63\x6F\x70\x79\x22\x3E\x41\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x3A\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x22\x3E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x4C\x61\x62\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65"];document[_0x13e7[5]](_0x13e7[0]+json[_0x13e7[3]][_0x13e7[2]][_0x13e7[1]]+_0x13e7[4]);
}
</script><script src="/feeds/posts/default?alt=json-in-script&callback=numposts"></script>
<!--/Posts Counts by kjmagic.blogspot.com-->

Bước 2: Lưu lại. Vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* Posts Counts by kjmagic.blogspot.com */
div#kjtotalposts {
  font-size: 14px;
  text-align: center;
  float: left;
  border: 1px solid #d2d2d2;
  padding: 20px;
  background: #FCFCFC;
}

div#kjtitle {
    float: left;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 15px;
    margin-bottom: 14px;
}

div#kjcount {
    font-size: 40px;
    font-weight: bold;
    color: rgb(241, 126, 0);
    float: left;
    width: 100%;
    line-height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

div#kjdescription {
  float: left;
  width: 100%;
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

div#postcopy {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

Bước 3: Lưu lại và xem kết quả.

• Mở rộng: Bộ đếm comments

Để thêm cả chức năng đếm số comments cho widget, các bạn thêm vào sau code ở Bước 1 đoạn code sau:

<!--Comments Counts by kjmagic.blogspot.com-->
<script style="text/javascript">
// Comments Counts for Blogger by kjmagic.blogspot.com
function numposts(json) {
document.write('<div id="kjtotalposts">');
document.write('<div id="kjtitle">KJ Magic</div>');
document.write('<div id="kjdescription">Trang chia sẻ kiến thức<br/> và giải trí tổng hợp !</div>');
var _0x13e7=["\x57\x65\x20\x68\x61\x76\x65\x20\x61\x20\x74\x6F\x74\x61\x6C\x20\x6F\x66\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x75\x6E\x74\x70\x22\x3E\x20","\x24\x74","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x66\x65\x65\x64","\x20\x50\x6F\x73\x74\x73\x20\x3C\x2F\x64\x69\x76\x3E\x20\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x70\x6F\x73\x74\x63\x6F\x70\x79\x22\x3E\x41\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x3A\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x22\x3E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x4C\x61\x62\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65"];document[_0x13e7[5]](_0x13e7[0]+json[_0x13e7[3]][_0x13e7[2]][_0x13e7[1]]+_0x13e7[4]);
}
</script><script src="/feeds/comments/default?alt=json-in-script&callback=numposts"></script>
<!--/Comments Counts by kjmagic.blogspot.com-->

Chúc các bạn thành công !