Blogger Tema Tasarımını Özelleştir

Klasik Blogger Temanızı çok kısa sürede özelleştirip, yazı ve resim sol başta, atlama aralığı eklemeden otomatik yazı kesme, üzerine gelince renk değişen Devamını Oku, siyah ve mavi renkli sekme başlığı, sol tarafta ok işareti ve oval resimli popüler yayınlar gadget’i ile kullanabilirsiniz.. Bu işlemler ile kalmayıp, blog’unuzu özelleştirmeye devam edebileceğiniz etiketlerinizden oluşan menüler için sayfa başlık çubuğuna ekleyebileceğiniz açılır kategori sekmesi, Google Özel Arama, hover oynar çerçeveli etiket bulut gadgeti, ana sayfada görülen sayfa navigasyonu ve blogunuzu kasmayan yukarı git, benzer yazılar nRelate eklentisi ile devam edebilirsiniz.
Blogunuzu özelleştirmek için hazır iseniz, biraz sabır ve alt kısımda vereceğim bağlantıları sırası ile takip ederek birkaç saatte özel blogger şablonlarını aratmayacak, kendi emeğiniz ile hazırlayacağınız blog temanızı tasarlayabileceksiniz. Önce temanıza stil vererek başlayalım.

CANLI DEMO
Blogger Ana sayfa da resim, yazı, devamını oku eklenti kod yapılandırılması :
1. Blogger kumanda paneline giriş yaparak, şablon sekmesine tıklayıp önce tema yedeğini alın.
→ Blogger yedek alma nasıl yapılır ?
2. Aşağıdaki kodu bulun. Şablonu biraz aşağıya kaydırın göreceksiniz.

</head>

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

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; 
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>

Özelleştirilme :
1. Eklediğimiz kodlarda resim Genişlik x Yükseklik ve yazı uzunluğunu belirleyebilirsiniz.
→ 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.
4. Şimdi bu kodu bulun. Bu kod genelde birkaç tane olabilir. “ hasJumpLink “ kod’un hemen üst kısmında bulunmaktadır.Temalarda farklılık gösterebilir.

<data:post.body/>

5. Bulduğunuz bu kodu silerek aşağıdaki kod’u eksiksiz yapıştırın, kaydedin ve ö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>

6. Şu anda Devamını Oku isminin sol tarafta, 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.
7. Aşağıdaki kodu bulun. ( Ctrl+F)

]]></b:skin>

8. Yukarıda bulduğunuz 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(http://3.bp.blogspot.com/-Aa783rB_qQQ/Uw9eFXjLhfI/AAAAAAAALhs/grP7wlwnoDc/s1600/readmore-bg.png) left top repeat-x;padding:8px 14px;}
.readmore a:hover{color:#fff;text-decoration:none;background:url(http://3.bp.blogspot.com/-Aa783rB_qQQ/Uw9eFXjLhfI/AAAAAAAALhs/grP7wlwnoDc/s1600/readmore-bg.png) left -126px repeat-x;}

Şu anda Devamını oku ismi sağ tarafta mavi olarak görülmesi gerekiyor. Fare ile üzerine gelindiğinde siyah olan bir eklentimiz. Devamını oku ismi büyük bir ihtimal ile çift çıkacaktır. Çift görülen Devamını Oku ismini gizlemek için aşağıdaki bağlantıyı inceleyiniz.
>> Çift çıkan Devamını Oku ismini Gizle
Yukarıda anlatılanları ve bağlantı linklerini blog’unuza uyguladığınızda Canlı Demo ile izleme yaptığınız blog’um gibi bir temanız olacaktır.