Blogger Otomatik Devamını Oku Eklentisi
Blogger için küçük resimli Otomatik Devamını Oku Eklentisi blogunuzun düzenli görünmesini sağlayan bir eklenti. Anasayfada yazı içerisindeki resimlerin boyutunu zevkinize göre otomatik küçültüp ve yazının sadece sizin istediğiniz kadarını gösterir. Bütün yazılılarınız anasayfanızda belli bir düzen içerisinde görünür. Normalde manuel olarak yaptığınız yazının belli kısmının anasayfada görüntülenmesi işini, her yazıda tek tek "More" tıklayıp kesmenize gerek kalmaz.

ÖNİZLEME

Blogger yazılarınızda Otomatik Devamını Oku özelliğini kullanma


1. Blogger kontrol paneli > şablon > HTML'yi Düzenle
2. Kod alanı içinde herhangi bir yere tıklayın, Ctrl+F yardımı ile aşağıda bulunan kodu aratıp bulun.
<data:post.body/>

Not: Enter'a bastıktan sonra, birden çok kez bu kodu bulacaksınız ama <div class='post-body entry-content'> nin hemen altındaki ilk sıradaki aradığımız kod!.

post body entry content

3. ve bu kodu silip yerine aşağıdaki kodları yerleştirin.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'>
<a expr:href='data:post.url'>Devamını Oku</a>
</div>
</b:if>
</b:if>

4. Daha Sonra şu Kodu Bulun:
</head>

5. Hemen Üzerine Aşağıdaki kodları ekleyelim:
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200; 
img_thumb_nosrc = "Buraya Resimsiz konularınızda görülecek resim linkinizi ekleyin";
img_alt_nosrc = "Buraya Resimsiz konularınızda görülecek resmin tanım etiketi";
</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(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" alt="'+img_alt_nosrc+'"/></div>';
   summ = summary_noimg;
  }
  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" alt="'+img[0].alt+'"/></span>';
   summ = summary_img;
  } 
  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  div.innerHTML = summary;
 }
 //]]>
</script>

Özelleştirme


● Karakter sayısını değiştirmek için mavi renkle işaretlediğim bölümleri değiştirin.
summary_noimg = 550; Resim olmadan, resimsiz Karakter sayısı.
summary_img = 450; Kücük Resimli (thumbnail) Karakter sayısı.

● Konuya eklediğiniz ilk resmin anasayfada hangi boyutlarda thumbnail (küçük resimler) istiyorsanız, kırmızı değerleri (150X200) değiştirin.
img_thumb_height = 150; küçük resmin (thumbnail) yükseklik boyutu.
img_thumb_width = 200; küçük resmin (thumbnail) genişliği.

6. Değişiklikleri kaydetmek için şablonu Kaydet butonunu tıklayınız. Bu kadar.

Not!!!: Konu 5 kasım 2014 tarihinde tekrar düzenlendi. Ve kodlar sorunsuz çalışıyor. Blogunuza bu eklentinin uygulamasının zor olduğunu biliyorum. Ama bu kodların çalışmadığı anlamına gelmez. Yorum kısmına "yapamadım, çalışmıyor, olmuyor" yazmak yerine Şablonunuzu yedekleyip yedeğinizi bana Blogger yardım sayfamdan gönderin. Ben şablonunuza bu eklentiyi uygular size geri gönderirim ve sizde "güzel bir yorum" yapabilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

