62 Modifikasi Tampilan Widget Statistik Bawaan Blogger Versi 2

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

Modifikasi widget statistik bawaan bloggerKembali lagi dengan tutorial modifikasi widget statistik blog bawaan blogger, dan modifikasi ini adalah versi kedua. Perbedaannya dengan modifikasi versi pertama hanya terletak pada kode CSS adapun dari aspek desain: Yang pertama menggunakan background gambar icons dan berbentuk vertikal, sedangkan versi kedua ini hanya menggunakan background warna dengan horizontal style. Atau seperti screenshot disamping:

Adapun Fitur dari widget statistik blog ini:

Fitur

  • Menampilkan Jumlah postingan
  • Menampilkan Jumlah Komentar
  • Menampilkan Total Tayang Laman
Tertarik untuk menambahkannya pada blog anda? 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:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 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 -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 modifikasi widget statistik bawaan blogger versi dua, jangan lupa untuk mengecek modifikasi widget statistik blog versi 1, dengan mengklik link title judul tersebut.
Terimakasih.


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

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

62 komentar :

  1. Bagus banget windgetnya, sis...jd, kepingin pasang deh.
    Makasih dah berbagi yang bermanfaat :)

    BalasHapus
    Balasan
    1. Silahkan dipasang, sama-sama, terimakasih juga tuk kunjungan dan apresiasinya. Jadi ingat belum submit blog saya ke direktori weblog. *Jadi malu padahal selalu dapat apresiasi yang memberikan support untuk terus berbagi.

      Hapus
    2. Bagus banget mbak tutorial nya, mau coba praktekin di punyaku neh..http://www.gombek.com/

      Hapus
  2. Saya ijin coba ya mbak, mudah2an yg ini sukses.

    BalasHapus
    Balasan
    1. Silahkan dicoba, nggak perlu izin kok. Semoga sukses ya!

      Hapus
    2. Masih gagal juga Mbak Ana, kira2 apa sy ndak pakai template bawaan Blogger yah ;(

      Hapus
    3. Masa sih, nggak baca tanggapan komentar anaa dipostingan modifikasi widget statistik versi 1 ya? Tutorial ini sudah sukses diterapkan pada template modern/classic bawaan blogger, juga pada custom template bahkan pada template yang sama dengan template yang mbak gunakan sekarang. Untuk bukti yang terakhir lihat saja di blog ini: http://anaamuslimah.blogspot.com/

      Sebenarnya ini mudah sekali, heran kok mbak tidak bisa ya :-?

      Hapus
  3. thans tutorialnya gan. di tunggu kunjungan baliknya.

    BalasHapus
    Balasan
    1. Sama-sama, meski tanpa pesan kunjung balik, insyaAllah setiap ada kesempatan anaa selalu memberikan apresiasi serupa kepada teman-teman blogger kok. Terimakasih.

      Hapus
  4. kak...
    Folback ke blog saya kak
    di http://smactfbisa.blogspot.com :-(

    BalasHapus
    Balasan
    1. Kalau hanya pesan follback khan bisa dibuku tamu de'. Biasakan komentar sesuai topik ya! Anaa foolback g+ aja ya. Terimakasih apresiasinya.

      Hapus
  5. asyik...jadi lebih gampang pengen tahu jumlah yg komen yg ada di blog ya mbak... :)
    mav nih baru bisa hadir :)

    BalasHapus
    Balasan
    1. Iya benar sekali, walau sebenarnya bisa tahu juga lewat dasbor blogger. Terimakasih banyak ni sudah sempatkan berkunjung dan memberikan apresiasinya.

      Hapus
    2. yup..mbak..terkadang klw mesti liat di dashbord..memakan waktu ya.. :)

      Hapus
  6. kyknya aku udh males utak atik kode template lg sob..
    ^_^

    BalasHapus
    Balasan
    1. Tidak apa, khan tutorial ini bukan hanya untuk sobat seorang :P
      Kalau anaa tambah ketagihan otak atik blog, meski capek :-s tapi puas, mungkin begitulah kalau hobi.

      Tolong ganti link anaa dengan alamat sekarang ya! Nanti anaa link back. Terimakasih apresiasinya.

      Hapus
  7. Iya sih emang g harus ngomong kunjungan balik udah dateng. tapi folbacknya kok g nongol yah, apa karna saya newbie jadi g ada expresinya!

    BalasHapus
    Balasan
    1. Disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Alangkah baiknya jika kita bersangka baik kawan, anaa dah blogging sejak 2009 sudah banyak blog yang anaa follow, dengan koneksi internet dirumah yang lemot nambah follow berarti nambah waktu loading dasbor anaa. Anaa tidak pernah memaksa org untuk follow blog ini, menurut anaa org akan follow sendiri blog jika merasa blog tersebut bermanfaat. Anaa tetap follow teman blogger baru kok tapi pada g+ mereka, sedangkan diblog anda anaa tidak temukan profil g+.

      Terimakasih dah berkunjung lagi, jangan bosan ya :))

      Hapus
    2. Saya tidak pernah beranggapan untuk berperasangka buruk kepada siapa pun. apalagi kepada anda. biasa saja lah slow...

      Hapus
    3. Alhamdulillah, baguslah kalau gitu. Thanks

      Hapus
  8. Kalau uda pakai modifikasi ini tambah keren nih blog saya :)

    BalasHapus
    Balasan
    1. Harapan anaapun demikian. Walau sebenarnya tanpa modifikasi widget statistik bawaan blogger ini juga blog kawan dah keren. Terimakasih tuk kunjungan dan apresiasinya ya!

      Hapus
  9. (h) keren.. ikut nyimak nih

    BalasHapus
    Balasan
    1. Silahkan disimak, bisa sambil ngopi (c) kok.

      Hapus
  10. Hihihi....:d
    Maaf saya telat nih mba,keren juga tampilan widget statistiknya.
    tapi saya punya tak hapus buat ngurangin beban loading :)

    BalasHapus
    Balasan
    1. Tidak apa telat, yang penting tetap absen hadir. Ini widget bawaan blogger lho, tidak begitu pengaruh deh dengan loading blog. Terimakasih.

      Hapus
  11. Sepertinya sangat bagus, dan perlu dicoba ini sob
    terima kasih sudah berbagi info
    salam sukses selalu

    BalasHapus
    Balasan
    1. Benar sekali, dan silahkan untuk dicoba. Terimakasih apresiasinya. Salam sukses juga untuk anda.

      Hapus
  12. Tutorial yg keren Sobat...kalo ditambah statistik yg sedang online berapa gmn caranya?
    trims

    BalasHapus
    Balasan
    1. Widget statistik bawaan blogger khan belum support untuk itu sobat. Terimakasih kunjungan dan apresiasinyanya ya!

      Hapus
  13. Patut dicoba... simpan dulu, kalau otak atik dirumah bisi galau cuz loading lamaaa, di kantor saja :D

    BalasHapus
    Balasan
    1. Silahkan disimpan dan dipraktekin kapan saja Gen-Q punya kesempatan. Terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  14. Mantap Bro infonya,, makasih ya,,
    Langsung coba

    BalasHapus
  15. Balasan
    1. Asyik juga dikunjungi sahabat seHobi. Terimakasih. Sering-sering berkunjung dan bertukar ilmu dan apresiasi untuk memberikan support ya!!! :))

      Hapus
  16. Wah menarik nih tutorialnya.. (o)

    BalasHapus
    Balasan
    1. MasyaAllah komentarx, menunjukkan ketawaduan seorang master. Terimakasih tuk apresiasinya, ilmu dan supportx! (p)

      Hapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. Kenapa komentarnya dihapus dik Bella? Jangan sungkan jika ada yang harus ditanyakan! Terimakasih kunjungannya dinda :)

      Hapus
  18. ane pengen nyoba yg ini nih..hehe

    BalasHapus
  19. bagus ini, ane salut sm yg bikin widget ini
    tp bisa gak widgetnya itu jd ada animasinya, mirip yang standar stat with animation. jd angka pageviewsnya itu bergerak?
    kl bisa itu jg
    ane cb dl yg ini.
    thanks

    BalasHapus
  20. diblog saya ko ga bisa di pasang ya? :(
    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:section" must be terminated by the matching end-tag "".

    Error 500"

    bantuin dong http://nandarious.blogspot.com

    BalasHapus
  21. Agak lumayan ribet nih,maklum pemula...

    BalasHapus
  22. Keren....
    Izin ngopy ya.
    :) =))

    http://d-feri.blogspot.com/

    BalasHapus
  23. wah artikel bermanfaat nich mas ane simpen dulu sapa tau besok-besok berguna. mas kalo ada waktu luang mampir ke blog saya dan jgan lupa tinggalkan salam manis di blog saya. :>)

    BalasHapus
  24. klu total comment nya diganti sama tanggal lahir blognya bisa tidak ?
    bagus infonya, diserep nech

    BalasHapus
  25. Agak bingung hihihii*saya benar2 nihhh hehe..makasih mbak bakal tak ubek2 ini blog

    BalasHapus
  26. kren sekali blog ta :) numpang copy ya
    http://jhamalsinjai.blogspot.com/ jangan lupa follow juga yah please.

    BalasHapus
  27. punya saya pageviewsnya koq titik-titik?

    BalasHapus
  28. webn.a bagus sekali gan............!!!!!!!!!!!

    BalasHapus
  29. daftarkan blog sobat di Direktori Blogg's http://direktoriblogg.blogspot.com/ untuk meningkatkan kualitas blog kamu dan dapatkan backlink dari Direktori Blogg's

    BalasHapus
  30. :>) mantap, berjalan dengan mulus... makin berwarna blog ane :)
    makasih ya

    BalasHapus
  31. Punya saya yg bagian pageview-nya ngga tampil yaa..
    mohon bantuannya :((
    sinaubengi[dot]blogspot[dot]com

    BalasHapus
  32. wah keren mba , tapi sayang mba ...saya Udah coba di blog saya gk bisa :( , ada beberapa kode salah jd nyimak aja kalo gitu :D

    BalasHapus
  33. Koq diblog saya malah yang Pageviewnya dibawah yang koment sama postnya diatas , itu buat ubahnya gimana yah ? #pemula :)

    BalasHapus
  34. Wow, Thanks ya.. Bermanfaat, kerenn (f)

    BalasHapus
  35. Makasih infonya mulai popular post rainbow, label biru, blog archive dan total tayang di blogku sumber infonya dari blog ini

    kunjungi blogku ya rizkiramdhani17.blogspot.com

    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!