Tutorial : Cara Membuat Label Cloud Keren dan Cantik di Blog

Pada kesempatan ini saya akan berbagi tutorial tentang cara membuat label cloud keren dan tampil cantik di blog. Label atau kategori adalah untuk mengelompokkan postingan blog sesuai dengan tema yang diangkat, sebagaimana label blogger maka postingan didalamnya adalah seputar dunia blogger baik tutorial maupun tips trik.

Agar pengunjung dapat membaca artikel sesuai kategori yang diinginkan, maka sebaiknya label dipadang pada bagian sidebar. Nah agar terlihat menarik maka perlu dimodifikasi terlebih dahulu, sehingga tampilan label cloud nanti terlihat menarik untuk dikunjungi.

Label blogger dibagi menjadi 2 yaitu label dengan bentuk list dan label berbentuk cloud, ternyata label versi cloud lebih banyak diminati dengan alasan tampilan lebih feleksibel dan banyak tampilan menarik yang bida dipasang di blog.

CARA MEMBUAT LABEL CLOUD KEREN DI BLOGSPOT

Kurang lebihnya tampilan label cloud keren dan cantik seperti gambar diatas, jika sobat tertarik untuk memasang di blog silahkan simak tutorial dibawah ini:

1. Masuk akun Blogger sobat.
2. Silahkan pilih Dasboard > Template > Edit HTML
3. Tekan Control + F > cari kode ]]></b:skin>
4. Jika sudak ketemu, Copy kode CSS dibawah ini dan Pastekan/letakkan kodenya tepat diatas kode ]]></b:skin>
5. Jika sudah jangan lupa save.

Cara Memasang Label Cloud di blog :

1. Masuk menu Layout atau tata letak >> Tambah Gadget >> Label
2. Silahkan setting label menjadi cloud, caranya pada display pilih cloud jangan list.

LABEL CLOUD KEREN VERSI 1

/*Labels Cloud Style*/
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; }
.label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover { text-decoration: none; }

CARA MEMBUAT LABEL CLOUD KEREN ALA VIO MAGZ

/* Label */
.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: #49ACE1;font-size: 12px;text-transform: uppercase;border: 1px solid #49ACE1;}
.label-size a,.label-size span{display: inline-block;color: #49ACE1;padding: 6px 8px;}
.label-size:hover {border: 1px solid #444444;}
.label-size:hover a, .label-size:hover .label-count {color: #444444;}
.label-count {margin-left: -12px;margin-right: 0px;}
.list-label-widget-content ul li {display: block;margin: 0 0 5px;}
.list-label-widget-content ul li:last-child {margin-bottom: 10px}

LABEL CLOUD KEREN VERSI 3

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

Demikian koleksi label cloud keren yang ddapat anda pilih untuk mempercantik tampilan blog agar lebih keren dan menarik.

Selamat mencoba.