Cara Mudah Membuat Label Blog Warna-Warni

Setelah sebelumnya Kang AP memberikan trik cara mudah membuat label blog bergoyang, sekarang Kang AP akan memberikan trik cara mudah membuat label blog warna-warni. Seperti halnya label bergoyang, label warna warni pun sangat mudah membuatnya. Baiklah! Tanpa banyak ba bi bu lagi, berikut langkah-langkahnya.

1. Pertama, anda login dulu ke Blogger

2. Pilih Template » Edit HTML

3. Pasang kode dibawah ini tepat diatas kode </b:skin>

<!-- css ui label color by Kang AP -->

.cloud-label-widget-content {text-align: left;}

.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}

.label-size:nth-child(1) {background: #F53477;}

.label-size:nth-child(2) {background: #89C237;}

.label-size:nth-child(3) {background: #44CCF2;}

.label-size:nth-child(4) {background: #01ACE2;}

.label-size:nth-child(5) {background: #94368E;}

.label-size:nth-child(6) {background: #A51A5D;}

.label-size:nth-child(7) {background: #555;}

.label-size:nth-child(8) {background: #f2a261;}

.label-size:nth-child(9) {background: #00ff80;}

.label-size:nth-child(10) {background: #b8870b;}

.label-size:nth-child(11) {background: #99cc33;}

.label-size:nth-child(12) {background: #ffff00;}

.label-size:nth-child(13) {background: #40dece;}

.label-size:nth-child(14) {background: #ff6347;}

.label-size:nth-child(15) {background: #f0e68d;}

.label-size:nth-child(16) {background: #7fffd2;}

.label-size:nth-child(17) {background: #7a68ed;}

.label-size:nth-child(18) {background: #ff1491;}

.label-size:nth-child(19) {background: #698c23;}

.label-size:nth-child(20) {background: #00ff00;}

.label-size a, .label-size span {

display: inline-block;

color: #fff !important;

padding: 4px 10px;

font-weight: bold;

}

.label-size:hover {

background: #1E90FF;

}

.label-count {

white-space: nowrap;

padding-right: 3px;

margin-left: -3px;

background: #333;

color: #fff ;

}

.label-size:hover .label-count, .label-size:focus+.label-count {

background-color: #ff6bb5;

}

Baca juga :
» Cara Mudah Agar Blog Menjadi Dofollow
» Cara Mudah Membuat Kolom Langganan Keren Dibawah Postingan
» Cara Membuat Link Berubah Warna Dan Membesar

4. Simpan Template

5. Selanjutnya, pilih Tata Letak » Tambah Gadget

6. Pilih Label seperti gambar dibawah ini

7. Kemudian pilih Cloud » Simpan dan lihat hasilnya

Bagaimana, mudah sekali kan cara membuat label blog warna-warni? Semoga apa yang Kang AP postingkan ini bisa membantu dan bermanfaat. Terimakasih.

Please Share » » Facebook Google+ Twitter