Blogger'da Yazı Görselini Başlıktan Önce Gösterme

Blogger'da yazı görselinin başlıktan önce javascrip kodu ile nasıl gösterileceğini anlatan bir bilgilendirme yazısı.

Blogger'da yazı görselini başlıktan önce gösterme konusunu birçok blog yazarının araştırdığını düşündüğüm ve pek bir sonuç alınmadığından dolayı paylaşma  gereği duydum. Çok önemli bir detay olmasa da kendimce görsellik adına ekstra bir özellik ve farklılık katıyor. 

Görseller sayesinde yazı hakkında ziyaretçiler yazınızı okumadan birçok bilgi elde edebilir. Bir özet niteliğindedir ve bu görselleri yazınızdan ayrı olarak ziyaretçiye sunabilirsiniz. Bunun dışında bir şey yok. Ön izlemek için okuduğunuz bu yazımın en üstüne bakabilirsiniz.

Yazı Görselini Başlıktan Önce Gösterme

---

JS<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
 // the order goes container -> body -> surround -> image
 var body = $('.post-body').first();
 var container = $(body).parent();
 var image = $(body).find('img').first();
 var surround = $(image).parent();
 $(surround).prependTo(container);
});
//]]></script>
</b:if>

• Blogger panelinden Tema ardından HTML'yi düzenle seçeneklerine tıklayın.
• Kodların bulunduğu ekrana bir kez tıklayın ve CTRL+F tuşuna tıklayın.
• Arama kısmına </body> yazın ve Enter tuşuna tıklayın.
• </body> kodunun bir üst satırına yukarıda paylaşmış olduğum JS kodlarını yapıştırın.
• Son olarak kaydedip görüntüleyebilirsiniz.

Bu işlemlerle birlikte blogunuzda bulunan tüm yazılarınızdaki ana görselin başlıklardan önce görüntülenmesini sağlayabilirsiniz.