Cara Memberi Icon SVG Pada Label Blogger

    Hiirotaku - Bosan dengan tampilan label teks atau itu - itu aja? oke disini kita akan membahas cara menambahkan beragam icon pada blog kita. contohnya ada pada gambar di atas bisa di lihat pada label terdapat icon di sebelah kanannya, Ok Tanpa basa - basi langsung ke eksekusinya.

Disini kita tidak membutuhkan Script khusus, hanya tinggal menambahkan beberapa css dan menyiapkan url icon, kalian bisa mencari icon svg di internet karena sangat banyak dari gratis sampai berbayar.

Cara Menambahkan Icon Pada Label Blogger

Sebelum memulainya disclaimer dulu bahwa saya mempraktekkan tutorial ini pada template viomagz dan template saya sendiri, jadi ada kemungkinan kode css ada yang berbeda.

Pertama, ke halaman blogger > tema > edit html > cari kode .label-info-th a atau .post-label a ( jika tidak ketemu berarti kalian harus mencari manual kodenya dengan inspect element dan mengarahkan ke letak label template kalian )

Contoh kode :

.label-info-th a {
    color: $(label.color);
    background: $(label.bg.color);
    display: inline-block;
/*padding: 8px 12px;*/
padding: 5px 10px 8px 0px;
	margin: 1px 0;
    font-size: 13px;
	font-weight: 500;
}

atau

.post-label a {
    background: none;
    color: #7a4690;
    padding: 8px 0px;
    font-size: 13px;
    font-weight: 600;
}

Kedua, kalian tambahkan kode di bawah ini tepat di atas atau di bawahnya

.post-label a:before {
    content: '';
    min-width: 23px;
    min-height: 23px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    vertical-align: -5px;
    display: inline-block;
    min-width: 23px;
    min-height: 23px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    vertical-align: -7px;
    display: inline-block;
    background-image: url(data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.63,5.84C17.27,5.33 16.67,5 16,5H5A2,2 0 0,0 3,7V17A2,2 0 0,0 5,19H16C16.67,19 17.27,18.66 17.63,18.15L22,12L17.63,5.84Z' stroke='%237a4690' fill='%23fee000'/%3E%3C/svg%3E);
}

.post-label a.Anime:before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z' fill='%23008080'/%3E%3C/svg%3E")}

Yang saya tandai bisa kalian ganti dengan nama label kalian, pastikan besar kecilnya sama

Jika kalian ingin memberi icon pada banyak label tinggal tambahkan kode seperti ini

.post-label a.NamaLabel:before{background-image:url("Link Icon")}

Mudah bukan? jangan lupa backup sebelum mencoba..

Jika masih bingung silakan berkomentar nanti akan saya bantu..