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.

Yazı başlığı

Açıklama

Yazı başlığı

Açıklama

Yazı başlığı

Açıklama

Yazı başlığı

Açıklama

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.