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

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
9. Sidebar sekme başlığını siyah renklendirmek için aşağıdaki kodları 7. maddede verilen  b:skin ) etiketin üst kısmına ekleyin. Resmi inceleyin.

Sidebar sekme başlığını mavi kullanmak isterseniz aşağıda verilen linkteki kodları kullanabilirsiniz.
>> Blogger Sidebar Mavi Sekmeli Gadget Eklentisi
Aşağıdaki kodlar Sidebar siyah sekme başlığı içindir.

/* Sidebar Content---------------------------------- */
.sidebar{margin:0 0 10px 0;font-size:13px;color:#000000;}
.sidebar a{text-decoration:none;color:#000000;}
.sidebar a:hover{text-decoration:none;color:#4FC4F6;}
.sidebar h2, h3.widgettitle{background:url(http://2.bp.blogspot.com/-zXoAQM1FhSo/Uw9eHfCRs3I/AAAAAAAALiU/3KsLW-1WcFM/s1600/widgettitle-bg.png) left top repeat-x;border-bottom:2px solid #4FC4F6;color:#FFF;font-size:16px;line-height:16px;font-family:Oswald, sans-serif;font-weight:normal;text-decoration:none;text-transform:none;margin:0 0 10px;padding:10px 10px 9px;}
.sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
.sidebar ul li{background:url(http://4.bp.blogspot.com/--IG7WrDdOP8/Uw9eGoMv0mI/AAAAAAAALiQ/6hFItDKZO9g/s1600/widget-list.png) left 3px no-repeat;margin:0 0 8px;padding:0 0 9px 12px;}
.sidebar .widget{margin:0 0 15px 0;padding:0;color:#000000;font-size:13px;}
.main .widget{margin:0 0 5px;padding:0 0 2px}
.main .Blog{border-bottom-width:0}
.widget-container{list-style-type:none;list-style:none;margin:0 0 15px 0;padding:0;color:#000000;font-size:13px}

Özelleştirme :
1. Yukarıda .sidebar h2, h3, yazan yan kısımda bulunan linkimiz sekme başlık rengini değiştirir.
2. Yukarıda .sidebar ul li yazan yan kısımda bulunan linkimiz sidebar sol tarafa küçük bir ok işareti ekler. Bu ok linkini değiştirip istediğinizi kullanabilirsiniz.
3. Sidebar da görülen ok işaretini istemiyor iseniz, bağlantı linkini silebilirsiniz.(Parantezler dahil silinecek. “()”) Ok işaretini halen görülüyor ise CRTL+Üstkarakter+R klavye tuşlarına basarak ön belleği yenilediğinizde ok işaratleri görülmeyecektir.Aşağıdaki linkleride inceleyebilirsiniz :
→ Blogger Açılır Menü Oluşturma
→ Blogger NRelate LinkWithin Benzeri Eklenti → Blogger Sayfa Navigasyonu
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.