Cara Membuat View Counter di Template Blogger JetTheme


Cara Membuat View Counter di Template Blogger JetTheme Ada banyak manfaat jika Anda membuat view counter di blog Anda seperti dapat mengetahui berapa banyak kunjungan pembaca yang mengunjungi blog Anda dan dapat mengetahui berapa banyak pengunjung yang telah melihat posting di blog Anda.

View counter adalah hasil dari jumlah tampilan artikel yang dilihat pengunjung di halaman dan posting blog. Dan counter view tentunya memiliki manfaat untuk memberi tahu pengunjung artikel mana yang paling banyak dilihat sehingga mereka tahu bahwa artikel tersebut benar-benar bermanfaat.

Pada postingan lalu kami menemukan script penghitung tampilan postingan yang digunakan untuk membuat jumlah pengunjung web di blogger dengan firebase. Tapi ini hanya berfungsi di template blogger default dan template lainnya kecuali di template JetTheme. Untuk itu simak penjelasan berikut ini tentang cara membuat post view counter di blog khususnya bagi pengguna template blogger JetTheme.


Cara Membuat Post Views Counter di Blog


Mungkin sudah banyak blogger yang membuat view counter di blognya. Bagi Anda yang sedang mencari cara menerapkan view counter pada halaman dan postingan blog menggunakan platform Blogger, khususnya pengguna template blogger JetTheme gratis dan premium, Anda bisa melihat panduannya di postingan ini.

Berikut ini Cara Membuat Post Views Counter di Blog (Blogger):

  1. Pertama login ke Blogger.com
  2. Pilih menu Tema Klik tab SESUAIKAN Edit HTML
  3. Buat akun dan database di firebase terlebih dahulu
  4. Kembali ke Edit HTML Template
  5. Lalu cari kode </body>. Salin kode dibawah ini dan tempelkan tepat diatas kode </body>
