Birçok arkadaş soruyordu resimlerin üzerindeki o beyaz efekti nasıl verebiliriz, yazı altlarındaki kısımları nasıl yapabiliriz diye. Bende ilk olarak resimlerin üzerindeki beyaz efektleri nasıl vereceğimizi anlatayım dedim. Öncelikle buraya tıklayarak resmi bilgisayarınıza kaydedip ftp den temanızın images klasörüne atınız. Daha sonra aşağıdaki kodları temanızın css dosyasının en altına ekleyin.Demo istiyorsanız bu sitede görebilirsiniz. Hemen solunuzdaki ufak resimlerin üzerlerinde şeffaklık var.
[php].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;
}
[/php]

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.
[php]</pre>
<div><a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><img src="<?php bloginfo(‘template_url’); ?>/scripts/timthumb.php?src=<?php echo imagesrc(); ?>&w=120&h=127&zc=1" alt="<?php the_title(); ?>" /></a></div>
<pre>
[/php]
Gördüğünüz gibi öncelikle thumb2 sınıfında bir div açıyoruz. Daha sonra resim için kodumuzu yazıyoruz. Dikkat etmemiz gereken nokta resmin kodundan sonra hemen span etiketi açıp kapatıyoruz. Yoksa yaptığımız işlem olmaz. Daha sonrada div etiketini kapatıyoruz.
Üzerinde değişiklik uyguladığınız dosyaları tekrar ftp den hostunuza atın. Hepsi bu kadar.
İleriki günlerde inşallah yazı altlarındaki kategori, okunma sayısı, yorum sayısı ve devamını oku kısmını anlatacağım.

Bir Cevap Yazın