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

Posted by Unknown , 8:15 AM 117 Comments so far

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.. :)

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

117 comments:

  1. UnknownFebruary 4, 2013 at 5:23 PM

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

    ReplyDelete
  2. UnknownFebruary 5, 2013 at 3:25 PM

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

    ReplyDelete
  3. AnonymousFebruary 15, 2013 at 6:30 PM

    bagus neh,,boleh dicoba

    ReplyDelete
  4. UnknownMarch 5, 2013 at 5:56 PM

    wah ... mantep ne... keren..

    tanks gan... salam

    ReplyDelete
  5. Diana Lintang SariMarch 6, 2013 at 2:27 AM

    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. UnknownMarch 11, 2013 at 5:00 PM

    Andi@Trimakasih sudah berkunjung sob..

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

    ReplyDelete
  7. UnknownMarch 13, 2013 at 1:55 AM

    url bullet tu yang mana pak

    ReplyDelete
    Replies
    1. UnknownMarch 16, 2013 at 5:15 PM

      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. FerdiMarch 16, 2013 at 1:37 PM

    keren om... makasih...

    ReplyDelete
  9. UnknownMarch 18, 2013 at 11:18 PM

    Berhasil...!!!
    Terima kasih infonya...

    ReplyDelete
  10. AnonymousMarch 21, 2013 at 5:50 AM

    tutirial anda sangat menarik sob..

    ReplyDelete
  11. UnknownMarch 24, 2013 at 3:02 PM

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

    ReplyDelete
  12. alfajarMarch 26, 2013 at 6:46 PM

    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. UnknownMarch 29, 2013 at 2:50 AM

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

      Delete
  13. UnknownMarch 27, 2013 at 10:13 PM

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

    http://clicklifes.blogspot.com/

    ReplyDelete
    Replies
    1. UnknownMarch 29, 2013 at 8:46 PM

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

      Delete
  14. KING HERBALMarch 29, 2013 at 2:39 PM

    thanks info'x gan, bermanfaat sekali bagi saya ..

    ReplyDelete
  15. afadaApril 3, 2013 at 8:21 PM

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

    ReplyDelete
  16. afadaApril 3, 2013 at 8:22 PM

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

    ReplyDelete
    Replies
    1. UnknownApril 3, 2013 at 11:16 PM

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

      Delete
  17. Pahmi RitongaApril 7, 2013 at 12:13 PM

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

    ReplyDelete
  18. UnknownApril 8, 2013 at 8:30 PM

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

    ReplyDelete
  19. UnknownApril 8, 2013 at 9:44 PM

    keren mas bro..

    kalo popular postnya cuma gambar aja gimana mas bro?

    ReplyDelete
    Replies
    1. UnknownApril 9, 2013 at 2:29 AM

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

      Delete
  20. UnknownApril 19, 2013 at 1:38 PM

    Thanks mas broh,,,,,

    ReplyDelete
  21. UnknownApril 24, 2013 at 3:42 PM

    makasi

    ReplyDelete
  22. UnknownApril 27, 2013 at 11:15 AM

    mantap broo, tutorial ente yang sangat membantu

    ReplyDelete
  23. UnknownMay 3, 2013 at 12:22 AM

    mantab boz artikelnya

    ReplyDelete
  24. UnknownMay 4, 2013 at 2:47 PM

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

    ReplyDelete
    Replies
    1. UnknownMay 6, 2013 at 8:55 AM

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

      Delete
  25. SalamuN RespectoRMay 13, 2013 at 12:03 PM

    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. UnknownMay 13, 2013 at 1:24 PM

      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. SalamuN RespectoRMay 13, 2013 at 2:38 PM

      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. UnknownMay 13, 2013 at 5:12 PM

      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. SalamuN RespectoRMay 13, 2013 at 6:50 PM

      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. UnknownMay 13, 2013 at 10:42 PM

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

      Delete
  26. akang samMay 18, 2013 at 12:07 PM

    Demonya mana ne sob?

    ReplyDelete
    Replies
    1. UnknownMay 18, 2013 at 5:49 PM

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

      Delete
  27. iskandarMay 18, 2013 at 1:52 PM

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

    ReplyDelete
  28. alfridohanifhermawanMay 23, 2013 at 12:27 PM

    kok gk ada b:skin nya ya?

    ReplyDelete
    Replies
    1. UnknownMay 23, 2013 at 4:51 PM

      Coba diperiksa lagi kawan, masa tidak ada??

      Delete
  29. didiksadiansyahMay 27, 2013 at 12:30 PM

    makasi kawan

    ReplyDelete
  30. aeryestMay 28, 2013 at 8:04 PM

    terimakasih gan

    ReplyDelete
    Replies
    1. UnknownJune 3, 2013 at 12:22 AM

      Sama2 kawan, terimakasih sudah berkunjung...

      Delete
  31. CINTA CITATAMay 31, 2013 at 10:00 AM

    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
  32. UnknownJune 1, 2013 at 8:59 PM

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

    ReplyDelete
    Replies
    1. UnknownJune 3, 2013 at 12:23 AM

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

      Delete
  33. THE_JACK_SEJATIJune 15, 2013 at 2:39 PM

    cara backupnya gimana

    ReplyDelete
    Replies
    1. UnknownJune 15, 2013 at 5:59 PM

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

      Delete
  34. AnonymousJune 18, 2013 at 11:00 AM

    sipppppppp. thanks.



    visit:
    http://fconan45.blogspot.com

    ReplyDelete
  35. junnotJuly 1, 2013 at 1:27 PM

    hihi mantap om sukses

    ReplyDelete
  36. UnknownJuly 21, 2013 at 8:22 AM

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

    ReplyDelete
  37. Muhammad Iqbal KhamimJuly 29, 2013 at 9:06 PM

    Saya coba dulu gan....

    ReplyDelete
  38. DonaSeptember 2, 2013 at 12:50 AM

    Makasih atas panduannya.

    ReplyDelete
  39. lisya auliyaSeptember 3, 2013 at 1:21 PM

    "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. UnknownSeptember 5, 2013 at 9:56 AM

      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
  40. UnknownSeptember 16, 2013 at 4:36 PM

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

    ReplyDelete
    Replies
    1. UnknownSeptember 16, 2013 at 4:37 PM

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

      Delete
  41. Ocean StoreSeptember 27, 2013 at 10:41 PM

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

    ReplyDelete
  42. AnonymousOctober 24, 2013 at 6:01 AM

    ada ng yang dikasih foto? biar lebih enak

    comeback

    ReplyDelete
  43. AnonymousOctober 24, 2013 at 6:03 AM

    keren gan,simple dan menawan ,makasih sharenya

    kunjungan balik menuju blog belajar seo pemula ane ya !

    ReplyDelete
  44. IdferyOctober 25, 2013 at 9:05 AM

    thanks gan...
    sangat bermanfaat...

    ReplyDelete
  45. Ahmad FathoniNovember 13, 2013 at 2:20 PM

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

    ReplyDelete
  46. zNovember 14, 2013 at 11:29 AM

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

    ReplyDelete
  47. Mas DimasNovember 24, 2013 at 1:12 PM

    Gurih2 nyoy...

    Dimasanwaraziz.blogspot.com

    ReplyDelete
  48. UnknownDecember 23, 2013 at 11:05 AM

    Nice,, Thanks

    Kunjungi : http://alldownlooad.blogspot.com

    ReplyDelete
  49. UnknownJanuary 15, 2014 at 7:03 PM

    kren mass..

    ReplyDelete
  50. teguhJanuary 28, 2014 at 3:57 PM

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

    ReplyDelete
  51. UnknownFebruary 16, 2014 at 8:47 AM

    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
  52. UnknownApril 12, 2014 at 10:01 AM

    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
  53. UnknownApril 12, 2014 at 10:01 AM

    klo di buat judulnya keliatan terus bisa ga..

    ReplyDelete
  54. Jendela HatiApril 30, 2014 at 9:40 AM

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

    ReplyDelete
  55. Kutipan terbaruMay 2, 2014 at 9:35 PM

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

    ReplyDelete
  56. Edryc CandraMay 20, 2014 at 10:33 PM

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

    ReplyDelete
  57. UnknownNovember 30, 2014 at 2:15 PM

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

    ReplyDelete
  58. Mr. GDecember 14, 2014 at 2:39 PM

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

    ReplyDelete
  59. TIPS DAN TRIK SEODecember 16, 2014 at 5:44 PM

    keren widgetnya mas

    ReplyDelete
  60. frknrzhdyhDecember 30, 2014 at 5:59 PM

    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
  61. pelangsing wscJanuary 22, 2015 at 11:08 AM

    makasih ilmunya saling berbagi

    ReplyDelete
  62. jamu pelangsing amanJanuary 22, 2015 at 11:08 AM

    trik sempurna mempercantik blog

    ReplyDelete
  63. kapsul pelangsingJanuary 22, 2015 at 11:09 AM

    sangat bermanfaat sekali postingnya

    ReplyDelete
  64. berita terbaru motogpFebruary 21, 2015 at 12:44 AM

    berhasil dipasang, makasih panduannya sob

    ReplyDelete
  65. Rio FebriantoMarch 22, 2015 at 2:55 PM

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

    ReplyDelete
  66. UnknownMarch 27, 2015 at 9:35 AM

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

    ReplyDelete
  67. UnknownApril 8, 2015 at 9:17 AM

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

    ReplyDelete
  68. UnknownMay 13, 2015 at 11:47 AM

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

    ReplyDelete
  69. UnknownMay 27, 2015 at 8:35 AM

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

    ReplyDelete
  70. Wildan WiartaMay 30, 2015 at 6:51 AM

    dari beberapa jenis yang saya coba, saya cocok sama yang ini, thanks

    ReplyDelete
  71. UnknownAugust 2, 2015 at 10:02 PM

    thanks guys infonya

    ReplyDelete
  72. UnknownSeptember 18, 2015 at 2:47 PM

    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
  73. Bang DayDecember 12, 2015 at 3:44 PM

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

    ReplyDelete
  74. UnknownJanuary 3, 2016 at 12:01 PM

    Thank gan nice info

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

    ReplyDelete
  75. Cepi Ali AnwariJanuary 14, 2016 at 7:39 AM

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

    ReplyDelete
  76. pengembarahitam.blogspot.comOctober 12, 2016 at 3:04 AM

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

    ReplyDelete
  77. My name sabiqMarch 8, 2017 at 11:02 PM

    menyimak..
    bagus bisa di mengerti artikelnya

    ReplyDelete
  78. jamesAugust 29, 2017 at 3:21 PM

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

    ReplyDelete
  79. togel toto123January 10, 2020 at 8:11 PM

    Thanks gan, materinya sangat bermanfaat sekali ^^
    http://mgttyne.com Agen Togel Online Pilihan Terpercaya Resmi di Asia

    ReplyDelete
  80. Norton SetupFebruary 17, 2020 at 5:36 PM

    I really happy found this website eventually. Really informative and inoperative, Thanks for the post and effort! Please keep sharing more such blog www.norton.com/setup
    norton.com/setup

    ReplyDelete
  81. Norton SetupFebruary 17, 2020 at 5:36 PM

    I really happy found this website eventually. Really informative and inoperative, Thanks for the post and effort! Please keep sharing more such blog www.norton.com/setup
    norton.com/setup

    ReplyDelete
  82. Norton SetupFebruary 17, 2020 at 7:10 PM

    Really great article, Glad to read the article. It is very informative for us. Thanks for posting https://mcafee-retailcard.com/

    ReplyDelete
  83. Norton SetupFebruary 17, 2020 at 8:08 PM

    Really great article, Glad to read the article. It is very informative for us. Thanks for posting http://wwwofficesetup.com/

    ReplyDelete

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

Subscribe to: Post Comments (Atom)