Cara Menciptakan Widget Label Ala Arlina Design

-Halo kali ini saya akan membagikan tutorial blogging. Tutorial kali ini adalah Cara Membuat Widget Label Ala Arlina Design. Kalian niscaya tau kan ihwal mastah pembuat template yang tersohor itu. Desain tampilan yang dibentuk oleh Arlina Design sangatlah keren, pola saja widget-widgetnya.

Buat kau yang ingin mencoba menggunakan atau mengubah tampilan widget Label ala Arlina Design, yuk ikuti langkah-langkah dibawah. Akan tetapi tutorial ini sudah sedikit dimodifikasi untuk warna dan ikon nya.

Cara Membuat Widget Label Ala Arlina Design

1. Pertama kau Login ke akun Blogger dan masuk sajian Dashboard.
2. Klik sajian Tema > Edit Html.
3. Khusus kau yang menggunakan template Viomagz, cari instruksi dibawah menggunaka CTRL + F

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

Kemudian ganti instruksi tersebut dengan instruksi dibawah ini.

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

4. Lalu cari instruksi dibawah dan hapus

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

Langkah diatas dimaksudkan untuk menghilangkan icon bawaan dari template Viomagz. Jika instruksi diatas tidak ketemu dapat dilewati saja. Berlaku juga untuk template lainnya.

5. Selanjutnya salin instruksi dibawah ini dan letakkan sempurna diatas instruksi </style> atau ]]></b:skin>.
Pilih salah satu.

/* 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)}}

Untuk Mengganti warna icon folder, cari fill='%23de0985' di code di atas, kemudian rubah menjadi fill='%23000'. 000 ialah warna hitam dalam HEX, silakan ganti sesuai impian kalian. Ingat Jangan menghapus %23

6. INGAT!! Masih di dalam sajian 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

7. Klik Simpan dan lihat hasilnya.
8. Untuk pengaturan di Tata Letak menyerupai dibawah kemudian klik Simpan.

Itulah tutorial blogging ihwal bagaimana Cara Membuat Widget Label Ala Arlina Design. Kaprikornus mari berkreasi teman gawari.


Sumber https://gawarii.blogspot.com/

Berbagi :