Cara Memasang dan Modifikasi Label Cloud di Blogger

Label berfungsi untuk mengategorikan artikel atau postingan di blog kita. Dengan adanya label tentu akan memudahan kita(pemilik blog) dan pengunjung blog untuk mengetahui topik yang di bahas oleh postingan tersebut.

Misal begini, teman-teman menulis artikel / postingan dengan judul cara mengganti username instagram, tentu sobat akan memberi label pada postingan tersebut dengan Instagram atau Sosial Media. Nah dengan label tersebut pengunjung blog sobat akan langsung mengetahui, bahwa postingan tersebut pasti membahas seputar sosial media(atau instagram).

Pada postingan kali ini kita akan membahas cara memasang dan juga modifikasi label cloud di blog. Perhatikan, postingan kali ini adalah postingan yang membahas cara memasang dan modifikasi widget label cloud di blogger. 

Tampilan label di blogger sendiri hanya ada dua jenis ya, Label daftar atau label list dan Label cloud. Kedua jenis label tersebut tentunya berbeda, label daftar itu seperti kumpulan label yang di list dari atas kebawah. 

Kalau yang label cloud itu seperti label yang berada di dalam sebuah kotak(cloud/awan). Kalau teman-teman ingin melihat perbedaan kedua jenis label tersebut bisa lihat gambar dibawah.

Namun tampilan, warna serta bentuk dari label cloud nya tergantung dari template blog yang sobat gunakan. Jadi kemungkinan tampilan label cloud teman-teman tidak sama dengan gambar diatas. 

Tapi sobat tidak perlu khawatir, karena nanti di akhir postingan kita akan membahas gimana cara memodifikasi tampilan label cloudnya. 

Terus, cara memasang label cloud nya gimana ? 

Caranya cukup mudah, sobat hanya perlu melakukan beberapa langkah yang akan kuterangkan dibawah ini, langsung saja simak penjelasannya di bawah.

Cara Memasang Label cloud Di Blog

Sebelum memodifikasi label cloud, kita perlu memasang widget nya di blog. Jika teman-teman mendapati belum ada widget Label di sidebar(samping) blog, bisa di tambahkan melalui tata letak. Untuk lebih lengkapnya bisa baca langkah langkah dibawah, cara memasang label cloud di blog.

1. Buka dashbor blogger sobat masing-masing, pilih menu Tata letak / layout,

2. Jika belum punya gadget label, bisa klik Tambahkan Gadget, tapi jika sudah punya bisa klik icon pensil untuk mengedit,

3. Setelah itu di bagian Tampilkan, pilih yang Cloud,

4. Kalau sudah sobat bisa mencentang Tampilkan jumlah postingan perlabel, tapi kalau tidak mau bisa di kosongkan saja,

5. Jika sudah klik Simpan/Save.

Cara Modifikasi Label Cloud Keren di Blogger

Selain kita bisa memasang label cloud di blogger, kita juga bisa memodifikasi tampilan nya. Dengan cara menambahkan css dalam blog kita.

Tapi sebelum ke tutorialnya, sobat perlu menghapus CSS label cloud yang ada pada blog sobat, agar nantinya tidak bentrokan dengan CSS baru. Jika sudah menghapus css label cloud yang lama, silahkan ikuti langkah-langkah di bawah. 

1. Mauk ke dashboard blogger,

2. Pilih menu Tema > Klik Edit HTML,

3. Silahkan pilih style nya di bawah, lalu Copy salah satu CSS style label cloud yang sobat pilih,

4. Paste kode css nya di atas code ]]></b:skin> atau </style>

Style 1

Tampilan Label cloud style 1 pada template pihak ketiga(internet)

Code CSS

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10;}
.cloud-label-widget-content{text-align:left;}
.label-size{background-color:#1b699d;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;transition:.5s;}
.label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold;}
.label-size:hover{background-color:#333333;}
.label-size:hover .label-count{background-color:#1b699d;}
.label-size:hover .label-count:before{border-right:6px solid #ffffff;}
.label-count{position:relative;white-space:nowrap;padding-right:3px;margin-left:-2.5px;background-color:#333333;}
.label-count:before{content:"";width:0;height:0;border:0 solid transparent;border-top-width:5px;border-bottom-width:5px;border-right:6px solid #1b699d;position:absolute;top:8px;left:-6px;}

Style 2

Tampilan Label cloud style 2 pada template pihak ketiga(internet)

Code CSS

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;opacity:10;}
.cloud-label-widget-content{text-align:left;}
.label-size{transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s;line-height:1.2;display:block;float:left;margin:0 3px 3px 0;color:#1b699d;font-size:12px;text-transform:uppercase;border:1px solid #328bdd;}
.label-size a,.label-size span{display:inline-block;color:#1b699d;padding:6px 8px;}
.label-size:hover{border:1px solid #000000;}
.label-size:hover a,.label-size:hover .label-count{color:#000000;}
.label-count{margin-left:-12px;margin-right:0;}
.list-label-widget-content ul li{display:block;margin:0 0 5px;}
.list-label-widget-content ul li:last-child{margin-bottom:10px;}

Style 3

Tampilan Label cloud style 3 pada template bawaan blogger

Tampilan Label cloud style 3 pada template pihak ketiga(internet)

Code CSS

.Label li{background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #f1f1f1;transition:all .3s ease-out;} .Label li:hover{background:#fff;color:#1b699d;} .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:#ef4824;} .Label li a{color:#666;font-size:95%;transition:all .3s ease-out;} .Label li a:hover{color:#1b699d;} .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-size:12px;transition:initial;border-radius:2px;} .Label li span:hover{background-color:#1b699d;color:#fff;} .label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-size:13px;border:1px solid #e6e6e6;transition:all 0.3s;} .label-size:hover{background:#1b699d;border-color:#33bd24;} .label-size a{display:inline-block;color:#444;padding:8px 10px;font-weight:400;} .label-size a:hover{color:#fff;} .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;}

Sumber ketiga code css di atas : https://www.caramanual.com/2018/12/memasang-dan-modifikasi-label-cloud-keren-di-blogger.html dengan sedikit perubahan

Jika sobat mendapati icon label cloud yang tidak muncul, silahkan copy code font awesome di bawah lalu paste tepat di atas tag </body>

Code

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

Sumber code font awesome : https://www.caramanual.com/2018/12/memasang-dan-modifikasi-label-cloud-keren-di-blogger.html

Mungkin sampai disini saja postingan kali ini, mengenai Cara memasang dan modifikasi Label Cloud di Blogger. Semoga Tutorial blogger kali ini bermanfaat buat teman-teman semua. Salam dari saya Hanif Muchtar, menulis itu menyenangkan.

Terimakasih.

PERHATIAN ! Tulisan di atas merupakan hasil tulisan hanif sendiri, kecuali code css dan code font awesome. Sudah kutuliskan sumber kode-kode di atas tepat di bawahnya.