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
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


<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.

Yorumlar

Blogger: 19
  1. Blogger hakkında çok bilinmeyenler var faydalı bir yazı olmuş teşekkürler Semih

    YanıtlaSil
    Yanıtlar
    1. Evet daha bilmediğimiz yararlı olabilecek bir sürü bilgilerin olabileceğini düşünüyorum. Karşılaştıkça blogumdan bu bilgileri aktaracağım.

      Sil
  2. Çok güzel bir konuya değinmişsin semih... buna fotoğrafı ortalayıp küçük fotoğrafları da iki yana yaslayabilirsek bunu kullanmak istiyorum... teşekkür ederim...

    YanıtlaSil
    Yanıtlar
    1. Ne yazık ki sadece ilk görseli göstermek için yazılmış bir kod. Eğer dediğiniz türde karşılaşırsam haber veririm.

      Sil
    2. Tamandır... teşekkür ederim...

      Sil
  3. Faydalı oldu semih tesekkurler

    YanıtlaSil
  4. Teşekkürler Semih kardeşim. Blogger'da görsel meselesi gerçekten önemli. Yeni bilgiler olursa takibimi sürdüreceğim :)

    YanıtlaSil
    Yanıtlar
    1. Daha sonra paylaşmak üzere onlarca Blogger ile ilgili farklı bilgiler kaydettim. Fırsatım oldukça düzenli olarak paylaşacağım.

      Sil
  5. Güzel yazı olmuş. Bu bloglar için mobil telefonlar entegrasyonu içinde bilgin varsa bir yazı beklerim. Benim blogumda da benzer bir sıkıntı var. Site hızım çok düşük.

    YanıtlaSil
    Yanıtlar
    1. Lazy load eklentisi, kullandığınız görseli sıkıştırma ve reklam sayısını azaltma işlemlerini yaparak site hızınızı yükseltebilirsiniz. Farklı alternatiflerle karşılaştığımda bir yazıda hepsini toplarım.

      Sil
    2. Teşekkür ederim bunun bloga entegresini nasıl olacağını anlatan bir yazı yazabilkirsen güzel olur. Bu javascript sıkıştırması aslında biraz yoruyor siteyi güzel bir yazı bekleriz. :)

      Sil
    3. Tabii ki. Uygun bir vakitte konu ile ilgili detaylı bir yazı paylaşabilirim.

      Sil
  6. Bilgilendirme için teşekkür ederim :)

    YanıtlaSil
  7. bir çok farklı temalarda denedim ama hiçbirinde çalışmadı.

    YanıtlaSil
    Yanıtlar
    1. Bende çalışıyor?Aynı tasarım hem de :)

      Sil
    2. Kodları doğru yere yapıştırdığınızdan emin misiniz?

      Sil
  8. Bu yorum yazar tarafından silindi.

    YanıtlaSil

Ad

