Blogger a Resimli Otomatik Devamını Oku Nasıl Eklenir

Çoğu blog yazarı anasayfasında birden fazla yazı gösterilmesini sağlar.Yani anasayfasında son 4-5 vb adet yazısının kısa özetini yerleştirir ve onları yayınlar.Bu kısa özeti yayınlarken istediğiniz yerden yazıyı kesebilirsiniz.Bunu blogger, yazı editöründe yapmanıza imkan veriyor.Peki yazınızı otomatik olarak belirli bir yerden kesilmesini ister miydiniz?Eğer cevabınız evetse bu yazımla birlikte yazdığınız son yazılar otomatik olarak kesilip resimli olarak anasayfada görüntülenecek.

Şimdi gelelim Otomatik Devamını Oku özelliğini nasıl ekleyeceğimize:

1.Adım : İlk olarak blogunuzda HTML düzenle kısmına gelerek widget şablonunu genişlet kutucuğunu işaretleyin ve Ctrl + f tuşları yardımıyla </head> kodunu bulun ve hemen üzerine aşağıdaki kodu ekleyin:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

2.Adım: Şimdi de <data:post.body/> kodunu bulun ve bu kodu aşağıdaki kodla değiştirin:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Şimdi biraz kodlardan bahsetmek istiyorum:Aşağıdaki adımlarla birlikte kodları isteğinize göre düzenleyebileceksiniz:

summary_noimg = 230;       Resim içermeyen yazılarınızın karakter sayısı
summary_img = 140;         Resimli yazılarınızın karakter sayısı
img_thumb_height = 100;   Görüntülenecek resmin yüksekliği
img_thumb_width = 100      Görüntülenecek resmin genişliği

Aynı zamanda kırmızı renkli read more yazısını isteğinize göre değiştirebilirsiniz.Devamını oku-Okumaya devam et gibi alternatifleri deneyebilirsiniz.Yukarıdaki kodlarda read more yazısından sonra yazı başlığınız da görüntülenecek.İsterseniz bunu kaldırabilirsiniz.Yapmanız gereken read more yazısından sonraki "<data:post.title/>" yazısını kaldırmak.

Evet kısaca kod yapısından da bahsettim.Yukarıda kodlardan anlaşılacağı üzere kodlar size kontrol özgürlüğü verdiği gibi js dosyasını da içerisinde barındırıyor.Yanı herhangi bir yere upload etmenize gerek kalmayacak.
Takıldığınız bir yer olursa yorum bölümünde sorabilirsiniz.