Cara Memodifikasi Widget Label Blog Agar Lebih Menarik

Memodifikasi Widget Label Blog Agar Lebih Menarik
Widget  label adalah salah satu feature blogger yang bisa dipasang di sidebar atau footer. Widget label alias kategori ini berfungsi sebagai navigasi menu dan internal link untuk memudahkan pengunjung mengeksplorasi konten blog kita karena dengan hanya mengklik salah satu label yang muncul maka pengunjung akan bisa melihat artikel atau postingan kita.

Dan untuk menarik perhatian, kita bisa memodifikasi widget Label ini agar lebih menarik lagi karena tampilan label ini bisa menjadi daya tarik para pengunjung blog. Tampilan yang simpel dan elegan bisa menjadi alternatif untuk memodifukasi widget label ini.

Untuk memperindah tampilan widget label ini, banyak sekali kode CSS yang sudah dibagikan oleh para master desain template blogger. Anda bisa browsing dan akan menemukan berbagai macam tutorial cara mempercantik label ini dan silakan pilih sesuai selera Anda.

Cara Modifikasi Widget Label Blog Agar Lebih Menarik

Jika Anda ingin menampilkan widget label denagn tampilan yang cantik tapi masih terkesan sederhana, sialakan Anda ikuti cara membuatnya:

1. Template > Edit HTML
2. Copas saja kode CSS Label Widget berikut ini dan pastekan di atas kode ]]></b:skin>
.label-size{margin:7px;padding:7px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:12px;color:#666}.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .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}
3. Save Template!

Langkah berikutnya, tambahkan widget label dengan cara:

1. Layout > Add a Gadget > pilih Label
2. Lakukan setting dengan klik "Cloud" seperti gambar berikut ini:
cloud labels

Selamat mencoba...

Post a Comment

0 Comments