Blogger otomatik devamını oku eklentisi

                   Blogger'da yazılan bir yazının yalnızca ana sayfada görüntülenecek kısmını belirlemek amacıyla panelin hemen üst kısmında bulunan "Atlama aralığı ekle" aracını kullanırız. 

Ancak bu araç her yazı için ayrı işlem gerektirdiğinden bazen yazı yazılmasını geciktirebilir. Ana sayfada görünen her resmin boyutu ve her yazının uzunluğu aynı olmayacağından blog sayfanızda düzensiz bir görüntü ortaya çıkar.

Bu sorunu aşmak için geliştirilmiş bir takım kodlar var. Bu kodlar sayesinde yazılarınız ana sayfanızda sizin belirlediğiniz boyutlarda görüntülenir. Buna otomatik devamını oku eklentisi veya otomatik yazı boyutlandırma eklentisi deniliyor. 

Aşağıda bu işlemi nasıl gerçekleştirebileceğiniz anlattım. Burada diğer anlatımlara ek olarak yazıya ait resmin üzerine gelindiğinde yazı başlığı çıkıyor ve resme tıklandığında yazıya gidiyor.

Kurulum :

Şablon > Html'yi düzenle deyin ve tema kodlarınız arasında Ctrl+F ile aşağıdaki kodu bulun. 

</head>

Yukarıdaki kodun hemen üzerine aşağıdaki kodları ekleyin.
 

<script type='text/javascript'> 
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 0;
img_thumb_width = 0;
</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, pURL, pTITLE){
    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:0 10px 5px 0;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img style="background:url() center center no-repeat ;" src="'+img[0].src+'" width="'+img_thumb_width+'200px" height="'+img_thumb_height+'165px"/></a></span>';
        summ = summary_img;
    }
    
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

//]]>
</script>

Devam edin ve kodlarınız arasında aşağıdaki kodu bulun. Bu koddan temanızda birden fazla bulunabilir, hepsini tek tek deneyerek hangisinde çalıştığını bulabilirsiniz. 

<data:post.body/> 

Yukarıdaki kodu silin ve yerine aşağıdaki kodları ekleyin.

<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;,
&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&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='devamini-oku'>
<a expr:href='data:post.url'>Devamını oku</a>
</div>
</b:if>
</b:if>

İlk kodu detaylı incelediğinizde kırmızı ile işaretlediğim 4 kısım olduğunu göreceksiniz. Bunların ne işe yaradığını aşağıda anlattım. 

summary_noimg = 500; : Yazıda resim olmadığında görülecek karakter sayısı 

summary_img = 500; : Yazıda resim olduğunda görülecek karakter sayısı 

200px : Resmin uzunluğunu belirler 

165px : Resmin yüksekliğini belirler

Tüm işlem bu kadar, temanızı kaydedin ve eklentinin tadını çıkarın.