Số Lượt Xem Bài Viết Cho Blogger - Blogspot

         
Nhiều bạn cho rằng việc tạo bộ đếm lượt xem bài viết không cần thiết, lại làm cho blog load chậm, hơn nữa cái bộ đếm này đếm sai. Vâng, không cần thiết sao? Các bạn đã lầm, nếu như một bài viết người đọc nhìn vào thấy nhiều người xem phải chăng Blog bạn làm người đọc cảm thấy tin tưởng hơn, họ sẽ vào blog mình nhiều hơn để xem nhiều hơn. Và đương nhiên đều đó sẽ rất có lợi cho SEO.

       Bộ đếm sai. Vâng mình không phủ nhận đều này. Trước khi thực hiện mình xin nói trước, Widget này hoạt động dựa trên số lần nhấp trang, có nghĩa bạn chỉ cần load lại trang là được một lượt xem. 

           Không như Wordpress, Blogger không có chức năng đếm lượt xem bài blog, mặc dù ta vẫn biết số người xem qua Nơi Quản Lý bài đăng trong blogger. Vậy để làm sao để người đọc thấy được sô người đã xem bài viết blog của mình ngay bên ngoài blog. VNITWORLD sẽ hướng dẫn các bạn làm điều đó ngay bây giờ.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 
• Lời Kết

Mục Đích

        Giúp các bạn SEO tốt hơn. Tạo độ uy tín của blog cũng như sự tin tưởng của người đọc bởi càng nhiều người xem thì nhiều người thích xem bái viết này.
      Mặc dù nó không thực đối với các Blog lớn khác thì mình không nói gì, nhưng đối với một số Blog nhỏ mới lập, việc này rất hữu ích, Bạn hay viết bài và xem trước bài, bạn sẽ tăng lượt xem, mặc dù không thực, nhưng nó sẽ tạo cơ hội cho các Blog nhỏ được người xem tin tưởng (Nếu nội dung blog không vi phạm Quy định Google).
         Cuối cùng, mình xin nói các bạn nên tạo Widget cho blog mình và không nên lạm dụng nó quá nhiều

Thực Hiện

Ở đây do Blogger không hỗ trợ nên chúng ta sẽ tạo Widget này thông qua trang Firebase

1. Các bạn đăng ký và đăng nhập tài khoản ở trang Firebase  .

Việc đăng ký hầu như khá đơn giản, bạn chỉ cần có tài khoản google (tài khoản này hầu như ai cũng có ha ) rồi vào link bên trên. Sau đó nhấn và nút Sign in with Google sau đó xác nhận là xong.

-  Tạo màn hình chính của Firebase Các bạn sẽ nhìn thấy phần như sau:

Ở đây, các bạn chú ý tới dòng APP URL: Các bạn nhìn xuống dưới thấy link có dạng: https://appname.firebaseIO.com. Các bạn chép link đó lại vào đâu đó với appname là tên bạn đặt. Sau đó các bạn nhấn vào Nút CREATE NEW APP. 

2.Các bạn vào Blogger > Mẫu > Chỉnh sửa HTML:

Các bạn tìm đến thẻ </head> (Nhấn Ctrl + F rồi nhập </head> nhấn Enter cho nhanh ) Sau đó chép đoạn HTML sau rồi dán bên trên nó.

HTML<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Chú ý: nếu trong blog các bạn đã có dòng trên (khác số 2.1.3) thì các bạn bỏ quả qua bước này nha 

3.Sau đó các chép đoạn css sau vào trước thẻ ]]></b:skin> hoặc </style>

CSS.post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Nv03LJTa_vyowyimQ0BoKaokMqsx6krNjUXYBr0YHDc1SPRlGs6ILQcph-WokJCImZhybYs8V1nbTM0N3o4DZbeyB97IoZh9rQhlF3-STiriulYK7hRU3gdErnuSbXpmei3Ce7z-YY2I/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

Tiếp các bạn chép đoạn Javascript sau vào thẻ </body>

JS<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://anhnhim.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>

Chú ý: Thay dòng chữ đỏ https://anhnhim.firebaseio.com/ thành địa chỉ mà mình bảo các bạn chép lại vào đâu đó ở đầu phần 1.

4. Sau đó tìm dòng

HTML<div class='post-header'>
  <div class='post-header-line-1'/>
</div>

Các bạn chỉ cần tìm đoạn đầu tiên là được, lúc này chúng ta có thể tìm được hai dòng như vậy, các bạn chỉ chú ý tới dòng thứ hai.

Nếu các bạn đã tìm mà không có thì các bạn bỏ qua bước này và làm theo chú ý ở bước sau

5. Sau đó thay 3 dòng đó bằng đoạn html sau:

HTML<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'><i class="fa fa-eye"></i> Viewer:&amp;nbsp;<span class='loading'/>&amp;nbsp;</div>
</b:if>
</div>
</div>

Sau khi chép xong bạn sẽ có đoạn html như sau:

HTML<b:includable id='post' var='post'>
...Tùm lum code nằm dây
...Tùm lum code nằm dây
<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'><i class="fa fa-eye"></i> Viewer:&amp;nbsp;<span class='loading'/>&amp;nbsp;</div>
</b:if>
</div>
</div>
...Tùm lum code nằm dây
...Tùm lum code nằm dây
</b:includable>

Từ đây các bạn thấy cái dòng mình bắt các bạn tìm là nằm trong thẻ <b:includable id='post'  var='post'>.........</b:includable>. Vì vậy nếu các bạn tìm không được dòng html ở bước trên. Ở đây các bạn thử tìm dòng đầu html trên, nếu không có thì chỉ cần chép lại dòng html sau:

HTML<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'><i class="fa fa-eye"></i> Viewer&amp;nbsp;<span class='loading'/>&amp;nbsp;</div>
</b:if>

Sau đó thích paste vào chỗ bạn thích trong blogspot . Thường thì người ta đăt đầu bài. Tại mỗi blog thì dòng các bạn tìm không ra là khác nhau, mình ko biết được. Vì vậy nếu ko biết các bạn cứ comment tại đây kèm link blogspot bạn, mình sẽ tìm giúp cho
6. Save bloggspot lại
7. Chúc các bạn thành công

Demo
click to view

Nâng cao

Để thay đổi hiệu ứng loading thì bạn cái bạn thay đoạn link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Nv03LJTa_vyowyimQ0BoKaokMqsx6krNjUXYBr0YHDc1SPRlGs6ILQcph-WokJCImZhybYs8V1nbTM0N3o4DZbeyB97IoZh9rQhlF3-STiriulYK7hRU3gdErnuSbXpmei3Ce7z-YY2I/s1600/loader.gif thành ảnh khác

Chú ý: nên chọn ảnh có kích thước là 20x20. và có định dạng là gif nha.

Lời kết

Vậy là mình đã hướng dẫn các bạn tao widget Số Lượt Xem Bài Viết Cho Blogger - Blogspot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.