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>