Otomatik Devamını Oku Eklentisi


Sevgili arkadaşlar Blog düzenlemeyle ilgili yazılarımıza devam ediyoruz. Bu yazımda sizlere bloğunuza “Atlama Aralığı” ekleme ve “Devamını Oku” eklentisinin nasıl yapıldığını anlatmaya çalışacağım.

Atlama aralığı özelliği ile de çok uzun olan bir metnin tamamı yerine sadece istediğiniz kısmının ana sayfada görünmesini sağlayabilirsiniz. Dilerseniz önce “Atlama Aralığı” nasıl eklenir onu anlatayım. Bunun için imleci makalemizin ana sayfada görünmesini istemediğimiz kısmının başına getirdikten
sonra resimde gördüğünüz gibi Atlama Aralığı Ekleme butonunu tıklıyoruz. Bu butona tıkladığımızda kesik çizgilerden oluşan bir satır ekleniyor. Eklenen bu satırın üst kısmında kalan kısımlar ana sayfamızda görünürken altında kalan kısımlar ise görünmüyorlar. 
Şimdi de bloğumuzu daha şık daha gösterecek olan “Devamını Oku” eklentisi nasıl yapılır onu anlatalım.  Ekleyeceğimiz kodlar sayesinde ana sayfada görülen tüm yayınlarımız belirli bir düzen içerisinde görülecektir. Kodları doğru bir şekilde eklediğimizde sonuç çok güzel oluyor.
Öncelikle blogger temanızın bir yedeğini alın.

Kumanda Paneli      Şablon     HTML’yi Düzenle butonlarını sırasıyla tıklayarak kodlarınızın bulunduğu sayfayı açın. Ctrl+F yardımı ile aşağıdaki kodu bulun.
 
</head>
Bu kodun hemen üstüne aşağıdaki kodları ekleyin.
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
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>
 Şimdi de aşağıdaki kodu bulun.
<data:post.body/>
Bulduğunuz bu kodu silerek yerine aşağıdaki kodları yapıştırın 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>
 Eğer işlemlerimiz doğru bir şekilde gerçekleştirildiyse Devamını Oku Eklentisi çalışacaktır.