1. Cilt,1,100,1,1080P,1,11.22.63,1,12 Kızgın Adam,1,2018,1,4. Sezon,1,44. Çocuk,1,A Thousand Kisses Deep,1,Aksiyon Filmleri,3,Alcatraz'dan Kaçış,1,Alexa,2,Amelie,1,Analiz,1,Android,14,Android Haberleri,1,Android İpuçları,2,Android Uygulamaları,10,Animasyonlu İndirme Butonu,1,Anket,1,Antonio Banderas,1,Antremanlarla Matematik,1,Apk,2,Apk İndir,2,Arama Açıklaması,1,Arama Motorları,1,Araştırma,1,Arı,1,Ayrton Senna,1,Bana Dair,76,Base,1,Başarı,1,Başlık Efekt,1,Blog,2,Blog Keşif Etkinliği,1,Blog Nasıl Açılır?,1,Blogger,58,Blogger Eklentileri,18,Blogger Eklentisi,1,blogger haberleri,1,Blogger İpuçları,18,Blogger İstatistikler Widget'ı,1,Blogger Nedir,1,Blogger Sayfa Kaydırma Efekti,1,Blogger Sorunları,1,Blogger Tavsiyeleri,1,Blogger Temaları,6,Blogger Widget'ları,7,Blogger Yedekleme,1,Boks,1,Buton,2,camera,1,Can Dostum,1,Checker Gmail,1,Child 44,1,Chroma Keyboard,1,Cillian Murphy,1,Clev Note,1,CSS,2,Deadpool,1,Deadpool İndir,1,Diğer Kategoriler,10,Dinlediklerim,5,Dives İkon,1,Dizi,1,Dizi Replikleri,1,Drama Filmleri,3,Drop Caps,1,Duvar Kağıtları,1,Düşünce,1,Editörün Seçtikleri,4,Eklenti,2,Elementary,1,Etkileşim,1,Etkinlik,1,exi2.net,1,Fabrizio De André,1,Facebook,1,Film,6,Film İncelemesi,1,Film Puanlama,1,Film Replikleri,2,Filmler,6,First Character,1,First Letter,1,Flat İcon,1,Font,1,Forever,1,Formula 1,1,Forrest Gump,2,Frank Sinatra,1,Fringe,3,Galeri,5,Gary Oldman,1,Geçmişin Gölgesinde,2,Gerilim Filmleri,2,GetSiteControl,2,Google,2,Google Chrome,2,Google Fonts,1,Google Friend Connect,1,Google Plus,1,Google+,1,Google+ Toplulukları,1,Görsel,2,Guadalupe Pineda,1,Hayal Gücü Yüksek Sorular,1,Hayat ve Düşünce,1,Historia De Un Amor,1,HTML,2,Hugh Jackman,1,Instagram,1,Intoucheables,1,İcon,1,İkon Paketleri,1,İndex,1,İndir,4,İndirme Butonu,1,İnfografik,1,İstatistikler,1,İzlediklerim,20,Kalıcı Bağlantı,1,Kaliteli Blogger Eklentileri,1,Kaptan Amerika Kahramanların Savaşı,1,Kim Bu Semih,1,Kimdir,1,Kingsman: Gizli Servis,1,Kişisel Blog,9,Kişisel Yazılar,43,Kitap,1,Kullandıklarım,5,Launcher,1,Leonard Cohen,1,Logan,1,Logo Efekt,1,Lost in Translation,1,Material,2,Material Design,3,MeloCloud+ Music Player,1,Meta Açıklaması,1,Mijia Quartz Watch,1,Mim,10,Minimal Design,1,Mobil,2,Mobil Uyumlu Blogger Temaları,1,Muhammad Ali,1,Muhammad Ali Sözleri,1,Muhammad Ali'nin Hayatı,1,Müzik,7,Müzisyen,1,Nah Neh Nah,1,Nasıl Yapılır,5,Nasıl Yapılır?,3,Nedir,3,OGInstagram,1,Okuduklarım,2,Osmia Avosetta,1,Önemi,1,Öp Evlen Uçurumdan At,1,Özel Başlık Etiketleri,1,Paris'te Gece Yarısı,1,Paylaşım,1,PC,2,PC Uygulamaları,1,Peaky Blinders,2,Peppino Gagliardi,1,Pocket,1,Popüler Yayınlar,1,Radiogram,1,Radyo,1,Renato Carosone,1,Replikler,2,Repo Men,1,Resim ve Video,1,Resimli İndirme Butonu,1,Responsive,2,Robots txt,1,Rodrigo Amarante,1,Romantik Filmler,1,Root,2,Satın Aldıklarım,1,Schindler'in Listesi,2,Scroll Smooth,1,SEO,3,SEO Ayarları,1,Shareaholic,1,Shareit,2,Sherlock,3,Sherlock Holmes,1,Sıralama,1,Sinema,1,Site Haritası,1,Social Meter,1,Sosyal Medya,2,Soundcloud,1,Sözler,1,Spor,1,Sting,1,Tasarım,1,Tavsiyelerim,1,Teknoloji,1,Tema,1,Template Clue,1,The Blacklist,1,The Mentalist,2,The Mentalist Replikleri,1,The Pianist,1,Tom Hardy,2,Tozlu ve Yıkık Blog,1,True Detective,2,Tuyo,1,TVShow Time,2,Uygulama,1,Ücretsiz İkon,1,Üst Sıralara Çıkmak,1,Vaya Con Dios,1,Video,2,Videolar,1,Website,1,WhatFont,1,Woorank,1,Word Count,1,Wordpress,1,Xiaomi,1,Yabancı Diziler,9,Yabancı Radyo,1,Yardımlaşma,1,Yayın Ayarları,1,Yaz Tatili,1,Yazar Olmak,1,Yazı,2,Yazı Kutusu,1,Yazı Yazmak,1,Yıl Dönümü,1,Yıldız Sıralamalı,1,Yıldızlararası,1,Youtube,1,Ziyaretçi Trafiği,1,
ltr
item
Semih Keçecioğlu - Kişisel Blog: Blogger'da Yazı Görselini Başlıktan Önce Gösterme
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ı.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyA7ChqT-h9j7Prgyuo4Jioq_jleSGXC4iL1KITaObaXxRfc_G85uDwLDmRP_ljB9b5SKBA8BxOYC527uTboyRgS5lBCM7NyNotsS3G2UMO3JFDM816k26HIT1BTucuzXRQ426GKgLE3U/s640/Blogger%2527da+Yaz%25C4%25B1+G%25C3%25B6rselini+Ba%25C5%259Fl%25C4%25B1ktan+%25C3%2596nce+G%25C3%25B6sterme.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyA7ChqT-h9j7Prgyuo4Jioq_jleSGXC4iL1KITaObaXxRfc_G85uDwLDmRP_ljB9b5SKBA8BxOYC527uTboyRgS5lBCM7NyNotsS3G2UMO3JFDM816k26HIT1BTucuzXRQ426GKgLE3U/s72-c/Blogger%2527da+Yaz%25C4%25B1+G%25C3%25B6rselini+Ba%25C5%259Fl%25C4%25B1ktan+%25C3%2596nce+G%25C3%25B6sterme.png
Semih Keçecioğlu - Kişisel Blog
https://semihkececioglu.blogspot.com/2019/01/bloggerda-yazi-gorselini-basliktan-once-gosterme.html
https://semihkececioglu.blogspot.com/
https://semihkececioglu.blogspot.com/
https://semihkececioglu.blogspot.com/2019/01/bloggerda-yazi-gorselini-basliktan-once-gosterme.html
true
3247702708061337910
UTF-8
Tüm yazılar yüklendi. Hiçbir yazı bulunamadı. Tümünü Gör Devamını Oku Yanıtla Yanıtlamaktan Vazgeç Sil Yazan: Ana Sayfa Sayfalar Yazılar Tümünü Gör BENZER YAZILAR Etiket Arşiv Ara Tüm Yazılar Bulunamadı Geri Ana Sayfa Pazar Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Paz Pzt Sal Çar Per Cum Cmt Ocak Şubat Mart Nisas Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık Oca Şub Mar Nis Mayıs Haz Tem Ağu Eyl Eki Kas Ara şimdi 1 dakika önce $$1$$ minutes ago 1 saat önce $$1$$ hours ago Dün $$1$$ days ago $$1$$ weeks ago 5 haftadan uzun bir süre önce Takipçiler Takip Et Premium STEP 1: Share to a social network STEP 2: Click the link on your social network Tüm kodları kopyala Tüm kodları seç Tüm kodlar kopyalandı Çalışmazsa CTRL+C kombinasyonunu kullan Table of Content