Sitene Kod Ekle | Blogger Eklentileri

Written By Yazarlife on 10 Temmuz 2019 Çarşamba | Temmuz 10, 2019

Sponsor Siteler* Güncel Blog Yazıları ( Blog Radikal )
* Geniş Kod Arşivi ( Sitene Kod Ekle )
* Şarkı Sözleri ( Sitene Yazılar )
* Deneme Yazıları ( Yazar Edebiyat )
* Sağlık, Moda, Kadın Yazıları ( Yazar Haberi )

Blogger sayfalarınıza birden fazla açıklamalı resim eklerken, hem sayfanız da çok yer kaplar hem de alt alta sıralanıp, çirkin bir görüntü oluşturur. İşte sizi bu dertetn kurtaracak Blogger resim galerisi eklentisi paylaşacağım. Basit bir kullanımı olan bu kod, resimlerinizi yayınlarken, resim altına bir kaç satır açıklama eklemenize ve resmin üzreine tıklandığında o konuyla ilgili konu ayrı bir sayfada açılmaktadır. İsteğe göre bu sayfa linklerini iptal edip, sadece resimleri yayınlayabilrsiniz. İstediğniz kadar resim ekleyebilir ve açıklama kısmına resimler hakkında yazılarınzı paylaşabilirsiniz.

* Kodun içinde değişmesi gerekenler

<a href="foto linki" target="_blank">

* İsteğe bağlı olarak Foto linki yazan yere hangi sayfanızın açılmasını istiyorsanız o linki yazın veya boş bırakın,

src="https://c.pxhere.com/images/8f/84/56f8f3dc3b01a3155708f0629841-1435541.jpg!s"

* Bu kısma gözükmesini istediğiniz resim linkinizi yazınız,

* Diğer bir husus bu resim galerisine istediğiniz kadar resim ekleyebilirsiniz bunun için de şu kodları çoğaltıp, yapıştırın

<div class="gallery">
<a href="foto linki" target="_blank">
<img alt="Fjords" height="200" src="https://c.pxhere.com/images/8f/84/56f8f3dc3b01a3155708f0629841-1435541.jpg!s" width="300" />
</a>
<div class="desc">
Açıklama</div>
</div>

<head>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 175px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
  <a href="foto linki" target="_blank">
    <img alt="Fjords" height="200" src="https://c.pxhere.com/images/8f/84/56f8f3dc3b01a3155708f0629841-1435541.jpg!s" width="300" />
  </a>
  <div class="desc">
Açıklama</div>
</div>
<div class="gallery">
  <a href="foto linki" target="_blank">
    <img alt="Forest" height="200" src="https://c.pxhere.com/images/5a/ba/f1d1fe89d7e8ce249c52af4a0792-1456461.jpg!s" width="300" />
  </a>
  <div class="desc">
Açıklama</div>
</div>
<div class="gallery">
  <a href="foto linki" target="_blank">
    <img alt="Fjords" height="200" src="https://c.pxhere.com/images/f0/e4/54ca0e565e6050325ad042c9b9f3-1435025.jpg!s" width="300" />
  </a>
  <div class="desc">
Açıklama</div>
</div>
<div class="gallery">
  <a href="foto linki" target="_blank">
    <img alt="Forest" height="200" src="https://c.pxhere.com/images/76/39/81be3688ef1678cc86c08ab5ef82-1451255.jpg!s" width="300" />
  </a>
  <div class="desc">
Açıklama</div>
</div>
<div class="gallery">
  <a href="foto linki" target="_blank">
    <img alt="Fjords" height="200" src="https://c.pxhere.com/images/bf/3e/15fe0b8a7410311ad3059dc901ee-1436615.jpg!s" width="300" />
  </a>
  <div class="desc">
Açıklama</div>
</div>
<div class="gallery">
  <a href="foto linki" target="_blank">
    <img alt="Fjords" height="200" src="https://c.pxhere.com/images/44/91/d000584d06efb3c38b5660d83de2-1439579.jpg!s" width="300" />
  </a>
  <div class="desc">
Açıklama</div>
</div>
</body>
</html>

Örnek Resim:

* Sayfa Yazarı: Murat Marti 
* Diğer Kaynaklar: GEMİNİ - Google Yapay Zeka. CHATGPT - Copilot
* Fotoğraflar: Pixabay ve Pexels Ücretsiz Fotoraflardan Alınmıştır...

NOT: Sitede çalışmayan kodları, o yazının altında ki yorum kutusundan bize yazınız.