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):
- Pertama login ke Blogger.com
- Pilih menu Tema Klik tab SESUAIKAN ▼ Edit HTML
- Buat akun dan database di firebase terlebih dahulu
- Kembali ke Edit HTML Template
- 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.
Hasil Tampilan View Counter
Berikut ini adalah Hasil Tampilan View Counter di Blog Pada Template JetTheme versi Free:
counter.com
Editor video animasi Unlimited
- Desain Logo Web
- Template Blogger
- Layanan Hosting
tikseo.com
Setting Template Blogger Unlimited
- 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:
- Pertama masuk ke Blogger.com
- Pilih menu Tema Klik tab SESUAIKAN ▼ Edit HTML
- 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
Baca juga : Cara Hosting di Firebase Dari Visual Studio Code
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.
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
tutornya mblunder, tolong dipersimpel secara sistematis urut biar ga binggung
Iya di sesuaikan aja, ntar paham sendiri kok caranya! Intinya itu bekerja sesuai target