Blogger için resimli otomatik devamını oku bağlantısı

Blog’unuzda düzenli bir ana sayfa için yazılarınızı kısaltarak devamını oku(read more) şeklinde yayınlamak isterseniz daha önce sizlerle paylaştığımız yöntemi kullanarak yazılarınızı istediğiniz yerden kısaltarak yayınlayabiliyordunuz.

.How-to-create-read-more-in-blogspot

 

Fakat yazıların ana sayfanızda otomatik olarak kısaltılıp yazıya eklediğiniz görsellerinde aynı ebatlarda gösterilmesini isterseniz, şablonunuza ekleyeceğiniz küçük bir javascrip kodu sayesinde bu işlemi zahmetsizce yerine getirebilirsiniz.

Kodu şablonunuza eklemek için aşağıdaki adımları takip etmeniz yeterli.         

         
Sırası ile  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle➜Devam yolunu takip ederek blog’unuzun kodlarının açık halde bulunduğu modüle gidin.

 

Yapacağımız işlemlere başlamadan önce Yedekle/Geri yükle yazan butona basarak kullanmakta olduğunuz blog şablonunu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri kolayca geri alabilirsiniz.

       
“Widget şablonlarını genişlet” yazan kutucuğu işaretledikten sonra, bilgisayarınızın  klavyesinde bulunan ctrl + f tuşuna aynı anda basarak açılan arama formunda aşağıdaki kodu aratın

 

 </head>  

bulduğunuz </head> kodun hemen üstüne gelecek şekilde aşağıdaki kodları ekleyin.

<script type='text/javascript'> var thumbnail_mode = "yes";

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>


2.Adım aşağıdaki kodu bulun

 <data:post.body/> 

Bulduğunuz bu kodu silip yerine aşağıdaki kodları ekleyin (<data:post.body/> şablonlarda iki adet olabiliyor sonuçlarda çıkan ilk kodun yerine) ve kaydedin.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku ...</a>
</b:if>
</b:if>


Tüm işlemleri doğru yaptıysanız eklentiniz sorunsuz çalışacaktır.

 

Eklentiyi özelleştirin.

Eklentiyi ekledikten sonra tasarımınıza uygun şeklide alıntı yapılacak yazının uzunluğu veya gösterilecek resmin ebatlarını belirleyebilirsiniz.

1. Görselelerin ebatını ve alınıtnın uzunluğunu belirleyin.
Birinci adımda eklediğiniz aşağıdaki satırları bulun.

var thumbnail_mode = "yes"; //burada ki “yes” resim gösterileceğini belirtir, oraya “no” diye yazarsanız yapılacak alıntıda resim gösterilmez.
summary_noimg = 430; //alıntı yapılacak yazıda resim yoksa alıntının uzunluğunu belirler.
summary_img = 340; //alıntı yapılacak yazıda resim varsa alıntının uzunluğunu belirler.
img_thumb_height = 200; //gösterilecek resmin yüksekliği.
img_thumb_width = 200; //gösterilecek resmin uzunluğu.


2. Devamını oku yazısını özelleştirin.

Bildiğiniz gibi eklentiyi şablonunuza ekledikten sonra ana sayfada yazıları kısaltarak yazını tamamı için devamını oku şeklinde bir bağlantı oluşturacaktır, eğer siz isterseniz şablonunuza ekleyeceğiniz bir kaç parça CSS kodu sayesinde devamını oku yazan bölümü kendinize göre özelleştirebilirsiniz bunu yapabilmek içinde aşağıdaki adıları takip edebilirsiniz.

 

aşağıdaki kodları kopyaladıktan sonra ]]></b:skin> etiketini bulup hemen üstüne gelecek şekilde şablonunuza ekleyin.

 

.more{

float:right;

color:#000;

font-size:13px;

}

 

float:right; devamını oku yazan bağlantını sağda gösterilmesini sağlıyor siz burayı float:left; diye değiştirirseniz bağlantı solda görüntülenir.

 

