Car membuat kotak widget label costum responsif diblogger

Daftar Isi [Tampil]

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 terse ut didalam situs web mereka, dikarnakan untuk lebih memudahkan para pengunjung yang ingin mengetahui berbagai informasi yang ia butuhkan

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

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 by Desain Limited */

.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:#000}.list-label-widget-content ul li a:hover{color:#000}.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: #e8ad11;text-transform:capitalize}div.Label{background:#fff}div.Label h2{border-top:2px solid #e8ad11;padding:15px 0;text-indent:20px;width:100%;margin-bottom:0;border-bottom:2px solid #e8ad11}.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{animation:rubberBand 1s}.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:''}@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

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>

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

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

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini