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