Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Ad 468 X 60

Sunday, January 27, 2013

Cara Membuat Widget Popular Post Blogger Menjadi Lebih Menarik


widget popular post menarikSaya jarang menggunakan tool kecuali saya tahu saya dapat merancang sesuai dengan preferensi saya. Tim Blogger memperkenalkan Widget Popular Post resmi mereka yang bisa menampilkan potongan posting Anda yang dapat dilihat bersama dengan gambar thumbnail berdasarkan statistik Analytics blog Anda. Tapi tunggu! widget kali ini merupakan langkah maju dari itu. Kami akan menimpa stylesheet  untuk widget ini sepenuhnya dengan kostum font dan warna. Anda dapat melihat widget Popular Post ini di sidebar blog saya.

Keuntungan terbesar dari widget ini adalah bahwa kita tidak perlu menginstal Javascript apapun yang berat karena kita menggunakan widget yang tersimpan pada server Blogger dan kita hanya akan mengubah tampilan untuk membuatnya menyatu sempurna dengan blog Anda.
Saya harap Anda akan mendapatkan tutorial yang cukup menarik kali ini karena saya akan memberikan trik sederhana tentang cara membuat widget popular post menjadi sangat menarik. Jadi mari kita mainkan!

Menambahkan Widget Popular Post ke Blog
  • Login dulu ke Blogger > Layout
  • Klik Add a gadget dan pilih gadget "Popular Post" dari daftar yang disediakan blogger
  • Setinglah seperti gambar di bawah ini! (Ubahlah Most viewed menjadi 'All time', hilangkan centang pada 'image thumbnail' dan 'snippet')

widget-popular-post

  • Simpan widget Anda
  • Sekarang masuklah ke Template
  • Backup dulu template Anda jika perlu
  • Klik Edit HTML
  • Carilah kode ini

]]></b:skin>
  • Kemudian letakkan kode berikut ini di atasnya

