Cara Membuat Widget Lebel Keren di Blogger
January 27, 2020
Imamkunblog.com - Hallo sobat semuanya...apa kabarnya ni...semoga saja semuanya dalam keadan baik-baik ya..Pada kesempatan kali ini saya akan memberikan kepada sobat tutorial cara membuat widget lebel blog keren seperti blog Arlina Design.
Widget Lebel Blog Keren ini hampir mirip dengan yang dimiliki di blognya mba Arlina Design hanya saja ada beberapa bagian yang dimodifikasi supaya lebih menarik dan keren.
Membuat Widget Lebel ini bisa diterapkan disemua jenis Template Blogger, hanya saja kamu perlu menyesuaikannya sendiri. Untuk membuat Widget Lebel di Blogger ini hanya memerlukan beberapa code CSS saja.
Bagaimana, penasaran? Yuk langsung saja intip proses memasang widget lebel keren seperti punya mba Arlina Design ini.
Cara Membuat Widget Lebel Blogger Seperti Arlina Design
1. Pertama, silahkan anda login ke Blogger.com
2. Pada Menu Dashboard pilih Tema > Edit HTML.
3. Cari kode dibawah ini (Gunakan CTRL+F Untuk memudahkan pencarian)
.artikel-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::beforeJika sudah ketemu kode tersebut, ganti dengan kode dibawah ini.
.artikel-terbaru ul li::before, .LinkList ul li::before, .PageList ul li::before4. Kemudian cari lagi kode seperti dibawah ini.
.list-label-widget-content ul li::before {
content: "\f07b";
}Cara diatas untuk kamu yang menggunakan Template buatan mas Sugeng yaitu Viomagz. Apabila kamu tidak menggunakan template Viomagz kamu bisa menggunakan cara berikut ini.
2. Berikutnya cari kode <data:title/> dan letakkan kode dibawah ini tepat diatas kode tersebut.
/* Label Arlina */
.list-label-widget-content ul li a {border-bottom: 1px dotted #e6e6e6;border-radius: 5px;margin-bottom: 3px;font-size: 14px;color: #de0985;text-overflow: ellipsis;transition: initial;overflow: hidden;white-space: nowrap;display: block;transition: initial;padding: 7px 11px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.list-label-widget-content ul li a:hover {background: #f5f5f5;color: #888;}
.list-label-widget-content ul li {list-style-type: none;margin: 0 0;border:none;display: inline-grid;width: 100%;}
.list-label-widget-content {padding: 0px 7px;}
div.Label{background: #fff;padding-bottom: 20px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
div.Label h2 {border-top: 2px solid #df0d83;padding: 15px 0;text-indent: 20px;width: 100%;border-bottom: 1px solid #dadada;margin-bottom: 5px;}
.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='%23de0985'></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,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.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)}}
<svg viewBox="0 0 24 24">
<path d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z" fill="#e94c60"></path>
</svg>
3. Simpan Template dan kemudian pergi ke Layout/Tat Letak dan ubah tampilannya sesuai keinginan.
4. Selesai!!
Demikianlah artikel singkat kali ini, kira-kira bagaimana menurut sobat? Mudah atau tidak? Begitulah Cara Memasang Widget Lebel Seperti mba Arlina Design di Blogger.
0 komentar