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. bagus neh,,boleh dicoba

    ReplyDelete
  4. wah ... mantep ne... keren..

    tanks gan... salam

    ReplyDelete
  5. 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
  6. Andi@Trimakasih sudah berkunjung sob..

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

    ReplyDelete
  7. 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
  8. Berhasil...!!!
    Terima kasih infonya...

    ReplyDelete
  9. tutirial anda sangat menarik sob..

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

    ReplyDelete
  11. 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
  12. 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
  13. terimakasih mas, saya pakai di blog saya yah . . . , silahkan mampir yah ke http://davidraja43.blogspot.com/

    ReplyDelete
  14. 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
  15. Terima kasih gan izin pake yah di blog saya,, ditunggu kunjungannya gan hehe
    http://pahmistory.blogspot.com/

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

    ReplyDelete
  17. 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
  18. mantap broo, tutorial ente yang sangat membantu

    ReplyDelete
  19. 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
  20. 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
  21. Replies
    1. Demonya tidak saya buat,,,tapi hasilnya persis seperti yang saya pasang di sidebar kanan blog saya kang..

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

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

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

      Delete
  25. 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
  26. 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
  27. 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
  28. sipppppppp. thanks.



    visit:
    http://fconan45.blogspot.com

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

    ReplyDelete
  30. "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
  31. 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
  32. klo supaya popular postnya itu gambar sama judul dari artikel aja yang kelihatan bisa gan ?? mohon pencerahan :)

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

    comeback

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

    kunjungan balik menuju blog belajar seo pemula ane ya !

    ReplyDelete
  35. thanks gan...
    sangat bermanfaat...

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

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

    ReplyDelete
  38. Gurih2 nyoy...

    Dimasanwaraziz.blogspot.com

    ReplyDelete
  39. Nice,, Thanks

    Kunjungi : http://alldownlooad.blogspot.com

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

    ReplyDelete
  41. 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
  42. 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
  43. klo di buat judulnya keliatan terus bisa ga..

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

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

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

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

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

    ReplyDelete
  49. 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
  50. berhasil dipasang, makasih panduannya sob

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

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

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

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

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

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

    ReplyDelete
  57. 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
  58. terima kasih bro.. sudah saya praktekin di blog saya
    http://climate4life.blogspot.co.id

    ReplyDelete
  59. Thank gan nice info

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

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

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

    ReplyDelete
  62. menyimak..
    bagus bisa di mengerti artikelnya

    ReplyDelete
  63. 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.