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
- Pergi ke Tata letak
- Kemudian pilih tambahkan widget
- Kemudian tambahkan populer post pada menu widget
- 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 != ""'><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 😉