Cara membuat kotak popular posts Costum responsif tampilan keren terbaru

Daftar Isi [Tampil]

Hello sobat Desain Limited sekarang saya akan memberikan informasi seputar desain web untuk mempercantik tampilan pada Kotak Populer post diblogger

Tampilan responsif

Populer post anda nantinya memiliki Tampilan yang sederhana dengan variasi latar belakang berwarna kuning atau jingga, memakai text berwarna hitam sehingga membuat Text bisa terbaca tanpa mengurangi pandangan pembaca

Untuk membuat agar semakin responsif, Tampilkan poupuler posts hanya dengan menggunakan Judul artikel tanpa menggunakan gambar dan juga deskripsi artikel agar semakin menambah kecepatan loading blog

Fungsi populer post

Seperti yang kita ketahui bahwa didalam setiap website memiliki widget populer post meskipun nama atau judul widget bukan hanya populer post tetapi bisa diganti dengan judul yang kita inginkan

Nah didalam populer post tersebut berisi sebuah informasi mengenai bebeapa artikel yang sering atau dikunjungi para pembaca, itulah kenapa disebut dengan popular post atau postingan populer

Cara memulai

Baikalh sobat Desain kita akan mulai membuat Tampilan kotak Popular posts yang responsif untuk mempercantik tampilan Populer post nya,

Tetapi sobat desain harus memperhatikan atau menyiapkan hal penting yaitu, sobat harus sudah memasang widget popular post didalam Layout sobat ok 👌

Cara memasang widget popular post

1. Pergi ke Tata letak
2. Kemudian pilih tambahkan widget
3. Kemudian tambahkan populer post pada menu widget
4. Selesai

Cara penerapan

Jika sudah memasang widget popular post Defeult maka kita akan buat populer post costumnya dengan tampilan responsif

Kamu bisa salin kode CSS ini kemudian letakkan diatas atau sebelum kode ]]></b;skin>

/* Popular Post by Desain Limited */

.DLpopular-posts{background: #424a56}.PopularPostsDL ul li:hover{background:#3333330f}.DLpopular-posts ul li a{color:#fff}.DLpopular-posts ul li a:hover{color:#fff}.PopularPostsDL h2{text-indent:20px;border-top:2px solid #e8ad11;margin-bottom:0;border-bottom:none;width:100%;padding-bottom:15px;background:#fff;padding-top:15px;border-bottom:2px solid #e8ad11}.PopularPostsDL h2 span{margin-left:20px}.PopularPostsDL .widget-content ul,.PopularPostsDL .widget-content ul li{margin:0 0;padding:0 0;list-style:none;border:none;outline:0}.PopularPostsDL .widget-content ul{margin:0;list-style:none;counter-reset:num}.PopularPostsDL .widget-content ul li img{display:block;width:70px;height:70px;float:left}.PopularPostsDL .widget-content ul li{margin:0;counter-increment:num;position:relative;border-bottom:1px solid rgba(0,0,0,.08);border-top:1px solid rgba(255,255,255,.12)}.PopularPostsDL ul li:last-child{margin-bottom:0}.PopularPostsDL ul li .item-content::after,.PopularPostsDL ul li .item-thumbnail-only::after,.PopularPostsDL ul li>a::after{background:#efefef}.PopularPostsDL .item-title{line-height:1.6;margin-right:8px;min-height:40px;font-weight:700}.PopularPostsDL .item-thumbnail{float:left;margin-right:8px}.PopularPostsDL .item-snippet{line-height:1.6em;margin-top:8px;opacity:.925}.PopularPostsDL ul li>a{font-weight:700;font-size:14px}.PopularPostsDL .item-snippet,.PopularPostsDL .item-thumbnail,.PopularPostsDL .item-title{margin-left:28px}.PopularPostsDL ul li>a{display:block;padding:8px 20px;font-size:15px;font-weight:400;min-height:45px}

.color-code{text-align:center;margin:20px auto;width:60%}.color-responsive{position:relative;padding-bottom:100%;height:0;overflow:hidden}.color-responsive object{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

Atau kamu bisa menghapus kode CSS popular post defeult, kemudian ganti dengan kode CSS yang saya berikan diatas

Setelah memasang kode Css diatas untuk membuat atau menciptakan tampilan Populer post nya, Kemudian kamu bisa mencari kode seperti dibawah ini, atau kode yang serupa atau lagi yang mirip dikarnakan setiap template memilki tata letak yang berbeda beda

<b:widget id='PopularPosts1' locked='false' title='Trending' type='PopularPosts' version='1'>

Untuk memudahkan anda kode tersebut terletak pada Id widget populer post yang anda pasang sebelumnya

Jika sudah ketemu ganti dengan kode tersebut dengan kode dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Trending' type='PopularPostsDL' version='1'>

Selanjutnya cari lagi kode yang menyerupai seperti kode berikut ini

<div class='widget-content popular-posts'>

    <ul>

Kodenya masih berada pada id widget popular post yang anda pasang sebelumnya

Kumudian ubah kode tersebut dengan kode dibawah ini

<div class='widget-content DLpopular-posts'>

    <ul>

Pasang Icon Tittle

Icon Tittle nanti akan tampil disebelah kanan dari judul widget popular post tersebut

Untuk memasangnya, salin kode icon SVG dibawah ini

<svg style='width:24px;height:24px' 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' fill='#e8ad11'/></svg>

Kemudian pasang Icon svg tadi didalam kode html seperti contoh dibawah ini

<b:if cond='data:title != &quot;&quot;'><h2><data:title/><!-- Icon SVG disini --></h2></b:if>

Kamu bisa cari kode diatas didalam id widget populer post

Nah sobat Desain Limited, mudah bukan 😁 membuat kotak popular post yang responsif lagi keren, baca petunjuk diatas secara perlahan ya 😉

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini