Modifikasi Widget Posting Populer Menjadi Berwarna-Warni

Widget Posting Populer yang Sudah Dimodifikasi

Pada konfigurasi widget Posting Populer, pastikan bahwa Anda memilih model widget berupa thumbnail dan judul. Setelah itu masuk ke editor HTML template. Salin kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>:

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Klik Simpan Template. Begitu saja.

35 Komentar

  • Dixy

    wih keren \o/
    content:counter(num); itu yang membuat penomoran otomatis ya mas...?

  • abang ichal

    kuncinya pada yg nth-child(n) kan...

  • Unknown

    Nice tutorial! Asyik bener tuh kalau 'block' nya dibikin oval.. :yaya:

  • Unknown

    kalau dibikin populer post horisontal gmn........??

    • Taufik Nurrohman

      .PopularPosts ul,
      .PopularPosts li,
      .PopularPosts li img,
      .PopularPosts li a,
      .PopularPosts li a img {
      margin:0 0;
      padding:0 0;
      list-style:none;
      border:none;
      background:none;
      outline:none;
      }
      .PopularPosts ul {
      width:810px;
      margin:.5em 0;
      list-style:none;
      font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
      color:black;
      counter-reset:num;
      overflow:hidden;
      }
      .PopularPosts ul li img {
      display:block;
      margin:0 .5em 0 0;
      width:50px;
      height:50px;
      float:left;
      }
      .PopularPosts ul li {
      background-color:#eee;
      padding:6px 6px;
      counter-increment:num;
      position:relative;
      float:left;
      width:150px;
      height:100px;
      -webkit-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
      -moz-box-shadow:-1px -1px 10px rgba(0,0,0,.7);
      box-shadow:-1px -1px 10px rgba(0,0,0,.7);
      }
      .PopularPosts ul li .item-snippet {display:none}
      .PopularPosts ul li:before,
      .PopularPosts ul li .item-title a {
      font-weight:bold;
      font-size:100%;
      color:inherit;
      text-decoration:none;
      }
      .PopularPosts ul li:before {
      content:counter(num);
      display:block;
      position:absolute;
      background-color:black;
      color:white;
      width:30px;
      height:30px;
      line-height:30px;
      text-align:center;
      right:0;
      bottom:0;
      }
      /* Set color & level */
      .PopularPosts ul li:nth-child(1) {background-color:#E11E28}
      .PopularPosts ul li:nth-child(2) {background-color:#FD3C03}
      .PopularPosts ul li:nth-child(3) {background-color:#FECB09}
      .PopularPosts ul li:nth-child(4) {background-color:#6EBE27}
      .PopularPosts ul li:nth-child(5) {background-color:#149A48}
      .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1}
      .PopularPosts ul li:nth-child(7) {background-color:#61469C}
      .PopularPosts ul li:nth-child(8) {background-color:#863E86}
      .PopularPosts ul li:nth-child(9) {background-color:#863E62}
      .PopularPosts ul li:nth-child(10) {background-color:#815540}

      • Unknown

        kalau dengan title + thumb + snippet juga menjadi horisontal gmn...!!!??

  • AdminBe

    Thanks for Share, Ilmu yang bermanfaat (Insha Allah!)

  • Unknown

    thank gan.....

  • Ijal Fauzi

    Creative ! Makasi mas Taufik ! :-bd

  • Unknown

    Wow keren, mksh mz..

  • Unknown

    Mantap mas taufik, izin ambil CSS-nya sebagai basis modifikasi tampilan selanjutnya :)

  • Lentera Langit

    mas., klo saya pengen menerapkan nomor2nya pada homepage saya, gmn caranya?, pernah aq nyoba tapi gk jadi2... :(

    • Taufik Nurrohman

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <style> ... kode CSS ... </style>
      </b:if>
  • Andi AF Studio

    aha.. :D menggelitik sekali, warna-warni.. sip deh, saya pasang dengan 1% semua, biar adil.. \o/

  • Update Campuran

    wah ini keren \o/

  • Goro

    mas kalo saya mau ganti nomor background kan bulat diganti persegi gimana ya

    • Taufik Nurrohman

      Hapus baris ini:

      -webkit-border-radius:30px;
      -moz-border-radius:30px;
      border-radius:30px;
  • Unknown

    mas Taufik, gmn tuh supaya saat diklik link judul pd popular post bs open link new tab?, sama kayak saat diklik gambar

    • Taufik Nurrohman

      Di dalam XML widget posting populer:

      <a expr:href='data:post.href' target='_blank'>
      • Unknown

        sdh dr sononya hny 10 judul yg tampil.., klo sy pengen nambah lebih dr 10 judul bs gk mas?

  • choluoxy

    mas punya saya kok gak bisa ya? ada tulisan spt ini
    Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 551, kolom 15: The entity name must immediately follow the '&' in the entity reference.
    itu apanya mas ya?? thankz

  • you

    Assalamu'alaikum mas taufik, apakah bisa pada widget populer post menambahkan tanggal publikasi di setiap posting. saya coba menggunakan <data:post.timestamp/> tidak bisa.

  • masyulionodotcom

    keren mas, ijin praktek ya mas, kayaknya menarik ini. terima kasih salam yuli

  • everybodygoesblog

    Mau tanya gan:

    1. Diblog saya kok nggak warna-warni ya? Putih polos seperti background blog, salah dimananya?
    2. Apa harus pakai thumbnail? Kalau judul saja bagaimana?
    3. Ukurannya bisa diperkecil lagi nggak? Soalnya pas urutan nomor kepotong gan di blog saya.

    Makasih

    • Taufik Nurrohman

      Kalau markup HTML-nya masih sama harusnya bisa jadi warna-warni. Atau mungkin kamu pakai peramban yang tidak pendukung selektor CSS :nth-child(N)

  • Ardi Handayat

    Thanks gan berhasil :D :D

  • Erdin Maulana

    Maaf Gan, Gambarnya kok gk muncul. :D

  • fortunanetworks.com

    Salam mas TaufikNurrohman.
    Saya sharing artikel ini di blog saya ya mas..
    terimakasih sebelumnya..
    Salam Sukses selalu.

  • Harmansyah

    Tempat kursus para blogger disini :D, thanks kang rohman

  • nyaasar

    Bang Taufik, kalau semisal widget itu dibuat jadi "Unpopular Post". Apa yang harus dirubah?

    • Unknown

      Untuk menampilkan selain popular post, biasanya orang-orang nampilin Recent Post, coba cari panduan pemasangannya di Google atau di website ini.

      Selain Recent post biasa (berdasarkan tanggal), ada juga recent post yang diurut berdasarkan label.

Komentar telah ditutup.