Skip to main content

Cara Membuat Label Cloud Keren di Blog

Cara Membuat Label Cloud Keren di Blog - Salam blogger,apa kabar kalian semua?? Kemarin saya memposting cara membuat scroll pada label llog. Masih seputar label kali ini saya membagikan cara membuat label cloud keren di blog. Banyak cara untuk memodifikasi blog agar keren dan indah, tentunya enak dipandang, salah satunya adalah efek scroll dan label cloud yang keren pada blog.

Label atau bisa kita sebut dengan kategori mempunyai fungsi yang sangat berguna untuk membantu kita atau bahkan pengunjung yang sedang mencari artikel sesuai dengan kategori yang diinginkan.

Ada dua jenis tampilan label pada blogger yaitu label list dan label cloud. Perbedaan label list ini adalah tampilannya dari atas ke bawah, setiap label atau kategori terdiri dari satu baris, sedangkan label cloud ditampilkan dari kiri ke kanan, setiap label atau kategori bisa lebih dari satu baris.

Nah pada kesempatan kali ini saya akan membuat tutorial cara membuat label cloud yang keren di blogger, sehingga kita akan memodifikasi tampilan label atau kategori default blogger atau tampilan default template blog anda.

Jika anda tertarik untuk memodifikasi tampilan label seperti pada gambar di atas, ikuti petunjuk cara membuat label cloud keren di blog berikut ini:

Cara Membuat Label Cloud Keren dan Cantik di Blog

1. Masuk ke Dasbor Blogger > Template > Edit HTML > Lanjutkan

2. Backup Template

3. Tekan Control + F > cari kode ]]></b:skin>

4. Jika sudah ketemu, Copy kode CSS dibawah ini dan paste/letakkan kode tersebut tepat diatas kode ]]></b:skin>

/*-----Labels Cloud Styled widget by zainelhasany.blogspot.com----*/ .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; }

5. Simpan Template

Sekian artikel tentang cara memasang dan memodifikasi label cloud keren di blogger, selamat mencoba  dan semoga bermanfaat.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar