Cara Modifikasi indeks label cloud warna warni

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.

Related Posts

Previous
Next Post »

3 comments

Click here for comments
Kang maman
admin
June 18, 2016 at 10:53 AM ×

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

Reply
avatar
July 16, 2016 at 6:09 AM ×

Mirip dengan punyaku. Warna-warninya hampir sama.

Reply
avatar
July 16, 2016 at 9:50 AM ×

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

Reply
avatar

Tulis komentar anda tentang artikel ini...!