×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Widget Popularpost Ala IDNXMUS

February 15, 2020   • 1 Comment

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 TemaEdit 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



Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

1 Response to "Cara Membuat Widget Popularpost Ala IDNXMUS"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With