VEzcwOIzJo2ocMRnvNfZmXylSxSqdBdXDBtRZkxw
Bookmark

Membuat Widget Popular Post Mirip Seperti Blog Igniel

Halo sobat blogger, bagi anda yang sudah terjun di dunia blogger, pasti sudah tidak asing mengenal widget popular post. Widget Popular Post ini berfungsi menampilkan artikel yang paling sering di kunjungi atau artikel yang paling populer di blog anda. dari segi tampilan juga menurut saya berpengaruh untuk menarik dan memanjakan mata pengunjung.

pada artikel sebelumnya juga saya sudah membuat beberapa tampilan widget populer post, tapi yang akan saya buat kali ini akan berbeda dari segi penampilannya. untuk tampilanya sama persis seperti widget populer post di blog saya atapun blog punya mba igniel.

Membuat Widget Popular Post Mirip Seperti Blog Igniel

Nah, jika anda penasaran ingin memasang widget tersebut, silahkan ikuti langkah-langkah di bawah ini.

Membuat Widget Popular Post Mirip Seperti Blog Igniel


1. Buka blogger.com
2. Pergi ke Tata Letak => lalu Tambahkan Gadget 
3. Selanjutnya akan muncul jendela baru, lalu geser ke bawah dan cari widget popular post
4. Setelah itu simpan
5. Tahap selanjutnya kita akan merubah tampilan widget popular post tersebut
6. Pergi ke menu Tema => Edit HTML
7. Lalu cari kode .PopularPost
Biasanya setiap template kode popularpostnya berbeda, silahkan anda cari yang mirip dan sesuaikan saja
8. Jika sudah ketemu blok CSS bawaan popular post tersebut, lalu ganti dengan kode CSS di bawah ini

