Blogger Thumbnail - Öne Çıkan Resim Alanı Nasıl Oluşturulur ?

Blogger'da WordPress'de olduğu gibi öne çıkarılmış resim/görsel özelliği bulunmakta fakat blogger'da kullanım tarzı biraz farklı. Yazının devamında paylaşmış olduğum ilk kod parçacığı sayesinde yazının herhangi bir bölümüne, özellikle yazı-başlık üstüne eklenerek kullanılabilir.

Öne çıkarılmış resim özelliği her yazıya eklenmiş ilk görseli (bu görsel ilk parağraf sonrası, yazı ortası veya yazı sonunda da olabilir) yazı öncesinde sabit olarak göstermeye yarıyor.

Benim paylaştığım kodlar diğer sitelerde paylaşılan kodlara göre biraz farklılık göstermekte. Bu farklılık eğer yazıya hiç görsel eklenmemişse yazı önünde hiç görsel gösterilmiyor. Normalde görsel yok, görsel eklenmemiş gibi boş resimler eklenebiliyor fakat ben görüntü kirliği yaptığı için bu kısmı kaldırdım.

Yazı başlığı önüne sağına veya soluna aşağıdaki kod eklenilir
<b:if cond='data:post.thumbnailUrl'>
<b:if cond='data:blog.pageType == "index"'>
<a class='postimg' expr:href='data:post.url'>
<img alt='thumbnail' class='post-img' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
</a>
</b:if>
<b:else/>
<!-- burası boş kalacak -->     
</b:if>

CSS ile düzenleme yapmak için
.postimg img{/*float:left; gibi*/}

Eğer görseller büyük halde, şuan benim kullanmış olduğum gibi gösterilecek ise </body> öncesine aşağıdaki javascript kodları eklenir ve css ile height ve width değerleri verilir.
<script type='text/javascript'>
$(document).ready(function() {$('.postimg img').attr('src', function(i, src) {return src.replace( 's72-c', 's1600' );});});
</script>


Yorumlar

Son Yorumlar

İzleme/Abonelik

Son içeriklerden haberdar olmak için isterseniz bloğumu izlemeye alabilir veya e-posta adresinizle abone olabilirsiniz.
*Uyarı e-posta adresinizi kayıt ettikten sonra e-posta adresinize gelen aktivasyon işlemini tamamlamayı unutmayın.