Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat widget popular posts Costum responsif dan keren

views

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 ๐Ÿ˜‰

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
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.