Ads

Cara Pasang/Menampilkan Counter Postview di Blogspot

Selamat siang sobat blogger, kali ini ane mau bagi pengalaman yang sudah berhasil saya terapkan di blog ini, yaitu memasang postview counter.

Postview counter adalah widget yang menghitung jumlah tampilan per postingan dimana opsi ini tidak muncul pada widget yang disediakan blogger.com.
memasang postview counter di blogger
Pasang Postview Counter

Untuk memasang widget postview counter kita membutuhkan sebuah database, namun jangan khawatir kita tidak perlu menyewa hosting untuk ini karena google telah menyediakan sebuah app database yang dapat kita gunakan secara gratis yaitu Firebase.

Oke baiklah,, langsung saja ke tutorialnya.

#A. Membuat database

  1. Langkah pertama buatlah akun database anda Firebase (sobat hanya perlu login dengan akun google/gmail sobat).
  2. Bila sudah login akan muncul halaman seperti gambar, lalu klik "BUAT PROYEK BARU"
    Halam utama firebase
  3. Masukkan nama proyek sesuai keinginan sobat, dan pilih negara/wilayah, kemudian klik tombol BUAT PROYEK.
    Buat Proyek
  4. Selanjutnya masuk ke proyek yang sudah dibuat sehingga muncul seperti gambar berikut, lalu klik pada menu "Database"
    Membuat database
  5. Link yang ditandai merupakan link database sobat (nanti akan digunakan), selanjutnya klik tab ATURAN.
    username database
  6. Selanjutnya ganti "auth !=null" dengan true (karakter yang di blok), hal ini penting karena bila tidak maka counter view tidak akan berkerja.
    Script database
  7. Bila sudah diganti script akan menjadi seperti gambar, lalu klik publikasi. Bila muncul pesan peringatan abaikan saja (klik tutup).
    Publikasikan database
  8. Proses pembuatan database sudah selesai.

#B. Pasang Counter Postview ke Blogger

  1. Login ke akun blogger sobat, pilih menut Tema/Template > Edit HTML.
  2. Tambahkan kode CSS berikut sebelum kode ]]></b:skin> atau </style>
    /* Post views counter */
    .post-view{float:left;padding-right:5px}
    .post-view>i{padding-right:5px;font-size:98%;}
  3. Pastikan template blog sobat sudah terpasang jQuery, jika belum pasang kode berikut tepat sebelum </head>. Jika sudah abaikan langkah ini.
    <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
  4. Tambahkan kode JavaScript berikut tepat sebelum tag </body>
    <script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'></script>
    <script type='text/javascript'>//<![CDATA[
    $.each($(".post-view[data-id]"),function(a,e){var l=$(e).parent().find("#postviews").addClass("view-load"),i=new Firebase("https://dzulcyber-xxxx.firebaseio.com/pages/id/"+$(e).attr("data-id"));i.once("value",function(a){var n=a.val(),t=!1;null==n&&(n={},n.value=0,n.url=window.location.href,n.id=$(e).attr("data-id"),t=!0),l.removeClass("view-load").text(n.value),n.value++,"/"!=window.location.pathname&&(t?i.set(n):i.child("value").set(n.value))})});
    //]]>
    </script>
  5. Letakkan kode berikut pada tempat yang sobat inginkan untuk ditampilkan. Misalnya jika ingin menampilkan counter postview dibawah judul postingan maka letakkan dibawah kode <div class='post-header-line-1'/>
    <div expr:data-id='data:post.id' class='post-view'><i class='fa fa-eye'></i> <span class='view-load' id='postviews'>0</span> View</div>
  6. Selanjutnya simpan template, dan lihat hasilnya.
Note: Trik sudah tidak work untuk tahun 2023.

Sekian dulu tutorialnya, semoga bermanfaat!

Berikan Komentar Anda

19 Komentar

  1. Waah,, ternyata diblogger biaa juga ya. Bisa dicoba ni.. Mantaf tipsnya gan.. Sekses terus.

    BalasHapus
    Balasan
    1. thank bro.. silahkan dicoba..semoga bermanfaat!

      Hapus
  2. tidak bisa lagi ya

    BalasHapus
    Balasan
    1. sudah tidak work,, sudah banyak pembaharuan di firebase nya..

      Hapus
    2. Sorry gan,, trik ini sudah tidak work, karena sudah banyak update di firebase. Ini trik 6 tahu yang lalu..

      Hapus
  3. ane praktekin dulu gan, lumayan gausah buka buka blogger.com lagi

    BalasHapus
  4. silahkan gan,, semoga berhasil..hehehe

    BalasHapus
  5. Wah,, mantap gan.. lengkap banget tutorialnya..
    oya,, mau tanya cara buat menu responsive mobile seperti blognya dzulcyber gimana ya?? hehehe..

    BalasHapus
  6. Silahkan dicoba gan,, kalo menu template ini belum selesai masih dalam pengembangan... Hehehe

    BalasHapus
  7. gak bisa gan, gak muncul

    BalasHapus
  8. Tahapannya udah bener semua?

    BalasHapus
  9. sudah bisa gan,, makasih,,
    cuma yang yang terakhir tidak saya letakkan di post-headear-line-1,
    pengaturannya beda untuk template saya,,

    BalasHapus
  10. iya gan, peletakan sesuai dengan kebutuhan akan ditampilkan dibagian mana. Selamat..

    BalasHapus
  11. Kalo masih saja 0 viewnya, letak salahnya dmn ya ?

    BalasHapus
  12. kok di blog saya yang http://tigadoloknews.com kok gak bisa ya, Mas?
    Mohon bantuannya.

    BalasHapus
  13. di bagian mana yang tidak bisa pak? tips ini saya coba beberapa bulan yang lalu langsung blog ini. kalo fasilitas firebase nya masih saya kayaknya masi work pak.

    BalasHapus
  14. Saya sudah praktekkan di blog saya sesuai tutorial di atas.
    Oh ya, kalau penempatan link database/firebasenya diletakkan di mana ya?

    BalasHapus
  15. Link firebasenya di javascriptnya gan, ganti https://dzulcyber-xxxx.firebaseio.com dengan link firebase punya agan.

    BalasHapus
  16. Wah...memang aku nya mungkin yang susah paham,,, udah berkali-kali kucoba, tapi tetap aja gak bisa-bisa.
    Kalau Mas Dzul gak keberatan, tolong dong pasangkan di blog saya www.tigadoloknews.com soalnya udah hampir sebulan kucoba, tapi gak bisa.

    BalasHapus