Ön izlemeli, Devamını Oku (Read More) eklentisi Blogger'a nasıl eklenir?

Blogumuza güzel bir görünüm kazandırması yanında, ziyaretçileri yazının kalanını okumaya yönlendirmesi ve blogda kalma süresini uzatması nedeniyle benim olmazsa olmaz eklentilerimden birisidir "Devamını Oku" eklentisi.

Blogger'ın klasik ana sayfasında, yayınladığımız yazıların tüm içeriği gösterilmektedir. Bu eklenti sayesinde, ana sayfada gösterilen yazılarımız, önceden belirlenmiş bir yükseklik değerine ulaşıldığında kesilir. Yayın içerisinde kullanılan görselin ön izlemesi oluşturulur ve yazının geri kalanına ulaşılabilmesi için, yazı bağlantısını içeren bir buton oluşturulur.

Şimdi bu güzel eklentiyi blogumuza nasıl ekleyebiliriz, görelim:

Kurulum

• Öncelikle Blogger Kumanda Paneli > Şablon > HTML’yi Düzenle > Devam Et > Widget Şablonlarını Genişlet komutlarını uyguluyoruz ve CTRL+F tuş kombinasyonu yardımıyla </head> kodunu buluyoruz. Hemen üzerine aşağıda yer alan kodları ekliyoruz.

  <!-- read more code-1 START -->
  <style type='text/css'>
  .readmore {
  position: relative;
  margin-top: 12px;
  margin-right: 10px;
  padding: 7px;
  background: #333;
  display: inline-block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  -moz-border-radius: 5px;
  border-radius: 5px;
  float: right;
  text-decoration: none;
  }
  a.readmore, a:hover.readmore, a:active.readmore {
  text-decoration: none;
  color: white;
  }
  </style>
  <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
  summary_noimg = 430;
  summary_img = 340;
  img_thumb_height = 170;
  img_thumb_width = 240;
  </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 = '<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;
  }
  if(img.length<1) {
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://dl.dropbox.com/s/u9jqt4jp8p82341/no-preview.png" 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>
  <!-- read more code-1 END -->
  

• Daha sonra yine CTRL+F tuş kombinasyonu yardımıyla <data:post.body/> kodunu bulup siliyoruz ve yerine aşağıdaki kodlarlı ekliyoruz.

  <!-- read more code-2 START -->
  <b:if cond='data:blog.pageType == "item"'>
  <data:post.body/>
  <b:else/>
  <b:if cond='data:blog.pageType == "static_page"'>
  <data:post.body/>
  <b:else/>
  <div expr:id='"summary" + data:post.id'><data:post.body/></div>
  <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
  </script>
  <a class='readmore' expr:href='data:post.url'>Yazının devamı</a>
  </b:if>
  </b:if>
  <!-- read more code-2 END -->
  

Ayarlar

Aşağıdaki kodlar üzerinde değişiklikler yaparak, yazı kesmesinin nerede yapılacağını ve ön izleme resminin büyüklüğünü ayarlayabilirsiniz.

summary_noimg = 430; resim kullanılmayan yazının kesim yüksekliği.

summary_img = 340; resim kulllanılan yazının kesim yüksekliği.

img_thumb_height = 170; ön izlemesi oluşturulacak resmin yüksekliği

img_thumb_width = 240; ön izlemesi oluşturulacak resmin genişliği.

http://resim-url.png resimsiz yazılar için kullanılacak olan ön tanımlı resmin url bilgisi.

Önemli Not: Bazı temalarda <data:post.body/> kodundan birden fazla yer almaktadır. Bu durumda siz, kod değişikliğini hepsi için yapmalısınız.

Son olarak; eklenti ile ilgili bir problem yaşarsanız yorum bölümünde bildirebilirsiniz. Elimden geldiğince yardımcı olmaya çalışırım.