Blogger Tema Şablonu Kodlama

Bu konuyla alakalı 2 tane yazı yazmıştım ancak o yazıları kaldırdım. Daha detaylı olacak bir makale yazmaya karar verdim. Umarım işinize yarar. HTML ve CSS bilginiz varsa konuyu çok rahat kavrarsınız.

Öncelikle Blogger'da blogun Şablon kısmına girerek HTML'yi Düzenle kısmına girelim. Blogger temamızın kodlarını bu kısımda yapacağız. Ben paarthurnax adlı bir blog oluşturdum ve temayı onun üzerine yapacağım. Sizde öğrenmek amaçlı bir blog oluşturun ve yaptıklarıma göre hareket edin.

Yukarıda olduğu gibi bulunan tüm kodları Tümünü Seç yaparak siliniz. Çünkü kodları baştan yazacağız. Artık sayfamız boş olduğuna göre aşağıdaki resimde olduğu gibi kodlarımızı yazalım.

Kodları yukarıdaki gibi yazdık. Şimdi Şablon'u Kaydet yapın ve kodlara tekrar bakın.

Kodlarda otomatik olarak bazı değişimler meydana geldi. Blogger temasının CSS kodları <![CDATA[ css kodu ]]> olacak şekilde yazılır. <b:skin> etiketleri CSS kısmını oluşturur kısaca. <b:section> etiketi ise blog yapısını oluşturan temel etmendir. Eğer Yerleşim kısmına bakarsanız blog yapısının şu şekilde olduğunu göreceksiniz.

<b:section> içerisinde kullandığımız class kullanımı zorunlu olmamakla birlikte id kullanımı zorunludur. Aksi takdirde hata verecektir. showaddelement ise gadget eklensin mi eklenmesin mi anlamında yes ve no sorgusu yapar. Gadget eklenebilmesi için yes yazdık.

<b:section> yapımızı belli şekillere CSS ile verebilmek için ayrıca baslik class ı içerisine ekledik. Zaten örnek yaptıkça mantığıda anlayacaksınız.

Eğer Blog'u Görüntüle derseniz, boş bir sayfa ile karşılaşacaksınız o yüzden hadi o boşluğu blogun ismiyle dolduralım. Yerleşim kısmından header bölümündeki Gadget Ekle'ye tıklayın.

Sayfa Üstbilgisi gadgetini ekleyin ve kaydedin. Blog'u Görüntüle yaptığınızda blogunuzun isminin sol üst köşede yer aldığını göreceksiniz. Evet buraya kadar sorunsuz geldiysek çok iyi. Elbetteki ilk başta anlamak biraz zor olabilir ama mantık olarak çok basit. Her şey bir kalıptan ibaret. Blogumuzun ilk hali aşağıdaki şekilde.

Ancak biraz daha şekillendirebiliriz. Blogumun ortalanmasını istiyorum. O yüzden CSS kodunun yazılacağı kısıma .baslik seçicisi oluşturarak margin:auto; özelliği veriyorum. Genişlik olarak 1000px değeri veriyorum. Arkaplan rengini ise #CCC yaptım. padding ile iç taraftan blog ismine uzaklığı 10px olarak ayarladık.

Blogun geldiği hal ise şu.

Görüldüğü üzere baslik kısmının üstünde belli bir boşluk var. Bu boşluğu kapatmak için body seçicisi oluşturup margin:0; padding:0; özelliği veriyorum. Aşağıda olduğu gibi.

Blogu tekrar görüntülediğinizde o boşluğun kalktığını göreceksiniz. Şimdi bir tane üst menü yapalım. Ben CSS ve HTML olarak basit bir üst menü yazdım aşağıdaki gibi.

Bu kodlar menünün CSS kodu.

.ustmenu{
margin:auto;
width:1000px;
background:#CCC;
padding:15px;
}
.ustmenu ul{
margin:0;
padding:0;
}
.ustmenu ul li{
display:inline;
line-height:30px;
}
.ustmenu ul li a{
    text-decoration:none;
    color:#000;
    padding:11px;
    margin:10px;
    }

Bu kodlar ise menünün HTML kodları.

<div class="ustmenu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Yazılar</a></li>
<li><a href="#">Videolar</a></li>
<li><a href="#">Teknoloji</a></li>
<li><a href="#">İnternet</a></li>
<li><a href="#">Bilim</a></li>
<li><a href="#">Tarih</a></li>
<li><a href="#">Astronomi</a></li>
<li><a href="#">Hakkında</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

CSS kodunu cdata kısmında sonrasına ekleyeceğiz. HTML kodu ise resimde görüldüğü gibi eklenmelidir.

Blogumuzun görüntüsü aşağıdaki hali aldı.

Şimdi önemli kısıma gelmiş bulunmaktayız. İçerik kısmı section tanımlarken size vereceğim hazır kodu kullanmanız yeterli. Bu kısımda blog yayınlarımız görüntülenebilecek. Şimdi aşağıdaki kısa hazır kodumuzu resimde görüldüğü gibi ekleyin.

<b:section id='primary' class='content-inner' name='Main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'/>
</b:section>

Elbette bu kodu icerik adlı oluşturduğumuz div class'ının içerisine ekledik. Bu sayede CSS kodlarını kullanarak içerik kısmına gerekli şekli ve düzeni verebiliriz. Aşağıdaki css kodu ile gerekli şekli veriyoruz ve blogumuzu görüntülüyoruz.

.icerik{
          margin:auto;
          width:1000px;
          padding:14px;
          background:#fff;
          border-left:1px solid #ccc;
          border-right:1px solid #ccc;
         }

Artık blog içerisinde bulunan yayınlarımızı gösterebiliriz. Hiç hızımızı kesmeden footer kısmını yapalım. alt adında bir div class'ı oluşturuyoruz ve içerisine section yapısını yazıyoruz. İcerik classından sonra ekleyin.

<div class="alt">
    <b:section id="footer" class="footer" showaddelement="yes"></b:section>
</div>

Yerleşim kısmına baktığınızda footer katmanının bulunduğu göreceğiz. Bu kısımın CSS kodlarını aşağıdaki gibi oluşturdum.

.alt{
     width:1000px;
     height:60px;
     margin:auto;
     padding:14px;
     background:#fff;
     border-left:1px solid #ccc;
     border-right:1px solid #ccc;
     border-bottom:1px solid #ccc;
     }

Görüldüğü gibi blogger tema kodlama sanıldığı kadar karmaşık bir yapıya sahip değil. Elbette çok şey yapılabilir ama temel olarak bunları bilmemiz önemlidir. Yaptığım örnek oldukça basit bir yapıya sahip ama daha gelişmiş ve responsive temalar dahi yapabilirsiniz.

• Twitter
• Facebook
• Google+
• Linkedin