Blogger Devamını Oku Eklentisi Resimli

Yazılarınız ana sayfanızda otomatik olarak kısaltılıp yazıya eklediğiniz görsellerinde aynı ebatlarda gösterilmesini isterseniz, şablonunuza ekleyeceğiniz küçük bir javascrip kodu sayesinde bu işlemi zahmetsizce yerine getirebilirsiniz.

Kodu şablonunuza eklemek için aşağıdaki adımları takip etmeniz yeterli.  

Sırası ile  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle➜Devam yolunu takip ederek blog’unuzun kodlarının açık halde bulunduğu modüle gidin.

Yapacağımız işlemlere başlamadan önce Yedekle/Geri yükle yazan butona basarak kullanmakta olduğunuz blog şablonunu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri kolayca geri alabilirsiniz.

“Widget şablonlarını genişlet” yazan kutucuğu işaretledikten sonra, bilgisayarınızın  klavyesinde bulunan ctrl + f tuşuna aynı anda basarak açılan arama formunda aşağıdaki kodu aratın

 </head>  

bulduğunuz </head> kodun hemen üstüne gelecek şekilde aşağıdaki kodları ekleyin.

<script type='text/javascript'>
var thumbnail_mode = "yes"; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 200;
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.Adım: Aşağıdaki kodu bulun.

<data:post.body/> 

Bulduğunuz bu kodu silip yerine aşağıdaki kodları ekleyin (<data:post.body/> şablonlarda iki adet olabiliyor sonuçlarda çıkan ilk kodun yerine) 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>

Tüm işlemleri doğru yaptıysanız eklentiniz sorunsuz çalışacaktır.


Eklentiyi özelleştirin.

Eklentiyi ekledikten sonra tasarımınıza uygun şeklide alıntı yapılacak yazının uzunluğu veya gösterilecek resmin ebatlarını belirleyebilirsiniz.
1. Görselelerin ebatını ve alınıtnın uzunluğunu belirleyin. 

Birinci adımda eklediğiniz aşağıdaki satırları bulun.
var thumbnail_mode = "yes"; //burada ki “yes” resim gösterileceğini belirtir, oraya “no” diye yazarsanız yapılacak alıntıda resim gösterilmez.
summary_noimg = 430; //alıntı yapılacak yazıda resim yoksa alıntının uzunluğunu belirler.
summary_img = 340; //alıntı yapılacak yazıda resim varsa alıntının uzunluğunu belirler.
img_thumb_height = 200; //gösterilecek resmin yüksekliği.
img_thumb_width = 200; //gösterilecek resmin uzunluğu.

2. Devamını oku yazısını özelleştirin.

Bildiğiniz gibi eklentiyi şablonunuza ekledikten sonra ana sayfada yazıları kısaltarak yazını tamamı için devamını oku şeklinde bir bağlantı oluşturacaktır, eğer siz isterseniz şablonunuza ekleyeceğiniz bir kaç parça CSS kodu sayesinde devamını oku yazan bölümü kendinize göre özelleştirebilirsiniz bunu yapabilmek içinde aşağıdaki adıları takip edebilirsiniz.

aşağıdaki kodları kopyaladıktan sonra ]]></b:skin> etiketini bulup hemen üstüne gelecek şekilde şablonunuza ekleyin.

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

float:right; devamını oku yazan bağlantını sağda gösterilmesini sağlıyor siz burayı float:left; diye değiştirirseniz bağlantı solda görüntülenir.

color:#000; bağlantının renginin siyah olduğunu  belirtiyor, rengini değiştirmek isterseniz renk kodlarından istediğinizi bulup yazabilirsiniz.

font-size:13px; bağlantının font büyüklüğünü belirler siz buradaki 13px değeri ile oynayarak fontun büyüklüğünü kendinize göre ayarlayabilirsiniz.