Blogger Galeri Sayfası Oluşturma

Bayan okuyucularımdan birisi ( ismini hatırlayamadım kusura bakma ) kişisel Google Plus sayfamdan bana ulaşarak bloguna bir galeri sayfası eklemek istediğini söylemişti.Bir süredir internette böyle bir galeri ya da portföy sayfasında kullanmak için güzel bir Jquery scripti arıyordum, nihayet buldum.

 

Galeri

 

Resimde gördüğünüz galeri sayfasının nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.

 

 

Bunun gibi bir galeri sayfası oluşturmak için;

 

1.Adım: ]]></b:skin> kodundan önce aşağıdaki kodları ekleyin.

 

/* Blogger Zoom Gallery  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TCel-YsZaAkb-F4DzTQ8tvFzHB5kAcHCiBYEms9UWcFIUPh8TOcEWzeehUm_OciTr7BAG36wulMgXawJxmyy5CAhXs3B5q8yjNJxbZfZ6OzwmMB6lPHGxmysTiqJm6wtk-jv1280iAEo/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */

2.Adım: </head> kodundan önce aşağıdaki kodları ekleyin.

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false;
});

});
</script>

3.Adım: Sayfa düzenlemeden yeni bir sabit sayfa oluşturun ve sayfanın HTML kodları bölümüne aşağıdaki kodları ekleyerek sayfayı yayınlayın.

<ul class="thumb">
<li><a href="#"><img src="Resim 1 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 2 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 3 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 4 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 5 Link" alt="" /></a></li>
<li><a href="#"><img src="Resim 6 Link" alt="" /></a></li>
</ul>


Galerideki yeni fotoğraf eklemek için;

Galeriye yeni bir resim eklemek için galeri sayfasının HTML bölümüne eklediğiniz kodlara yeni bir li satırı ekleyebilirsiniz.Örneğin;



Galeriye yeni resim ekleme

