16 Ağustos 2012 Perşembe

Blog'unuzun bir ana sayfası olsun [HTML]


Blog'unuzun bir ana sayfası olsun [HTML]

ana-sayfa_thumb[5]
Ziyaretçilerin blog’uğunuzun linkini tarayıcıya yazarak, blog’uğunuza ilk girdikleri anda karşılaşacakları sayfa ana sayfa olduğu için şüphesiz ki en önemli sayfadır.
Bu yüzden ana sayfanızın bir çok özelliği barındırması ve blog hakkında anlaşılabilir bilgi vermesi gerekir, ardından da sitenin içeriğiyle ilgili doyurucu bir rehber görevi üstlenir.

Blog’unzun  ana sayfasını diğer sayfalardan farklı gösterebileceğiniz, işlemleri anlatmaya başlamadan önce, işe size blogger’ın sayfa yapısı hakkında biraz bilgi vererek başlamak istiyorum, bu sayede işlemleri daha kolay anlayabilir ve uygulalayabilirsiniz.


Blogger sayfa yapısına küçük bir bakış

Blogger yapısı gereği bir “scripttir”  , bu script  siz bir yazı yazdığınızda bu yazıyı ön belleğe alır ve gönderdiğiniz her yayın için otomatik olarak yazı sayfası adı verilen HTML bir sayfa oluşturur.
Ayrıca blogadınız.blogspot.com olan ana sayfanızın linki, yazı sayfalarındablogadınız.blogspot.com/yazınız/html diye de değiştirilir.
        blogger-sayfa-yapısı
Yani temel olarak Ana sayfa, Yazı sayfaları, Sabit(statik) sayfalar olmak üzere 3 çeşit sayfa olduğunu söyleyebiliriz bunların dışında yorum sayfaları ve arşiv sayfaları da bulunmaktadır.

Yorum sayfaları dışarıdan bağlantı verilerek, pop up veya dışarıdan “iframe” ile yazı sayfalarının içinde açtırılabilirler, Arşiv sayfaları da, yine ana sayfa formatında görüntülenir.

Blogger sayfa yapısı hakkında kısa bir bilgi edindiğimize göre artık blog ana sayfamızla diğer sayfalar arasında fark yaratabileceğimiz işlemlere de geçebiliriz.

Blogger’ın özel kodlarını kullanın.

Amacımız bir ana sayfa hazırlamak olduğu için, sayfamızın diğer sayfalardan farklı görünmesi gerekir, bunun içinde eklediğimiz her hangi bir bölümü veya gadgetı, HTML kodlarına müdahalede bulunarak yalnızca ana sayfada görüntülenmesini sağlayabilir veya gizleyebilirsiniz.

Yukarıda da bahsettiğimiz gibi blogger bir scripttir ve bu scriptin de kendine has bazı kodları bulunmaktadır bu kodları kullanarak her hangi bir bölümü istediğiniz sayfada gizleyebilir veya sadece o sayfada görünmesini sağlayabilirsiniz.

Eğer bizim blog’umuzun ana sayfasını daha önce ziyaret ettiyseniz hemen hemen her blog ta görmeye alışık olduğumuz Facebook beğen butonunda bulunduğu sayaçlı düğmeleri ve bunlarda ilginizi çeker gibi eklentilerin yer aldığı bölümleri  görmeniz mümkün değil, bunun sebebi bu bölümü ana sayfada gizlememiz.

Sizde her hangi bir eklenti veya bölümü ana sayfada gizlemek isterseniz aşağıdaki adımları takip edebilirsiniz.

Buradan sonra bir örnekle devam edelim, diyelim ki siz blog’unuza Facebook beğen butonu eklediniz, fakat  bu butonun ana sayfada görünmesini istemiyorsunuz.

Bunun içinde Facebook beğen butonuna ait kodları  aşağıda bulunan kodların içerisine yerleştirmeniz gerekiyor.

<b:if cond='data:blog.pageType != "index"'> Butona ait kodlarınız buraya gelecek </b:if>

facebook-beğen-düğmesini-ana-sayfada-gizle
Bu sayede düğme yazı sayfalarında ve diğer sayfalarda görünürken ana sayfada gizleniyor.

Yukarıdaki işlemi tekrarlayarak  blog’uğunuza eklediğiniz linkwithini , slaytları, veya reklamları ana sayfada gösterebilir veya gizleyebilirsiniz.

Blogger gadgetlarını sadece ana sayfada gösterin yada gizleyin

Blog’unuzu daha işlevsel bir hale getirmek için kenar çubuğuna eklediğiniz arşiv, izleyiciler veya favori bloglarım gibi gadgetlardan istediğinizi sadece ana sayfada gösterebilir veya gizleyebilirsiniz.

