Sabit/Statik sayfaların tasarımını özelleştirin.

sayflar Blogger’ın 1/15/2010 Tarihinde duyurduğu ve 10 adete kadar hakkımda iletişim veya kendi galerilerinizi oluşturabileceğiniz, sayfalar özelliği blogger/blogspot tabanlı en blogların en büyük eksiklerinden birini ortadan kaldırmıştı.

 

Daha sonra 20 adet sayfa oluşturulabilmesine izin vermesi de diğer önemli bir gelişmeydi. Üstelik bu sayfaların tasarımının özelleştirilebilir olması blog’unuzun ana sayfası ile diğer sayfalar arasında fark yaratabilmenizi sağlıyor.

 

Bu yazımızda sizlerle,  hazırladığınız sabit sayfaları diğer sayfalardan farklı gösterebileceğiniz adımları paylaşacağız. Hatta işi bir adım daha öteye götürerek her sayfanın tasarımını diğerlerinden farklı olarak nasıl özelleştirebileceğinize örnekler sunacağız

 

Yapacağımız işlemleri başlamadan önce biraz HTML ve CSS bilginiz  ve blogger’ın özel kodlarının nasıl kullanıldığını bildiğinizi var sayarak devam ediyorum..

 

İşe hemen bir örnekle başlayalım.

iletişim-sayfası-sığmıyor


Daha önce Jquery uygulamalarını tanıtmak için oluşturduğumuz blog’umuz için birde iletişim sayfası oluşturmuştuk, bu iletişim sayfasının genişliği demo blogumuzun genişliğiyle uyuşmadığı için taşmalar yapıyordu, bu sorunu çözebilmek içinde sabit sayfalarda kenar çubuğunu gizleyip iletişim sayfasının geldiği bölümü genişlettik.

 

Buradan demo blogumuzun ana sayfasına bakacak olursanız sidebar diye tabir edilen kenar çubuğunun yerinde olduğunu göreceksiniz, buradan da iletişim sayfasına bakacak olursanız kenar çubuğunun, iletişim sayfasında gizleniyor olduğunu ve iletişim sayfasını geldiği bölüm olan post(yazı) bölümünün daha da genişlediğini göreceksiniz, bunu nasıl yaptığımızı merak ediyorsanız aşağıdaki işlemleri tekrarlayabilirsiniz.

 

 

1.Adım Sırası ile  Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyoruz.

 

Yapacağımız işlemlere başlamadan önce Tam şablon yükle yazan bağlantıyı kullanarak Blog şablonunuzu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri geri alabilirsiniz.

 

2.Adım Aşağıda bulunan kodları kopyalayın ve klavyenizdeki Ctrl + f tuşuna aynı anda basarak açılan arama formunda aratın.

 

</head>

3.Adım </head> ifadesini bulduktan sonra hemen  üstüne gelecek şekilde aşağıda bulunan kodu ekleyip kaydedin.
 

<b:if cond='data:blog.pageType == &quot;static_page&quot; '> 


 


<!- -CSS kodlarınız buraya gelecek - ->


 


</b:if>

 
Şablona eklediğiniz bu kod blog’unuza girildiğinde sabit sayfalar görüntüleniyorsa içine yazdığınız CSS kodlarının çalışmasını sağlar.
 
Yine örneğimizle devam edecek olursak demo blog’umuzda kenar çubuğunun yani sidebarın görünmesini istemiyorduk ve yazı alanı yani main-wrapper diye tabir edilen bölümünde daha büyük görünmesini istiyorduk, bunun içinde eklediğim kodların içine aşağıdaki CSS kodları ekledim.
 
<style>
#main-wrapper {
  width: 665px;
}
 
#sidebar-wrapper {

display:none;

}

</style>

 

buradaki “width: 665px; “  değeri yazı bölümünü genişletirken  “display:none;” de kenar çubuğunu gizliyor.

 

