Berhasil Membuat Widget Page View Postingan Blogger

Kita akan membahas Cara Membuat Widget Page View Di Setiap Postingan Blogspot. Tidak hanya di wordpress kita dapat membuat Widget Page View Di Setiap Postingan tetapi di Blogspot juga kita bisa buat.

1. Buat javascript di Firebase

Langkah pertama untuk Membuat Widget Page View Di Setiap Postingan Blogspot adalah pertama membuat alamat penghitung di firebase buatan google. Jangan khawatir, firebase juga dapat kita percaya karena buatan google.

a. Silahkan klik https://console.firebase.google.com/ gunakan email aktif yang anda miliki.

b. Buat project baru, dilaman firebase projek baru anda harus mengisi nama project kemudian mengklik continiou.

c. Kemudian centang enable google analytic, lalu klik continiou.

d. pilih username atau buat username baru juga boleh, nanti isinya sama dengan langkah berikutt ini. Lalu klik continiou.

e. Tunggu proses pembuatan project baru sedang berlangsung. Proses ini tidak akan lama, silahkan ditunggu saja sampai selesai, yaitu terbuka jendela baru seperti langkah dibawah ini.

f. Proses pembuatan project baru telah selesai silahkan anda klik continiou.

g.Kini kita akan membuat realtime database pada menu yang ada pada firebase. Klik realtime database, anda akan dibawa ke laman berikutnya.

h. Laman realtime database telah terbuka, silahkan klik create database.

i. Pilih negara tempat data base disimpan.

j. Pilih Start In Test Mode lalu klik enable.

k. Kita sudah mendapatkan alamat untuk penghitung artikel baca blogger. Copy dan paste simpan alamat ini di notepad.

l. Terlihat projek baru telah berjalan.

Langkah Berhasil Membuat Widget Page View Postingan Blogger selanjutnya adalah memasukkan alamat firebase tersebut kedalam template blogger. Silahkah ikuti langkah-langkah dibawah ini dengan cermat.

Proses Pembuatan :

1. Buka Blogger - Kemudian anda Login menggunakan akun blog anda.

2. Pada dashboard Blogger - pilih Tema/Template.

3. Pasang atau copy paste JQuery berikut ini, jika sudah dipasang tidak perlu dipasang lagi, jika belum terpasang wajib memasangnya.

4. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>

  <script
  src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'
  type='text/javascript'></script>

5. Jika langkah 4 sudah anda selesaikan, lanjut lagi dengan menemukan kode </body>

6. Copy & Paste kode berikut ini, dan letakkan diatas kode </body>

 <script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js'
  type='text/javascript'></script>
  <script type='text/javascript'>//<![CDATA[
  $.each($(".post-view[data-id]"),function(c,f){var
  b=$(f).parent().find("#postviews").addClass("view-load"),d=new
  Firebase("https://autominilab-26b79-default-rtdb.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var
  h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]></script>

Keterangan : 

Silakan anda ganti https://autominilab-26b79-default-rtdb.firebaseio.com pada kode diatas dengan alamat link Firebase anda yang sudah dibuat tadi.

7. Terakhir, Temukan kode berikut ini <div class='post-info'> atau <div class="post-header"> kode ini letaknya bisa saja dimana sesuai dengan template anda.

8. Copy & Paste kode script berikut ini dan letakkan kode berikut dibawah kode <div class='post-info'> atau <div class="post-header"> atau kode yang mirip, gunakan inspect element untuk mencari kode.

<span class='post-view' expr:data-id='data:post.id'><i class='fa
    fa-eye'/> <span class='view-load' id='postviews'>0</span>
    Viewers</span>

Contohnya pada template Linkmagz buatan mas sugeng:

<b:includable id='postInfoPostDate'>

<time expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'>

  <b:eval expr='format(data:post.date, &quot;dd MMM,
  YYYY&quot;)'/>
  </time>
    <span class='post-view' expr:data-id='data:post.id'><i class='fa
    fa-eye'/> <span class='view-load' id='postviews'>0</span>
    Viewers</span>
</b:includable>

9. Simpan Template.

Jika tidak berhasil, silahkan anda cermati langkah-langkah Berhasil Membuat Widget Page View Postingan Blogger diatas. Pastikan anda mengikuti langkah demi langkah dengan benar.