Beranda
Javascript

CountAPI Blogger Visitor Counter Widget

Count API for Multiple Page Blogger - Pada postingan sebelumnya, saya sudah menjelaskan tentang Cara Membuat Visitor Counter. Tutorial tersebut biasa digunakan di platform apa pun, baik Blogger, Wordpress, Joomla dll. Akan tetapi, Counter tersebut hanya untuk domain utama.

Pada tutorial kali ini, saya akan menjelaskan bagaimana cara menampilkan Visitor Counter pada setiap postingan Blogger. Untuk script masih menggunakan countapi.xyz.

DEMO

Untuk DEMO, silahkan lihat di atas, dekat icon Mata setelah tanggal ditulisnya postingan.

Skenario

Sebagaimana di jelaskan di web CountApi.xyz bahwa format untuk menampilkan beberapa halaman, harus menggunakan format seperti ini 

https://api.countapi.xyz/hit/:HOST:/:PATHNAME:

Nah ini membuat Saya bingung untuk menentukan pathname karena Blogger menggunakan Tahun dan Bulan dalam URL. Sebagai solusi, saya menggunakan Blog ID sebagai HOST dan Post ID untuk PATHNAME, yang tentunya setiap Blog dan postingannya mempunya ID yang unik yang berjumlah 19 digit. Sehingga outputnya akan seperti ini

https://api.countapi.xyz/hit/blog-1575214712636xxxxxx/post-6094903872092xxxxxx

Apakah cara ini sudah benar? atau ada alternatif lain? Silahkan Share dikolom komentar ya....

Cara Pemasangan

Memasang Script

Untuk memasang counter ini, silahkan simpan script ini di atas </body>

<b:if cond='data:view.isPost and !data:view.isPreview and !data:view.isError'>
	<script type='text/javascript'>
		function pCount(response) {
			document.getElementById(&#39;count&#39;).innerText = response.value;
		}
	</script>
	<script async='async' expr:src='&quot;https://api.countapi.xyz/hit/&quot; + &quot;blog-&quot; + data:blog.blogId + &quot;/&quot; + &quot;post-&quot; + data:blog.postId + &quot;?callback=pCount&quot;'/>
</b:if>

Untuk Blog yang menggunakan 2 Versi AMP dan Non AMP, gunakan kode ini

<b:if cond='data:view.isPost and !data:view.isPreview and !data:view.isError and data:view.url != data:view.url params { amp: &quot;1&quot; }'>
	<script type='text/javascript'>
		function pCount(response) {
			document.getElementById(&#39;count&#39;).innerText = response.value;
		}
	</script>
	<script async='async' expr:src='&quot;https://api.countapi.xyz/hit/&quot; + &quot;blog-&quot; + data:blog.blogId + &quot;/&quot; + &quot;post-&quot; + data:blog.postId + &quot;?callback=pCount&quot;'/>
</b:if>

Memasang HTML

Simpan kode HTML ini, ditempat yang akan kita tampilkan

<span id='count'>0</span>

Kustomisasi CSS

Untuk kustomisasi tidak saya sertakan, silahkan berkreasi sendiri

Disqus Comments