Atlama Aralığı ve Yazının Devamını Özelleştirin

Blogger ana sayfada görülen yazınıza Atlama aralığı kullanmadan, Devamını oku isminin sağ tarafta resimli, renkli görülmesi, yazı karakt...

...

Blogger ana sayfada görülen yazınıza Atlama aralığı kullanmadan, Devamını oku isminin sağ tarafta resimli, renkli görülmesi, yazı karakterler sayısı ve görsel resim ebatlarının otomatik çalışmasını düşünüyor iseniz okumaya devam edin. Blogger’un en güzel özelliklerinden biri hiç bir kısıtlama olmadan düşündüğünüzü kodlar yardımı ile gerçekleştirip arzu ettiğiniz tema tasarımını yapmanızdır.Wordpress kullanan biri olarak kıyaslama yaptığımda, Blogger ‘un özgür ve geliştirici bir blog yapısına sahip olduğunu çok rahatlıkla söyleyebilirim. Blogger’un bu özgürlüğünü kullanarak, şablon'unuza ekleyeceğiniz kodlar yardımı ile bakın neler yapacağız.
1. Şablon'unuza ekleyeceğiniz ilk kod ile, resim görseliniz sol tarafta istediğiniz ebatlarda otomatik görülebilecek. Bir kez ayarları yapılandırmanız yeterli olacaktır.
2. Ana sayfada yazınızın otomatik atlama aralık karakter sayısını kendiniz belirleyebileceksiniz.
3. Sol tarafta konumlanan, Devamını oku ismine ekleyeceğiniz Css stil kodları yardımı ile sağ tarafa alabileceksiniz.
4. Eklediğiniz Css kod yardımı ile duyarlı, renkli ve resimli çerçeve içinde görülen bir Devamını oku ismi oluşacak.
Tüm yazılarınızda yukarıda anlatılan özellikler oluşacağından daha düzgün bir temaya sahip olacaksınız. Bu anlatımın nasıl görüldüğünü merak ediyor musunuz ? Test blog’uma bakın.
Canlı DEMO
Beğendi iseniz yorumlarda beğeninizi ifade edebilirsiniz. Blogger, blog’unuzun tema tasarımını nasıl yapacağınızı aşağıda adım adım takip ederek temanızı özelleştirmeye başlayabilirsiniz.
NOT: Öncelikle! Blogger temanızın bir yedeğini alın.
1. Blogger şablon→ Html’yi düzenle→ (Ctrl+F) arama özelliği ile aşağıdaki kodu bulun.

 </head>

2. Bulduğunuz bu kod’un 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>

3. (Ctrl+F) arama özelliği ile aşağıdaki kodu bulun. Şablon kodlarınız da bu kod birkaç tane olabilir. Test blogumda 3 ad. olan bu kod “ hasJumpLink” kod'unun hemen üstündeki kod ile çalıştı. Tema farklılığından dolayı bunu denemelisiniz.

<data:post.body/>

4. 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. Önizleme yapın.

<p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='readmore'>
<a expr:href='data:post.url'>Devamını Oku</a>
</div>
</b:if>
</b:if>

5. Kodun en altındaki “ Read More “ ismini Devamını Oku veya farklı bir isimle değiştirin.
Şu ana kadar yaptığınız işlemler sonucunda resmin ve Devamını Oku isminin sol tarafta görülmesi, Read More isminin Devamını Oku ile değişimi ve kod içindeki yazı karakterlerinin de yaklaşık resim yüksekliğinde olması gerekiyor. Son olarak CSS stil kodlarımızı ekleyerek Devamını Oku ismini resimli,renkli ve sağ tarafa yaslanmış olarak göreceğiz.
6. Aşağıdaki kodu bulun. ( Ctrl+F)

]]></b:skin>

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

/* Read More -------------------------------------- */
.readmore{margin-bottom:5px;float:right;}
.readmore a{color:#fff;font-size:12px;line-height:12px;display:inline-block;text-decoration:none;text-transform:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3zkh52ztH67tvn5OL_Ni6Zt0njPcLVgQo2Nv4HICtBOAzV_GARYC4gu3t6gJ2EsaOqbEaJ9679Or12opUX32YL-VKCr5uRQNYSERqlRunk7eoP9N2LzCbqoidj0Gbl53sPyYnlrCdXYYH/s1600/readmore-bg.png) left top repeat-x;padding:8px 14px;}
.readmore a:hover{color:#fff;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3zkh52ztH67tvn5OL_Ni6Zt0njPcLVgQo2Nv4HICtBOAzV_GARYC4gu3t6gJ2EsaOqbEaJ9679Or12opUX32YL-VKCr5uRQNYSERqlRunk7eoP9N2LzCbqoidj0Gbl53sPyYnlrCdXYYH/s1600/readmore-bg.png) left -126px repeat-x;}

Blogger eklentimizin özelleştirilmesi :

1. Eklediğimiz kodlarda resim Genişlik (W) x (H) Yü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.
Ayrıca bakınız ⇒ Blogger Resim Linkleri Nasıl Alınır
→ Blogger Sidebar Mavi Sekmeli Gadget Eklentisi
→ Blogger Özel Oval Popüler Yayın Eklentisi
→ Yazı resmini sola otomatik yaslayan sağda devamını oku eklentisi
→ Blogger Sidebar Siyah Sekme Başlık Eklentisi