Jumat, 05 Juli 2013

Widget Statistik Blogger menampilkan berapa banyak total pageviews halaman sebuah blog, dengan kata lain sebagai barometer bari sebuah blog untuk mengetahui berapa banyak halaman yang ditelah dikunjungi dan dibuka oleh pengunjung blog. Widget statistik bawaan blogger bisa dirubah atau dimodifikasi agar lebih elegan. demonya lihat pada sidebar sebelah kanan blog cybermales ini.

cara merubah widget statistik blogger

Kelebihan widget yang telah dimodifikasi ini akan menampilkan
1. Berapa banyak jumlah postingan
2. Berapa banyak jumlah Komentar pengunjung
3. Menampilkan Total Tayang Laman sebuah blog.

Ingin mencobanya? ikuti tutorial cara merubah atau cara memodifikasi widget statistik blogger dibawah ini.

1. Login Blogger.com
2. Pada dasbord pilih menu layout/Tata Letak Tambah Gadget --> Pilih widget Statistik blog --> save ( jika sudah ada lompati bagian ini )
3. Lalu masuk menu Template --> Pilih edit HTML --> backup dahulu
4. Cari kode: ]]></b:skin>
5. Copy kode CSS dibawah ini, lalu letakkan diatasnya.

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:27%;margin:0;border:0;background-color:#fff;background:#FF00D5;color:#fff;float:left;padding:7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -48px}
#totalCount{background-position:0 -100px}

6. Kemudian cari kode seperti dibawah ini:

<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>

7. Setelah ketemu, ganti kode tersebut dengan kode berikut ini:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'></h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'></h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'></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>
</b:widget>

8. Save template, lihat hasilnya.

Catatan:

Warna tampilan sama dengan warna yang ada pada blog Cybermales ini, yaitu candy pink. Sobat bisa mengganti warna background, ukuran, warna font sesuai selera ( bagian CSS pada no.5 ) Sekian postingan cara merubah widget statistik blogger. Untuk kode warnanya, silahkan lihat Disini..
Silahkan dicoba jika berminat, semoga bermanfaat.

Related Posts:

  • SEO Blog Yang Terseok SeokSudah hampir 2 tahun nge blog di blogger.com dengan blogspot tidak terasa, usia ngeblog yang lumayan tinggi jika memang menggeluti dunia web design, tapi selama ini cuma ngabisi waktu cuma buat posting buat artikel baru tanpa… Read More
  • Cara Hapus Tulisan Showing Posts With Labels Blogspot   1. Login blogger.com 2. Go to Dashboard --> Template --> Edit HTML 3. Klik Expand Widget Template (backup template) 4. Cari kode seperti dibawah ini pada template :     <b:includable id='st… Read More
  • Cara Compress Kode Html Css Dan Javascript Pada Template BlogspotCompress Html Css Dan Javascript pada template bloggger khususnya blogspot bisa dilakukan dengan mudah asal tahu bagian yang harus dicompress atau diperkecil ukurannya. Pada tiap template selalu terdiri dari bagian Head, body… Read More
  • Cara Remove Loading Gear Dinamic TemplateBuat sahabat blogger yang menggunakan tampilan Dynamic Views pada template blog nya terkadang ditanya atau bahkan kadang bertanya pada diri sendiri ketika mencoba mem views kan halaman blog nya yang menggunakan Dynamic tem… Read More
  • Cara Buat Readmore Tanpa Javascript Di BlogspotMengurangi penggunaan javascript akan mengurangi beban loading blog pada browser, dan akan membantu meningkatkan pagespeed blog, bisa juga mengkompres fies javascript untuk memperkecil ukuran files javascript. tapi lebih b… Read More

3 komentar:

  1. kok gak bisa ya ditemplate saya, apa karena saya memakai template bukan bawaan

    BalasHapus
  2. nice info,sangat bermanfaat buat saya,tk

    BalasHapus
  3. wah keren gan jadinya :D

    terima kasih sudah berbagi pengetahuan gan ^^

    BalasHapus

Arsip Blog

Visitor

25500370
Popular Posts

Donate To Me On Paypal

https://www.paypal.me/riyanto1971