Cara Membuat Label Unik Berbentuk Cloud
Pada Gambar di samping mungkin bisa menjadi gambaran hasil dari modifikasi widget Label yang sekarang akan saya bahas. Mau tahu bagaimana bagaimana cara membuatnya? Silakan simak lebih lanjut dan bila perlu coba pada Blog sobat.
Nah untuk membuat gambar yang seperti diatas caranya cukup mudah dan juga simpel. caranya adalah sebagai berikut :
- Login ke akun Blogger sobat.
- Masuk pada bagian Tata Letak.
- Klik Tambahkan gadget di posisi yang sobat inginkan.
- Pilih Widget Label dan silakan sobat bisa atur sendiri tampilanya. Namun jangan lupa, sobat harus memilih tampilan cloud
5. Klik simpan, sobat telah berhasil memasang widget Label Cloud pada Blog sobat.
Kini sobat mulai untuk mengedit tampilanya agar lebih unik dan menarik.
6. Masuk ke bagian Template dan klik Edit HTML.
7. Dengan tombol ctrl+F carilah kode ]]></b:skin> dan letakan kode berikut di atas kode ]]></b:skin> tersebut.
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #B22400;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
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;
Ubahlah kode berwarna merah dengan kode warna yang sobat inginkan. Kode ini merupakan warna awal border yang melingkari nama Label.
Ubahlah kode berwarna biru dengan kode warna yang sobat inginkan. Kode ini merupakan warna pada nama Label yang sedang disentuh kursor.
8. Klik Simpan Template, selesai.
