Cara Membuat Widget Popularpost Ala IDNXMUS

Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana caranya membuat widget popularpost seperti IDNXMUS.

Apa itu IDNXMUS ? IDNXMUS merupakan blog personal yang dibuat mulai pertengahan tahun 2017 lalu, blog tersebut membahas seputar Teknologi, Bisnis, Tips, Tutorial yang mungkin dapat membantu kamu. Dan nama pemilik dari blog tersebut adalah A. Abdul Mustahab Imam Sani yang berasal dari Sinjai, Sulawesi Selatan, Indonesia.

IDNXMUS menggunakan template blog yang sangat menarik, dengan ciri khas berwarna Gelap yang akan membuat pengunjung tetap nyaman membaca dimanapun berada. Selain itu IDNXMUS juga merupakan seorang pengguna template AMP (Accelerated Mobile Pages). AMP merupakan project idealis dari Google dalam upaya meningkatkan kecepatan akses sebuah situs web. Diperuntukkan khusus dalam meningkatkan kecepatan loading website, saat di akses melalui perangkat smartphone.

Mengenai template dari IDNXMUS tersebut, disini saya ingin membagikan sebuah tutorial membuat Widget Popularpost yang mirip seperti yang ada diblog tersebut, namun memiliki sedikit perbedaan, mulai dari Warna, Title, dan beberapa perbedaan lainnya. Nah bagi kamu yang ingin membuat widget popularpost seperti blog mas Imam Sani tersebut yuk langsungaja ikuti tutorial dibawah ini.

Membuat Widget Popularpost Ala IDNXMUS

1. Pertama, login dulu ke Blogger,

2. Kemudian, pada dashboard Blogger, pilih Tema ⇒ Edit HTML,

3. Lalu, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,

/* Popular Post IDNXMUS By Anirocksite */
.PopularPosts ul li:hover{background:#3333330f}
.popular-posts ul li a{color:teal}
.popular-posts ul li a:hover{color:#555}
.PopularPosts h2{text-indent:20px;margin-bottom:-6px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:none;width:100%;padding-bottom:15px;padding-top:15px;font:400 14px Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Oxygen-Sans,'Helvetica Neue',Arial,sans-serif;color:#fff;text-align:left;background:#ff69b4;background-image:linear-gradient(110deg,transparent 75%,rgba(255,255,255,0.1) 75%,rgba(255,255,255,0.1) 81.5%,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2))}
.PopularPosts h2 span{margin-left:20px}.PopularPosts .widget-content ul,.PopularPosts .widget-content ul li{margin:0;padding: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}
.PopularPosts .widget-content ul li{margin:0;counter-increment:num;position:relative;background:#ff69b4;margin:0 0 10px;padding:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:5px}
.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}
.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 .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;font-size:91%}
.PopularPosts .widget-content ul li a:hover{text-decoration:underline}
.PopularPosts .widget-content ul li:hover{background:#ff69b4;opacity:1;transform:scale(1.02);transition:all .3s ease}
.PopularPosts:hover li{opacity:.7;transform:scale(0.98);transition:all .3s ease}
.PopularPosts .widget-content ul li a{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:91%}
.popular-posts {padding: 13px;background: #ffe6f3;border-bottom-right-radius: 8px;border-bottom-left-radius: 8px;}

4. Terakhir simpan atau save template tersebut.

Penting!! Bagi kamu yang widget popularpostnya masih memiliki Nomor silahkan hapus dengan cara, cari kode ini

<b:includable id='numberedpopularposts'>
<style> /* HAPUS DARI SINI */
DISINI ISI CSS NOMORNYA
</style> /* SAMPAI SINI */
</b:icludable>

Untuk memunculkan widget popularpostnya kamu cukup Masuk ke Tataletak ⇒ Widget Sidebar ⇒ Postingan Popular, kemudian setting atau konfigurasikan seperti gambar dibawah ini ⇓

Kesimpulan 

Widget popularpost yang saya bagikan ini terinspirasi dari blog mas Imam Sani (IDNXMUS), dan widget popularpost ini juga tidak 100% mirip dengan aslinya dari IDNXMUS, untuk pemasangannya juga dilakukan hanya dengan meletakkan CSS.

Akhir Kata

Sekian tutorial membuat widget popularpost seperti IDNXMUS yang dapat saya bagikan, jika ada kekurangan atau kesalahan pada css yang saya bagikan silahkan berkomentar agar saya dapat memperbaikinya, dan selamat mencoba :D