Web Günlüğü

Önsöz

Bu kod rehberi 30 Aralık 2012 Pazar günü bizzat tarafımca hazırlanmaya başlanmış olup çeşitli sebeplerle tamamlanmadığı için yayına alınmamıştır. Nihayet 19.09.2016 tarihi itibari ile yani yaklaşık 4 yıl gibi bir süre sonunda tamamlanarak yayına alınmıştır. Blogger Kod Rehberi sayfası ile yeni blog yazmaya başlayanlar veya çoğu kod veya kod bloklarının ne işe yaradığını bilmeyenler için Konfüçyüs'ün meşhur sözü "Balık vermek yerine balık tutmayı öğret!" düşüncesi altında blogger tema düzenlemelerinde ve çeşitli şablonların blogger'a entegre edilmesinde kolaylık sağlamak amacıyla hazırlanmıştır.

CSS Style Kod Yapısı

Blogger tasarımı(temayla) ile ilgili biçimlendirme (style) CSS kodlarının bulunduğu yerdir.

Blogger Title(Başlık) Kod Yapısı

<title><data:blog.pageTitle/></title>

Title(Başlık) için belirlenmiş bu kod yapısı blogger'ın kendine has şablonlarında varsayılan olarak gelen title(başlık) kod yapısıdır. Seo(arama motoru optimizasyonu) kriterlerine uygun olmadığından bu kod yapısı fazla tercih edilmemektedir.

Blogger Javascript Kod Yapısı

<script type="text/javascript">
//<![CDATA[ Javascript Kodları Buraya //]]>
</script>

Blogger'da javascript kodlarının yer aldığı varsayılan kod yapısı. "Javascript Kodları Buraya" olarak belirttiğim yere şablonda varsayılan olarak gelen javascript kodları bulunur ve harici kullanılmak istenen javascript kodlarının yazılacağı yerdir. Tabi eğer farklı barındırma alanından(host)javascript kodları çekilecekse aşağıdaki kod yapısı kullanılır.

<script type="text/javascript" src="http://orneksite.com/js/javascript.js"></script>

Blogger Css Kodlarının Yazıldığı Kod Yapısı

<b:skin><![CDATA[ Css Kodları Burada ]]></b:skin>

Blogger'da css kodlarının yer aldığı varsayılan kod yapısı. "Css Kodları Burada" olarak belirttiğim yere şablonda varsayılan olarak gelen css kodları bulunur ve harici kullanılmak istenen css kodlarının yazılacağı yerdir. Tabi eğer farklı yerden css kodları çekilecekse aşağıdaki bilindik kod yapısı kullanılır.

<link rel="stylesheet" href="http://orneksite.com/css/style.css" type="text/css" media="all" />

Yazı İçeriği Gösterme Kodu (Kısa Fonksiyon)

<data:post.body/>

Yazılan yazıyı yani içeriği gösterme kodudur. Herhangi bir yerde tek başına işlev görmez blogger'ın blog kayıtları ile ilgili olan kısımda bulunur.

Yazı Başlığı Gösterme Kodu

<data:post.title/>

Yazılan yazının başlığını gösterme kodudur. Herhangi bir yerde tek başına işlev görmez. İlgili kod yapısı içerisinde bulunur.

Yazı Tarihi Gösterme Kodu #1

<data:post.dateHeader/>

Bu tarih gösterme biçimi blogger'da en yaygın kullanılan tarih biçimidir. Bu tarih biçiminin çözülebilen bir sorunu vardır o da aynı gün yazılmış olan birden fazla yazıdan sadece en son yayınlanan yazının tarihini göstermesidir. Bu tarih biçimini kullanıyorsanız ve bu sorunu yaşıyorsanız bu yazıya bakınız. Bu kod yapısı da tek başına işlev görmez ilgili kod yapısı içerisinde bulunmalıdır.

Yazı Tarihi Gösterme Kodu #2

<data:post.timestamp/>

İkinci tarih(zaman) biçimi gösterme kodu. Bu tarih(zaman) biçimi bizim Türkiye tarih, saat sistemine uygun olmamasına rağmen sabit sayfalar için kullanılabilir. Sabit sayfalarda bu zaman biçimini kullanmanın amacı sayfalarda her değişiklik yapıldığında bu zaman biçiminin de onu belityior olması. Özetle sayfanın son güncellenme tarihini belirtmesidir. Örnek olarak benim blogumdaki sabit sayfalara bakabilirsiniz.

Yazar İsmi Gösterme Kodu

<data:post.author/>

Yazılan bir yaznın kim tarafından yazıldığını gösteren koddur.

Yazı Etiketini veya Etiketlerini Gösterme Kodu

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' expr:title='"View all posts in " + data:label.name' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

Blogger bir yazıya ait etiketleri göstermek için kullanılır. Sadece tek bir etiket kullanlmak isteniyorsa label.islast != true kısmı label.isLast == true ile değiştirilmelidir.

Yazı Devamını oku bağlantısı gösterme

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

Yazı sonlarında devamını oku gibisinden bir bağlantı gösterilmek isteniyorsa yukarıdaki basit kod yapısı kullanılmalıdır.

Yorum Sayısını Gösterme

<b:if cond='data:post.numComments == 0'> - <a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' expr:onclick='data:post.addCommentOnclick'>Henüz yorum yapılmamış</a></b:if> 
<a class='comment-link' expr:href='data:post.url + &quot;#comments&quot;' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'> -  1 Yorum yapılmış </b:if> <b:if cond='data:post.numComments &gt; 1'> - <data:post.numComments/> Yorum yapılmış </b:if>

