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.
Baca juga: Cara Membuat Popular Post Keren 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:
- Masuk akun Blogger sobat.
- Silahkan pilih Dasboard > Template > Edit HTML
- Tekan Control + F > cari kode ]]></b:skin>
- Jika sudak ketemu, Copy kode CSS dibawah ini dan Pastekan/letakkan kodenya tepat diatas kode ]]></b:skin>
- Jika sudah jangan lupa save.
Cara Memasang Label Cloud di blog:
- Masuk menu Layout atau tata letak >> Tambah Gadget >> Label
- 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.
Dicobain dulu…thx infonya gan
Silahkan gan semoga suka.
makasih gan atas infonya…sekarang Lable saya sudah keren (y)
Sama-sama gan, biar blognya tambah menarik dan pengunjung bisa mudah memilih label yang diinginkan.
wawwhhh tak salah judul sama isi nya
like
Hehe.. silahkan dipasang diblognya gan biar tambah keren.