47 Modifikasi Tampilan Widget Statistik Blogger Versi 1

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Modifikasi widget statistik bawaan blogger

Banyak ragam widget statistik untuk blogger yang disediakan oleh pihak ke tiga. Baik itu widget dari Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter dan segudang layanan widget statistik lainnya. Adapun widget statistik default blogger meskipun masih memiliki kekurangan karena belum memberikan data statistis yang lengkap seperti jumlah visitor karena hanya menampilkan jumlah total tayang laman, tetapi cukup untuk memantau perkembangan blog anda.

Tutorial kali ini saya ingin mengetengahkan cara modifikasi widget statistik default blogger agar terlihat lebih indah dari aspek desain. Tentu dengan pengetahuan CSS anda bisa mengembangkan lagi desain dari widget ini.

Fitur

  • Menampilkan Jumlah postingan
  • Menampilkan Jumlah Komentar
  • Menampilkan Total Tayang Laman
  • Penggunaan CSS Sprite
CSS sprite teknik keren yang digunakan untuk mempercepat loading blog ketika melakukan permintaan HTTP gambar. Dalam widget ini mungkin anda berfikir terdapat 3 gambar ikon yang digunakan. Sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini tidak umum diblogger tapi sangat sering digunakan pada blog worpress.

Baiklah silahkan ikuti langkah-langkah berikut:

Cara menambahkan widget statistis blogger ini ke blog

  • Pada dasbor pilih menu Tata Letak
  • Tambah Gadget --> Pilih widget Statistik blog
Widget Statistik Blogger
Pada kolom konfigurasikan widget, anda tidak perlu mengganti nama atau memilih tampilan, langsung klik simpan kemudian klik simpan setelan
  • Sekarang masuk menu Template --> Pilih edit HTML
  • Klik Ctrl+F dan cari kode ]]></b:skin>
  • Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>
#Stats1
ul{margin:10px 0;border:0;padding:0}

#Stats1
li{margin:0;border:0;background-color:#ff4e47;background-image:url(http://lh3.ggpht.com/-JypPIDhQgEY/UIfUN_w0jkI/AAAAAAAABOM/s_O3VHyQSlw/s194/sprites-stats.png);background-repeat:no-repeat;padding:10px
10px 10px 80px;list-style-type:none}

#Stats1
h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}