Bu noktada bir hatırlatmada bulunmak istiyorum kullandığımız şablondaki bölümler sizin şablonunuzdaki bölümlerden farklı olabilir o yüzden kendi şablonunuzdaki bölümleri bulmanız ve kodları ona göre değiştirmeniz gerekiyor.

 

Sadece bir sayfanın tasarımını özelleştirin

Yazımızın başında size sayfaların her birini farklı özelleştirebileceiğinizi belirmiştim ..

 

yani ben iletişim sayfasının tasarımının farklı görünmesini istiyorum ama diğer sayfalar normal kalsın diye bilirsiniz bunun içinde yapmanız gereken işlem şöyle.

 

Yine </head> ifadesini bulduktan sonra hemen  üstüne gelecek şekilde aşağıda bulunan kodu ekleyin ve kodun hangi sayfada çalışmasını istiyorsanız “http:/sayfanın-linki” yazan bölüme o sayfanın linkini yazın.

 

<b:if cond='data:blog.canonicalUrl == &quot;http:/sayfanın-linki&quot;'>


 

<!- -CSS kodlarınız buraya gelecek - ->



</b:if>


 
Tasarım için  CSS kodlarını ekleyip sayfanın linkinide değiştirdikten sonra eklediğiniz CSS kodları, sadece sayfaya girildiğinde  çalışacaktır.
Paylaş !

