Sayfa Gezinme

Son makaleler:

latest

YAYIN AKIŞI:

Tümünü Görüntüle

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 gel...

...
Klasik blogger tema tasarımı nasıl yapılır
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
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.

6 yorum

  1. Hocam elinize sağlık güzel bir paylaşım olmuş,blogunuzu sürekli takip ediyorum.Konuyla biraz alakalı olduğu için buraya yazmak istedim.Hocam blogumda bulunan menuleri açılır menu haline getirmek istiyorum.Yardımcı olursanız sevinirim.Normal menülerin altına kod ekleyerek açılır menü ekledim ama görsel olarak kötü duruyor.Blogum tanitedavi.blogspot.com

    YanıtlaSil
    Yanıtlar
    1. @Ali Türkmen ; Bey teşekkür ederim.kategori de bir tasarım işi olduğuna göre sorun yok.Aşağıda verdiğim link ile açılır menü başlıklı kategori yapabilirsiniz. Yalnız bir konuda size bilgi verim. Temanızda yazar bilgisi eksik. bu tema üzerinde çalışma yaparak harcağınız zaman ve emek için yarın değiştirme durumunda kalmayın.Yazar kısmı eksik olan bir tema web araçlarında eksik yazar hatası kodunu döndürecektir.Bu durumda canınızı sıkacak bir konu. Web araçlarına girin bir kontrol edin lütfen.Eksik yazar veya eksik update hatası göreceksiniz.
      http://guney59.blogspot.com.tr/2013/10/blogger-aclr-menu-olusturma.html

      Sil
    2. cevabınız için teşekkür ederim hocam. hocam yazar bilgisi dediğiniz her paylaşımın altında ismimin çıkması mı yoksa gadget olarak sitenin bir yerinde kısa bir bilgi olması mı orasını anlayamadım cevaplarsanız sevinirim o konu hakkında hiç bilgim yok çünkü

      Sil
    3. @Ali Türkmen ;Bey merhaba yorumunuz için teşekkür ederim. Yazar bilgisi Blogger kumanda panelinde kayıtlar gadgeti içinde bulunan yazar bilgisi ile Google Plus hakkında kısmında bulunan bilgiler aynıdır.Google profil bilgilerini bu kısımdan alır ve yazar ile ilişkilendirir.Öneri Google Badge yani kartvizit kullanırsanız sizi merak edenler ki çok olacaktır, hem profilinizi hem yazılarınızı hemde nerde olduğunuzu görür.

      Sil
  2. cevabınız için teşekkür ederim hocam,gereken düzenlemeleri yaptım ve ekledim ve gerçektende görünüm olarak daha güzel oldu ve açılır menüler sayesinde yazılarımı alanlarına göre ayırabiliyorum artık çok sağolun hocam.

    YanıtlaSil
    Yanıtlar
    1. @Ali Türkmen ; Bey sizde sağolun. Zevle çalışabileceğiniz ortamı yaratmanıza çok sevindim. Başarılar dilerim.

      Sil

Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.