3 Kasım 2016 Perşembe

Blog İçin ''Devamını Oku'' Eklentisi

Geçmişten bu güne kadar yayılan blog yazarlığı herkesi sarmış durumda. Şimdi sizlere hepimizin merak ettiği otomatik ''Devamını Oku'' eklentisini eklemeyi anlatacağım. Evet öncelikle yapmamız gereken blog sayfamıza giriş yapıyoruz.

İlk olarak hali hazırda olan blog sayfamızın yedeğini alıyoruz. Olası bir yanlış durumlarda eski haline döndürebilmenin en kolay yolu bu.

Öncelikle Blogger temanızın bir yedeğini alın. Kontrol Paneli → Şablon → HTML’yi Düzenle→ ile blog’unuzun kodlarını açıyoruz. Şablonun içine tıklıyoruz ve ardından Ctrl+F ile aşağıdaki kodu buluyoruz.

1. Aşama

 </head>  

Bulduğumuz kodun hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<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>

2. Aşama

Şimdi ise aşağıdaki kodu bulalım. Bu kod bazı temalarda 2 yada 3 tane olabilir. Bunun için biz uygun olanı bulacağız. Bunun çalışır olmasını istersek hepsinde denemekte fayda var.

<data:post.body/> 

Bu kodu bulduktan sonra, bu kodu silip yerine aşağıdaki kodları yapıştırıyoruz.

<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='readmore' expr:href='data:post.url'>Devamını oku »</a>
</b:if>
</b:if>

Evet bütün bu işlemleri doğru bir şekilde yapıldığı takdirde kodlarımız çalışır ve Devamını Oku eklentisi yerini alacaktır. 

Bu Web sitesi ilginizi çekecek ve bu ilgilerin yanı sıra web sitesinde bilgi paylaşarak eğlenceli sosyal medya oluşturmak için oluştrulmuştur.


İfadelerİfadeler