Diyelim ki blog’unuzun ana sayfasında  yayınlarınız listelendiği için kenar çubuğuna eklediğinizSon yazılar gadget’ının ana sayfada görünmesini istemiyorsunuz.

Bunun yapabilmek içinde Blogger kumanda paneli –> Şablon –> HTML’yi düzenle yolunu takip ederek blog’unuzun kodlarının açık bulunduğu bölüme gidin.

gadget-son-yazılar

Widget Şablonlarını Genişlet 01   yazan kutucuğu işaretledikten sonra, gizlemek istediğiniz gadgetın kodlarını bulmanız gerekiyor, bununda en kolay yolu klavyenizdeki ctrl ve f tuşlarına aynı anda bastıktan sonra açılan arama formuna gadget’ın adını yazmak02

son-yazılar-ilk

Arama sonucunda karşınıza resimde olduğu gibi bir kod grubu çıkacaktır bu kodlar son yazılar adlı gadgeta ait kodlar.

Gadget’ın ana sayfada görünmesini istemiyorsanız kodlar içerisinde yer alan
 <b:includable id='main'>  yazan kısmın hemen altına aşağıdaki kodları ekleyin03
  
<b:if cond='data:blog.pageType != "index"'>

Daha sonra sayfayı aşağı kaydırdığınızda bu etiketin kapanışı olan ilk  </b:includable>etiketinden hemen üstüne de aşağıda bulunan kodu ekleyip04 şablonu kaydedin.

</b:if>

son-yazılar-iki

Bu düzenlemeleri yaptıktan sonra Son yazılar gadget’ı diğer sayfalarda görünürken
blog’unuzun ana sayfasında gizlenecektir.

Aynı şekilde istediğiniz bir gadgetı sadece ana sayfada görünür yapabilmenizde mümkün.

Yukarıdaki işlemde eklediğimiz kodlarda bulunan  ünlem(!) işareti bu gadget’ın ana sayfada gösterilmesini engellediği için görünmeyecektir ama biz oradaki ünlem yerine eşittir(=) işareti yazarsak gadget’ımız sadece ana sayfada görünür.

Yani şöyle:
Ana sayfaysa gizle:     <b:if cond='data:blog.pageType != "index"'>
Ana sayfaysa göster:  <b:if cond='data:blog.pageType == "index"'>

Diğer sayfalarda kullanabileceğiniz kodlar

Amacımız her ne kadar düzenli ve işlevsel bir ana sayfa için yapacağınız işlemleri sizinle paylaşmak olsa da, yukarıda anlattığımız işlemi blogger’ın diğer sayfaları için uygulamanız mümkün.

Diğer sayfalarda kullanabileceğiniz kodları da aşağıda inceleyebilirsiniz.
Ana sayfada Göster/Gizle
<b:if cond='data:blog.pageType == &quot;index&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'> (.....) </b:if>

Yazı sayfalarında Göster/Gizle
<b:if cond='data:blog.pageType == &quot;item&quot;'> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; '> (.....) </b:if>

Arşiv sayfalarında Göster/Gizle
<b:if cond='data:blog.pageType == &quot;archive&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;archive&quot; '> (.....) </b:if>

Sabit(statik) sayfalarda Göster/Gizle
<b:if cond='data:blog.pageType == &quot;static_page&quot; '> (.....) </b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot; '> (.....) </b:if>



İlk yazı(post) ise Göster
<b:if cond='datapost.isFirstPost'> (.....) </b:if>


Blog’un ana sayfa URL’si ise Göster/Gizle
<b:if cond='data:blog.url == data:blog.homepageUrl'>(.....) </b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'> (.....) </b:if>

Kafa karışıklığı yaratmaması için son kodumuz için bir açıklama getirmek istiyorum, yazının başında incelediğimiz ana sayfada gösterip/gizleyen kodla farkı, eğer siz ilk anlattığımız kodla her hangi bir bölümü gizlemek veya sadece ana sayfada göstermek isterseniz, blog ziyaretçileriniz sayfaların altında bulunan navigasyon menüsüyle blog’unuzda gezinmeye başladıklarında buda ana sayfa olarak görülüp ona göre işlem yapılır.

Fakat son kodumuz sadece blog’unuzun URL adresi(blogadınız.blogspot.com) ise işlem yapar.

Not: Bu yazı bloghocam sitesinden alıntı yapılmış olup tüm hakları site sahibine aittir. Yazara bu makalesi nedeniyle teşekkür ederiz.

Hiç yorum yok: