Skip to main content

Kode CSS Untuk Membuat Popular Posts Keren

Kode CSS untuk membuat tampilan popular posts yang ada di blog kamu berubah menjadi Responsive dan Keren. Jika kamu sedang bingung atau sedang mencari-cari tampilan widget popular post yang menarik untuk dipandang tepat sekali menemukan artikel ini

Di kesempatakan kali ini KetikIDE akan memberikan sebuah kode css yang fungsinya untuk merubah tampilan popular post di sidebbar blog menjadi Responsive, ringan, keren dan user friendly

Membuat tampilan blog menjadi rapi dan menarik adalah keinginan semua blogger, namun membuat tampilan blog menjadi menarik dan responsive menjadi keinginan semua orang bukan hanya pemilik blog pengunjung blog pun mengiginkan hal demikian

Baca juga : Cara membuat label post menjadi keren simple dan rapi

Salah satu faktor responsive dan lambatnya sebuah blog ditentukan dari berapa banyak serta jenis atribut atau widget yang dipasang seperti halnya widget Popular Posts. Nah jika blog kamu memiliki tampilan popular post yang berat dan kurang menarik bisa merubahnya dengan cara ini

Cara membuat popular posts menjadi Keren dan Responsive


CSS untuk popular post ini sudah pernah saya terapkan di blog saya ini, namun karena sekarang saya tidak memasang widget popular post akhirnya saya hapus. Karena saya menyukai tampilannya yang responsive dan keren saya buatlah artikel ini siapa tau suatu saat saya ingin memasangnya lagi

/* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {margin:0 0;padding:5px 0;list-style:none;border:none;outline:none;}
.PopularPosts .widget-content ul {margin:0 0 10px;}
.PopularPosts .widget-content ul li img {display: block;width: 90px;height: 70px;float: left;}
.PopularPosts .item-thumbnail {float: left;margin-right: 10px;}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {font-size:13px;font-weight: 500;text-decoration: none;color: #444;}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {color: #49ACE1;}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 15px;}
.PopularPosts .item-title {line-height: 1.3;padding-top:10px;margin-right: 8px;min-height: 40px;}
.PopularPosts .item-snippet {line-height: 1.1em;font-size: 11px;margin-top: 8px;}

Cara memasang atau mengantikan popular post yang sudah ada


Jika blog kamu belum terdapat kode css untuk popular posts copy paste kode diatas kemudian letakkan dibawah kode ]]></b:skin> atau di bawah <style type='text/css'>

Nah untuk menggantikan yang sudah ada caranya cari terlebih dahulu kode css popular post yang ada di template kamu kemudian hapus dan ganti dengan kode css popular post saya diatas

Membuat Popular Posts Keren

Baca juga : Cara membuat tombol share responsive simple di blog

Dan itulah postingan kali ini yang membahas tentang kode css untuk membuat tampilan popular posts menjadi responsive dan keren, tampilanya dilengkapi dengan gambar walaupun begitu tetap mengedepankan tingkat keresponsiveanya

Jika kamu tertarik silahkan pasang di blog kamu, jika masih ada yang ingin ditanyakan silahkan tingalkan dikolom komentar

Terimakasih.