Scrollbarlı Slayt veya Playlist

Scrollbarlı (kaydırma çubuklu) yatay slayt veya playlist yapmak

    Yine bilmeyenlere elimden geldiğince hareketsiz, kaydırma çubuklu (scrollbarlı) basit resimli slayt nasıl yapılır? anlatmayı deneyeceğim.








İnternette gördüğüm bir çok oklu veya scrollbarlı, hareketli yada hareketsiz slaytlar doğru düzgün çalışmıyordu. Yabancı sitelerdekilerin hemen hemen çoğu paralıydı. Bir çoğunun kurulması karışıktı. Manşet slayt desen işime yaramıyordu. Saatlerce internette dolanıp kafa patlattıktan sonra kıt html bilgim ile kendim işimi görecek kadar basit bir şey yaptım. Başka lazım olan vardır diye bu yazıyı yazmaya karar verdim, çok şey bildiğimden değil.

Kayan slayt ve yazı yapmayı önceki yazımda yine basitçe anlatmıştım. Ancak kayan slayta scrollbar (kaydırma çubuğu) eklemeyi beceremedim, bilmiyorum. Hareketsiz, scrollbarlı yatay slayt yada yatay playlist benzeri bir şey yaptım. İstenilen yere gadget veya sayfa içerisine vs eklenebilir.

KODLARINIZI BURAYA YAPIŞTIRMADAN ÖNCE "TEMİZLE" TUŞUNA BASINDAHA SONRA DENEMEK İSTEDİĞİNİZ KODU BURAYA EKLEYİN ve "ÖNİZLE" TUŞUNA BASARAK KODUNUZU TEST EDİN..!

İlk olarak scrollbar komutunu yazıyoruz
en üstte bu kod olacak. komutlar yazıldıktan sonra en alta /div eklenip kapatılacak.
width:210px;        genişlik ayarı
height:210px;       yükseklik ayarı

<div style="width:210px;height:210px;overflow:auto; "> buraya komutlar </div>

yanyana olması için table komutu kullanmamız gerekiyor yoksa resimler alt alta çıkar. table komutuna biraz girelim.

<<div style="width:210px;height:120px;overflow:auto; "> <table border="0" cellpadding="2" cellspacing="0"><tbody> <tr> <td valign="top"><table align="center" cellpadding="0" cellspacing="0"><tbody> <tr> buraya kod gelecek </td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0"><tbody> <tr> buraya kod gelecek </td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0"><tbody> <tr> buraya kod gelecek </td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0"><tbody> <tr> buraya kod gelecek </td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0"><tbody> <tr> buraya kod gelecek </td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0"><tbody> <tr> buraya kod gelecek </td></tr> </tbody></table> </td> </tbody></table> </td> </div>

şimdi resim kodunu görelim

<td valign="top"> <table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody> <tr> <td style="text-align: center;"> <a href="Buraya tıklayınca gidilecek link"> <img src="buraya resim linki" height="100" width="100" /> </a></td></tr> </tbody></table> </td>

şimdi kodu tam olarak dolu bir şekilde tekrardan yazıp görelim

<div style="width:210px;height:120px;overflow:auto; "> <table border="0" cellpadding="2" cellspacing="0"><tbody> <tr> <td valign="top"><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody> <tr> <td style="text-align: center;"><a href="xxx"> <img src="http://i.hizliresim.com/1M8OWA.jpg" height="100" width="100" /> </a></td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody> <tr> <td style="text-align: center;"><a href="xxx"> <img src="http://i.hizliresim.com/1M8OWA.jpg" height="100" width="100" /> </a></td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody> <tr> <td style="text-align: center;"><a href="xxx"> <img src="http://i.hizliresim.com/1M8OWA.jpg" height="100" width="100" /> </a></td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody> <tr> <td style="text-align: center;"><a href="xxx"> <img src="http://i.hizliresim.com/1M8OWA.jpg" height="100" width="100" /> </a></td></tr> </tbody></table> </td> <td valign="top"><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody> <tr> <td style="text-align: center;"><a href="xxx"> <img src="http://i.hizliresim.com/1M8OWA.jpg" height="100" width="100" /> </a></td></tr> </tbody></table> </td> </tbody></table> </td> </div>

ön izleme:

Bu basit bir anlatımdır. Bunu üzerine caption kodları ekleyip, yani açılır yazı kodları ekleyip fare üzerine gelince ismi falan çıkabilir. Başka bir yazısı olan uygulamadan o kısmı alabilirsiniz. Bu yazıda çok fazla detaya girmedim. Aksi taktirde çok uzayıp işler biraz karışacaktı. Belki ileride detaylı yazı yazarım ama yazma özürlüyüm biraz :)