Cara Modifikasi indeks label cloud warna warni

Tags

triknews - Cara memodif indeks label atau Membuat variasi indeks label Banyak cara untuk membuat label cloud yang ada di blog kita agar terlihat lebih menarik yaitu dengan cara sedikit mengotak-atik pada ruangan html template anda, dan widget label ini nantinya akan tampil warna-warni dan kerren abis, Lihat gambar...bagaimana anda tertarik dengan widget tersebut..? jika widget label di blog anda masih defauld atau masih bawaan dari template blog, ada baiknya anda mengikuti tutorial berikut ini dan memasangnya diblog anda, oky langsung saja kita ikuti satu langkah mudah di bawah ini.

Modifikasi indeks label cloud

Baca juga : Cara membuat widget popular post warna warni rata pinggir di sidbar

  • Login ke >> Blogger.com
  • Pada Dasbor pilih menu >> Template >> Edit HTML
  • Silahkan anda cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)

  • copy kode css berikut dan paste tepat di atas kode ]]></b:skin>


/*-----Custom Labels Cloud widget by Trikpos----*/
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,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: #222;
}
.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;
}



klik simpan lihat salah satu artikal anda, Bagaimana dengan indeks label blog anda....!
Demikian penjelasan kami mengenai Cara Modifikasi indeks label cloud warna warni Semoga bisa menjadi referensi serta bermanfaat bagi anda.

3 komentar

terimakasih mas, label warna dari trikpos udah terpasang di blog terbaru saya intiphotografi

Mirip dengan punyaku. Warna-warninya hampir sama.

Semakin berwarna aja nih kang :) jago HTML nih mas trik :)


EmoticonEmoticon