30 yorum:

  1. Bu yazı çok işime yarayabilir. Kaybetmemek için Stumble'ladım. Teşekkürler...

    YanıtlaSil
  2. Hocam verdiğiniz kodları ekledim değişen bişey olmadı.Bloğumda sağda ve solda olmak üzere iki tane kenar çubuğu var bir sayfada bunları saklayıp yayın alanını tam sayfa yapmak istiyorum.Yardımınızı bekliyorum.

    YanıtlaSil
    Yanıtlar
    1. yazıda kullanılan bizim demo blogumuzun örnek kodları bu kodların her şablonda aynı olmadığını zaten yukarıda belirttim, yazının amacı bu işlemlerin nasıl yapıldığını anlatmak.

      @ReHitu rica ederim

      Sil
    2. Css bilgim yok ,kendi şablonumdaki kodları nasıl bulup değiştirebilirim?

      Sil
    3. yazıda linkleri var tasarımın üzerinde özelleştirme yapabilmen için biraz bilgi şart.. hadi kolayca bulup anlatılacak bir şey olsaydı anlatayım veya şablonunu gönder ben yaparım derdim ama bu dediklerimde saatlerce sürer her işlem için test yapmam gerekir kaldı ki senin yapmak isteyeceğin özelleştirmeleride bilemem. bunu sana yaptığım zaman her kese yapamam gerekir buda mümkün değil.

      o yüzden o kadar yazıyı yazdık biraz vakit ayırıp bilgi edinmeye çalışırsan yapmak istediğin her şeyi kolayca yapabilirsin.

      Sil
  3. Anlamakta çok zorlandım. 3. aşamadaki kodları /head üstüne yapıştırdığımda zaten blog hiç açılmadı. -- CSS kodlarınız buraya gelecek-- derken hangi css kodlarından bahsettiğinizi anlamadım sanırım. Bu anlattıklarınızı başarmak istiyorum. Lütfen yardımcı olur musunuz? hangi css kodlarını gösterdiğiniz yere yerleştireceğim. Benim istediğim şey şu; statik sayfada gadget ve reklam olmasın. Bomboş bir sayfam olsun. Olabilir mi böyle birşey?

    YanıtlaSil
    Yanıtlar
    1. statik sayfalarda gadget ve reklamları gizledikten sonra, yazı bölümünün sayfayı tamamen kaplaması için bu bölümü de de genişletmeniz gerekir, bu işlemler için kullndığımız kodlara CSS kodları deniyor, Tabi CSS kodlarının hangisi olduğunu bilmeniz için daha önce bu bölümlerin isimlerini bilmeniz gerekiyor yani HTML kodlarında div lerle reklma bölümlerini ve gadgetları içine alan örnek kenar çubuğunun HTML kodlarını bulup burada genellikle < div id="bölüm-adı" şeklinde başlayan bölümlerin kodlarının hangileri olduğunu bulmanız gerekiyor daha sonrada bunları şekillendiren CSS kodlarını bizim yukarıda paylaştığımız blogger'ın özel kodları içerisine alıp yapmak istediğiniz işlemi yaptırmanız gerekir.

      Tabi tüm bunlr içinde yine yazıda uyardığım gibi HTML,CSS ve bloggerın kendine has kodlarını nasıl kullanbileceiğinizi bilmeniz gerekir.

      Sil
  4. arkadasım sana daha oncede mesaj attım bloggera longtaıl nasıl ekleyebılıyoruz.bılıyorum yada bılmıyorum dıye en azından bır cevap yaz zaten burdakı konular hep dıgerlerının aynısı bana yardımcı olmanı ıstıyorum bu konuda zahmet olmazssa

    YanıtlaSil
  5. Tayfun bey size Blogger sitem hakkında bir soru sormak istiyorum. Sitem şu: http://elisifestivali.blogspot.com/ Benim isteğim Başlık kısmına El İşi Festivali Yazan yere kendime logo tasarladım onu koymak o logoya tıklayınca ana sayfaya gitmesi acaba mümkünmüdür ?

    YanıtlaSil
    Yanıtlar
    1. başlık kısmındaki logoya tıknaıldığı zaman zaten ana sayfaya gidiyor..

      Sil
  6. Konuyla alakası yok ama blogger hakkında bildiklerinizden dolayı size sormak istiyorum. Ben özel domain aldıktan sonra microsoft publisher'den yaptığım site tasarımını blogger'a yükleyebilecekmiyim?

    YanıtlaSil
    Yanıtlar
    1. alan adı aldıktan sonra sadece alan adı ve e-posta adresine sahip olabilirsin yani dosya barındırma sistemi olan hosting almış olmuyorsun.

      Sil
  7. Peki sizin sayfalarınızda yaptığınız gibi bende sayfama devamını oku koymak istiyorum nasıl koyarım.(Anasayfaya değil...)

    YanıtlaSil
    Yanıtlar
    1. devamı oku şeklinde bağlantılar ana sayfa içindir, gazetelerin ana sayfasını düşün ana sayfada daha çok habere yer vermek için haberlerin kısa bir bölümününe yer verirler ve haberin tamamı için şu sayfaya bakın diye altına yazarlar, bu sayede hem manşete daha çok habere yer vermiş olurlar hemde haberin kısa bir bölümünü yayınlayarak merak uyandırmış olurlar, bloglarda kullanılan devamını oku bağlantısıda aynı işlevi görür ana sayfanda daha çok habere daha düzenli bir şekilde sayfa aşağı doğru uzayıp durmadan açılsın diye kullanırsın.


      bizim nasıl devamını oku şeklinde bağlantılar oluşturduğumuza buradan baka bilirsin başka sayfalarda nasıl kullanıldığını bilmiyorum

      Sil
  8. adamsın tayfun hocam tekrar eline koluna saglık

    YanıtlaSil
  9. Static_Page olunca çalışıyor ama Statik olup tek bir sayfa olunca örneğin hakkında sayfası olunca çalışmıyor :/

    YanıtlaSil
  10. Harikasın kardeş çook teşekkürler.

    YanıtlaSil
  11. Merhaba tayfun bey, öncelikle verdiğiniz bilgiler için teşekkür ederim.

    Sizden öğrenmek istediğim ana sayfamda ki manşet alanımı sabit sayfalarda nasıl gösterebilirim. Şimdiden yardımlarınız için teşekkür ederim. Saygılarımla.

    YanıtlaSil
  12. hocam sitemde iletişim sayfası oluşturdum fakat açılmıyor devamını oku bölümü geliyor sizin hazırladğınız kodu uyguladım değişen bişey olmadı tıklıyorum açılmıyor iletisim sayfası kesinlikle gözükmüyor yardımcı olabilirmisiniz site link: http://goo.gl/FjNTL

    YanıtlaSil
    Yanıtlar
    1. Yukarıda ki yazı ile senin yapmak istediğinin hiç bir ilgisi yok, sorun şu senin sitende ki devamını oku kodu hatalı, yani sen sabit statik sayfalarda ne yayınlarsan yayınla bu iletişim sayfasıda olsa başka bir yazıda olsa devamını oku şeklinde kesilecektir, eğer devamını oku bağlantısına ait kodları silip yerine bizim daha önce tanıttığımız aşağıdaki linkteki kodları eklersen sorunsuz çalışacaktır.

      http://www.bloggermodifiye.com/2012/05/blogger-icin-resimli-otomatik-devamn.html

      Sil
  13. hocam merhaba;

    İletişim formunu ekledikten sonra alta kalan yorum yap bölümünü sidebarları cıkardığımız şekildemi cıkarıyoruz yoksa farklı bi kod bilgisi varmı?

    YanıtlaSil
    Yanıtlar
    1. Merhaba Selim..

      Yorum formunu sabit syafalarda gizlemenin daha basit bir işlemi var sağda sayfayı hazırladığın yazı panelin sağında "Seçenekler " diye yazan yere tıkla ve "Okuyucu yorumlarına izin verme" diye yazan seçneği işaretledikten sonra tamama tıkla..

      Sil
  14. Tayfun Bey;
    Yazdığım belli etikete sahip yazıların ana sayfamda gözükmeden ilgili sayfaya ait kategoriye gitmesini istiyorum. yapabilmemin bir yolu var mıdır

    YanıtlaSil
    Yanıtlar
    1. Özlem hanım blog mantığı ve blogger scripti, yazdığınız yazıları yeniden eskiye doğru ana sayfada sıralamak üzere düzenlenmiştir, yani yazılarınızı yayınlamadan önce yazı panelinde sağda bulunan seçenekelerde yer alan yazı tarihini eski bir tarih olarak belirlerseniz yazınız ana sayfada değilde daha eski yazılarınız arasında görünür.

      Sil
  15. Tayfun Bey Merhabalar;
    Ben blog sayfamda sayfa numaralandırma eklentisi kullandım fakat bu sadece ana sayfamda geçerli, diğer sayfalarımda geçerli değil. Ayrıca ana sayfamdaki görünür kayıt sayısını 5-7 gibi ayarlayabiliyorum fakat diğer sayfalarda ayarlayamıyorum. Örneğin ana sayfamda 5 kayıt var ve altta sayfa numaralandırma eklentisi var fakat Günlük Yaşam sayfasında 20 kayıt var ve sayfa numaralandırma yok. Bunu kendim ayarlamak istiyorum. Diğer sayfaları da ana sayfamla aynı yapma şansım var mı ? Yardımcı olursanız çok sevinirim.

    Blog Sayfam : http://enpratikbilgiler.blogspot.com/

    YanıtlaSil
  16. Çok çok teşekkür ederim çok işime yaradı.

    Bu arada arkadaşlar temanıza özel ID ve Class etiketlerini bulamıyorsanız Mozilla Firefox'un Firebug adlı eklentisini kullanın 2-3 dakikada halledersiniz.

    YanıtlaSil
  17. merhabalar
    ben http://www.byblok.blogspot.com sitemde sabit tasarım kullanıyorum sitemde Rss beslemeleri oluşturmak istiyorum nasıl yapabilirim slmlar

    YanıtlaSil
  18. merhaba benim blogumda sabit iki menü sayfası mevcut.ama ben onları ayrı bir şekilde kullanmak istiyorum yani anasayfadan bağımsız içerik eklemek derdindeyim.katagori etiket vb denedim ama istediğim kolaylıkta olmadı.nasıl yapabilirim yada yapılabilir mi?

    absurdmusunuz.blogspot.com

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz