16 Mart 2016 Çarşamba

Blogger da Yazı İçi Resim Galerisi Nasıl Oluşturulur ?

Yazı içerisinde fazlasıyla resim olduğu zaman genellikle onların önizlemelerini thumbnail olarak gösterip okuyucuların görüntülemek istediklerini tıklayarak açmalarını sağlamak kimi zaman mantıklı bir çözüm olabiliyor. Yazının resimlerden ötürü uzamasını bir bakıma önlemiş oluyorsunuz. Eğer böyle bir isteğiniz varsa basitçe html tablo yönteminden yararlanarak yazı içi resim galerisi oluşturabilirsiniz.

İki farklı şekilde yazılarınıza resim galerisi nasıl ekleyebilirsiniz ondan bahsedeceğim. Birincisi daha basit ve tablo yöntemi kullnılarak hazırlanmış bir yapı olacak diğeri ise biraz daha zenginleştirilmiş daha çekici hale getirilmiş bir şekilde olacak.

1 – Sıradan tablo yöntemiyle ekleme

Aşağıdaki kodlar toplamda 4 resim thumbnail ekleme durumu için ayarlanmış, basitçe resim url si, açıklaması ve resme tıklanacağı zaman gideceği adres düzenlenerek yapılacak.

Tamamen html içerikli olduğu için isterseniz gadget ekleme yaparak da blogunuza ekleyebilirsiniz isterseniz yazınızı yazarken html moduna geçerek de ekleme yapabilirsiniz.


açıklama

açıklama

açıklama

açıklama

Eklemeniz gereken kod:

<table cellpadding="3">
<tbody>
<tr>
<td width="25%" align="center"><a href="blog_adresi" target="_blank"><img src="resim_linki" width="140" height="140"><br>açıklama</a></td>
<td width="25%" align="center"><a href="blog_adresi" target="_blank"><img src="resim_linki" width="140" height="140"><br>açıklama</a></td>
<td width="25%" align="center"><a href="blog_adresi" target="_blank"><img src="resim_linki" width="140" height="140"><br>açıklama</a></td>
<td width="25%" align="center"><a href="blog_adresi" target="_blank"><img src="resim_linki" width="140" height="140"><br>açıklama</a></td></tr></tbody></table>

Kodların mantığı ise şu şekilde :

Ekleyeceğiniz alanın genişliği 4 resim olduğu için %25 lik olarak her bir birim boyutlandırıldı. Eğer siz 3 resim ekleyecekseniz bu genişliği %33 olarak ayarlamalısınız.

2 – CSS3 ile düzenlenmiş yöntem ile ekleme

Bu yöntem biraz daha gelişmiş ve efekt verilerek oluşturulmuştur. CSS3 kullanılarak hover efekti verilmiştir.

Görünüm aşağıda. Yine yukarıdaki kodlara benzer şekilde

  • Resim url si
  • Yazı başlığı
  • Yazı açıklaması
  • Blog adresi

Öğelerini tamamlamalısınız.

Eklemeniz gereken kodları aşağıdaki linkten ulaşabilirsiniz. Yazı daha fazla uzamasın diye ayrı bir dosya içerisinde göstermek istedim :

Kodlar

Son Sözler

İki farklı şekilde yazı içi resim galerisi nasıl eklenir onu sizlerle paylaştım. Biraz html-css bilgisiyle kodları kendinize göre düzenleyebilir ve farklı şekilde galeriler oluşturabilirsiniz. Elbette biraz da javascript kodlar ekleyerek daha farklı galeriler oluşturmak mümkün fakat ben şimdilik html-CSS ile sınırlandırmak istedim.

4 yorum

Blogger da yazı içi resim galerisi insanların ilgisini çeken ve sayfa da kullanıcıların daha uzun durmasını sağlıyor. Alexa için bu tür küçük taktikler ve içerikler websitenin kalitesini arttıran etkenler. :)

Poyraz hocam yazı için teşekkürler. Sitenizi yer imlerine ekledim, devamlı girerek yeni yazıları okuyacağım.

Teşekkür ederim :) Takipte kalın, çok daha faydalı yazılar yayınlayacağım.

Blogger kullanıcıları için resim galerisi konusu önemli bir konu, ders niteliğinde olmuş teşekkürler. :)

Konu ile alakalı yorum gönderirseniz sevinirim. Yazı hakkındaki görüşleriniz sizden sonrakiler için önemli olacaktır.
EmoticonEmoticon