Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Cara Membuat Widget Label Ala Arlina Design

ndelet.com - Cara Membuat Widget Label Ala Arlina Design , Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Widget Label Ala Arlina Design, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blog, Artikel lain-lain, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.


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



Buat kamu 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 kamu Login ke akun Blogger dan masuk menu Dashboard.
2. Klik menu Tema > Edit Html.
3. Khusus kamu yang memakai template Viomagz, cari kode 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 kode tersebut dengan kode dibawah ini.

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

4. Lalu cari kode dibawah dan hapus

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

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


5. Selanjutnya salin kode dibawah ini dan letakkan tepat diatas kode </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 adalah warna hitam dalam HEX, silakan ganti sesuai keinginan kalian. Ingat Jangan menghapus %23

6. INGAT!! Masih di dalam menu 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 seperti dibawah lalu klik Simpan.


Itulah tutorial blogging tentang bagaimana Cara Membuat Widget Label Ala Arlina Design. Jadi mari berkreasi sobat gawari.



Demikianlah Artikel

Sekianlah artikel kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.


Anda sekarang membaca artikel dengan banyak manfaat Artikel ,
Notification ! {New!} Beberapa artikel di blog ini terkadang berisi informasi dari berbagai macam sumber. Hak cipta berupa gambar, teks, dan link sepenuhnya dimiliki oleh web tersebut.

Berlangganan via Email