color:#000; bağlantının renginin siyah olduğunu  belirtiyor, rengini değiştirmek isterseniz buradaki yardım notunda on altılık renk kodlarından her hangi birisini kullanabilirsiniz.

 

font-size:13px; bağlantının font büyüklüğünü belirler siz buradaki 13px değeri ile oynayarak fontun büyüklüğünü kendinize göre ayarlayabilirsiniz.

Paylaş !

52 yorum:

  1. Bu şekilde kullanarak düzen yaratmak bence en iyisi. Çünkü her yazıda kesilecek yerleri ayarlamak, resimleri düzenlemek v.s. uğraş gerektirir.

    Seo için de iyi olduğunu okumuştum.

    YanıtlaSil
  2. Yanıtlar
    1. neyi bulamadığınızı yazarsaznız yazrdımcı olmaya çalışırım, eklentiyi şablonunuza eklemişsiniz ve çalışıyor sanırım bulamadığınız ]]></b:skin> etiketi.

      bu etikette bazı şablonlarda değişebiliyor sadece /b:skin diye aratırsanız kodu bulabilirsiniz.

      Sil
  3. merhaba ben ana sayfamda kisaltmalari yaptim.Problemim feedburner araciliyla gelen yeni yayin bilgilendirmesinde yazim oldugu gibi email ediliyor.Nasil kisaltma yapabilirim?

    YanıtlaSil
    Yanıtlar
    1. merhaba ..
      blogger kumandapaneli --> ayarlar --> diğer yolunu takip ederek site içerik takibi bölümünde bulunan seçeneklerde Blog Kayıtları İçerik Takibi yazan bölümü Atlama Aralığına Kadar olarak işaretlerseniz yazılarınız rss(feedburner)takibinde ve mail olarak giden bildirimlerde yazıları devamını oku olarak kestiğiniz bölümlere kadar görüntülenir.

      Sil
  4. Süpersiniz çok teşekkür ederım.Buarada anlatımlarınız çok güzel ve faydalı,sitenizden çok yararlandım.Bukadar kısa zamanda cevap verdiğiniz için de ayrıcana teşekkür ederim.

    YanıtlaSil
  5. MErhaba ben kodunu bulamadım ctrl/ f ile aratıgım halde nasıl yardımcı olabilirsiniz

    YanıtlaSil
    Yanıtlar
    1. “Widget şablonlarını genişlet” yazan kutucuğun işaretli olduğundan emin olun

      Sil
  6. Ben aynen bu şekilde düzenledim ancak bu sefer sayfada alt alta iki read more çıktı (önceden default olan gitmedi) bunu nasıl çözebilirim?

    Detaylı anlatım için çok teşekkürler bu arada gerçekten çok faydalı oluyor :)

    YanıtlaSil
    Yanıtlar
    1. daha önce yazılarını burdan kes şeklinde kısaltığın için iki devamını oku(read more) bağlantısı çıkıyor ..

      çözümse 2.adımda eklediğin kodların bulunduğu bölümde(hemen altında olacak) aşağıda bulunan kod bloguna benzer kodlar olacak,

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
      </b:if>


      bu kodları silersen bağlantılardan biri görünmeyecektir.

      ayrıca blogunun tasarımı sade ve hoş en tepeye arkaplanı siyah tonlarında (hakkımda iletişim gibi bağlantıların bulunduğu)bir menü eklersen hem tasarım hemde işlevsellik olarak blogunu biraz daha gelişterebilirsin..


      yukarıdaki işlemi yapamazsan bu tayfun@bloggermodifiye.com e-posta adresinden şablonunu bana yollarsan ben düzenler ve tasarım konusunda da yardımcı olurum..

      Sil
    2. Merhaba Tayfun, bloguma bahsettiğin gibi bir tab menüsü eklemek istiyorum. Bununla ilgili olarak tayfun@gmail.com'a mail attım yardımcı olabilirsen çok sevinirim :)

      Sil
    3. maili bana ulaşmadı yani o e-posta adresi benim değil tayfun@bloggermodifiye.com adresine yollarsan bana gelir.

      Sil
  7. Süpersiniz! :) hızlı dönüşünüz için çok teşekkür ederim. Dediğiniz gibi yapınca oldu ancak şimdi bir postta read more siyah diğerinde gri çıkıyor, bunu da zahmet olmazsa nasıl düzeltebileceğim konusunda yardımcı olursanız çok sevinirim :)

    YanıtlaSil
    Yanıtlar
    1. bunun sebebini açıklarsam daha iyi anlarsın diyelimki sen bir yazıyı okumak için readmore bağlantısına tıkladın, bir dahaki sefere bloga girdiğinde o bağlantı gri olarak görnr okumadığın yanı tıklamadığın bağlantılarsa siyah...

      bağlantının gri yerine siyah görünmesini istersen HTML'yi düzenle sayfasına girdiğinde ctrl ve f tuşlarına basıp şu color:#999999; kodları arat bulduğun ilk kodu silip yerine bunu color:#000; yapıştır.

      böylece tüm bağlantılar siyah görnür.

      Sil
  8. Çok teşekkür ederim yardımlarınız için! :)

    YanıtlaSil
  9. Merhaba Tayfun. Bloguma bakarsan eğer "devamını oku" eklentisi olduğunu fark edeceksin. Ben sana şunu sormak istiyorum: Gönderen, sosyal ağ paylaş butonları, etiketler kısmını "devamını oku"ya tıkladıktan sonra gözükmesini nasıl sağlayabilirim? Yani ana sayfada gözükmesini istemiyorum, yazıya tıkladıktan sonra yazının altında gözüksün. Şimdiden teşekkürler ve Blogger yardım forumundaki soruma verdiğin cevaba blogumda cevap yazdım, oraya da bakarsan sevinirim :)

    YanıtlaSil
    Yanıtlar
    1. yapmak istediğin değişiklikleri buradan anlatamam zor bu tayfun@gmail.com e-posta adresine şablonunu yolla, vakit bulduğumda düzenlemeleri yapar sana geri yollarım..

      Sil
  10. paylaşımlarınız süper ama bişey soracağım. ben kısaltılmış ( devamını oku)kısımlara kadar gözüken yazıların "justify" olmasını istiyorum ama inceledim neresini değiştireceğimi bulamadım. yardımcı olabilir misiniz?

    YanıtlaSil
    Yanıtlar

    1. .post-body{
      text-align:justify;
      text-justify:inter-word;

      }

      Yukarıdaki kodları kopyaladıktan sonra ]]></b:skin> etiketini bulup hemen üstüne gelecek şekilde şablonunuza ekleyin.


      Bu post bölümünün yani yazıların geldiği bölümün metinlerinin sağa ve sola yaslayarak görünmesini sağlar.

      Sil
  11. teşekkürler:) işimi gördü:)

    YanıtlaSil
  12. Tayfun bey, sizin bu yazınızı okumadan önce devamını oku yazısını kayıt yayınlama sırasında eklemiştim. Fakat şimdi sizin verdiğiniz kodları giriyorum ama devamını oku yazısının ne boyutu ne başka birşeyi değişmiyor nedeni ne olabilir?

    YanıtlaSil
    Yanıtlar
    1. Simge hanım 2.adımda verdiğim kodu ya yanlış eklediniz yada hiç eklememiş olabilirsiniz, şablonunuzu tekrar kontrol ederseniz sorunu anlamış oluruz.

      Sil
  13. Otomatik kesme işlemini yapıyordu şimdi yapmıyor tamam manuel keseyim diyorum bu defa da devamını oku yazısı çıkmıyor. herkes yazımı kısacık sanıyor bu durumda, hangi kodu yazsam devamını oku yazısı çıkar acaba

    YanıtlaSil
  14. Tayfun bey çok acil yanıtınıza ihtiyacım var.
    Blogumda kodu yok /: Nasıl olacak şimdi onun yerine neyi seçmem lazım veya bunu nereye eklemem gerek :(
    Ya da nasıl eklemem gerek ?

    YanıtlaSil
  15. Blogumda datapost kodu yok nasıl yapacağım :(

    YanıtlaSil
    Yanıtlar
    1. <data:post.body/> kodu tüm şblonlrda bulunur bu kodl olmazsa yazılarınız görünmez... yukarıda yazı da özellikle belirttiğimiz bir işlem var "widget şablonlarını genişlet" diye yazan seçeneğin mutlaka işaretli olması gerekiyor bu seçenek işaretliyip ctrl ve f tuşuna bstıktan sonra açılan arama formunda aratırsanız kolayca bulabilirsiniz, hatta arama yaptığınız da 2 veya 3 adet bulunabiliyor arma sonucunda 2 adet çıkıyorsa 1.seçeneğin yerine aramalarda 3 adet çıkıyorsa2.seçeneğin yerine kaydetmeniz gerekiyor..

      Sil
  16. Merhaba;

    yazınızdaki yöntemi dün yaptım ve oldu. Ancak bugün bloga baktığımda, kodlar da yerinde olduğu halde kodun çalışmadığını görüyorum.

    Sebebi ne olabilir acaba ?

    Teşekkürler.

    Eren Evren
    www.gezelimgorelimbilelim.com

    YanıtlaSil
  17. Ellerinize Sağlık Çok Çok Teşekkür Ederim Kişisel Blogumda Lazım Oldu :)

    YanıtlaSil
  18. merhabalar elinize sağlık herşey içinde fakat mesela ben devamını oku yerine resim koymak istiyorum onu nasıl yapabilirim ? ayrıca sizin kodlarınızı ekledikten sonra eski devamını okuda duruyor 2 tane devamını oku oldu eskisini orjinalini nasıl silip bu sizin eklediğimiz büyüklüğünü ayarlayabildiğim kodun kalmasını sağlarım ty

    YanıtlaSil
  19. güzel anlatım teşeküürler.

    YanıtlaSil
  20. merhabalar ben yaptım oldu yalnız son yayınladığım yazı içi,n geçerli bu durum ben digerlerininde olmaısını isityorum yardımcı olursanız sevinirim..?

    YanıtlaSil
    Yanıtlar
    1. kodları şablonunuz da göremedim siz sadece ilk yazıyı manuel olarak devamını oku şeklinde işaretlemişsiniz yani işlemleri dorğu bir şekilde ve eksisiz olarak yapmanız gerekiyor.

      Sil
  21. Merhabalar, söylediğiniz kodları şablonuma eklediğimde yazıların sadece başlığı çıkıyor (resim ve alt yazılar görünmüyor) ama diğer blogumda denediğimde hatasız çalışıyor sorun nerededir acaba?

    YanıtlaSil
  22. Hocam ben o devamını oku yazısının yerine resim koymak istiyorum da ama kendi belirlediğim resmi koymak istiyorum nasıl yapabilirim acaba ? Başka kaynaktan uğraşarak yaptım resim koydum ama bu sefer devamını oku resimine tıklanmıyordu.

    YanıtlaSil
  23. öncelikle teşekkür ederiz.Hocam ben kodları dediğiniz gibi yerleştirdim.Ama hala devamını oku eklentisi gözükmüyor.Yardımcı olursanız çok memnun olurum.Şimdiden teşekkürler.bloğum:
    onlinepazarlamamerkezi.blogspot.com/

    YanıtlaSil
  24. Merhaba “Widget şablonlarını genişlet” yazan kutucuk bende gözükmüyor sayfada. Aklıma gelen yerlere baktım ama bulamadım ekran görüntüsü ekleme şansınız var mı nerde olduğuna dair?

    YanıtlaSil
    Yanıtlar
    1. Evet o kutucuk yok malesef nasıl olacak bilmiyorum

      Sil
    2. Blogger'da artık HTML görünümü yeni bir arayüze sahip.
      Şablon içinde bir kodu bulmak için, HTML içerisine tıklayın, klavyenizde CTRL + F tuşlarına basın arama kutusu açılacaktır, aradığınız kodu arama kutusuna yazdın ve enter tuşuna bastığınızda ilgili koda götürecektir yada arama kutusuna body yazın enter yapın bütün kodlar açılacaktır ilgili kodu HTML içerisinde arayabilirsiniz.

      Sil
  25. Peki birden fazla resim gösterilmesini istiyorsak ne yapıyoruz.

    YanıtlaSil
  26. merhabalar ben 3 günlük bir blog sahibiyim yazınız gerçekten çok güzel fakat devamını oku yazısının yanına <3 şeklini koymak istiyorum ve bir de hoşuma gitmezse bu işlemleri nasıl geri alacağım konusunda bana yardımcı olursanız çok sevinirim..

    YanıtlaSil
  27. Şuan kullanıyorum bu eklentiyi, içeriğin yazı tipini nasıl değiştirebilirim ve alttan çok boşluk bırakıyor. Buradaki padding veya margin değerini nasıl ayarlayabilirim ?

    YanıtlaSil
    Yanıtlar
    1. Bunu eklediğin kodların içindeki CSS kodlarını düzenleyerek yapabilirsin, buradaki yazı da nasıl yapabileceğin hakkında yardımcı olacaktır.

      Sil
  28. Merhaba, oldukça detaylı harika bir anlatım yapmışsınız, elinize sağlık fakat ben de yaptım kodları dikkatli bir şekilde olmadı sanırım.

    YanıtlaSil
  29. Yani Fuat bey, eklediğim kodları kaydet dediğim halde sanki eklediğim kodlar hiç dikkate alınmıyor! Sizce sorun nerededir?http://abiyeferace.blogspot.com/ küçük bir incelemede bulunabilirsiniz vaktiniz müsaitse.
    Teşekkürler.

    YanıtlaSil
  30. tayfun bey çok teşekkürler.ben bunu uyguladım ama gözüken resim orjinal boyutunda çıkmıyor.bastırılmış gibi duruyor. bir de yazdığım yazıya ait hiçbir şey çıksın istemiyorum sadece devamını oku gözüksün istiyorum ve resmin aşağısında gözüksün istiyorum. nasıl yapabilirim onu?

    YanıtlaSil
  31. Merhaba, Ben bir turlu devamini oku butonunu ekleyemiyorum. surekli farkli hatalar veriyor. XML, satır 142, sütun 321 ayrıştırılırken hata oluştu: The entity name must immediately follow the '&' in the entity reference. mesela boyle. lutfen yardim edermisiniz. tesekkurler

    YanıtlaSil
  32. bende ççok denedim ama yapamadım acaba nerde yanlış yaptım yardım ederseniz sevinirim

    YanıtlaSil
  33. Hocam galeri temalarında mesela konular yan yana sıralı ve tek konu resmi bide başlığı yazıo özet falan olmuyor onu nasıl yapabilirim bu eklenti ile?

    YanıtlaSil
  34. merhaba bu buton ekleme işlemlerini devamını oku yu eklemeyi falan her makalede yeniden mi yapacağız

    YanıtlaSil
  35. hocam çok sağolun yalnız ben resimli devamını oku yaptım. bunu sağ tarafa nasıl çekebilirim. siteme bakabilirsiniz. www.hazirbilgi.com

    YanıtlaSil
  36. hocam merhabalar.ben tema kullanıyorum hazırında var bu bahsi geçen özellik fakat resim gelmiyor hiçbir türlü anlamadım yardımcı olma imkanınız var mı

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz