Label Blogger Unik Dengan CSS

Membuat tampilan yang membuat pengunjung blogger anda betah berkeliling salah satunya ketika mereka melihat tampilan label, pada malam ini saya ingin menulis bermacam- macam tampilan label dengan menggunakan css

1. Langkah pertama masuk dasboard edit blogger anda.
2. Pada menu kiri terdapat layout/ tata letak.
3. Jika gadget label belum ada tambahkan gadget
4. Pilih label
5. Setelan label pilih cloud pada label dan simpan

Setelah seteln label di layout anda kembali ke menu sebelah kiri

1. Piih tema
2. Klik titik tiga pojok kiri pilih edit html
3. Klik sembarang di dalam form editor.
4. Tekan tombol ctrl + f
5. Pada form search ada cari pastekan kode di bawah sebelum ]]></b:skin> atau </style>

1. Label cloud Warna Indigo Biru

/* label cloud seo indigo biru https://sasracode.blogspot.com*/
.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:#2ea9da; 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-size { line-height:1.2 }
.label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; }

Untuk warna silahkan di edir sendiri

2. Label Flat-ui

/* label cloud seo flatui https://sasracode.blogspot.com*/
.Label a{padding-left: 5px;padding-right: 31.5px;color: #fff!important;height: 32px;background: #1abc9c;margin-right: 2px;line-height: 32px;
text-decoration: none;border: none !important;-webkit-transition: all .3s ease-in-out !important;float: left;margin-top: 2px;font-size: 13px;text-align: left; }
.Label a:hover{color:#fff !important;background:#16a085; }
.Label a:after{content: "";position: absolute;width: 0px;height: 0px;border-width: 16.5px;border-style: solid;border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.1) transparent;}

3. Label Cloud Cool

/* label cloud cool https://sasracode.blogspot.com*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10;float:left;width:48%;}
.cloud-label-widget-content{text-align:left}
.label-size{border-radius:3px;display:block;float:left;line-height:normal;margin:0 3px 3px 0;color:#ffffff;font-size:12px;max-width:100%;text-transform:capitalize;}
.label-size:hover{background:#337DAE;transition:.5s}
.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:500;}
.label-size a{background:#337DAE;border-radius:3px;font-weight:400;}
.label-size a:hover{font-weight:500;transition:.5s}
.label-count{float:right;white-space:nowrap;border-radius:3px;padding-right:3px;margin-left:-3px;background:#E0492C;color:#fff !important;}

4. Label Cloud Bangla

/* cloud label Bangla https://sasracode.blogspot.com*/
.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{border:5px dashed #000000;border-bottom-right-radius:30px;border-top-left-radius:30px;background:#FA0830;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{border:5px dashed #FA0830;background:#000000}
.label-count{white-space:nowrap;border-bottom-right-radius:30px;border-top-left-radius:30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important}
.label-size{line-height:1.2}

Baca Juga

Related Posts