Tạo số đếm lượt xem cạnh tiêu đề bài viết cho Blogger

Nêu bạn là admin của blog thì bạn dễ dàng biết được bài viết của mình là bao nhiêu, nhưng nếu bạn muốn cho người khác biết thì phải làm sao? Hôm nay, mình sẽ hướng dẫn cách để tạo một plugin giúp hiênt hị số luợt xem.

DEMO

#1 Tạo tài khoản Firebase

1. Truy cập https://www.firebase.com/

2. > Đăng kí một tài khoản

3. > Truy cập https://www.firebase.com/account 

4. > Tạo một app mới

• Hãy ghi nhớ url app của bạn vì chúng ta cần nó ở #2.3 
• Ví dụ: Url app của mình là http://khanh98.firebaseio.com

#2 Thêm plugin

#2.1 Thêm CSS

1. Đăng nhập Blogger

2. > Mẫu > Chỉnh sửa HTML

3. > Tìm thẻ ]]></b:skin>

4. > Thêm code dưới vào trên thẻ vừa tìm

/*-------- Post Views  ----------*/ 
#views-container { 
width: 85px; 
float: right; 
}
.mbtloading { 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs8xDRwFYqqmsOq7O4L8vl8mH8OBT6-U9XatBJ7AXgQdwUOO7qY4ps2w1xic9X0Khg2bhlYqv7qBIQSIZOPyX-0CPnQ1mU7BnjnOpX6OcE-xGKrkj7sTYlh9ucBPmPxazLYUyZgJGxll8j/s320/mbtloading.gif') no-repeat left center; 
width: 16px; 
height: 16px; 
}
.viewscount { 
float: right; 
color: #EE5D06; 
font: bold italic 14px arial; 
}
.views-text { 
float: left; 
font: bold 12px arial; 
color: #333; 
}
.views-icon{ 
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja2EZRMDqH0QOEVNA1PKWjjY1mlxHsh0LCw0HlZcdfH8W3PQq4U_CvYwZRtacUJ5AsEQSdDfI5mK6LaycQfJZjFHsVxEPpW66MUljnJuFsD_1TyGBo7b6Px1i3opSV61Lu_B-xGwF-EQMt/s1600/postviews.png') no-repeat left; 
border: 0px; 
display: block; 
width: 16px; 
height: 16px; 
float: left; 
padding: 0px 2px; 
}

Thay right thành left nếu muốn phugin nằm bên phải tiêu đề

#2.2 Thêm Jquery

1. > Tìm thẻ </head>

2. > Thêm scrip dưới vào trên thẻ vừa tìm, nếu đã template của bạn đã có đoạn jquery dưới thì không cần thực hiện bước này

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

#2.3 Thêm Scrip

1. > Tìm thẻ </body>

2. > Chèn code dưới vào trên thẻ vừa tìm

<!-- Post Views Script by MBT --> 
<script type='text/javascript'> 
    window.setTimeout(function() { 
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); 
      }, 10); 
  </script> 
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> 
<script> 
$.each($(&#39;a[name]&#39;), function(i, e) { 
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;); 
var blogStats = new Firebase(&quot;https://khanh98.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;)); 
blogStats.once(&#39;value&#39;, function(snapshot) { 
var data = snapshot.val(); 
var isnew = false; 
if(data == null) { 
data= {}; 
data.value = 0; 
data.url = window.location.href; 
data.id = $(e).attr(&#39;name&#39;); 
isnew = true; 
} 
elem.removeClass(&#39;mbtloading&#39;).text(data.value); 
data.value++; 
if(window.location.pathname!=&#39;/&#39;) 
{ 
if(isnew) 
blogStats.set(data); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

Thay https://khanh98.firebaseio.com thành url app mà bạn đã tạo ở #1

#2.4 Thêm HTML

Đây là bước nhằm xác định vị trí xuất hiện của plugin, vị trí đó là ở cạnh tiêu đề, trong template thì có hai đoạn, chúng ta sẽ thực hiện với đoạn thứ2 - đoạn ở dưới. 

1. > Tìm thẻ <h1 class='post-title entry-title' itemprop='name'> 

Lưu ý:

• Ở mỗi template thì thẻ này sẽ khác nhau, có thể là h1, h2 hoặc h3
• Các bạn sẽ thực hiện thủ thuật với thẻ thứ 2 tìm được - thẻ ở dưới

2. > Tìm thẻ đóng của nó
Lưu ý: Nếu là h1 thì thẻ đóng sẽ là </h1> và tương tự với h2 và h3

3. > Thêm code dưới vào trên thẻ đóng vừa tìm

<!-- Post Views Counter by MBT--> 
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

Bên dưới là đoạn code tiêu đề đã được thêm HTML, các bạn cứ thêm vào template của mình tương tự.

<h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
<!-- Post Views Counter by MBT--> 
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
      </h1>

4. > Lưu lại và xem kết quả
Lưu ý: Số lượt xem được tính từ lúc áp dụng thủ thuật.

MBT