Bloggerologi

Blogger merupakan salah satu CMS atau juga blog service yang cukup populer di dunia maya terutama bagi orang yang cukup gemar menulis. Tapi blogger memiliki salah satu kekurangan yaitu tidak memiliki widget atau plugin yang dapat menayangkan statistik jumlah view di tiap postingan.
Mungkin untuk membuat widget statistik jumlah tayang blog secara keseluruhan masih bisa dilakukan, karena blogger sudah menyiapkan widgetnya secara gratis (dan memang semua fitur blogger gratis).

Namun masalahnya kebanyakan blogger justru tidak membutuhkan widget itu, karena tidak terlalu ada manfaatnya. Yaa mungkin kalau untuk pamer jumlah tayang blog bisa, tapi tetap saja tidak ada gunanya bukan?

Sedangkan blogger sebenarnya lebih membutuhkan fitur yang bisa menayangkan jumlah view tiap postinganya, karena fitur itu dapat membuat pengunjung lebih tertarik untuk melihat sebuah artikel ketika Ia melihat jumlah views dalam postingan tersebut cukup banyak.

Tetapi memang sayang, blogger tidak menyediakan fitur tersebut. Sehingga kita harus membuatnya sendiri dengan menggunakan database kita sendiri. Dan artikel ini akan memberikan tutorial cara membuatnya.

Sebelum itu Anda bisa melihat demonya dulu, silahkan klik tombol dibawah untuk melihat demo :

DEMO - View Perpost

Cara kerja

Data Tidak Terlalu Akurat

Mungkin saja suatu saat nanti fitur ini akan hilang

Kelebihan

Pengunjung lebih tertarik

Meningkatkan daya jual blog

Cara memasang statistik view perpost di blog

Cara Praktis - memakai database yang sudah saya buat

Buka Source Code Blogger Theme / Tema > Edit HTML

Cari kode </body> menggunakan "ctrl+F", lalu letakan kode dibawah ini tepat DIATASNYA :

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js" type="text/javascript">
<script type='text/javascript'>
//<![CDATA[
// View counter
$.each($(".bloggerologi-view[data-id]"),function(c,f){var b=$(f).parent().find("#bview").addClass("onloadologi"),d=new Firebase("https://viewpost-13ddd.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("onloadologi").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]>
</script></code>

Kemudian letakan kode dibawah ini DIATAS kode ]]></b:skin>

.onloadologi svg {
	animation: loading 1s infinite;
	transform: rotate(0deg);
}@keyframes loading {
	to {
	transform: rotate(360deg);
}
}

Setelah itu letakan kode dibawah ini di bagian script postingan sesuai yang Anda inginkan :

<span class='bloggerologi-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> 
<span class='onloadologi' id='bview'><svg style="width:15px;height:15px" viewBox="0 0 24 24">
    <path fill="#fff" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</span>
</span>

Apabila Anda bingung harus meletakanya dimana, Anda bisa letakan kode dibawah postingan Anda dengan meletakan kode diatas DIBAWAH kode <data:post.body/> 

Biasanya kode <data:post.body/> terdapat lebih dari 1, jadi coba saja satu-persatu.

Atau apabila ingin ditampilkan diatas postinganya, silahkan letakan DIATAS kode <data:post.body/>

Atau apabila ingin diatas judul postingan, silakan cari kode <h2><data:post.title/></h2> lalu letakan kodenya diatasnya atau kalau mau dibawahnya juga boleh saja.

Cara kurang praktis - Membuat database sendiri

Buka website firebase dengan mengklik tombol dibawah :

Kemudian klik Get Started

Silahkan kalian nanti login menggunakan akun blogger kalian

Setelah itu akan ada halaman baru dan pilih Buat Project

Buat nama project sesuka kalian, centang prasyarat dan klik Lanjutkan

Klik Lanjutkan

Silahkan centang semuanya lalu klik Buat Project

Kemudian pilih Develop > Database

Cari pilihan DATABASE REALTIME lalu klik Buat Database

Pilih Mulai Metode Pengujian lalu klik aktifkan

Copy subdomain atau kode project realtime database Firebase kalian, seperti gambar dibawah :

Silahkan buka source code blogger kalian dan cari kode </body> lalu letakan kode dibawah ini tepat DIATASNYA :

<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$.each($(".bloggerologi-view[data-id]"),function(c,f){var b=$(f).parent().find("#bview").addClass("onloadologi"),d=new Firebase("https://myviewpost-45546.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("onloadologi").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]>
</script>

Kemudian taruh kode dibawah tepat DIATAS kode ]]></b:skin> :

.onloadologi svg {
	animation: loading 1s infinite;
	transform: rotate(0deg);
}

@keyframes loading {
	to {
	transform: rotate(360deg);
}
}

Terakhir silahkan simpan kode dibawah ini di script postingan kalian, terserah :

<span class='bloggerologi-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> 
<span class='onloadologi' id='bview'><svg style="width:15px;height:15px" viewBox="0 0 24 24">
    <path fill="#fff" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</span>
</span>

Apabila Anda bingung harus meletakanya dimana, Anda bisa letakan kode dibawah postingan Anda dengan meletakan kode diatas DIBAWAH kode <data:post.body/> 

Biasanya kode <data:post.body/> terdapat lebih dari 1, jadi coba saja satu-persatu.

Atau apabila ingin ditampilkan diatas postinganya, silahkan letakan DIATAS kode <data:post.body/>

Atau apabila ingin diatas judul postingan, silakan cari kode <h2><data:post.title/></h2> lalu letakan kodenya diatasnya atau kalau mau dibawahnya juga boleh saja.

Akhir kata