Cara Memasang dan memodifikasi label cloud pada blogger Keren Dan Responsiv

Cara Memasang dan memodifikasi label cloud pada blogger Keren Dan Responsiv - Selamat berkunjung kembali di blog GOLIKETRIK pada kesempatan ini admin akan berbagi cara memasang dan memodifikasi label cloud pada blogger keren dan responsif, perlu anda ketahui bahwa label cloud sebenarnya telah tersedia untuk semua blog namun desainnya beragam dan polos sehingga kita perlu memodifikasi ulang label cloud yang ada menjadi keren dan pastinya responsif.

Untu memasng label cloud dan memodifikasinya silahkan ikuti langkah-langkah dibawah ini :

I. Memasang Label Cloud Pada Blogger

1. Login pada Blog

2. Pada Dasbor Klik pada Tata Letak 

3. Kemudian Tambah Gadget Dan Pilih Label

4. Setting Label Seperti dibawah ini

5. Kemudian Simpan

II. Cara memodiviasi Label Cloud 

Setelah anda memasang label cloud pada blog tentu hasilnya akan terlihat kaku, untuk itu kita perlu memodifikasi agar terlihat keren dan responsiv. untuk memodifikasi label cloud pada blogger perhatikan langkah-langkah dibawah ini : 

1. Masuk Pada Template Blog

2. Edit HTML

3. Kemudian Cari Kode ]]></b:skin> atau </style> 

4. Kemudian Letakkan kode label Dibawah ini tepat diatas ]]></b:skin> atau </style> 

Kode Label 1

/* Label Cloud 1*/
.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:#36454F; 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:#E47127; }
.label-size { line-height:1.2 }
.label-count { white-space:nowrap; padding-right:3px; margin-left:-3px; background:#A12E0D; color:#fff !important; 

Hasil :

Kode label 2

/* Label Cloud 2 */
.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-radius:30px; background:#076BB8; 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-radius:30px; background:#333333; } .label-count { white-space:nowrap; border-radius:30px; padding-right:3px; margin-left:-3px; background:#333333; color:#fff !important; } .label-size { line-height:1.2 }

`
Hasil :

Kode Label 3

/* label cloud 3*/
.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;}

Hasil : 

4. Kode Label 4

/* Label Cloud 4*/
.widget-content.list-label-widget-content{padding:0;}
.widget-content.cloud-label-widget-content{display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:1;}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count{background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}
.label-count:hover{background:#fafafa;color:#222;border-radius:4px;}
.Label li{background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover{background:#fff;color:#FF9934;}
.Label li:before{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;color:#666;transition:all .3s ease-out;}
.Label li:hover:before{margin:0 0 0 5px;padding-right:4px;color:#f39c30;}
.Label li a{color:#666;transition:all .3s ease-out;}
.Label li a:hover{color:#FF9934;}
.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}
.Label li span:hover{background-color:#FF9934;color:#fff;}
.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}
.label-size:hover{background:#FF9934;border-color:#FF9934;}
.label-size a{display:inline-block;color:#444;padding:8px 10px;font-weight:400;}
.label-size a:before{content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#444;transition:initial;}
.label-size a:hover:before{content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.Label li{background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li:hover{color:#f39c30;}
.Label li a{color:#aaa;transition:all .3s ease-out;}
.Label li a:hover{color:#f39c30;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}
.Label li span:hover{color:#f39c30;}
.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}
.label-size a:hover{background:#f39c30;color:#fff;transition:all 0.2s;}
label-size a:before{content:"\f02b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;color:#fff;transition:initial;}
.label-size:hover,#footer-wrapper-inner .label-size:hover{background:#f39c30;color:#fff;transition:initial;}
.label-count{background:#333;}

Hasilnya : 

Itulah cara membuat label cloud serta memodifikasinya pada blogger, kode label cloud diatas tentunya telah kami coba dan berhasil namun apabila kode diatas ada yang bermasalah silahkan tinggalkan pesan pada kolom komentar. Terimakasih

Paskal Rian Duha

Saya adalah orang yang tertarik dengan dunia Teknologi Informasi. Suka Berbagi Dan berusaha menyajikan Informasi yang dibutuhkan banyak orang lewat media online.

Share this post