Kali ini saya akan share tutorial blog bagaimana membuat
label cloud kita bisa miring jika di sebtuh dengan mouse. Pertama kali
saya lihat ini saya juga kagum dan jadi penasaran bagaimana membuat
akhir nya blogwalking dan akihrnya ketemu juga ternyata cara nya cukup
simpel karena tidak menggunakan banyak source kode. oke bagi anda yang
penasaran silahkan lihat di bawah ini :
1. Login Blogger.com
2. Buka Menu Template >> Edit HTML
3. Cari script ]]></b:skin>, Jika sudah ketemu copy kode CSS di bawah ini lalu Paste tepat diatas script ]]></b:skin>
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 5px;
float:left;
text-decoration:none;
font-size:12px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
4. Simpan Templatemargin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 5px;
float:left;
text-decoration:none;
font-size:12px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
5. Lalu Buka Menu Tata Letak >> Tambah Widget >> Pilih Label dan atur seperti gambar di bawah ini.
6. Klik Simpan Kemudian lihat blog anda
Sumber : catatanseoku
0 komentar:
Post a Comment