Cara Membuat dan Rombak Widget Label Ala Arlina Desain - Mediaachmad

Kali ini mediaachmad akan memberikan tutorial rombak widget label di Blogger Ala Arlina Desain, desain ini hampir sama seperti widget label seperti arlina desain, namun sedikit admin rubah beberapa, untuk dibagian icon folder dan penataan list label.

Untuk kalian yang menggunakan template viomagz mungkin akan bisa langsung tempel, untuk menggunakan desain label ini, kemudian untuk yang menggunakan template lain bisa menyesuaikan sendiri bila terjadi sedikit penataan yang kurang rapi.

Tutorial ini admin buat karena ada yang request untuk dibuatkan desain labelnya. Oke simak langsung tutorial berikut ini.

1. Silakan kalian login ke blogger, masuk ke dashboard.
2. Masuk ke TEMA › EDIT HTML.
3. Untuk yang menggunakan template viomagz, silakan cari code berikut ini

.artikel-terbaru ul li::before, .list-label-widget-content ul li::before, .LinkList ul li::before, .PageList ul li::before




Kemudian silakan GANTI Code tersebut dengan berikut ini

.artikel-terbaru ul li::before, .LinkList ul li::before, .PageList ul li::before

4. Kemudian cari code berikut ini, Lalu HAPUS.

.list-label-widget-content ul li::before {
    content: "\f07b";
}

Cara ini bermaksud untuk menghilangkan icon Folder di dalam li before dalam template viomagz.

Untuk teman – teman yang menggunakan template lain mungkin bisa sesuaikan sendiri, atau bisa lewati saja untuk cara ini.

5. Kemudian Copy kode dibawah ini letakkan kodenya di ATAS kode ]]></b:skin> atau </style>. (Gunakan CTRL + F untuk mencari codenya).

/*Label by Mediaachmad Ala 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)}}

Untuk Mengganti warna icon folder, cari fill='%23de0985' kemudian rubah menjadi fill='%23000'. 000 adalah warna hitam dalam HEX. Ingat Jangan menghapus %23
6. Masih di dalam EDIT HTML, kali ini kita akan menambahakan icon tag label, silakan kalian (lompat ke widget "Label"). Kemudian klik icon titik titik 3 (...) untuk membuka full codenya, Lalu Tambahkan code berikut ini SETELAH code <data:title/>

<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>

Untuk mengganti warna icon tag label silakan kalian ganti dibagain Fill

Lalu untuk settingan widget Labelnya teman – teman bisa menyesuaikan seperti berikut ini.

Jika ada sedikit masalah silakan berkomentar dibawah. Mungkin itu yang dapat admin sampaikan, sekian dan terima kasih.