Yazı bölümlerinde yorum sayısını göstermek için kullanılan kod bloğu. (Özelleştirilmiş temalarda bulunamayabilir.)


Yeni Özellik

Switch Case

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
Sabit sayfalarda görünecek herhangi bir şey
<b:case value="item" />
Yazı sayfalarında görünecek herhangi bir şey
<b:default />
Sabit veya yazı sayfaları dışında görünecek herhangi bir şey.
</b:switch>

Bir türlü istediğimiz basit şablon yapısına kavuşamasakta Blogger geliştiricileri şablonu basitleştirmek sadeleştirmek adına çalışmaya devam ediyor. Yakın zamanda PHP den aşina olduğumuz Switch Case özelliği buradaki yazıda da görebileceğiniz gibi kullanıma açılmıştı. Switch Case sayesinde uzun sayfa tipi koşul ifadelerini sıralamak yerine daha basit bir şekilde sayfa tiplerine göre özelleştirme yapabilirsiniz.

Tüm Sayfa Tiplerine Göre Özelleştirme Yapma (All Page Types) ESKİ

Switch - Case özelliği dışında eski tip daha sık kullanılan ifadeler var. Bu ifadelerdeki önemli ayrıntı ise programlama dillerinden aşina olduğumuz iki çeşit operatör yani bir nevi koşul belirteçleri. == eşitse(doğruysa) ve !=(değilse) eşit değilse. Yani bir sayfaya has özelleştirme yapılacaksa == işareti kullanılır. Fakat o sayfa dışındaki tüm sayfalarda bir şeyler gösterilmek isteniyorsa != işareti kullanılır.

Not : Index ile HomePageUrl sayfa tipleri aynı değildir. HomePageUrl sadece www.zaferzent.com adresini temsil ederken Index etiket sayfalarını ve arama sonuçları sayfasını da dahil etmektedir.

Index sayfası

<b:if cond='data:blog.pageType == "index"'>
<!--Anasayfaya özel içerik veya özelleştirmeler-->
</b:if>

Index sayfası haricinde

<b:if cond='data:blog.pageType != "index"'>
<!--Anasayfa dışındaki diğer sayfalara özel içerik ve özelleştirmeler-->
</b:if>

HomePageURL

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- anasayfa, etiket ve arama sonuçları sayfası -->
</b:if>

Yazı (İçerik) Sayfası

<b:if cond='data:blog.pageType == "item"'>
<!-- Yazı Sayfası Örneğin : http://www.zaferzent.com/2016/08/blogger-baglanti-kisaltma-url-shortener-eklentisi.html gibi -->
</b:if>

Sabit Sayfalar

<b:if cond='data:blog.pageType == "static_page"'>
<!-- Tüm sabit sayfaları kapsar http://www.zaferzent.com/p/blogger-kod-rehberi.html , http://www.zaferzent.com/p/blogger-kod-donusturucu.html gibi -->
</b:if>

Etiket Sayfası

<b:if cond='data:blog.searchLabel'>
<!-- Tüm etiketleri kapsar http://www.zaferzent.com/search/label/Blogger , http://www.zaferzent.com/search/label/Blogger%20Temalar%C4%B1 gibi -->
</b:if>

Arşiv Sayfası

<b:if cond='data:blog.pageType == "archive"'>
<!-- Blogger varsayılan arşiv sayfaları için www.zaferzent.com/2016/08 veya www.zaferzent.com/2016/ gibi -->
</b:if>

Arama Sonuçları Sayfası

<b:if cond='data:blog.searchQuery'>
<!-- Arama sonuçları sayfası http://www.zaferzent.com/search?q=blogger gibi -->
</b:if>

Hata Sayfası (Blog adresinizde bulunmayan veya yanlış girilen bir bağlantıda karşılaşılan hata sayfası)

<b:if cond='data:blog.pageType == "error_page"'>
<!-- hata sayfası-->
</b:if>

Belirli bir bağlantı(Sadece belirli bir yazıda, sayfada veya etikette)

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2016/08/ornekyazi.html"'> 
<!-- Herhangi bir yazıya /2016/08/ornekyaziest.html veya sayfada /p/orneksayfa.html özelleştirme yapılır -->
</b:if>

Farklı sayfa türleri için Blogger Koşul Etiketleri Yeni - 2018'den itibaren

Sadece anasayfa için

<b:if cond='data:view.isHomepage'> … </b:if>

Index için (eski ve yeni yazı sayfaları dahil)

<b:if cond='data:view.isMultipleItems'> … </b:if>

Yazı ve sabit sayfaların her ikisi için kullanım

<b:if cond='data:view.isSingleItem'> … </b:if>

Sadece tekil yazılar için kullanım

<b:if cond='data:view.isPost'> … </b:if>

Sadece sabit sayfaların için kullanım

<b:if cond='data:view.isPage'> … </b:if>

Etiket sayfaları için kullanım

<b:if cond='data:view.isLabelSearch'> … </b:if>

Arşiv sayfaları için kullanım

<b:if cond='data:view.isArchive'> … </b:if>

Arama sonuçları sayfası için kullanım

<! - Includes label search page ->
<b:if cond='data:view.isSearch'> … </b:if>
<! - Just the search page ->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>

Hata, 404 sayfası için kullanım

<b:if cond='data:view.isError'> … </b:if>

Önizleme sayfası için

<b:if cond='data:view.isPreview'> … </b:if>

Not : Bu sayfa aralıklı olarak güncellenmektedir.