62 yorum:

  1. Hocam ben yaptım ama fotoğrafın üstüne tıkladığımda sendeki gibi tam ekran açılmıyor?Sebebi ne olabilir ? Teşekkürler.

    YanıtlaSil
  2. Sayfanın adresini yazarsanız gördükten sonra cevap vermem daha sağlıklı olur.

    YanıtlaSil
  3. http://piyonlar.blogspot.com/p/karikaturler.html buyur hocam

    YanıtlaSil
  4. 3.adımda eklediğiniz kodlarda ki <a href="#"> kısmındaki # yerine ne yazdınız?

    YanıtlaSil
  5. Hocam "#" yerine yukarda verdiğim linki yazdım.Karikatürler sayfasına gitsin diye.Ancak resme tıklayınca sizdeki gibi tam sayfa olmuyor :S

    YanıtlaSil
  6. oraya tam ekran açılmasını istediğiniz resmin adresini yazın

    YanıtlaSil
  7. Çok beğendim teşekkür ederim hocam güzel script.
    Hocam link vermek mümkün mü acaba ? Bakarsanız ben reklam alanı olarak düşündüm bloğumda ama link veremedim bir türlü. Neden olabilir acaba ?

    YanıtlaSil
  8. Hamza light box kullanıldığı için sadece foto galeri olarak kullanılabilir.Başka bir sayfaya link verilmez.

    YanıtlaSil
  9. Hocam ekledim ama çalışmadı yatay menü navigasyonunu bozdu kaldırdım tekrar sorun ne anlamadım ..

    YanıtlaSil
  10. Görmeden birşey diyemem.Kodlarda sorun yok ama.

    YanıtlaSil
  11. Hocam "resim hakkında anahtar kelime" diye göstermişsiniz ya, oraya birden fazla anahtar kelimeyi, aralarına virgül koyarak yapsak olur mu ?Şimdiden teşekkürler.

    YanıtlaSil
  12. Hocam ayrıca sonradan şunu farkettim, lütfen yardım edin http://a1201.hizliresim.com/t/u/23uyx.jpg resimlere tıklayınca menüler öne geliyor :(

    YanıtlaSil
  13. @ripipinci anahtar kelime dediğim yeri şu şekilde doldurmnanız en doğru:

    Örneğin resim bir ferrari resmi ise anhtar kelime olarak ferrari resmi yazın.Resmi en iyi şekilde tanımlayacak kelime veya kelime grubu yani.

    Diğer sorunuzdaki menünün neden önde gözüktüğü ile ilgili hiç bir fikrim yok.İlk defa karşılaştım.

    YanıtlaSil
  14. Merak ettiğim birşey var, acaba resime title ekleyebiliyor muyuz? Her resimin kendine özel açıklaması olabiliyor mu yani bunu html kodlarına entegre edebilir miyiz?

    YanıtlaSil
  15. @Denizhan Öter
    alt="" buraya resmin açıklamasını yazabilirsiniz .

    YanıtlaSil
  16. Aslında demek istediğim bu değildi, mesela şöyle: Şimdi galerideki resime tıkladık tam ekran şeklinde açıldı, ortada resim, arkaplanıda şeffaf siyah oldu bu resmin hemen altına şeffaf siyah olan kısma resimle ilgili bir yazı eklemekten bahsetmiştim, mümkün müdür acaba?

    YanıtlaSil
  17. Pardon yanlış anlamışım.Lightbox'ta onu yapamıyoruz bildiğim kadarıyla ama CSS3'te dediğinize benzer bir uygulama yapmayı biliyorum.Başka bir yazıda anlatırım o uygulamayı da.Eğer acil gerekli birşeyse e-posta ile ulaşırsanız yardımcı olabilirim.

    YanıtlaSil
  18. Yok yok, öyle hemen acele gerektiren birşey değil. Kafamda bir plan var, galeriye mesaj içeren karikatür vb. şeyler ekleyip dolaylı mesajlar vermeye çalışacağım gerisinide insanlar düşünsün gibisinden, bekleyebilirim sıkıntı olmaz, sizide işten güçten alıkoymayayım. Teşekkürler ilgilendiğiniz için.

    YanıtlaSil
  19. O halde benim bahsettiğim teknik işinize yaramayabilir.Örnek olarak şu resme bakarsanız CSS ile resme yazmak ile neyi kastettiğimi daha iyi anlarsınız.Bilmem işinize yararmı?

    YanıtlaSil
  20. Aynen tam bu tarzda birşeyden bahsediyorum.

    YanıtlaSil
  21. bu galeri sayfası gerçekten çok güzel. ancak ben http://bloghocam.blogspot.com/p/galeri.html bu sayfadaki gibi yanyana 3 resim değil de 4 resim çıkmasını istiyorum. bunu nasıl yapabilirim?

    YanıtlaSil
  22. @candgny

    Kodlardaki width: 360px değerini arttırırsanız yan yana gelecek resim sayısı artar ancak temanızdaki sayfa genişliğinin buna müsade etmesi gerek.

    YanıtlaSil
  23. teşekkürler. söylediğiniz gibi yaptım. gayet hoş oldu. ama bir sorun var. başka bir scriptle çakışıyor sanırım. zira benim kullandığım temada head komutundan önce başka bir script kodu var.

    YanıtlaSil
  24. Daha önce JQuery kodunu eklediyseniz şu kodu eklemenize gerek yok.

    <script src='http://code.jquery.com/jquery-latest.js'
    type='text/javascript'/>

    YanıtlaSil
  25. çok hoş bir eklenti gerçekten çok eğendim anncak çakışma prolemi var benim blogumdaki ansayfada yeralan slider ı durduruyor 3 kere denedim bu eklentiyi yatıktan sonra ana sayfadaki sliderım bozuluyor ?? OGUZHAN CAVUS)

    YanıtlaSil
  26. @Uguzhan Cavus

    <script src='http://code.jquery.com/jquery-latest.js'
    type='text/javascript'/>
    kodunu kaldırıp deneyin.

    YanıtlaSil
  27. hocam selam ben oğuzahn çavuş dediğiniz kodu kladırdım ancak sorun düselmedi sileder hala kitleniyor ??/

    YanıtlaSil
  28. Hocam sorunu nasıl çözebiliriz ?? çok işime yarayacak bu galeri jquary u kaldırdıma ma yine düzelmedi sorun??

    YanıtlaSil
  29. @Oguzhan Cavus
    Bilemiyorum ki.Başka bir çözüm gelmiyor aklıma.

    YanıtlaSil
  30. hocam peki alternatif varmı bunun benzeri ??

    YanıtlaSil
  31. Portföy sayfası oluşturmayı anlatmıştım.O sadece CSS kullanılarak yapılmış bir uygulama.Fotoğraf galerisi olarak ta kullanılabilir.

    YanıtlaSil
  32. @candgny

    Kodlardaki width: 360px değerini arttırırsanız yan yana gelecek resim sayısı artar ancak temanızdaki sayfa genişliğinin buna müsade etmesi gerek.


    kodlardaki demissiniz ya serdar abi bu kodlar tam olarak nerede bulunuyor yapıstırdığımz kodlarmı ??

    YanıtlaSil
  33. ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 10px;
    width: 360px;
    }

    Koyu yazdığım yer.

    YanıtlaSil
  34. tamam hocam farkettim sonradan çok güzelrde hocam 5 farklı temadda bu kodlar girişteki silderleri kitliyor bunun bir çözümü yokmu ?

    http://milliyetciblog.blogspot.com/#


    jquarryi siliyorum yine olmuyor ne apmalıym ?? tam 5 tane tema denedimhepsinde aynı sorun

    YanıtlaSil
  35. Hem sliderı hem galeriyi aynı sayfada kullanma.

    YanıtlaSil
  36. ilk sayfada galeri yok ama galer iiçin iki farklı sayfa açtım zaten. tam olarak anılyamadım dedeğiniziiz??

    YanıtlaSil
  37. Bu şekilde de çalışmıyorsa başka bir çözüm gelmiyor aklıma.

    YanıtlaSil
  38. Benim blogumda hic animasyonlu eklentiler calismiyor. Bu da olmadi kodlari ekledigim halde, animasyonlu son yazilar da calismadi. Ben yeniyim de acaba yardimci olur musunuz?

    http://eliftenyeye.blogspot.com/

    YanıtlaSil
  39. Tekrar denedim oldu biraz ama bu sefer de yan yana degil alt alta geldi resimler...Tuhaf duruyor eni boyu yok mu bunun ayarlarinda?

    YanıtlaSil
  40. @Elif´ten Ye´ye
    Kodlardaki width değerleriyle oynayın.

    YanıtlaSil
  41. Merhaba, kodları ekledim ve verilen doğrultuda resimleri ekledim. Fakat resimler düzgün bir şekilde sayfada durmuyor. İlgili screen linkte : http://i49.tinypic.com/zisxgy.png

    YanıtlaSil
  42. benim blogumda 300 e yakın resim var. bunu manuel olarak değilde başka bi yol yaok mu?
    blogum: bebekbaby

    YanıtlaSil
  43. güzel kod teşekkürler.

    YanıtlaSil
  44. Hoca bu ne ya , biz kodlardan kaçmak için hazır scriptlere yöleniyoruz , bi photo galeri için bir dünya kod ile uğarşıcaz, wordpress bile pulings ile bunu halletmiş blogger a bak hala nerde

    YanıtlaSil
  45. Serdar Bey, ben Jquery kodlarını eklemeden yaptım yani fareyle resmin üzerine gidince öne doğru gelmesini istemediğim için bu şekilde yaptım. bu şekilde de güzel oldu site daha hızlı açılıyor.
    herhangi bir sorun çıkmaz değil mi?

    YanıtlaSil
  46. @Seslendirme Sanatçıları
    Hayır, hiç bir sorun olmaz.

    YanıtlaSil
  47. hocam resimlerin üzerine tıkladıgımda ne tam ekran oluyor ne de gösterdiğim gösterdiğim resim sayfasına gidiyor. Yardımcı olurmusunuz

    YanıtlaSil
  48. 360 px değerinde (+, - ) ne kadar oynasamda sadece foto geleri sayfasında ki blog sablonum aşağıya kayıyor.Bununla ilgili düzenleyebileceğim yer neresidir, yardımcı olursanız sevinirim.

    http://omerdisdis.blogspot.com/p/blog-page_21.html

    YanıtlaSil
  49. serdar hocam bunu sayfada değilde herhangi bir yazımızda örneğin yeni lumia 2520 tablet modelleri adında bir yazı yazdım bu yazı içerisinde de kullanabilirmiyim.

    http://www.genelsite.org/2013/10/nokia-lumia-2520-ile-tablet-isine-girdi.html

    YanıtlaSil
  50. @Güncel Teknoloji
    Evet, HTML bölümünü yazının içerisine ekleyerek kullanabilirsiniz.

    YanıtlaSil
  51. hocam yazı içerisinde denedim hoş olmadı.kaldırdım blogger galerinin farklı bir versiyonunu gördüm yabancı bir blogger sitesinde onu uygulamaya çalıştım hata veriyor. paylaşım için teşekkür ederim :)

    YanıtlaSil
  52. Serdar hocam ben mi yanlış anlıyorum acaba; küçük resime tıklayınca resim lightbox da açılsın istiyorum. bunun için hem "#" yerine hem de "Resim 1 link" yerine aynı resim url sini koyuyorum. Buna rağmen resimler lightbox da açılmıyor. Cevap yazarsanız teşekkür ederim. sayfa adresim minipaletli.blogspot.com. en üstte gadget olarak ekli.

    YanıtlaSil
  53. @Öncü Hafriyat
    Evet o şekilde olması gerekiyordu. Blogger kumanda panelinde ayarlarda lightbox''ın kapalı olup olmadığına bir bkın, kapalıysa açın.

    YanıtlaSil
  54. neden böle resim görükmüyor yardımcı olur musunuz ?

    http://sncal.blogspot.com.tr/p/sdafas.html#

    YanıtlaSil
  55. Merhaba hocam,

    http://www.laankara.com/2014/08/club-watercity-aqua-park-ankara.html adresine galeriyi ekledim fakat fotoğrafın üzerine gelince büyüme olayını kaldırmak veya galeriyi ortalamak istiyorum.

    Ne yapabilirim ?

    YanıtlaSil
  56. Hocam öncelikle merhabalar,ben size birşey sorcam benim blog sayfam var sayfaya resim yükledim 1.cisi resme facebookta paylaş butonu koymak istiyorum ikincisi facebookta paylasılmıs olan resme tıklandıgında benim sayfama yönlendirilsin. yardımcı olursanız sevinirim.Şimdiden Allah razı olsun.

    YanıtlaSil
  57. http://galeri.mynet.com/guncel
    mynetteki galeri gibi bir galeri sayfası oluşturmak için ne yapabilirim yardımcı olabilirmisiniz

    YanıtlaSil
  58. ben bu html eklemeyi bir türlü beceremiyorum ya

    YanıtlaSil
  59. hocam nasıl yaptığınıza dair bir eğitim videosu çekerseniz daha kalıcı bilgiler vermiş olursunuz malum herkesin bilgisi değişiklik gösterebiliyor.
    şimdiden teşekkürler.

    YanıtlaSil
  60. Hocam merhaba
    Benim blogumda fotoğrafların üzerine tıkladığımda galeri şeklinde açması gereken lightboxu arkaya atıyor arkası siyah oluyor ama fotoğraf büyümüyor? Cssde aradım ama koda dair hiçbir şey bulamadım. bkz: http://www.lilcosef.com

    YanıtlaSil
  61. Sa hocam sıfırdan blog adresi açıyorum yararlı bilgi olmuş ama fotoraflar daha büyük gözükmesini istiyorum ama yapamadım acaba nasıl yapabiliriz bi yardım edin

    YanıtlaSil

Blogger tarafından desteklenmektedir.