#Stats1
span{font-size:13px;color:#fff;text-shadow:none}

#totalComments{background-position:0 -68px}

#totalCount{background-position:0 -136px}

Anda bisa mengganti background, warna font pada kode CSS widget statistik diatas agar sesuai dengan desain template blog anda. Untuk kode warna, silahkan lihat disini
  • Klik Ctrl+F dan cari kode berikut:
<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>
  • Setelah dapat, ganti kode tersebut dengan kode berikut:
<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'>&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>
</b:widget>
Anda bisa mengganti tulisan yang memiliki background warna diatas dengan kata-kata anda sendiri
  • Simpan template dan lihat hasilnya diblog anda.
Demikian tutorial kali ini, insyaAllah pada kesempatan yang lain saya akan sharing juga modifikasi widget statistik bawaan blogger yang berbeda. Terimakasih.
Original Source: DuyPham


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

47 komentar :

  1. Balasan
    1. Sama-sama, terimakasih juga tuk kunjungaan dan apresiasinya :))

      Hapus
  2. Alhamdulillah .. setelah beberapa kali berkunjung ke blog ini untuk mengambil ilmunya dan ingin berkomentar akhirnya kesampaian juga, biasanya saya mau komentar udah penuh banget yg komen, tp skrg saya bisa nomor 2 hehehe... saya hanya mau bilang Salut.....

    BalasHapus
    Balasan
    1. Alhamdulillah, saya juga hanya mau bilang salut karena mau menyisihkan waktunya untuk memberikan apresiasi. Terimakasih

      Hapus
  3. What an amazing tutorial! Saya suka modifikasi nya sob, bahkan jauh lebih rapi penampilan nya daripada widget yang dari blogger. Kemudian masih ditambahkan total post & total comment nya! Bravo..

    Kapan-kapan boleh ya saya comot script modifikasi nya! Hehe..
    THANKS :)

    BalasHapus
    Balasan
    1. Silahkan ambil saja script modifikasi widget satatistik bawaan blogger ini, memang ini untuk dibagikan gratis kok. Terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  4. Balasan
    1. Biasakan berkomentar sesuai topik. Kalau sekedar meninggalkan jejak, sudah ada halaman buku tamu yang saya sediakan diblog ini. Terimakasih tuk kunjungannya.

      Hapus
  5. Mantap mbah ama, kayak website yang dibuat pakai PHP. Terlihat Profesional.
    Oh iya, mau tanya sedikit mbak. Bagaimana cara buat halaman posting seperti blog ini. Diatasnya cuma 1 kolom yang ada tulisan baca selengkapnya >>>, diposkan oleh dan label dengan disertai jumlah komentar dalam balon, terus dibawahnya terdiri atas dua kolom yang hanya ada jumlah komentar dan baca selengkapnya >>>. Itu cara membuatnya bagaimana mbak jika mengedit template bawaan blogger. Mohon pencerahan lewat tutorialnya mbak. Terima Kasih Sebelumnya.

    BalasHapus
    Balasan
    1. Terimakasih banyak untuk apresiasinya. Waduh pertanyaannya itu tidak sedikit, kalau dibuat tutoarialnya jadi 3 part, belum lagi request pengunjung lain :-s

      Tapi sabar ya, insyaAllah akan anaa posting tutorialnya. Kalau tidak pingin menunggu lama silahkan search aja digoogle, kira-kira dengan keyword membuat buble comments disamping judul posting, membuat postingan bergaya gallery dll. Semoga membantu.

      Hapus
  6. Alhamdulillah kalau mbak mau menanggapi Request saya dalam bentuk postingan nantinya, kalau masalah waktunya, kapan mbak bisa saja. Saya hanya ingin belajar mendesain template saja soalnya masih baru di dunia blogging. Masih banyak hal yang perlu saya pelajari.

    BalasHapus
    Balasan
    1. InsyaAllah akan anaa buat postingannya, sabar ya sudah ada didraft tinggal tunggu waktunya aja, plus antri sama request teman blogger lainnya. Biar terus dapat update terbaru jangan lupa follow ya kawan, di g+ atau friend connect! :))

      Hapus
  7. wah... matab..
    izin praktekin.. :))
    thanks for share

    BalasHapus
    Balasan
    1. Silahkan dipraktekin kawan, tak perlu izin lagi. Terimakasih apresiasinya ya!

      Hapus
  8. maaf, aku udah jajal untuk codingan HTML yg ke 2 kenapa gak bisa yah ;-(

    BalasHapus
    Balasan
    1. Pastikan anda menambahkan kode 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'>&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>
      </b:widget>

      Hapus
  9. jihaha sudah bisa, sukran mbak, oia saya suka template yang ada di http://democss3tuts.blogspot.com/, dimana saya bisa downloadnya ?

    BalasHapus
    Balasan
    1. Alhamdulillah. 'Afwan, itu template minima white 2 kolom yang sudah anaa modifikasi. Template bawaan blogger.

      Hapus
  10. Keren stats-nya, sis :)
    Thanks dah sharing

    BalasHapus
    Balasan
    1. Sama-sama, terimakasih juga tuk kunjungan dan apresiasi anda.

      Hapus
  11. Trima kasih gan tipsnya. di tunggu kunjungan baliknya dan folbacknya saya udah follow 1155.

    BalasHapus
    Balasan
    1. Sama-sama, terimakasih tuk kunjungan dan apresiasinya. Tunngu aja kunjung balik dari kami ya!

      Hapus
  12. owh template bawaan blogger, pantes saya cari gada :-) , itu template stelan clasic kan mbak?

    BalasHapus
    Balasan
    1. Kalau mau balas komentar disarankan mengggunakan link/tombol balas disamping komentar terkait dibandingkan menggunakan formulir komentar agar komunikasi lbh terstruktur. Jadi yang baca juga tidak salah paham, khawatir nanti dikira komentar anda berkaitan dengan postingan. Iya, seperti itulah.

      Hapus
  13. Mungkin Template saya ndak support dengan kode di atas, setelah saya preview hasillnya error :(

    BalasHapus
    Balasan
    1. Masa sih, mbak sudah coba benaran atau hanya terpengaruh dan salah paham dengan komentar diatas? Atau kemungkinan lain, mbak keliru mengikuti langkah2 diatas :-? Saya kira kode ini support untuk smua template dengan flatfrom blogger, toh widgetx khn bawaan blogger. CSS diatas hanya untuk modifikasi.

      Tutorial ini sudah saya coba diblog dengan template modern dan classic dari blogger, juga pd custom template bahkan pada template yang mbak pakai sekarang (Anime Visual) krn template mbak saya juga download untuk pelajari kode tabbed tab dan sliderx. Terimakasih sudah berkunjung

      Hapus
  14. wah mantap sobat.. saya simpan dulu ya scribnya. soalnya belum bisa langsung praktek nih sobat...

    BalasHapus
    Balasan
    1. Silahkan disimpan dan dipraktekkan kapanpun anda inginkan. Terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  15. kenapa ya ukhti komen ana koq di hapus.. kayaknya ana sudah komen disini.. apa ada yang salah ya.. konfirmasi dong... ;-(

    BalasHapus
    Balasan
    1. Benar ada yang salah, antum salah ingat. Anaa tidak merasa menghapus komentar siapapun dipostingan ini, yang anaa tahu bahwa anaa baru saja menjawab komentar antum dipostingan terbaru yang serupa tapi versi 2 dari modifikasi widget statistik blog bawaan blogger ini :)

      Hapus
  16. Akhirnya diposting juga, terjawab sudah penasaran saya. Thanks Sist.

    BalasHapus
    Balasan
    1. Sama-sama, terimakasih jg tuk apresiasinya.

      Hapus
  17. Kenapa tidak bisa y
    ini pesan erorny "Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "b:includable" must be terminated by the matching end-tag ""."
    maskedx.blogspot.com

    BalasHapus
  18. Udah Bisa Mbak Saya Udah Ganti Versi Bawaan 1 Ke Versi Yang Ke Dua

    BalasHapus
  19. http://ramazord.blogspot.com maaf ke pisah hehehe

    BalasHapus
  20. wah keren juga tipsnya, langsung tak cobain.

    BalasHapus
  21. keren gan, heee
    makasih. saya mau nyoba ah,

    BalasHapus
  22. thanks (h)
    english.sambudy.com

    BalasHapus
  23. bisa diubah2 gitu ya stats standar blogger,,, makasih infonya deh :)

    BalasHapus
  24. mas mau nanyak knpa sich total tayangan laman di blog saya cuma Titik doang enngak nampak animasi gambarnya bisa egak bibantu dikit, terima kasih

    BalasHapus
    Balasan
    1. sama, punya saya juga... ;((

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
  25. wah bgus ni sis. .
    tpi pngennya kayak di hitstat.com .
    tpi di pas di paste lewat edit HTML . . dan di save ndak bisa sis .
    tolong sarannya ?? :)

    BalasHapus
  26. saya kok ndk bisa sesuai dengan arahan ya. tolong di loz.

    BalasHapus
  27. wah keren sob,,baru kali ini ane lihat ni widget makasih utk sharenya

    dan jgn lupa kunjungan baliknya

    BalasHapus
  28. tks info menguvah Widged statistij jadi keren gan....tapi aku punya yg jumlah page view nya kaga ada angkanya gmn gan? kalo jml posting and commment muncul...kasih tau donk gan ....tks yah mudah2 bermanfaat ilmunya gan...amiiinnn

    BalasHapus
  29. trimakasih mbak, sudah saya terapkan tutorialnya...sekalian saya follow blog mbak ini ya, n salam kenal

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!