Tutorial Memaparkan 'Post Views Count' Pada Blogger

Untuk membuat 'Post Views Count' ini, kita memerlukan satu pangkalan data (database) untuk menyimpan data bilangan pengunjung yang melihat pada setiap entri. Jadi disini saya menggunakan servis dari Firebase untuk menyimpan data-data tersebut.

Tutorial:

1.  Buat akaun Firebase anda.
Klik pada pautan ini => FIREBASE dan klik "Sign Up".

2. Buat Database baru.
i). Pada Dashbord Firebase anda, pergi pada bahagian ruang "Create New App".
ii). Isikan App Name anda. (Terserah anda nak letak nama apa pun. Disini sebagai contoh saya letak "PostViewCount")
iii). Isikan App Url anda. (Terserah anda, tetapi pastikan nama URL anda unik dan tidak sama dengan pengguna lain.)
iv). Klik "Create New App".

3. Cara pemasangan plugin pada template Blogger.

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

i). Login ke akaun blogger anda.

ii). Klik pada Template

iii). Klik Edit HTML

iv). Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

v). Cari (CTRL + F)  kod dibawah:

]]></b:skin>

vi). Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) sebelum kod ]]></b:skin> :

/*-------- Post Views  ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOZU6dA-ghc7uJxCL1PmxnnaXcGsPZcFTzJrdFWgsBJmTaKKALXRODfItImrv8AsTMB-aNJzSDSfanM-ewiLKuRCnVfcuUR4D0WbFoMZavf6dZcVRIOmECXd2xzGWHWTnW9SpnECDZOumw/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/AVvXsEj8K4wx17jhizxg7qBN7ZuOvIhZd4-ZoATQ62N1skUKb3QgCsXUUqBEF25lV3iGKbTzKCZHpsEc9tFvgI5s5orN9bAQj42JCVl8jkgdEddl8zFhO2hG1g2I5-z4o8zSI-yA7hVJ8adOPZ8m/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

KETERANGAN:

- right  => Untuk mengubah posisi plugin kekiri hanya tukar dari "right" ke "left" .

- #EE5D06  => Mengubah warna nombor bilangan 'post views'.

vii). Cari (CTRL + F)  kod dibawah:

</body>

viii). Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) sebelum kod </body> :

<!-- 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://faiz-tutorial.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>

KETERANGAN:

- Gantikan https://faiz-tutorial.firebaseio.com dengan URL database Firebase anda. Pastikan jangan tertinggal simbol slash ( / ) selepas URL .

ix). Cari (CTRL + F)  kod dibawah:

 <data:post.body/>

x). Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) sebelum kod  <data:post.body/> :

<!-- 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>

KETERANGAN:

- Jika kod <data:post.body/>  lebih dari satu pada template, anda boleh cuba satu persatu untuk menentukan posisi yang sesuai.

xi). Pada langkah ini kita akan memasang script JQuery pada template. Jika template anda sudah terpasang script JQuery, abaikan langkah ini dan teruskan ke langkah xi.

- Cari (CTRL + F)  kod dibawah: 

<head>

- Copy (CTRL + C) kod dibawah dan Paste (CTRL + V) selepas kod <head> :

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

xi). Klik Preview template dan jika ok, klik Save Template

Code & Script Credit to MBT Team