Memasang View Counter dengan Firebase - Arlina Design
Memasang View Counter dengan Firebase

Memasang View Counter dengan Firebase - Postingan kali ini Arlina Design akan berbagi cara memasang view counter atau jumlah tampilan post yang dibaca oleh pengunjung dengan menggunakan Firebase.

Bagi yang ingin mencobanya, silakan ikuti langkah berikut :

1. Terlebih dahulu, buat akun Firebase di sini Firebase

Sign Up Firebase

2. Setelah membuat akun, akan muncul halaman dashboard. isi data aplikasi baru di kolom formulir kiri bawah seperti contoh di bawah ini, klik create new app. 

Data Aplikasi Firebase

Setelah itu klik manage app


Manage Aplikasi Firebase

Setelah terbuka, salin url aplikasi dan pastekan di notepad

Salin URL Aplikasi

Sebelum beranjak ke langkah selanjutnya, pastikan di template blog sobat sudah terdapat jQuery library. Jika belum ada pasang kode di bawah ini sebelum </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

3. Langkah selanjutnya, buka blogger > Template > Edit HTML, salin kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

.post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

Kemudian salin kode di bawah ini tepat sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://arlinadesign.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>

Ganti kode yang ditandai dengan url data aplikasi yang telah disimpan di notepad tadi

Selanjutnya cari kode di bawah ini

<div class='post-header'>
  <div class='post-header-line-1'/>
</div>

Kemudian ganti menjadi seperti ini

<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div>

Catatan : Pasang kode di atas pada post-header yang ada di dalam markup post, seperti di bawah ini

<b:includable id='post' var='post'>
...
...
<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div>
...
...
</b:includable>

4. Simpan template.

Catatan : Angka pada tampilan post bukanlah tampilan yang sebenarnya, karena pada akun free firebase akan dibatasi. Jika tidak ingin dibatasi silakan daftar dengan akun firebase premium yang tersedia di situsnya.

Untuk selebihnya bisa sobat kreasikan kembali, terima kasih.


Referensi : http://obesitystrike.blogspot.com/2015/01/membuat-post-view-counter-untuk-blogspot.html

Memasang View Counter dengan Firebase

Memasang View Counter dengan Firebase

Memasang View Counter dengan Firebase - Postingan kali ini Arlina Design akan berbagi cara memasang view counter atau jumlah tampilan post yang dibaca oleh pengunjung dengan menggunakan Firebase.

Bagi yang ingin mencobanya, silakan ikuti langkah berikut :

1. Terlebih dahulu, buat akun Firebase di sini Firebase

Sign Up Firebase

2. Setelah membuat akun, akan muncul halaman dashboard. isi data aplikasi baru di kolom formulir kiri bawah seperti contoh di bawah ini, klik create new app. 

Data Aplikasi Firebase

Setelah itu klik manage app


Manage Aplikasi Firebase

Setelah terbuka, salin url aplikasi dan pastekan di notepad

Salin URL Aplikasi

Sebelum beranjak ke langkah selanjutnya, pastikan di template blog sobat sudah terdapat jQuery library. Jika belum ada pasang kode di bawah ini sebelum </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

3. Langkah selanjutnya, buka blogger > Template > Edit HTML, salin kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

.post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

Kemudian salin kode di bawah ini tepat sebelum </body>

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://arlinadesign.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>

Ganti kode yang ditandai dengan url data aplikasi yang telah disimpan di notepad tadi

Selanjutnya cari kode di bawah ini

<div class='post-header'>
  <div class='post-header-line-1'/>
</div>

Kemudian ganti menjadi seperti ini

<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div>

Catatan : Pasang kode di atas pada post-header yang ada di dalam markup post, seperti di bawah ini

<b:includable id='post' var='post'>
...
...
<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat&amp;nbsp;<span class='loading'/>&amp;nbsp;Kali</div>
</b:if>
</div>
</div>
...
...
</b:includable>

4. Simpan template.

Catatan : Angka pada tampilan post bukanlah tampilan yang sebenarnya, karena pada akun free firebase akan dibatasi. Jika tidak ingin dibatasi silakan daftar dengan akun firebase premium yang tersedia di situsnya.

Untuk selebihnya bisa sobat kreasikan kembali, terima kasih.


Referensi : http://obesitystrike.blogspot.com/2015/01/membuat-post-view-counter-untuk-blogspot.html

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo