Blogger’da resimli benzer yazılar eklentisi yapmak için aşağıdaki adımları izleyebilirsiniz:

Blogger Resimli Benzer Yazılar Eklentisi Nasıl Yapılır?

Öncelikle, benzer yazılarınızın altında göstermek istediğiniz resimlerin olduğu bir klasör oluşturun ve bu klasöre resimlerinizi yükleyin.

Daha sonra, Blogger hesabınıza giriş yapın ve “Tema” bölümüne girin.

Temanızı düzenleyin ve benzer yazılar bölümünü eklemek istediğiniz yere gelin. Bu bölümün adı farklı temalarda değişebilir, ancak genellikle “Benzer Yazılar” ya da “İlgili Yazılar” olarak adlandırılır.

Benzer yazılar bölümünü ekledikten sonra, HTML kodunu düzenlemek için “Düzenle” seçeneğine tıklayın.

HTML kodunun içinde, benzer yazılar bölümünü gösteren kodları arayın. Bu kodlar genellikle “<b:if cond=’data:post.labels’…” şeklinde başlar.

Kodlar arasına, aşağıdaki kodları ekleyin:

php

<div class="benzer-yazilar">
  <h3>Benzer Yazılar</h3>
  <ul>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
        <b:if cond='data:post.labels intersect data:labels'>
          <li>
            <a expr:href='data:post.url'>
              <img expr:src='data:post.featuredImage' />
              <span expr:title='data:post.title'><data:post.title/></span>
            </a>
          </li>
        </b:if>
      </b:if>
    </b:loop>
  </ul>
</div>
Kodu ekledikten sonra, “Kaydet” düğmesine tıklayarak değişiklikleri kaydedin.
En son olarak, “Stil” bölümüne girin ve aşağıdaki CSS kodlarını ekleyin:
css
.benzer-yazilar {
  margin-top: 20px;
}
.benzer-yazilar h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.benzer-yazilar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.benzer-yazilar li {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
  width: 150px;
}
.benzer-yazilar img {
  display: block;
  height: 100px;
  margin-bottom: 5px;
  width: 150px;
}
.benzer-yazilar span {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Bu CSS kodları, benzer yazılar bölümünün görünümünü ayarlar.
Kaydet
eklentinin görüntülenmesini istediğiniz konumda aşağıdaki kodu eklemeniz gerekiyor:
html
<b:if cond='data:post.showaddelement == "true"'>
  <b:include data='post' name='post-image-articles'/>
</b:if>
Bu kod, eklentinin sadece belirli yazılarda görüntülenmesini sağlamak için bir koşul içerir. Eklentinin her yazıda görüntülenmesini istiyorsanız, yukarıdaki kodu şu şekilde değiştirebilirsiniz:
html
<b:include data='post' name='post-image-articles'/>
Bu işlemden sonra, eklentinin nasıl göründüğünü değiştirmek isterseniz, CSS kodu kullanabilirsiniz. Örneğin, aşağıdaki kod, eklentinin resim boyutlarını ayarlar:
css
.post-image-articles {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
}
Bu kod, eklentinin genişliğini en fazla 600 piksel olarak ayarlar ve resmin merkezlenmesini sağlar.
Bununla birlikte, eklentinin tasarımını değiştirmek için daha fazla CSS kodu kullanabilirsiniz. Örneğin, metin boyutlarını, renklerini, arka plan rengini vb. değiştirebilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir