Membuat Label Cloud Bentuk Kotak Pada Blogger

Membuat Label Cloud Bentuk Kotak Pada Blogger - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Membuat Label Cloud Bentuk Kotak Pada Blogger, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.

Judul : Membuat Label Cloud Bentuk Kotak Pada Blogger
link : Membuat Label Cloud Bentuk Kotak Pada Blogger

Membuat Label Cloud Bentuk Kotak Pada Blogger

Menjadi sebuah kebutuhan para blogger untuk mempermudah para pengunjungnya dalam navigasi dan mencari suatu kategori yang ada pada blog mereka. Widget label yang disediakan oleh blogger ada 2 jenis. Ada yang berbentuk daftar (list) ada juga yang berbentuk Cloud. Pada bentuk list, kategori (label) akan berderet seperti list biasa. Namun, pada bentuk cloud, label akan berbentuk barisan kata yang dimana kata kategori yang lebih banyak akan lebih besar. Langsung saja..

1. Cari kode ]]></b:skin> atau </style>
2. Letakkan kode CSS berikut dibawah ini di atas kode yang dicari tersebut :

CSS Pertama :

.label-size {
display: block;
float: left;
background: #555 !important;
margin: 0 1px 1px 0;
color: #eee;
font-size: 100%;
}
.label-size:hover, .label-size a:hover, .label-size span:hover{background:#3384ff;}
.label-size a, .label-size span {
display: inline-block;
color: #fff;
padding: 4px 4px;
}

CSS Kedua :

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{

text-align:left
}
.label-size {
background:#E73037;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}

CSS Ketiga :

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}
.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}

3. Kemudian klik save dan lihat hasilnya.. Terima kasih teman..

Sekian Artikel Membuat Label Cloud Bentuk Kotak Pada Blogger

Sampailah kita pada akhir artikel Membuat Label Cloud Bentuk Kotak Pada Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.

sobat sekarang membaca artikel Membuat Label Cloud Bentuk Kotak Pada Blogger dengan alamat link https://naparom.blogspot.com/2018/05/membuat-label-cloud-bentuk-kotak-pada.html