40 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. Slmlar ben blogumda uyguladım ancak çalışmıyor ve atlama aralığı eklediğimde de her hangi bir değişme olmadı. Yardımcı olurmusunuz?

    YanıtlaSil
  2. Sitenizde 2 tane devamını oku eklentisi javascripti üstüste eklenmiş. Ya temanızın kendi içinde varmış yada başka bi siteden alıp eklemişsiniz. Çakışma oluyo olabilir. yanlış bir </script> kapanış etiketi var. Google-analytics javascript kodunuzdan sonraki </head> 'e kadar olan bölümü kontrol edin. Tekrar deneyin.

    YanıtlaSil
  3. bunun sadece devamını oku olanı var mı? yani resimlerle hiç ilgisi olmasın sadece belli karakter sayısından sonra 'devamını oku' yazısı çıksın. böyle bir şey var mı? yapılabilir mi? cevaplarsanız sevinirim..

    YanıtlaSil
  4. Eklentiyi resimsiz kullanmak istiyosanız; 5. Adımdaki kodların arasından aşağıda belirttiğim bölümleri siliniz.
    img_thumb_height = 150;
    img_thumb_width = 200;

    ve
    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>';

    YanıtlaSil
  5. Allah sizden razı olsun !

    Yalnız "Read More" yazısını nasıl özelleştirebilirim ?

    YanıtlaSil
  6. Yani Devamını Oku yazısını nasıl sağa aldırabilirim ?

    YanıtlaSil
  7. Can bey, Blogger kontrol paneli>şablon>HTML'yi Düzenle
    ]]></b:skin> Kodunu bulun ve hemen üstüne aşağıdaki style kodunu kopyalayıp yapıştırın.
    .readmore{margin-bottom:15px;float:right;}

    YanıtlaSil

  8. Meftun MEDE size çok teşekkür ederim. Sayenizde bloğum çok değişti :)) Her zaman paylaştığınız kodları takip edeceğim...

    YanıtlaSil
  9. bendede olmuyor yanlıs bisey yaptıgımı sanmıyorum

    YanıtlaSil
  10. Mustafa bey konuya resim ekledim, daha iyi anlaşılması için. Lütfen konuyu tekrar inceleyip uygulayın. Eklentide problem yok. çalışacaktır. Kolay gelsin.

    YanıtlaSil
  11. Eklentiyi kullandım teşekkürler. Devamını Oku yazısı yerine nasıl resim ekleyebilirim acaba ?

    YanıtlaSil
  12. Birsen balcı şablonunuzda <b:skin>...</b:skin> kodları arasına aşağıda verdiğim örnekteki gibi style kodları eklemelisiniz.

    .readmore{margin-bottom:5px;float:right;}
    .readmore a{color:#FFF;background:#646464 url(http://1.bp.blogspot.com/-Z1Ec0x2viiU/UTetZyq2Q9I/AAAAAAAAJUQ/w9cTXoBzRqI/s320/lower22.jpg) left top repeat-x;display:inline-block;font:100%/1.4em Trebuchet,Arial,Verdana,Sans-serif;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;border-bottom:3px solid #919191;padding:8px 14px;}
    .readmore a:hover{color:#FFF;background:#FA7029 url(http://2.bp.blogspot.com/-k-Cl18ZNtNY/UQwllZlc3yI/AAAAAAAABgk/EeRtHnXUpLc/s000/readmore-bg.png) left -126px repeat-x;text-decoration:none;border-bottom:3px solid #FA7029;}


    Eğer yapamazsanız iletişim bölümünden tam olarak nasıl bişey istediğinizi Daha ayrıntılı bir şekilde bana yazın (websiteniz, hangi resim vs.). Hazırlayıp gönderirim. Kolay gelsin.

    YanıtlaSil
  13. yardımlarınız için çok teşekkürler Meftun Mede , başarılarınızın devamını diliyorum .

    YanıtlaSil
  14. paylaştığım yazıda resim olmadığı zaman otomatik bir resim göstermesi için ne yapabilirim?

    YanıtlaSil
    Yanıtlar
    1. Umut bey, Konuyu editledim. 5. Adımdaki kodlarınızı yenileyin. Sorduğunuz bölümü kodlara ekledim. Kolay gelsin.

      Sil
  15. Devamını oku linki geldi ama yazının tamamını ana sayfada gösterdikten sonra link var.Yani 200 ya da 450 karakterden sonra metni kesmedi.Kullandığım tema simple (Basit)

    YanıtlaSil
  16. Butonu nasıl sağ tarafa alabilirim yani direk buton hemen konun altında sol tarafta, resme yakın duruyor. Bunu sağ tarafa nasıl alabilirim ?

    YanıtlaSil
    Yanıtlar
    1. şablonunuzda <b:skin>...</b:skin> kodları arasına aşağıda verdiğim style kodunu eklemelisiniz.

      .readmore{margin-bottom:5px;float:right;}

      Sil
  17. Merhaba
    Deniyorum deniyorum olmuyor. Güzel bir blog düzenlemesi yapıp öyle yazmaya başlayacaktım ama daha bunu bile yapamıyorum.
    Yazdığınız her şeyi yaptım ama başaramadım.
    Yardımcı olabilir misiniz?

    YanıtlaSil
    Yanıtlar
    1. Şablonunuzu yedekleyip isteğinizi detaylı bi şekilde yazarak tema yedeğinizi burdan bana gönderin. Ben ayarlayıp geri göndereyim size. 2. Seçenek Blogger temaları bölümünden kendinize devamını oku eklentisi olan zevkinize göre güzel bi tema seçin. Bloggerın kendi orjinal temalarında çok fazla özelleştirme olmuyo malesef.

      Sil
  18. kardeş çok güzel anlatmışsın eywallah da bi türlü olmadı nedense neyi yanlış yaptığımıda bi türlü anlayamadım

    YanıtlaSil
    Yanıtlar
    1. Blogger'ın kendi şablonlarından birisini kullanıyosanız özelleştirmesi zordur. Burdan kendinize devamını oku eklentisi olan güzel bi şablon seçebilirsiniz. Yada isterseniz bana burdan Şablonunuzu yedekleyip gönderebilirsiniz. Ben çözer geri gönderirim size.

      Sil
  19. Hocam resimsiz konularda gözükecek resim linkini girdim ama resim gözükmedi yardımcı olurmusun

    YanıtlaSil
    Yanıtlar
    1. Konuyu düzenledim. Tekrar deneyin. Kodlar sorunsuz çalışıyor.

      Sil
  20. ben yaptım çalıştı fakat sayfamda sadece bir post görünüyor diğerleri önceki kayıtlarda görünüyor nasıl düzeltebilirim :'(

    YanıtlaSil
    Yanıtlar
    1. Bi yerde yanlışlık var ama dışarıdan göremiyorum. Devamını oku eklentisiyle alakalı değil ama. Şablonunuzu yedekleyip bana burdan gönderin. Ben ayarlayıp geri göndereyim size. Yanlışlık varsa düzeltirim.

      Sil
  21. Ana sayfada daha fazla konu göstermek için Blogger kontrol panelinizden › Ayarlar › Yayınlar ve yorumlar sekmesinde En fazla şu kadar göster: bölümüne istediğiniz sayısal değeri girerek ayarlayabilirsiniz.

    YanıtlaSil
  22. Mail atarken umutsuzdum ama arkadaş sağolsun,çok güzel şekilde yardımcı oldu,çok teşekkür ediyorum kendisine,yardımseverliği beni çok mutlu etti,Tekrar teşekkürler,başarılarınız daim olsun inşaAllah..

    YanıtlaSil
  23. yapamayan arkadaşlar 3.sünü silip verilen kodu yapıştırın

    YanıtlaSil
  24. öncelikle teşekkürler.yararlı bir paylaşım olmuş.Ben yaptım ama etiketler uzun uzun gözükuyor ve hıc hoş bir görüntü olmuyor.o etiketleri o böleden nasıl gizleyebilirim?.sadece küçük resim özet yazı ve devamını oku yazısı olsun

    YanıtlaSil
  25. Merhaba bu anlatımı yaparak devamını oku eklentisi oluşturmuştum fakat nası becerdim bilmiyorum yeniden eski haline döndürmüşüm. yeniden yapmak istiyorum ama ctrl+f yapınca bu kod bulunmuyor yok diyor.ne yapmam gerekir yardım ederseniz sevinirim.

    YanıtlaSil
    Yanıtlar
    1. Ben tam olarak net isteğinizi anlayamadım. Devamını oku eklentisini yaptınız ama artık bu eklentiyi istemiyor, blogunuzu eski halinemi döndürmek istiyosunuz? Eğer sorun buysa; blogger kontrol panelinize gidin, Şablon sekmesinden HTML'yi Düzenle'ye tıklayarak, açılan sayfada arama yapın. Arama kutusuna "Devamını Oku" yazın ve 1. adımdaki kodları buldunuz demektir. Bunları silin ama sadece <data:post.body/> kalsın.
      2. adımdaki kodlarıda </head> kodunun hemen üzerinde bulacaksınız. Bunuda silerek blogunuzun ana sayfa görünümünü eski haline döndürmüş olursunuz. Eğer yapamazsanız blogger yardım sayfamdan isteğinizi ayrıntılı bi şekilde yazarak, şablonunuzu yedekleyip bana gönderin. Ben isteğinizi yapar size geri yollarım. Kolay gelsin, iyi çalışmalar.

      Sil
  26. MERHABA SAYFANIN ALTINA SIZINKI GIBI EKLENTI YAPMAK ISTIYORUM SİZİN KODLARI DENEDM AMA HATA VERDI BILGI VERIRMSNIZ..

    YanıtlaSil
  27. Çok yaralı bir site yapmışsınız emeğinize sağlık. Ayrıca maillerime verdiğiniz hızlı cevaplar içinde çok teşekkür ederim.

    YanıtlaSil
  28. Yararlı paylaşım teşekkürler.Kullanacağım.

    YanıtlaSil
  29. ben de yaptım olmadı neden acaba?

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale