HTML Notlarım

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:

Blogger Resim Galerisi Ekle

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

0 Comments:

Yorum Gönder

Gündem

Tüm Hakları Saklıdır

Çerezler hakkında

Son yazılar

Bunları okudunuz mu?