/*--- Genera Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("http://4.bp.blogspot.com/-7CHpNrL3BIY/UQFD2sPq6LI/AAAAAAAAI8E/Jibvq813XCE/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Keterangan:
Anda dapat melakukan perubahan untuk menyesuaikan tampilan default dari kode di atas:
    • Untuk mengubah gambar bullet, gantilah link gambar yang bercetak tebal pada kode di atas dengan URL bullet Anda.
    • Untuk mengubah warna perbatasan dalam mode aktif editlah bagian ini #dddddd
    • Untuk mengubah warna perbatasan pada saat ditunjuk mouse edit bagian ini #666666
    • Anda dapat menggunakan Kode Warna CSS milik saya untuk mencari kode warna yang tepat.
  • Dan terakhir, simpan Template Anda dan katakanlah bingo!

Kunjungi blog Anda untuk melihat apakah widget popular post sudah terpasang dengan baik pada sidebar blog Anda. Jangan beritahu saya jika Anda membutuhkan bantuan lebih lanjut dalam mengubah jenis font atau warna. Widget akan secara otomatis menggunakan warna standar dari blog Anda, tetapi jika Anda ingin mengubah untuk sesuatu yang berbeda maka jangan ragu untuk membiarkan saya tahu dengan mem-posting komentar Anda di bawah ini. :D

Jika Anda menyukai artikel ini dan ingin berbagi dengan pembaca Anda mengenai tutorial ini maka silahkan cantumkan linkback ke postingan ini. Salam damai kawan.. :)

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.

112 comments:

  1. Terima kasih gan,sudah saya coba dan berhasil,sukses selalu buat blog ini dan adminnya..share yang bermanfaat..:)

    ReplyDelete
  2. cek demonya disini ya kawan kawan : http://www.8fulldownload.com/

    ReplyDelete
  3. wah ... mantep ne... keren..

    tanks gan... salam

    ReplyDelete
  4. kalonya aada 2 popular post terus kita mau cuman ada 1 yang di percantik, yg satunya lagi ngak.. itu gmana gan??? kalo bisa koment balik ke Rahmatdi99 blog di tunggu

    ReplyDelete
  5. Andi@Trimakasih sudah berkunjung sob..

    Jin@ Wah maaf kawan kalau yg itu belum pernah saya coba..

    ReplyDelete
  6. Replies
    1. Itu yg bercetak tebal sob "http://4.bp.blogspot.com/-7CHpNrL3BIY/UQFD2sPq6LI/AAAAAAAAI8E/Jibvq813XCE/s400/33.gif"
      Ganti dengan url yg Anda punya bila ada..
      ^^

      Delete
  7. Berhasil...!!!
    Terima kasih infonya...

    ReplyDelete
  8. tutirial anda sangat menarik sob..

    ReplyDelete
  9. kunjung balik blog saya ya gan www.kapanlagi-download.blogspot.com

    ReplyDelete
  10. mau nanya nih sob, ada gak cara agar post tertentu tidak hadir dalam daftar Popular Post meskipun banyak dikunjungi?? bantuan'ny yo sob ...

    http://fajrin-dimension.blogspot.com/

    ReplyDelete
    Replies
    1. Emmhhh,,sepertinya sih itu dari blogger sendiri sob...
      Kalo scriptnya sy belum tahu...

      Delete
  11. ane gak muncul gan,,, bisa di cek dimari..

    http://clicklifes.blogspot.com/

    ReplyDelete
    Replies
    1. Jika tidak berhasil mungkin ada yang salah sob atau kadang tidak sesuai dengan template yang Anda gunakan....
      ^^

      Delete
  12. terimakasih mas, saya pakai di blog saya yah . . . , silahkan mampir yah ke http://davidraja43.blogspot.com/

    ReplyDelete
  13. oh iya mas, kalo mau bikin tulisan author di koment admin, gimna yah cara nya ?????

    ReplyDelete
    Replies
    1. Trimakasih sudah berkunjung kawan,,
      InsyaAllah jika saya sempat akan sy posting caranya, postingan yg berhubungan dg script mmang paling susah mnurut sy...
      ^^

      Delete
  14. Terima kasih gan izin pake yah di blog saya,, ditunggu kunjungannya gan hehe
    http://pahmistory.blogspot.com/

    ReplyDelete
  15. mantap bang.. ada widgetnya pake javascript ga bang..

    ReplyDelete
  16. keren mas bro..

    kalo popular postnya cuma gambar aja gimana mas bro?

    ReplyDelete
    Replies
    1. Tinggal diatur saja di layout > add a gadget > popular post
      Lalu hilangkan centang pada snippet, jadi yg muncul hanya image thumbnail saja.
      ^^

      Delete
  17. mantap broo, tutorial ente yang sangat membantu

    ReplyDelete
  18. kok tulisannya da diatas blog sih??
    tolong bantu ya gan!!!!

    ReplyDelete
    Replies
    1. Coba reposisi widgetnya di Layout, pindah ke tempat yang Anda inginkan..

      Delete
  19. untuk membuat random post yang mirip dengan widget popular post seperti random post yang ada diblog anda bagaimana sobat...?
    terima kasih sebelumnya sob, salam kenal dan sukses selalu:)

    ReplyDelete
    Replies
    1. Yang mana mz??
      Punya saya kn cuman Popular Post sama Recent Post..
      Kalau mau yang acak silahkan mungkin ini bisa dijadikan materi
      http://d-genera.blogspot.com/2013/05/memasang-facebook-recomendation-box-di-blogger.html

      Delete
    2. ohh iya sorry salah ketik, maksud saya yg mirip dengan recent post anda sob..hehe
      untuk tutor pembuatan recent post seperti diblog anda ada kah sob...? karena simpel dengan feedburner+iconx, jadi saya cukup naksir dengan recent post sobat..:D

      Delete
    3. Owh sy pakai layanan Feedburner itu mz. . .
      Wah sy kesulitan jika lewat komentar ini, mungkin besok saja saya posting caranya.. ^^
      Atau sementara mz utek2 dulu sj di feedburner di bagian tab Publisize > Buzzboost.

      Delete
    4. oke sob terima kasih atas responnya..:)
      udah saya utek2 code diatas diblognya teman & alhamdulillah random+ post bisa saya buat kayak diside bar blognya sampean mas. hehe :D

      Delete
    5. Syukur lah kalo begitu mz....
      Happy blogging. :)

      Delete
  20. Replies
    1. Demonya tidak saya buat,,,tapi hasilnya persis seperti yang saya pasang di sidebar kanan blog saya kang..

      Delete
  21. tq gan tas infonya dan saya coba ternyata berhasil
    di tunggu kunbalnya gan tq

    ReplyDelete
  22. Replies
    1. Coba diperiksa lagi kawan, masa tidak ada??

      Delete
  23. Replies
    1. Sama2 kawan, terimakasih sudah berkunjung...

      Delete
  24. Tolong ramaikan halaman ini ya masbro
    saling follow juga okey
    http://www.facebook.com/addnonstop
    http://www.facebook.com/forumanakrantau
    http://www.facebook.com/MaenPokerTanpaModalWithdrawBisaJadiDuitAsli
    http://www.facebook.com/KoleksiVideoOveraVanJavaDiTrans7

    grup fb http://www.facebook.com/groups/134276456647027

    situs http://bloggeronecu.blogspot.com/
    http://koleksivideoovj.blogspot.com/

    no spamming

    ReplyDelete
  25. punya saya kok klo klo mau di klik ga keliatan tulisannya jadi putih gitu. ga seperti punya ente gan.. mhon pencerahannya

    ReplyDelete
    Replies
    1. Mungkin ada script lain yg menyebabkn seperti itu kawan....
      Harus dicari satu per satu itu..

      Delete
  26. Replies
    1. Di Dashboard blogger - Anda mauk ke tab Template lalu di pojok kanan atas ada tombol Backup/ Restore. Tombol itu yg dipakai untuk membackup..

      Delete
  27. sipppppppp. thanks.



    visit:
    http://fconan45.blogspot.com

    ReplyDelete
  28. berhasil mas...makasih banyak yaa mas
    jangan lupa mas,mampir di blog ku http://belajarmencaritahu.blogspot.com

    ReplyDelete
  29. "judlnya cara membuat" tp artikel ini tidak melibatkan pembaca untuk membuat kode yang bisa merubah populer post menjadi menarik"
    kita hanya disuruk copy paste kode yang sudah ada supaya popules pos menjadi lebih menarik.

    ReplyDelete
    Replies
    1. Wah maaf kawan kalau disuruh menerangkan bagaimana cara membuat kodenya sih terlalu banyak bahasan kawan,, bahkan di bangku kuliah saja butuh beberapa pertemuan untuk memahami kode2 itu.
      Apalagi melalui blog, sulit sekali. Dan tidak efektif..

      Delete
  30. jasa pembuatan akun google adsense murah dan terpecaya silahkan klik JASA GOOGLE ADSENSE MURAH DAN TERPECAYA

    ReplyDelete
    Replies
    1. http://netiplisiskom.blogspot.com/2013/09/jasa-google-adsense-paling-murah.html

      Delete
  31. klo supaya popular postnya itu gambar sama judul dari artikel aja yang kelihatan bisa gan ?? mohon pencerahan :)

    ReplyDelete
  32. ada ng yang dikasih foto? biar lebih enak

    comeback

    ReplyDelete
  33. keren gan,simple dan menawan ,makasih sharenya

    kunjungan balik menuju blog belajar seo pemula ane ya !

    ReplyDelete
  34. thanks gan...
    sangat bermanfaat...

    ReplyDelete
  35. sebagai pengguna blog, artikel ini sangat membantu. Thanks jangan lupa kunbalnya

    ReplyDelete
  36. kok tulisan ]]> gak ada ya gan, gimana cara menambahkanya???

    ReplyDelete
  37. Gurih2 nyoy...

    Dimasanwaraziz.blogspot.com

    ReplyDelete
  38. Nice,, Thanks

    Kunjungi : http://alldownlooad.blogspot.com

    ReplyDelete
  39. mantep jadi mas..
    terimaksih..
    bisa jadi referensi memperjcantik blog q

    ReplyDelete
  40. Makasih Gan keren banget popular post,nya Jos deh pokoknya.... tak kasih satu G+ dah....
    tapi kalo sempat mampir ya Gan :D
    stonypedia.blogspot.com

    ReplyDelete
  41. gini bang..
    saya coba sih bisa,tapi ko judul dari populer postnya muncul klo cursor di arahin di post populernya..
    klo cursornya ga di arahin judulnya ga kliatan,cma kotak putih..itu saya yang salah apa emang gara" temanya..

    blz ya kk

    ReplyDelete
  42. klo di buat judulnya keliatan terus bisa ga..

    ReplyDelete
  43. Makasih sob....berhasil nih....jangan lupa berkunjung ke blog ku ya
    Download soal-soal CPNS Gratis : www.beapt.com

    ReplyDelete
  44. makasih mas tutorial nya
    izn saya mencobanya http://kutipan-terbaru.blogspot.com/

    ReplyDelete
  45. Gan, bisa ga code itu di taruh dlm textarea soalnya kalo copas bgt jdi kebanyakn spasinya, trims gan sblmnya...

    ReplyDelete
  46. bermanfangat sekali,,,, sipp maen yok yg punya keluhan penyakit kulit http://solusi-penyakitkulit.blogspot.com

    ReplyDelete
  47. makasih sob...dah tak coba and berhasil
    http://pospuisi.blogspot.com

    ReplyDelete
  48. BinggGO...ini nih yang saya cari2 dari kmren baru nemu disini.makasih ya mastaH.so simle n cute.
    by the way blog saya sepi kaya kuburan http://bucabacabanyaktau.blogspot.com kujungin donk ya,,,,semangat terus pembagi ilmu smoga berkah.amin....

    ReplyDelete
  49. berhasil dipasang, makasih panduannya sob

    ReplyDelete
  50. Wah !! cocok sekali kalau dipasang di blog ane yang ini gan : www.gividia.com

    ReplyDelete
  51. selamat beraktifitas, salam sehat
    http://goo.gl/nNMUC2

    ReplyDelete
  52. Makasih gan untuk informasi tutornya :)
    http://goo.gl/yQnQ3T

    ReplyDelete
  53. Thanks broh untuk informasi artikelnya :)
    http://goo.gl/lTbc2h

    ReplyDelete
  54. nice post agan, terimakasih. Kunjung balik ya :)
    http://bit.ly/1HhCDry

    ReplyDelete
  55. dari beberapa jenis yang saya coba, saya cocok sama yang ini, thanks

    ReplyDelete
  56. Jakarta, Aktual.com — Seiring dengan bertambahnya usia, keriput muncul dan kulit manusia akan kehilangan kemilau alaminya. Selama proses penuaan, kulit kehilangan elastisitas dan ini mendukung munculnya kerutan pada kulit.

    Namun, nampaknya ada alasan substansial yang menyebabkan penuaan pada kulit yang cepat timbul.

    Penuaan kulit secara dini merupakan hasil dari aktivitas radikal bebas berlebihan yang secara langsung terkait dengan tubuh. Radikal bebas yaitu, molekul yang... Baca Selengkapnya di Aktual.com

    ReplyDelete
  57. terima kasih bro.. sudah saya praktekin di blog saya
    http://climate4life.blogspot.co.id

    ReplyDelete
  58. Thank gan nice info

    visit back>>> http://aldiamrullah.blogspot.co.id/

    ReplyDelete
  59. Popular postnya jadi keren gan. Terimakasih banyak atas triknya. Sukses selalu dan salam kenal dari http://www.pemasaranjaringan.com

    ReplyDelete
  60. keren gan lihat juga punya saya http://pengembarahitam.blogspot.com/

    ReplyDelete
  61. menyimak..
    bagus bisa di mengerti artikelnya

    ReplyDelete
  62. bos saya isi blog ya mw di persingkat bagaimana ya ??
    mohon bantuannya

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.