Cara Membuat Label Cloud Warna Warni di Blog

Cara Membuat Label Cloud Warna Warni di Blog

Cara Membuat Label Cloud Warna-Warni di Blog - Seperti kita ketahui, label cloud bawaan blogger cukup membosankan dengan tampilan warna putih polos dan teks hitam. Nah di sini saya akan mencoba untuk mengubah menjadi tampilan penuh warna dan terlihat fresh.

Berikut cara membuatnya :

Pertama Anda harus menambahkan widget label di blog

Pergi ke Blogger > Tata Letak > Tambah Gadget > Kemudian tambahkan widget label dan ikuti pengaturan sesuai dengan gambar di bawah ini

Kemudian Simpan.

Selanjutnya, pergi ke Template > Edit HTML > Kemudian paste kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

.sidebar .label-size {
 position:relative;
 text-transform:uppercase;
 text-decoration:none;
 font-size:13px;
 font-family:Arial;
 color:#fff!important;
 }
.sidebar .label-size a {
 color:#fff!important;
 font-weight:bold;
 padding:8px 10px;
 margin:0 6px 6px 0;
 float:left;
 display:block;
 transition: all 0.4s ease-in-out;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

Simpan Template dan liha hasilnya. Semoga bermanfaat ^^

download now

download