Masih seputar CSS3 yang tetap saya baca dari www.thisnaufal.blogspot.com karena menurut saya Tutorial-tutorial css3 yang beliau jelaskan sangatlah jelas, menarik dan mudah dipahami, untuk kali ini saya masih mencoba untuk memasangkan efek-efek CSS3 ini pada Gadget Label, bisa digunakkan untuk yang lainnya juga jadi silahkan dikembangkan saja. jangan lupa juga baca artikel sebelumnya Membuat efek Link Nudging Pada Label dengan CSS3 sebelum mencoba artikel ini.
sebelum membuatnya jangan lupa tambah gadget Label terlebih dahulu jika belum ada gadget labelnya.
Untuk cara membuatnya ikuti langkah-langkah berikut :
- Login blogger
- Rancangan, Elemen laman
- Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :
background: #a647d8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
-moz-transition: all 0.26s ease-out; /* FF4+ */
-o-transition: all 0.26s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.26s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.26s ease-out;}
#Label1 .widget-content ul li a:nth-child(2n):hover {
padding: 5px;
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}</textarea>
4. Simpan template dan lihat hasilnya.
Untuk CSSnya bisa ditambahkan atau di ubah sesuai keinginan. bisa saja diterapkan pada hover judul posting dan lainnya tinggal dicoba-coba saja ngedit CSSnya sama halnya dengan posting yang sebelumnya tentang cara Membuat efek Link Nudging Pada Label dengan CSS3.
0 komentar:
Posting Komentar