Bacakan

Cara membuat widget popular posts Costum responsif dan keren

Hello sobat IcloudZer 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

Info: 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

Info: 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}

Info: 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'>

Info: 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>

Info: 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 IcloudZer, mudah bukan 😁 membuat kotak popular post yang responsif lagi keren, baca petunjuk diatas secara perlahan ya 😉

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes.com

    Template mirip xmlthemes.com

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.