11
Mar 2012
Kode yang diperlukan untuk membuat related posts blogger dengan animasi yang tercipta melalui css3 transition dapat anda lihat dalam beberapa box berikut:
Kode CSS :
#GRrelated-posts{ padding:10px; display:block; clear:both; border-top:5px double #444; border-bottom:5px double #333; margin:15px 0; } h3.GRrelated-post{ border-bottom:3px double #666; font-weight:bold; line-height: 1.2; margin:25px 15px 5px; padding:0 6px; text-transform:uppercase; font-size:14px; } #GRrelated-posts a:hover{ text-decoration:none; } #GRrelated-posts ul{ list-style-type:none; margin:10px 0; padding:0; } #GRrelated-posts li{ background: url('https://lh3.googleusercontent.com/-JwrOsJL-jP4/T1yD1XepuCI/AAAAAAAAASw/9zWGr5YWaTE/s128/ball.red.png') no-repeat scroll 12px 0 transparent; background-size:auto 18px; display:block; list-style-type:none; padding:0 0 0 35px; line-height:20px; margin:0; transition:all 0.8s ease; -o-transition:all 0.8s ease; -moz-transition:all 0.8s ease; -webkit-transition:all 0.8s ease; -ms-transition:all 0.8s ease; } #GRrelated-posts li:hover{ background: url('https://lh5.googleusercontent.com/-y40w76_1gfc/T1yD5fk7uOI/AAAAAAAAAS4/V_do9hRxpt8/s128/arrow-gold.png') no-repeat scroll 3px 0 transparent; padding-left:45px; }
dan selesai.. selamat mencoba???
0 komentar:
Silakan berkomentar dengan baik dan sopan. Untuk berkomentar anda bisa gunakan format di bawah ini.
Format untuk komentar:
1. Pilih profil sebagai Name/URL
2. Isikan nama anda
3. Isikan URL (Blog/Website/Facebook/Twitter/Email /Kosongkan)
4. Isikan komentar
5. Poskan komentar