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.
Abi şu div kodunu nere eklicez onu anlamadım ?
Thumb resim kodu orası. index.php de bulabilirsin.
Daha birkaç gün önce yeni editlediğim temaya eklemeyi düşünmüştüm ve nasıl yapılıyor acaba bu diye düşünmüştüm.Bu günde burda görünce bu bloga daha bi ısındım.kanım kaynadı :)
Bu arada index.php de Thumb resim kodunu bulamadım
Hocam sizdeki kod ile bendeki kod farklıdır. Temanızı bilmediğim için sizde nasıl haliyle onu da bilmiyorum. Ben kendi temama göre anlatım yaptım. O kodu bulmakta size kalmış artık.
Bir Hayal Alemi temasına eklemeye çalışıyorum.
Dediğim gibi artık o temanın thumb kodunu bulmak da size kalmış.
Benim temaya uyarlıyamıyorum, thumb kodu düşündüğümden karışık çıktı ama teşekkürler. :)
Aslında thumb kodunu bulsanız gerisi kolay. :)
Teşekkürlerde ben yapamadım ya. İndex.phpdeki orjinal thumb geçen kodlar bunlar. <img class="thumb" src="” alt=”” height=”125″ width=”125″ /> nasıl yapmam lazım?
Style dosyasından gerekli yerleyi ayarladıysanız eğer söylemiş olduğunuzu kodu silip yerine yukarıdaki thumb kodunu ekleyiniz ve gerekli yerleri kendi temanıza göre düzenleyiniz.
:) güzel işime yaradı sağol
Temama çok farklı bir şekilde uyarladım. Teşekkürler.
Nasıl yaptın görkem defalarca denememe rağmen tema bozuluyor acaba temada başka yeremi eklenicek kod index.php de ?
Bende arthemia Temasını Editlemiştim bu beyaz efektini yapmaya kalkıştım index.php baya bi Karıştı Ben Size İndex.php Kodlarını .rar layıp göndersem siz yaparmısınız.
Bedava-Sitem.com (Tr.Gg) kullanıcıları içinde nasıl yapılacağını anlatır mısınız:) ?
O konuda hiçbir fikrim yok. :)
‘alignleft’)); ?>
bendeki kod bu buna nasıl uyarlarım…
Kod çıkmamış. :)
‘alignleft’)); ?>
code etiketi kullanarak yazarsanız kodlar çıkacaktır.
<a href=""> 'thumbnail')); ?>
bu resim koduna göre nasıl yapıcaz hocam
Kodlar tam çıkmamış. Yalnız yazıda geçenleri uygulayın yeterli.