Cara Menciptakan Label Cloud Bentuk Kotak Pada Blogger

FAST DOWNLOADadsCara 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 menyerupai list biasa. Namun, pada bentuk cloud, label akan berbentuk barisan kata yang dimana kata kategori yang lebih banyak akan lebih besar.

1. Cari isyarat ]]></b:skin> atau </style>
2. Letakkan isyarat CSS berikut dibawah ini di atas isyarat 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..

Demikian gosip ihwal Cara Membuat Label Cloud Bentuk Kotak Pada Blogger. Maaf jikalau ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap gosip ini bermanfaat.FAST DOWNLOADads| Server1 | Server2 | Server3 |