Blogger’da resimli benzer yazılar eklentisi yapmak için aşağıdaki adımları izleyebilirsiniz:
Ö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>
.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;
}
<b:if cond='data:post.showaddelement == "true"'>
<b:include data='post' name='post-image-articles'/>
</b:if>
<b:include data='post' name='post-image-articles'/>
.post-image-articles {
width: 100%;
max-width: 600px;
height: auto;
margin: 0 auto;
}