Membuat Widget Label Cloud Flat Full Color 2018
Selamat Datang di ruang Android Tutorial, Pada Kesempatan kali ini kami akan membahas tentang Membuat Widget Label Cloud Flat Full Color, Disini juga kami telah menyediakan beberapa tutorial lengkap dengan gambar dan link downloadnya. mudah-mudahan isi postingan yang kami tulis dapat dengan mudah anda mengerti.

Cara Terbaru Membuat Widget Label Cloud Flat Full Color
Cara Yang Benar Membuat Widget Label Cloud Flat Full Color

Membuat Widget Label Cloud Flat Full Color

Tutorial ini saya postingkan hanya untuk pembelajaran pribadi, mungkin sobat blogger tertarik untuk menerapkannya karena terlalu mainstream kalau widget label kita bawaan dari blogger. Yuk ikuti saja tutorialnya.

Caranya:

1. Tambahkan/Edit settingan Widget label menjadi seperti ini:

2. Salin CSS ini dan simpan diatas </style>

.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;
}

Silahkan sobat simpan perubahan templatenya, simple kan?? tapi lihat hasilnya.

Apabila ada pertanyaan, silahkan berkomentar :)

Selesai sudah Membuat Widget Label Cloud Flat Full Color 2018

Semoga anda bisa mengikuti langkah - langkah Membuat Widget Label Cloud Flat Full Color dengan benar dan mudah-mudahan bisa memberi manfaat untuk anda semua. sekian postingan Android Tutorial kali ini.

Anda telah membaca artikel Membuat Widget Label Cloud Flat Full Color dengan url permalink http://eurobokep.blogspot.com/2014/07/membuat-widget-label-cloud-flat-full.html Terimakasih atas kunjungannya jangan lupa share Artikel ini.

Tag : CSS, tutorial, Widget,