Cara Membuat Widget Popular Post Mirip Igniel.com

Popular Post Mirip Igniel - Halo sobat blogger, kembali lagi dengan coretan admin yang pada kali ini masuk pada label "blogger". Memiliki template blog yang menarik tentu salah satu yang paling penting bukan? Karena tampilan template yang responsive dan apik juga menjadi salah satu faktor para pengunjung blog kita akan betah mampir membaca artikel di blog kita.

Untuk itu, kali ini admin akan memberikan sebuah tutorial untuk mempercantik tampilan widget Popular Post pada template sobat agar mirip seperti blog igniel. Tentu sobat sudah tahu kan dengan blog igniel?

Oke, langsung saja simak langkah-langkah berikut ini.

Membuat Widget Popular Post Mirip Blog Igniel

1. Pertama, silahkan buka Blog sobat.
2. Kedua, pada menu Tema silahkan klik Edit Tema.
3. Silahkan hapus terlebih dahulu kode CSS Popular Post pada blog sobat, lebih mudahnya silahkan cari kode .popularposts atau sejenisnya (karena tiap template biasanya berbeda kode css)
4. Jika sudah, blok kode CSS bawaan Popular Post tersebut, kemudian ganti dengan kode CSS dibawah ini.

/* POPULAR POST */

.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}.popular-posts ul li a:hover{text-decoration:underline}.PopularPosts h2{border-bottom:none;width:100%;color:#666;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}.Night .PopularPosts h2 span{background:#202442}.PopularPosts h2 span{background:#ededed;padding-right:10px;top:-10.5px;position:absolute;transition:all .5s ease;cursor:default;font:400 18px 'Google Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Roboto','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',Arial,sans-serif}.PopularPosts h2 svg{fill:#1a73e8;margin-right:7px;display:inline-block;width:24px;height:24px;background-repeat:no-repeat!important;content:''}@media screen and (max-width:800px){.PopularPosts h2{margin-top:30px}}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0 0;padding:0 0;list-style:none;border:none;outline:none}.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-thumbnail-only::after,.PopularPosts ul li .item-content::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-title,.PopularPosts .item-thumbnail,.PopularPosts .item-snippet{margin-left:15px;margin-bottom:9px;margin-top:5px}.PopularPosts ul li>a{display:block;min-height:0;font:400 12px 'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen-Sans','Helvetica Neue',Arial,sans-serif;margin-left:10px}.PopularPosts h2 svg{margin-right:15px;float:left;display:inline-block;width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}.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}

Silahkan sesuaikan sendiri untuk warna backgroundnya

5. Jika pada template sobat tidak ada CSS Popular Postnya, silahkan copy dan paste kode CSS diatas tepat diatas kode ]]></b:skin>

6. Tidak sampai disini saja, silahkan sobat klik Lompat Widget kemudian cari widget Popular Post.

7. Jika sudah, silahkan tekan CTRL+F dan cari kode <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if> untuk lengkapnya silahkan  simak gambar dibawah ini.

8. Jika sudah ketemu, hapus kode tersebut dan ganti dengan kode dibawah 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><data:title/></span></h2></b:if>

Apakah masih ada masalah? Jika popular post-nya yang tampil ada thumbnailnya (gambarnya) silahkan atur di bagian Tata Letak seperti pada gambar di bawah ini. (Hilangkan checklist pada thumbnail gambar)

Untuk demonya, sobat dapat melihat tampilan Popular Post pada blog ini.

Nah, itulah sedikit pembahasan mengenai Cara Membuat Widget Popular Post Mirip Igniel. Jika ada yang ingin ditanyakan, silahkan berkomentar dibawah ini. Terima kasih, jangan lupa dishare ya sobat:)

Subscribe Our Newsletter