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...

Next Post Previous Post
Add Comment
comment url
Terima kasih telah berkomentar di Blog Guru Madrasah.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Berkomentarlah sesuai topik dengan baik dan sopan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
sr7themes.eu.org