Membuat Widget Popular Post Mirip Seperti Blog Igniel

By Kurniawan Updated: 2020-09-17T14:41:48Z 13 ·

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.

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

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

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.

SHARE Facebook Whatsapp