Küçük Animasyon
pre
.thumb2 { margin: 2px 5px 3px 0px; padding: 0px; float: left; position: relative; text-align: center; vertical-align: middle; } .thumb2 img { border: 1px solid #DBDBDB; margin: 3px 3px 3px 3px; padding: 4px; text-align: center; } .thumb2 img a { padding: 4px 4px 0px 4px; border: 1px solid #EBEBEB; } .thumb2 a { text-decoration: none; } .thumb2 span { width: 128px; height: 18px; max-width: 135px; max-height: 18px; display: block; position: absolute; top: 0px; left: 0px; background: url('images/thumbgrad.png') no-repeat; margin-top: 2px; margin-left: 1px; padding-top: 62px; color: #FFFFFF; overflow: hidden; text-shadow: -1px 0px 2px #000; line-height: 20px; }
Kendi temama göre anlatıyorum aşağıdaki bilgileri. Siz kendi temanıza göre düzenlersiniz. Aşağıdaki kodlar kullandığım temadaki thumb resim kodlarıdır.
Dediğim gibi siz kendinize göre düzenlersiniz. index.php de düzenleme yapabilirsiniz thumb resimleri için.
<div class="thumb2"><a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><img class="left" src="<?php bloginfo('template_url'); ?>/scripts/timthumb.php?src=<?php echo imagesrc(); ?>&w=120&h=127&zc=1" alt="<?php the_title(); ?>" /></a></div>