Blogger'da Sıfırdan Tema Yapımı
Blogger'da Sıfırdan Tema Yapımı
Blogunuza yeni ve sıfır km bir tema yapmak istemez misiniz?
Basit adımlarla kişisel blogunuzu baştan tasarlayın. Aşağıda ki adımları takip ederek kolayca tema tasarımınızı, blogunuza uygulayabilirsiniz.
1. Blogger Kontrol Paneli için giriş yapın. Buraya tıkla!
2. Sol menüden Tema sekmesine tıklayın. Özelleştir butonunun yanında bulunan ▼ (aşağı ok) tuşuna basıp HTML'yi düzenleye tıklayın.
Basit adımlarla kişisel blogunuzu baştan tasarlayın. Aşağıda ki adımları takip ederek kolayca tema tasarımınızı, blogunuza uygulayabilirsiniz.
1. Blogger Kontrol Paneli için giriş yapın. Buraya tıkla!
2. Sol menüden Tema sekmesine tıklayın. Özelleştir butonunun yanında bulunan ▼ (aşağı ok) tuşuna basıp HTML'yi düzenleye tıklayın.
3. Açılan sayfada bir yığın kod listesi karşınıza çıkacaktır. Sayfada bulunan kodları CTRL ve A tuşlarını basıp DELETE tuşu ile silin.
4. Her tema da olduğu gibi Widget, Section ve Skin ile tema tasarımı yapacağız. Şimdi bu etiketleri kullanarak temamızı oluşturmaya başlayalım.
5. Üstte ki kodları yapıştırdıktan sonra kaydedin. Sayfanıza gittiğinizde hiç birşey görmemeniz normal.Şimdi blogunuza gerçek bir tasarım arayüzü girmek için etiketler ile menü yaparak devam edelim.
4. Her tema da olduğu gibi Widget, Section ve Skin ile tema tasarımı yapacağız. Şimdi bu etiketleri kullanarak temamızı oluşturmaya başlayalım.
<html>
<head>
<title>Blogunuzun adı</title>
<b:skin>
</b:skin>
</head>
<body>
<b:section class='main' id='icerikler' showaddelement='yes'>
</b:section>
</body>
</html>
5. Üstte ki kodları yapıştırdıktan sonra kaydedin. Sayfanıza gittiğinizde hiç birşey görmemeniz normal.Şimdi blogunuza gerçek bir tasarım arayüzü girmek için etiketler ile menü yaparak devam edelim.
6. Tekrar kontrol panelinize dönün.
Sol menüden Düzen sekmesine tıklayın. İstediğiniz alana göre Widget ekleye tıklayın. Etiketleri seçip kendimize bir menu oluşturuyoruz. Sayfanıza baktığınızda menünün yansımış olduğunu göreceksiniz.
Diğer yandan section tagları arasında bir widget kodu oluştuğunu farkedeceksiniz.
Sıra geldi css kodlarımızı yazmaya.Head tagları arasında bulunan b:skin taglarının içine kendi css kodlarımızı ekleyeceğiz. Şimdi <ul> tagı için bir değer belirlememiz gerekiyor.
Eklenmesi gereken bir diğer kod ise Blog içerikleri. Bu kodu kesinlikle eklememiz gerekiyor.
<b:widget id='Label1' locked='false' title='Etiketler' type='Label'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
Turuncu ile renklendirdiğim kodu bulup bu kod ile değiştirelim.
<ul id="menu">
Şimdi de temel kodlarımızın içinde bulunan b:skin tagları arasına css kodlarımızı yazalım.
<b:skin><![CDATA[
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
float: left;
width: 150px;
position: relative;
}
#menu a {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
background-color: #00CCFF;
display: block;
padding-top: 5px;
padding-right: 5px;
border: 1px solid #00CCFF;
text-align: center;
line-height: 30px;
margin-right: 2px;
}
#menu a:hover {
background-color: #0099FF;
}
]]></b:skin>
7. Karşınıza bazı otomatik olarak oluşan kodlar çıkacaktır. Bu kodları silmeyin. Biz bu kodlara CDATA kodları diyoruz. Blogunuzun anasayfasına baktığınızda kodlarınız aktif olarak uygulandığını göreceksiniz. Kodlar çalışmıyorsa geriye dönüp işlemleri tekrar uygulayın.Eklenmesi gereken bir diğer kod ise Blog içerikleri. Bu kodu kesinlikle eklememiz gerekiyor.
expr:href='data:post.url -> İçeriğin urlsi
expr:src='data:post.firstImageUrl' -> Öne çıkarılan resim urlsi
expr:alt='data:post.title' -> Resmin alt etiketi
<data:post.title/> -> İçeriğin Başlığı
8. Şimdi yeni bir widget ekleyeceğiz. Önce ki widget yönteminden farklı olarak kod şeklinde ekleyelim. Aşağıda bulunan kodları section tagları arasına yerleştirin ve düzenlemeleri kendinize göre yapın. Bu kod temanızda herhangi bir bölümü temsil eder.<b:widget id='Blog1' locked='false' title='Blog Kayıtları' type='Blog'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:loop index='x' values='data:posts' var='post'>
</b:loop>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Önceki Sayfa</a><br/>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Sonraki Sayfa</a><br/>
</b:if>
</b:if></b:if>
</b:includable>
</b:widget>
9. Üstte ki kodları kabataslak anlatmak gerekirse kırmızı renkte ki kodlar sayfanın ne olduğunu (içerik sayfası, anasayfa vs) anlamak için bir if değeridir. Yeşil renkli kod ise Döngü kodudur. Şimdi aşağıda verilen kodları kullandığımızda ise ileri de gireceğiniz içerikleri anasayfada göstermek amaçlı kullanacağız. Sarı renkli kodlar önceki - sonraki sayfa butonlarını temsil etmektedir. Şimdi Anasayfamıza içeriklerimizi eklemeye başlayalım. Yukarıda bulunan yeşil renkte ki kodların arasına aşağıda ki kodu ekleyip kaydedelim.
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:loop index='x' values='data:posts' var='post'>
</b:loop>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Önceki Sayfa</a><br/>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Sonraki Sayfa</a><br/>
</b:if>
</b:if></b:if>
</b:includable>
</b:widget>
<div class="item">
<img expr:src='data:post.firstImageUrl' expr:alt='data:post.title'/> <br/>
<a expr:href='data:post.url'><data:post.title/></a>
</div>
10. Şimdi blogunuzun anasayfasını ziyaret ettiğiniz de kodların aktif olarak çalıştığını görürsünüz. İçeriklerin düzeni için biraz CSS kodu kullanmakta fayda var. Yukarıda verilen kodlar arasında yani b:skin tagları arasına aşağıda verilen kodları ekliyoruz.
.item{
width:200px;
height:350px;
display:block;
float:left;}
.item img{
width:190px;
height:300px;}
11. Girdiğiniz içerikler de resim eklemeyi unutmayın. Anasayfa da bulunan içerikte girilen görseller temanın görünüşünü etkilemez.Yazıyla alakalı etiketler;blogger, blogspot, blog, tema, template, templates, theme, temalar, temaları, teması,
blogger tema, blogspot tema, blogger temalar, blogger temaları, blogger teması,
blogger 2023 tema, blogspot 2024 tema, blogger yeni temalar, tema indir,
blogger 2023 template indir, blogger 2023 templates indir, blogger 2023 theme indir,
blogger 2021 themes yükle, theme, templates, themes, blogger themes, responsive blogger themes,
mobile blogger theme, simple blogger theme, plain, blogger theme,
Hiç yorum yok: