Blogger Post Otomatik Devamını Oku Eklentisi

Blogger’un şablonunu, özel tema tasarımı yapılmış gibi sol tarafta ölçekli resim, sağ tarafta devamını oku, yazı uzunluk sayı ayarı,  hatta yazılarınızı her iki yana yaslayan (justify) yazı biçimi ile özelleştirebileceksiniz. Devamını oku yazı linkine resim dahi ekleyebilirsiniz.

Blogger da yazının devamını oku biçimini atlama aralığı kullanarak yaptığımızı biliyorsunuz.

Yazılarınızı ister atlama aralığı ile kesin isterseniz kesmeyin ekleyeceğiniz kodlar ile yapacağınız ayarlar, Ana Sayfa da görülecek olan tüm yazı ve resimler otomatik biçimlendirilmiş olarak muntazam bir sıra ve düzende görülecektir.

Tüm bu işlemleri yapabileceğiniz uzun bir yazı hazırladım. Kodları sağlıklı bir şekilde eklediğiniz de, Blogger temanız tıpkı özel temalar gibi görülecektir. Kodları şablonunuza eklemek için aşağıdaki adımları takip etmeniz yeterli olacaktır.  ⇒ Öncelikle! Blogger temanızın bir yedeğini alın. Kumanda Paneli →  Şablon → HTML’yi Düzenle→ile blog’unuzun kodlarını açın. Şablon içine tıklayarak Ctrl+F ile aşağıdaki kodu bulun. Sonucu görmek ister misiniz ?

Canlı Demo

Kod:1

 </head>  

Bulduğunuz kodun hemen üstüne aşağıdaki kodları ekleyin.

Kod:2

<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 bu kodu bulun. Bu kod genelde birkaç tane olabilir. Test bloglarında yaptığım kontrolde “ hasJumpLink “ kodunun hemen üst kısmında olan kod olarak çalıştı. Birkaç deneme ile çalışan kodu bulabilirsiniz.Temalarda farklılık gösterebilir.
Kod:3

<data:post.body/> 

Bu kodu bulduktan sonra, kodu silerek aşağıdaki kod’u yapıştırın ve kaydedin. Tüm işlemler doğru yapıldı ise eklentimiz doğru çalışacaktır.
Kod:4

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

Blogger eklentimizin özelleştirilmesi :

1. Eklediğimiz kodlarda resim GenişlikxYükseklik ve Yazı uzunluğunu belirleyebilirsiniz.

Kod 2 içindeki satırları bulun.

→ var thumbnail_mode = "yes"; ⇒ Ana Sayfa yazınızdaki resmi “yes” göster “no” gösterme

→ summary_noimg = 430; ⇒ Yazıda resim yok ise yazının uzunluğunu belirler.

→ summary_img = 340; ⇒ Yazıda resim varsa, yazının uzunluğunu belirler.

→ img_thumb_height = 200; ⇒ Resmin yüksekliğini belirler.

→ img_thumb_width = 200; ⇒ Resmin uzunluğunu belirler.

Devamını Oku isminin özelleştirilmesi :

Yukarıda yaptığımız işlemlerden sonra Devamını Oku » ismini CSS kod yardımı ile özelleştirelim. Aşağıdaki kodu şablonda bulun.
Kod:5

]]></b:skin>

Bulduğunuz bu kodun hemen üstüne aşağıdaki kodları ekleyin.
Kod:6

.more{
float:right;
color:#000;
font-size:13px;
}

(Kaynak: http://guney59.blogspot.com.tr/2014/05/blogger-post-otomatik-devamn-oku.html )