Cara Membuat Widget Label Keren Seperti Arlina Design di Blogger

 

Cara Membuat Label Keren – Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara membuat atau memodifikasi widget label di blogger seperti Arlina Design,

Bentuknya hampir sama seperti halnya widget arlina, Namus sedikit dirubah beberapa bagian mulai dari icon folder list label.

Untuk kamu pengguna template viomagz mungkin kamu langsung bisa menempel kode dibawah untuk menggunakan desain label ini,

Namun untuk pengguna template yang lain bisa menyesuaikan sendiri bila terjadi sedikit penataan yang kurang rapi.

Tinggal kamu sesuaikan dan pastikan kamu membacanya hingga selesai.

Cara Membuat Widget Label Keren Seperti Arlina Design di Blogger

1. Silahkan kamu login ke blogger.com, dan masuk ke menu dashboard.

2. Klick di menu TEMA > Edit HTML.

Baca Juga : Cara Membuat Blog Secara Gratis di Blogger

3. Untuk kamu pengguna template viomagz, silahkan cari kode dibawah ini dengan menggunakan CTRL + F untuk mempermudah pencarian :

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

Kemudian silahkan kamu GANTI kode tersebut dengan kode berikut ini

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

4. Selanjutnya silahkan kamu cari kode dibawh ini, Lalu HAPUS kode tersebut.

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

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

Untuk kamu yang menggunakan template lain mungkin bisa menyesuaikan sendiri, atau bisa lewati untuk cara ini.

5. Selanjutnya, Copy kode dibawah ini dan letakkan kodenya tepat di ATAS kode ]]></b:skin> atau </style> (Gunakan CTRL + F untuk mencari 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)}}

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. Setelah langkah – langkah diatas selesai, masuk kemenu tata letak dan ubah Tampilannya seperti gambar dibawah ini.

8. Klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Widget Label Keren Seperti Arlina Design di Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.