Cara Membuat PageView Counter Blogger Per Halaman

PageView Counter Blogger adalah sebuah script yang berfungsi untuk menampilkan jumlah pengunjung yang telah membaca artikel kita. Script PageView Counter Blogger ini saya tulis menggunakan sedikit bantuan framework Jquery.

Background Cara Membuat PageView Counter Blogger Per Halaman


Script PageView Counter Blogger :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
//<![CDATA[
/* Designer Script : Abdi Syahputra Harahap Web : https://jkoding.xyz */
var counterJkoding = function () {
    var e = "",
        t = window.location.href;
    if ((t = (t = (t = (t = (t = (t = t.replace("?m=1", "")).replace("?m=0", "")).replace("%3D", "")).replace("%3D%3D", "")).replace("&m=1", "")).replace("&m=0", "")).indexOf("#") >= 0) var i = t.split("#")[0];
    else if (t.indexOf("?") >= 0) i = t.split("?")[0];
    else i = t;
    return $.get({
        url: "https://cors-anywhere.herokuapp.com/http://006.free-counters.co.uk/count-123.pl?count=" + i + "&type=cold&digits=7&prog=hit&statslink=yes&sitelink=yes&cntvisible=yes&mode=java",
        async: !1,
        success: function (t) {
            var i = t.split("cold/")[1].split(".gif")[0],
                l = t.split("cold/")[2].split(".gif")[0],
                c = t.split("cold/")[3].split(".gif")[0],
                s = t.split("cold/")[4].split(".gif")[0],
                o = t.split("cold/")[5].split(".gif")[0],
                n = t.split("cold/")[6].split(".gif")[0],
                p = t.split("cold/")[7].split(".gif")[0];
            e = Number(i + l + c + s + o + n + p)
        }
    }), e
};
document.getElementById("counterJkoding") && (document.getElementById("counterJkoding").innerHTML = counterJkoding());
//]]>
</script>


Cara Pemasangan Script PageView Counter Blogger

1. Buka dashboard blogger kamu.
2. Pergi ke Tema >> Edit HTML.
3. Cari code </body>.
4. Lalu pastekan script di atas di bagian sebelum code </body>. Lihat gambar di bawah.

Tahap 1 Cara Membuat PageView Counter Blogger Per Halaman

5. Setelah itu, copy code html berikut :

<div><span id='IconCounter'>
<i class="far fa-eye"></i>
</span><span id='counterJkoding'>Please Wait...</span>
</div>

6. Masih di editor EditHTML. Lalu kamu pastekan code html di atas di lokasi yang mau kamu tampilkan counter nomornya.


Sebagai contoh, saya akan meletakkan di bagian ini. Lihat gambar di bawah.

Tahap 2 Cara Membuat PageView Counter Blogger Per Halaman


Terlihat pada gambar diatas. Saya akan meletakkan counter di bagian sebelah comments. Nah, untuk mengetahui posisi code tersebut, silahkan buka salah satu artikel blog kamu ( saya merekomendasikan membukanya dengan browser google chrome).

7. Setelah kamu buka artikel kamu, lalu tekan "Ctrl + Shif + I" untuk menampilkan "inspect element" atau bisa juga dengan "klik kanan >> pilih inspect element".

8. Setelah itu akan tampil seperti berikut , lalu klik menu "Element" di bagian menu bar. Lihat gambar di bawah ini.

Tahap 3 Cara Membuat PageView Counter Blogger Per Halaman

9. Setelah itu, klik menu yang bergambar icon tanda panah di sebelah paling kiri menu bar. Bentuk iconnya seperti gambar berikut:

Tahap 4 Cara Membuat PageView Counter Blogger Per Halaman


10. Klik sekali gambar icon tersebut, lalu arahkan ke bagian yang ingin kamu pasang "code counter html nantinya". Karena saya ingin memasang di bagian sebelah kata "comment", maka saya akan mengarahkan kursor ke tulisan "comment" lalu klik sekali lagi kata yang kamu sorot tersebut.
Lihat gambar di bawah ini.

Tahap 5 Cara Membuat PageView Counter Blogger Per Halaman


11. Dari hasil di atas, chrome menunjukkan bahwa posisi code html dengan kata "comment" terletak di bagian code <span class="entry-comments-link show">. Setelah itu saya akan mengcopy code "entry-comments-link". Untuk kamu, silahkan sesuaikan dimana posisi counter yang kamu inginkan letak nantinya. Baik kita lanjut.

13. Setelah itu, kita kembali ke bagian dashboard editor HTML Blogger.

14. Di bagian editor HTML blogger, kita akan mencari code yang berhasil kita temukan tadi. Disini saya akan mencari code "entry-comments-link" yang sebelumnya sudah saya temukan.

15. Tekan tombol "CTRL + F" pada keyboard, lalu akan tampil di bagian pojok kanan atas editor HTML blogger sebuah kotak pencarian.

16. Pastekan code yang sudah kamu temukan tadi. Disini saya akan memasukkan code "entry-comments-link" ke dalam kotak pencarian tersebut. Lihat gambar dibawah ini.

Tahap 6 Cara Membuat PageView Counter Blogger Per Halaman

17. Setelah kamu tekan "ENTER", maka editor akan otomatis mencari dan menampilkan hasil code yang kamu cari. Jika di temukan maka akan tampil seperti gambar berikut.

Tahap 7 Cara Membuat PageView Counter Blogger Per Halaman

18. Selanjutnya kamu pastekan code HTML pada STEP NOMOR 5 di bawah code yang kamu cari tadi. Sebagai contoh, saya akan meletakkan code nya seperti gambar berikut.

Tahap 8 Cara Membuat PageView Counter Blogger Per Halaman

19. Klik "Simpan Tema". Lalu coba kamu buka artikel kamu. Jika berhasil, maka akan muncul angka counter nya.

Panjang ya tahapannya.
Sengaja saya buat detail agar para pengunjung yang baru mulai ngeblog mengerti dan paham.
Buat kamu para blogger master dan sudah terbiasa, mungkin akan mengerti dengan mudah.

Jika ada kendala pada saat pemasangan, kamu bisa berkomentar di bawah, atau hubungi saya di bagian menu contact. Secepatnya akan saya balas.

Terimakasih sudah berkunjung.

1 comment for "Cara Membuat PageView Counter Blogger Per Halaman"

Post a Comment