For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat widget label costum responsif diblogger

Hello sobat desain limited kali ini saya akan memberikan informasi mengenai desai web untuk membuat widget Kotak daftar Label dengan Tampilan yang keren dan pastinya responsif untuk loading blog

Tampilan kategori Label

Tampilan dari widget label Costum ini memliki tampilan menarik dengan menampilkan icon pada setiap judul dari kategori label dibilah sisi sebelah kiri

Yang memiliki variasi warna latar belakang kuning dan jingga dengan text judul label menggunakan variasi warna hitam, sehingga membuat Text judul label terlihat mencolok dan pastinya bagus dong 🤔

Fungsi Widget label

Widget label atau bisa disebut juga kategori yang mewakili setiap artikel dengan Topik yang serupa dengan kategori tersebut, nah biasanya pada setaip tampilan dan peletakan kategori label berbeda beda didalam setiap situs web

Widget label sangat berguna sekali untuk diterapkan, situs perusahaan besar juga masih menerapkan kategori atau label tersebut didalam situs web mereka, dikarnakan untuk lebih memudahkan para pengunjung yang ingin mengetahui berbagai informasi yang ia butuhkan

Info: Dikarnakan setiap blog Terkhusus nya blogger telah disediakan widget label tersebut, nah tetapi anda bisa membuat label Costum agar semakin menarik 😍

Cara penerapan

Setelah kita membahas mengenai fungsi dari widget label kita akan masuk ketahap penerapan pembuatan widget label Costum didalam blogger

Info: Sebelum memulai anda harus atau sudah menambahkan widget label didalam menu tata letak, jika sudah kamu bisa melewati langkah yang ini

Untuk memulai salin dan tempelkan kode CSS dibawah ini tepat diatas atau sebelum kode ]]></b;skin>

/* Label Box ~ Icloudice.com */
.list-label-widget-content ul li a{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list-label-widget-content ul li a{color:#fff}.list-label-widget-content ul li a:hover{color:#fff}.list-label-widget-content ul li{list-style-type:none;margin:0 0;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-top:1px solid rgba(255,255,255,.12)}.list-label-widget-content{padding:0 7px;background: #f80000;text-transform:capitalize}
div.Label{background:#fff}div.Label h2{border-top:2px solid #f80000;padding:15px 0;text-indent:20px;width:100%;margin-bottom:0;border-bottom:2px solid #f80000}
.Label h2 svg{float:right;margin-right:15px;display:inline-block;width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}.widget:hover h2>svg{}.list-label-widget-content ul li a:before{background-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8A2,2 0 0,0 20,6M17.94,17L15,15.28L12.06,17L12.84,13.67L10.25,11.43L13.66,11.14L15,8L16.34,11.14L19.75,11.43L17.16,13.67L17.94,17Z' fill='%23fff'></path></svg>");margin-right:10px;display:inline-block;width:20px;height:20px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}

Tahap selanjutnya kamu bisa mencari kode seperti dibawah ini, atau menyerupai kode tersebut, dikarnakan pada setiao template memiliki tampilan yang berbeda beda, jadi cari secara perlahan lahan

<h2><data:title/><!-- Icon SVG disini --></h2>

Info: Lihat dan perhatikan kode diatas <!--Icon SVG disini --> untuk lebih memudahkan anda cari kode diatas pada id widget label yang sudah anda tambahkan sebelumnya

Pasang kode Icon

Anda bisa meletakkan icon SVG nya didalam kode tersebut, dibawah ini adalah kode Icon SVG nya

<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='#f80000'/>
</svg>

Nantinya icon SVG tersebut akan ditampilkan pada widget label anda tepatnya disebelah kanan dari judul widget label anda tersebut agar tampilan semakin keren dan menarik

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
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.