Blogger kullanıcıları için resim gösterici google aramalarımda sonucuna ulaşamadığım bir konuydu.Bir çok scriptle boğuştuğumu da itiraf etmem lazım.Lightbox, shadowbox ve ismi aklıma gelmeyen bir iki hazır scriptle daha uğraştım.Neticede bu scriptler blogger'da çalışmadı.
Google aramalarımda bu konuyu bulamadığımdan, umarım bu resim gösterici script arayanlar bloguma ulaşabilir.
Resim gösterici scriptimizi nasıl ayarlayacağınızı göstermeden önce nasıl çalıştığını görmek isteyenler için buraya tıklayabilir yok bu kadar anlattığına göre muhakkak çalışıyordur bana nasıl ayarlayacağımı anlat diyenler için yazının devamını okumaya devam edebilir...
Öncelikle Blogumuzun html'i düzenle kısmına giriyoruz.Aşağıda verdiğim kodları <head> </head> bu iki tagın arasına yazmak gerekiyor.
< style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*Resimi genişletmek için CSS */
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*Resimi genişletmek için CSS*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*Sayfa üstünde resimi genişletmek için CSS*/
visibility: visible;
top: 263px;
left:282px; /*Resimin yatay dengede hangi pozisyonda olacağı */
}
</style>
Verdiğim bu kodları <head> </head> tagları arasında ]]></b:skin> bir önceki satırına ekledikten sonra resimlerimizi eklerken aşağıda ki verdiğim kodlarla yayınlamanız gerekiyor.
<a class="thumbnail" href="#">
<img src="http://www.t2tibet.com/Images/mount-everest.jpg"
border="0" height="66" width="100" /><span>
<img src="http://www.t2tibet.com/Images/mount-everest.jpg" /></span></a>
Scriptin Eksileri ve artıları :
Eksisi : Yanlışlıkla bile olsa mouse'un imleci resimin üzerine geldiğinde resimin açılması ve dolayısıyla kullanıcının sayfada hareketinin daralmasına sebep oluyor.
Artısı : Diğer bedava blog kullanıcılarından farklılık sunmak, göze hoş gelmesi...
Kendi hostu olanlar için lightbox'ı tavsiye edebilirim.İsteyen olursa lightbox içinde bir anlatım hazırlayabilirim.
Hiç yorum yok:
Yorum Gönder