Agar Tampilan Label Cloud Keren Begini Caranya

Untuk mempermudah pengunjung blog menemukan artikel ataupun isi dari web atau blog widget kategori atau label menjadi sangat penting. Defaultnya tampilan label pada blog ada dua yaitu tampilan list dan cloud. 

Dalam tutorial kali ini tampilan label yang akan di bahas adalah model cloud seperti pada contoh gambar dibawah ini.

Setiap template blog memiliki kode css yang berbeda-beda, termasuk juga untuk tampilan label pada blog. untuk itu alangkah baiknya sebelum mencoba tutorial ini hapus dulu kode css label yang ada pada template blog Anda saat ini. 

Sebenarnya banyak sekali model tampilan label blog, untuk membuat tampilan label seperti gambar diatas ikuti langkah langkah berikut ini :

1. Login Ke Blogger (Jika belum punya akun blog bikin dulu)

2. Setelah login ke akun blog anda selanjutnya masuk ke draft blogger Klik Tema>Edit HTML seperti gambar di bawah ini.

3. Simpan kode css di bawah ini,  atau pastekan  di atas kode ]]></b:skin> atau </style>. Untuk mempermudah pencarian kode tersebut gunakan CTRL+F pada halaman Edit HTML.

/* Cloud Label Style 1 */ .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;}

Jika ada icon yang tidak muncul, silahkan pasang kode font awesome di bawah ini di blog Anda. Letakkan kode ini di atas kode </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

4. Cara pemasanganya silahkan masuk ke draft blogger lalu Klik Tata Letak>Tambah Gadget>Labels dan jangan lupa pilih mode Cloud lalu Klik Simpan.