-->

Membuat Widget Popular Post Mirip Seperti Blog Igniel

Daftar Isi [Tampilkan]
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.
Next
Previous
Tidak ada kata "Tapi" dan "Nanti" jika anda ingin Sukses
  • Facebook
  • Twitter
  • Instagram
  • Related Posts

    Buka Komentar ( 7 )
    Tutup Komentar

    7 Komentar

    1. Bang kok gk termasuk yg bgian trendingnya

      BalasHapus
      Balasan
      1. Oke gan, akan saya update lagi kodenya

        Hapus
    2. Ini Req dari saya, trimakasih min

      BalasHapus
    3. Punyaku gk muncul author dibawah post, kenaoa ya

      BalasHapus
      Balasan
      1. Coba cek di bagian blog postingnya, apak authornta udh di ceklis apa belum ?

        Hapus
    • Mohon Tinggalkan jejak sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.
    • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
    • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
    • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
      <i>#comments</i>
    • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
      <em>#comments {margin:0; padding:10px 15px}</em>

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    x
    Berlangganan

    Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!