Tutorial Widget Statistik Blog Simple & Profesional

Untuk pertama kalinya Blog Garux mencoba share tentang cara menampilkan widget statistik blog yang tampil simple namun profesional, widget ini nantinya akan tampak profesional disesuaikan dengan template blog yang anda gunakan. Untuk melihat contohnya, silakan anda lihatdi sidebar blog ini, di bagian Statistik.

Pada widget statistik ini akan di tampilkan tiga keterangan yaitu Jumlah postingan, Jumlah komentar, serta Jumlah Pageviews. Keunggulan menggunakan widget statistik ini yang pertama pastinya adalah kita bisa menampilkan total statistik pada blog yang kita miliki. Selanjutnya widget ini adalah statistik dari platform blogger itu sendiri yang seikit di modifikasi, jadi statistik ini bukanlah jenis statistik dari pihak ketiga yang mana bisa memungkinkan memberatkan loading blog karena harus memanggil script yang di hosting oleh puhak ketiga tersebut.

Nah, untuk menggunakan widget statistik ini, caranya sebagai berikut :

• Login ke Blogger
• Pada menu di kiri, pilih "Tata Letak"
• Pilih Add Gadget
• Lalu pilih "Blog's Stats"
• Kemudian Simpan

• Kemudian kembali ke menu sisi kiri, pilih Tema
• Pilih Edit HTML
• Klik di dalam kotak, tekan CTRL+F pada keyboard lalu ketikkan "Stats1"
• Klik 3 titik sebelum tulisan

<b:widget id='Stats1' locked='false' title='Statistics' type='Stats' version='1'>...</b:widget>

• Klik lagi 3 titik pada bagian ini

<b:includable id='main'>...</b:includable>

• Kemudian blok code seperti dibawah ini :

<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<!-- Content is going to be visible when data will be fetched from server. -->
<div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
<!-- Counter and image will be injected later via AJAX call. -->
<b:if cond='data:showSparkline'>
<script src='https://www.gstatic.com/charts/loader.js' type='text/javascript'/>
<span expr:id='data:widget.instanceId + &quot;_sparklinespan&quot;' style='display:inline-block; width:75px; height:30px'/>
</b:if>
<span expr:class='&quot;counter-wrapper &quot; + (data:showGraphicalCounter ? &quot;graph-counter-wrapper&quot; :
&quot;text-counter-wrapper&quot;)' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>
</span>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>

• Ganti dengan kode dibawah ini :

<b:includable id='main'>
<div class='widget-content'>
<ul> <li> <h4 id='Stats1_totalPosts'>&amp;hellip;</h4> <span>Posts</span> </li>
<li id='totalComments'> <h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span> </li>
<li id='totalCount'> <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4> <span>Pageviews</span> </li> </ul> <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts"></script><script type="text/javascript" src="/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments"></script>');
//]]>
</script> </div>
</b:includable>

• Klik Simpan.
• Selesai

Oke, jadi begitulah cara membuat widget statistik simple dan profesional untuk blogger, semoga bisa bermanfaat untuk kita semua, Terima kasih

Share this on : FacebookGoogle+