Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Berhasil Membuat Widget Page View Postingan Blogger

Cara Membuat Widget Page View di Setiap Postingan Blog

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.
Cara Membuat Widget Page View di Setiap Postingan Blog


b. Buat project baru, dilaman firebase projek baru anda harus mengisi nama project kemudian mengklik continiou.
Cara Membuat Widget Page View di Setiap Postingan Blog


c. Kemudian centang enable google analytic, lalu klik continiou.
Cara Membuat Widget Page View di Setiap Postingan Blog


d. pilih username atau buat username baru juga boleh, nanti isinya sama dengan langkah berikutt ini. Lalu klik continiou.
Cara Membuat Widget Page View di Setiap Postingan Blog


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.
Cara Membuat Widget Page View di Setiap Postingan Blog


f. Proses pembuatan project baru telah selesai silahkan anda klik continiou.
Cara Membuat Widget Page View di Setiap Postingan Blog


g.Kini kita akan membuat realtime database pada menu yang ada pada firebase. Klik realtime database, anda akan dibawa ke laman berikutnya.
Cara Membuat Widget Page View di Setiap Postingan Blog


h. Laman realtime database telah terbuka, silahkan klik create database.
Cara Membuat Widget Page View di Setiap Postingan Blog


i. Pilih negara tempat data base disimpan.
Cara Membuat Widget Page View di Setiap Postingan Blog


j. Pilih Start In Test Mode lalu klik enable.
Cara Membuat Widget Page View di Setiap Postingan Blog


k. Kita sudah mendapatkan alamat untuk penghitung artikel baca blogger. Copy dan paste simpan alamat ini di notepad.
Cara Membuat Widget Page View di Setiap Postingan Blog


l. Terlihat projek baru telah berjalan.
Cara Membuat Widget Page View di Setiap Postingan Blog

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[
// VIEWERS COUNTER
$.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.

Post a Comment for "Berhasil Membuat Widget Page View Postingan Blogger"