6. Sekarang ganti alamat URL pada kode diatas (https://samuelpasaribu.firebaseio.com/pages/id/) dengan URL Firebase Anda.

7. Pastikan Anda sudah memasang Jquery Library dan Font Awesome CDN di blog. Jika belum Anda bisa copy script di bawah lalu tempelkan pada bagian meta tags atau tepat di bawah tag <head>


8. Selanjutnya tinggal masukan kode Post View Counter di bawah ini ke dalam template blogger. Disini anda bisa mengatur sendiri penempatan kode penghitung tampilan postingan yang ingin anda tampilkan.


Pada kode diatas untuk menampilkan 👁 post view counter Anda bisa meletakkan kode sesuai tampilan yang diinginkan seperti di Popular Posts, Latest Posts, Featured Post, dan di dalam Postingan.

1. Bagian Popular Posts


Sekarang di Edit HTML anda bisa mencari kode (ctrl+f) dengan mengetikkan kata "small" lalu Enter. Pastikan hasil yang keluar sesuai seperti kode di bawah ini.

<div class='item-meta text-secondary d-flex flex-wrap fs-8'>
<b:if cond='data:jwidget.allBylineItems.timestamp'>
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'>
<use xlink:href='#i-clock'/></svg>
<span class='date-format' expr:data-date='data:post.date.iso8601'>
<b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
</span>#tempel-kode-disini</small>

Pada kode diatas Anda tinggal menambahkan kode post view counter tepat sebelum tag penutup </small> sehingga kodenya akan menjadi seperti berikut ini.

<div class='item-meta text-secondary d-flex flex-wrap fs-8'>
<b:if cond='data:jwidget.allBylineItems.timestamp'>
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'>
<use xlink:href='#i-clock'/></svg>
<span class='date-format' expr:data-date='data:post.date.iso8601'>
<b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
</span><span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span></span></small>

Perintah kode diatas berfungsi untuk menampilkan tampilan page view counter di bagian widget POPULAR POSTS seperti pada gambar berikut ini.


2. Bagian Latest Posts


Untuk menampilkan 👁 Page View Counter di LATEST POSTS pada blog caranya juga sama seperti diatas. Anda bisa mencari kode seperti di bawah ini. Dan letakkan kode Page View Counter setelah tag penutup </small>

<b:if cond='data:jwidget.allBylineItems.timestamp'>
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'>
<use xlink:href='#i-clock'/></svg><span class='date-format' 
expr:data-date='data:post.date.iso8601'>
<b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
</span></small>
<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span></span>
</b:if>

Perintah kode diatas berfungsi untuk menampilkan tampilan page view counter di bagian widget LATEST POSTS seperti pada gambar berikut ini.


3. Bagian Featured Post


Untuk menampilkan 👁 Page View Counter di FEATURED POST pada blog Anda bisa mencari kode seperti di bawah ini.

<b:if cond='data:jwidget.allBylineItems.timestamp'>
<small class='me-2'><svg aria-hidden='true' class='me-1 jt-icon'>
<use xlink:href='#i-clock'/></svg><span class='date-format' expr:data-date='data:post.date.iso8601'>
<b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
</span></small>
<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span></span> 
</b:if>

Perintah kode diatas berfungsi untuk menampilkan tampilan page view counter di bagian widget FEATURED POST seperti pada gambar berikut ini.


4. Dalam Postingan


Untuk menampilkan 👁 Page View Counter di dalam Isi Postingan pada blog Anda bisa mencari kode seperti di bawah ini.

<b:if cond='data:jwidget.allBylineItems.timestamp'>
<div class='me-3'><svg aria-hidden='true' class='me-1 jt-icon'>
<use xlink:href='#i-clock'/></svg><span class='date-format' 
expr:data-date='data:post.date.iso8601'>
<b:eval expr='data:jwidget.allBylineItems.timestamp.label ? data:post.date format data:jwidget.allBylineItems.timestamp.label : data:post.date'/>
</span></div>
<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'>0</span></span> 
</b:if>

Perintah kode diatas berfungsi untuk menampilkan tampilan page view counter di dalam Isi Postingan Blog seperti pada gambar berikut ini.


Jika instalasi Post View Counter ke blog berhasil, maka database di Firebase Anda akan memasukkan history dari visitor id yang masuk ke database di lokasi Realtime Database Data seperti pada gambar berikut ini.


Setiap kali pengunjung masuk ke blog Anda, database akan diinput secara real time. Anda dapat mencoba me-refresh halaman blog untuk melihat hasilnya. Jika tampilan database Anda di Firebase seperti gambar di atas, maka Anda telah berhasil mengimplementasikan Post View Counter di Blog Anda.


Hasil Tampilan View Counter


Berikut ini adalah Hasil Tampilan View Counter di Blog Pada Template JetTheme versi Free:

counter.com

Editor video animasi Unlimited
suaraindigo.blogspot.com
  • Desain Logo Web
  • Template Blogger
  • Layanan Hosting

tikseo.com

Setting Template Blogger Unlimited
Tikseo
  • Jasa Buat Website
  • Teknik SEO
  • Template Blogger

Selain itu, Anda juga bisa mengunjungi dan melihat penawaran layanan yang ditawarkan dari situs terpercaya "tikseo.blogspot.com" tentang kualitas penyedia jasa pembuatan website, aplikasi mobile, layanan hosting dan email.

Dan kini anda tidak perlu khawatir karena tikseo.blogspot.com hadir kembali untuk membantu mempermudah anda semua yang ingin memiliki blog siap pakai. Tanpa harus repot setting Domain, Edit Template bahkan harus mengutak-atik kode HTML.

Bagi pengguna template blogger JetTheme yang menggunakan versi premium sudah tidak perlu repot-repot lagi menggunakan cara diatas. Karena penyedia template blog sudah memasang kode Page View Counter di template JetTheme yang versi premium.

Berikut ini cara membuat view counter di template blogger jettheme versi premium:

  1. Pertama masuk ke Blogger.com
  2. Pilih menu Tema Klik tab SESUAIKAN Edit HTML
  3. Sekarang di halaman Edit HTML anda bisa mencari kode (ctrl+f) dengan mengetikkan kata "firebase" lalu Enter. Pastikan hasil yang keluar sesuai seperti kode di bawah ini.
<Variable name="firebaseUrl" description="Firebase Url" type="string" value=""/>
[!] Page Views Use Firebase Realtime Database by url
4. Sekarang untuk menampilkan Viem Counter Anda bisa mengisikan value dengan ID Firebase Anda. Kalau sudah di isi posisi kode akan menjadi seperti berikut ini.

<Variable name="firebaseUrl" description="Firebase Url" type="string" value="https://id-firebase-anda.firebaseio.com"/>
[!] Page Views Use Firebase Realtime Database by url


Kesimpulan


Uraian di atas menjelaskan bahwa Post View Counter memiliki proses asynchronous pada blog, artinya angka-angka pada post view counter akan muncul jika proses loading telah selesai. Jika loading halaman blog belum selesai dimuat, counter view post masih menampilkan angka yang sama.

Jumlah view yang sudah didapat berdasarkan jumlah pengunjung yang ada di blog setelah kode post view counter dipasang. Jadi jika artikel Anda sudah dilihat ratusan orang dan Anda masih memasang Post View Counter untuk pertama kali, maka nilai nominalnya akan dimulai dari nomor satu (👁 1).

Perhitungan angka berdasarkan PV (Page View) bukan UV (Unique Visitor). Artinya jika 1 pengunjung me-refresh halaman, maka tampilan akan dianggap sebagai 2 tampilan. Di sini Anda juga harus memastikan template yang digunakan mendukung FontAwesome agar simbol 👁 pada penghitung tampilan postingan dapat muncul. Jadi jika Anda tidak mendukung FontAwesome maka tampilan simbol tidak akan muncul.

Demikian artikel kali ini tentang Cara Menambahkan Tampilan Post Counter ke Blogger bagi anda yang masih bingung atau ada pertanyaan lain seputar blogger silahkan berkomentar pada kolom di bawah artikel ini.
Next Post Previous Post
2 Comments
  • Grow with Jaya
    Grow with Jaya October 20, 2022 at 1:42 PM

    tutornya mblunder, tolong dipersimpel secara sistematis urut biar ga binggung

    • samuelpasaribu.com
      samuelpasaribu.com October 20, 2022 at 1:55 PM

      Iya di sesuaikan aja, ntar paham sendiri kok caranya! Intinya itu bekerja sesuai target

Add Comment
comment url