/* Popular Posts by serieswans */
.Night .popular-posts{background:#2e4054;transition:all .5s ease}.Night .above-post-widget h2 span{background:#15202b;color:#fff}.Night .PopularPosts h2 span{background:#213040;color:#fff;transition:all .5s ease}.popular-posts{background:#1a73e8;background-image:linear-gradient(110deg,rgba(255,255,255,.1) 16%,rgba(255,255,255,.1) 17%,rgba(255,255,255,.05) 17%,rgba(255,255,255,.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,.05) 78%,rgba(255,255,255,.05) 84%,rgba(255,255,255,.1) 84%,rgba(255,255,255,.1));box-shadow:0 2px 2px 0 rgba(0,0,0,.04),0 3px 1px -2px rgba(0,0,0,.05),0 1px 5px 0 rgba(0,0,0,.04);transition:all .5s ease;padding:3px 15px 10px;border-radius:7px}.PopularPosts ul li:hover{background:#3333330f}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding:0;list-style:none;border:none;outline:0}.PopularPosts .widget-content ul li a{color:#fff}.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left;border-radius:3px 25px}.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;border-bottom:1px dashed rgba(255,255,255,.35)}.PopularPosts ul li:last-child{margin-bottom:0}.PopularPosts ul li .item-content::before,.PopularPosts ul li .item-thumbnail-only::before,.PopularPosts ul li>a::before{color:#f2994a!important}.PopularPosts ul li .item-content::after,.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li>a::after{background:#efefef}.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px;font-weight:500}.PopularPosts .item-thumbnail{float:left;margin-right:8px}.PopularPosts .item-snippet{line-height:1.6em;font-size:14px;margin-top:8px;opacity:.925}.PopularPosts ul li>a{padding:6px 20px;min-height:0;color:#fff;font-family:sans-serif;font-size:15px}.popular-posts ul li a:hover{text-decoration:underline}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding:0;list-style:none;border:none;outline:0}.PopularPosts .widget-content ul{margin:0;list-style:none;counter-reset:num}.PopularPosts .widget-content ul li img{display:block;width:70px;height:70px;float:left;border-radius:3px 25px}.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;transition:all .5s ease;border-bottom:1px dashed rgba(255,255,255,.35)}.PopularPosts ul li:last-child{margin-bottom:0}.PopularPosts ul li .item-content::after,.PopularPosts ul li .item-thumbnail-only::after,.PopularPosts ul li>a::after{background:#efefef}.PopularPosts .item-title{line-height:1.6;margin-right:8px;min-height:40px;font-weight:500}.PopularPosts .item-thumbnail{float:left;margin-right:8px}.PopularPosts .item-snippet{line-height:1.6em;margin-top:8px;opacity:.925}.PopularPosts ul li>a{font-weight:700;font-size:14px}.PopularPosts .item-snippet,.PopularPosts .item-thumbnail,.PopularPosts .item-title{margin-left:15px;margin-bottom:9px;margin-top:5px}.PopularPosts ul li>a{display:block;min-height:0;font-family:Quicksand,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen,'Helvetica Neue',sans-serif;font-size:13px;line-height:17px;margin-left:10px}.PopularPosts ul li:before{content:counter(num) '.'!important;position:absolute;top:10px;left:-2px;color:#fff;z-index:1;width:20px;height:20px;font-family:arial;margin-right:12px;font-size:1.5em;font-style:italic}
.PopularPosts h2{
    border-bottom:none;
    width:100%;
    font:400 14px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;
    color:#1d2129;
    text-align:left;
    background:url("data:image/svg+xml,%3Csvg viewBox='0 0 48.34 4.99' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%231a73e8' points='27.36 0 48.34 0 45.48 4.99 24.5 4.99 27.36 0'%3E%3C/polygon%3E%3Cpolygon fill='%23657786' points='2.86 0 23.84 0 20.98 4.99 0 4.99 2.86 0'%3E%3C/polygon%3E%3C/svg%3E");
    height:6px;
    font-size:1rem;
    position:relative;
    margin-top:9px;
    margin-bottom:15px
}
.PopularPosts h2 span{
    background:#ededed;
    padding-right:10px;
    top:-12.5px;
    position:absolute;
    font-size:18px;
    transition:all .5s ease;
    font-weight:700
}
.PopularPosts h2 svg{
    fill:#1a73e8;
    margin-right:7px;
    display:inline-block;
    width:24px;
    height:24px;
    background-repeat:no-repeat!important;
    content:''
}
tips — Silahkan sesuaikan sendiri tampilan warnanya.
9. Jika anda belum pernah memasang atau di template anda tidak ada CSS popular postnya, silahkan tambahakan kode di atas dan letakan di atas kode </b:skin>
10. Terakhir simpan tema dan cek hasilnya

tips — Update : Fix Title Icon Trending

Setelah saya publish artikel tutorial membuat widget popular post seperti blog igniel, banyak yang berkomentar mengenai masalah title dan garis trending di atas widget tersebut. nah untuk cara mengatasinya silahkan ikuti langkah-langkah di bawah ini.

1. Pergi ke Tema => Lompat Widget => cari widget Popular Post
Membuat Widget Popular Post Mirip Seperti Blog Igniel
2. Setelah itu cari kode <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if> contoh kode lengkapnya seperti di gambar di bawah ini
Membuat Widget Popular Post Mirip Seperti Blog Igniel
3. Jika sudah ketemu hapus kode tersebut dan ganti dengan kode di bawah ini

<b:if cond='data:title != &quot;&quot;'><h2><span><svg viewBox='0 0 24 24'>
<path d='M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z'/>
</svg>Trending</span></h2></b:if>

Demikian pembahasan tutorial kali ini mengenai Membuat Widget Popular Post Mirip Seperti Blog Igniel. jika ada pertanyaan silahkan komentar di bawah. semoga bermanfaat.
13 komentar

13 komentar

  • Saif Ghofur
    Saif Ghofur
    Juli 13, 2021
    .PopularPost di CSS (di viomagz) yang mana ya gan, saya coba hapus semua terus ganti kode diatas tampilan nya gak sesuai igniel.
    • Saif Ghofur
      Kurniawan
      Juli 17, 2021
      kalo boleh tau pakai template viomagz versi berapa ?
    Reply
  • PayuBaco
    PayuBaco
    Maret 22, 2021
    bang kok tampilannya beda sama yang di gambar, malah kayak populer post igniplex, kenapa ya?
    • PayuBaco
      Kurniawan
      Maret 23, 2021
      apakah pemasangan kodenya sudah benar ? tampilannya juga saya kayak popular post blog saya yang ini gan.
    • PayuBaco
      PayuBaco
      Maret 23, 2021
      Iya bang udah sama kayak yang abang ajarkan diatas, tapi tampilan ya kayak popular post igniplex malah. Saya terapkan di Template fiksioner.
    • PayuBaco
      Kurniawan
      Maret 24, 2021
      apa sudah coba di terapkan di template viomagz ?. soalnya saya belum uji coba di template fiksioner.
    Reply
  • Ikhsan Coegraphy
    Ikhsan Coegraphy
    September 14, 2020
    Punyaku gk muncul author dibawah post, kenaoa ya
    • Ikhsan Coegraphy
      Kurniawan
      September 15, 2020
      Coba cek di bagian blog postingnya, apak authornta udh di ceklis apa belum ?
    Reply
  • Shinta Claudia Nirwana
    Shinta Claudia Nirwana
    Juli 30, 2020
    Wah boleh dicoba nih 👍
    Reply
  • Muhammad Puttra
    Muhammad Puttra
    Juni 17, 2020
    Ini Req dari saya, trimakasih min
    • Muhammad Puttra
      Kurniawan
      Juni 18, 2020
      Sama2 gan , thanks sudah berkunjung
    Reply
  • Anonim
    Anonim
    Juni 17, 2020
    Bang kok gk termasuk yg bgian trendingnya
    • Anonim
      Kurniawan
      Juni 17, 2020
      Oke gan, akan saya update lagi kodenya
    Reply