Blogger Yayınları İçin Otomatik Devamını Oku Eklentisi

12 Şubat 2015 Perşembe günü Tarafindan yazildi.

Blogger Post Otomatik Devamını Oku Eklentisi


Bloggerin ş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 ?
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;
}
CSS kodunun özelleştirilmesi :
→ float:right; ⇒ Devamını Oku ismini sağ tarafda gösteriyor. Sol tarafda olmasını istiyor iseniz kod’u şu şekilde değiştirin. Devamını Oku ismi sol tarafda görülür.
→ float:left;
→ color:#000; ⇒ Devamını Oku ismi siyah renkte görülür. Siz onaltılık renk kodlarından birini kullanmak isterseniz buradan bakarak kodu alabilirsiniz. Bazı temalarda renkler Blogger şablon css ekleme kısmındaki sekmede yapacağınız ayarlar ile çalışmaktadır.
→ font-size:13px; ⇒ Devamını Oku isminin font büyüklüğüdür.Rakamları değiştirin.
Devamını oku ismi çift görülürse neler yapılabilir :
→ Kod8 de verdiğim kod ile şablonda arama yapın. Kod7 deki gibi kodları bulacaksınız.
Bu kodları sildiğimizde çift görülen Devamını Oku isminin biri kalkacaktır. Ancak bu kodların ileride lazım olacağını düşünerek ben farklı bir yol izliyorum. Kod7 sadece bilgi amaçlı verilmiştir.İsterseniz silebilirsiniz.
Kod:7
<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
→ Yukarıdaki kodu silmediğinizi düşünerek ikinci Devamını Oku ismini gizleme yapacağız.

Aşağıdaki kodu bulun.
Kod:8
<b:if cond='data:post.hasJumpLink'>
→ Bu kodun hemen üst kısmına aşağıdaki kodu ekleyin ve şablonu kaydedin. Şablon hata kodu verecektir.
Kod:9
<b:if cond='data:blog.pageType == &quot;item&quot;'>
→ Kod7 de en alttaki  “ </b:if> “ kodunu, aşağıdan kopyalayın ve hemen altına ekleyerek şablonu kaydedin. Blog hatası düzelecektir. Sonuç için ilk resmi inceleyin.
Kod:10
</b:if>
→ Blog Ana Sayfa da yazınızın kesilerek devamını oku kısmına kadar olan alıntı yazınızı sağa ve sola yaslamaya yarayan ( justify ) kodunu kullanmak isteyen arkadaşlar içindir. Uygulamayı kullanmak isteyen arkadaşlar kod5 yazan penceredeki kodu bulsun ve hemen üst kısmına aşağıdaki kodu ekleyerek blogu kaydetsin. Yazılar artık sağa sola yaslanmış olarak çıkacaktır.
Kod:11
.post-body{
text-align:justify;
text-justify:inter-word;
}


7 yorum: