Resimlerin üzerine beyaz efekt vermek

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 buradaki 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.

.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>

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.

Benzer Yazılar
Cevap Bırakın

Yorum ( 23 )
  1. Ramazan Güngör
    23 Ağustos 2011 - 12:25
    Cevapla
    • Usluer Yazar
      23 Ağustos 2011 - 12:39
      Cevapla
  2. Ömer Faruk
    24 Ağustos 2011 - 00:48
    Cevapla
  3. Ömer Faruk
    24 Ağustos 2011 - 01:06
    Cevapla
    • Usluer Yazar
      24 Ağustos 2011 - 03:08
      Cevapla
      • Ömer Faruk
        24 Ağustos 2011 - 13:56
        Cevapla
        • Usluer Yazar
          24 Ağustos 2011 - 14:01
  4. Frary
    24 Ağustos 2011 - 06:30
    Cevapla
    • Usluer Yazar
      24 Ağustos 2011 - 06:36
      Cevapla
  5. kürşat
    1 Eylül 2011 - 10:21
    Cevapla
    • Usluer Yazar
      1 Eylül 2011 - 10:38
      Cevapla
  6. orhanbatu
    2 Eylül 2011 - 01:06
    Cevapla
  7. İsmail Görkem Kara
    9 Ekim 2011 - 00:29
    Cevapla
    • Ramazan Güngör
      11 Ekim 2011 - 15:28
      Cevapla
  8. Mümin Köykıran
    10 Aralık 2011 - 13:39
    Cevapla
  9. Emre Pirinçci
    23 Şubat 2012 - 17:12
    Cevapla
    • Usluer Yazar
      24 Şubat 2012 - 09:51
      Cevapla
  10. Gökhan
    9 Nisan 2012 - 18:23
    Cevapla
    • Usluer Yazar
      10 Nisan 2012 - 12:12
      Cevapla
      • Gökhan
        10 Nisan 2012 - 15:33
        Cevapla
        • Usluer Yazar
          10 Nisan 2012 - 23:48
  11. Gökhan
    21 Nisan 2012 - 23:57
    Cevapla
    • Usluer Yazar
      22 Nisan 2012 - 07:55
      Cevapla