Anasayfa » Blogger » Blogger'da Sayfa Düzeni (Layout) Özelleştirme

Blogger'da Sayfa Düzeni (Layout) Özelleştirme

Yerleşim sekmesini açtığımda karşıma çıkan blog düzeni iç açıcı görünmüyor. Her ne kadar bu sorun temanın asıl görünümünü etkilemese bile başka durumlarda can sıkıcı olabilir. Eğer bir Blogger tema kodluyorsanız ve bu temanın sizden başka kullanıcıları olacaksa yerleşim sekmesinde ki sayfa düzeni de kullanıcı dostu olmalı. Örnek vermek gerekirse aşağıdaki gibi olmasın:
Blogger Sayfa Düzeni
Bu düzensiz ve çirkin görüntüyü değiştirmeye karar verdim. Bu sebeple hem özelleştirme işlemini yapacağım hem de o esnada yaptıklarımı bu yazıya not edeceğim.

İlk olarak yapmam gereken işlem tema kodunu açmak. (Bu aşamada temanızı yedeklemeniz tavsiye edilir.) </head> etiketinin yukarısında olmak üzere aşağıdaki kodu yazdık. Bu etiket arasına sayfa düzeni için gerekli CSS kodları yazılacak: 
<b:template-skin><![CDATA[ /* CSS kodları gelecek */ ]]></b:template-skin>
Yukarıdaki kodu yazdıktan sonra kaydet butonuna bastığımda resimdeki hata ile karşılaştım. Panik yok.
Blogger Hatası
Bu durum temanın sürüm kodu ile alakalı. Benim temanın sürüm numarası 1 (öyle sanıyorum). Yukarıdaki kullandığım etikette bu yüzden bu sürüm numarası ile uyumlu değil. Sorunun çözümü ise b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' parametrelerini eklemek. Eklediğimiz yer ise kodda olduğu gibidir: 
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Tema'yı kaydet butonuna tıkladığımızda bu sefer herhangi bir hata ile karşılaşmadık. O zaman artık sayfa düzenini özelleştirmeye başlayabiliriz. Ancak Yerleşim sayfasına tekrar baktığımda şu şekilde bir değişikliğin meydana geldiğini farkettim:
Yerleşim Sayfasındaki Değişiklik

Anladığım kadarıyla bir widget'ın gösterilip gösterilmediğine dair bilgi veren bir emote. Neyse tasarıma başlayalım, ilk olarak sayfa düzeninin arkaplan renginin siyah olmasını istiyorum: 
body#layout{background:#000;}
Şimdi sıra Sidebar, Main ve rightp sectionların yan yana görünmesini sağlamak. Bunun için bazı özel yapılandırmalarda bulunuyorum. Bu yapılandırmalar sizin temanıza göre değişiklik gösterebilir, o yüzden burada devreye CSS bilgileriniz giriyor. 
body#layout{background:#000;}
body#layout .hidden,
body#layout .invisible {
        display: inherit;
}
body#layout .header-area,
body#layout .sidebar-area,
body#layout .content,
body#layout .right-sidebar-area{display: inline-block;left: inherit;position: relative;vertical-align: top;}

body#layout .header-area{float:left;width:30%;margin-bottom:30px;}
body#layout .sidebar-area{float: left;width: 20%;margin-top: 100px!important;margin-left: -285px!important;}
body#layout .content{width: 30%;float: left;margin-top: 90px!important;margin-left: -60px!important;}
body#layout .right-sidebar-area{float:right;width: 30%;margin-top: 80px!important;}
Bu işlemleri yaptıktan sonra Yerleşim sekmesine bakılır:
Özelleştirilmiş Sayfa Düzeni
Görüldüğü gibi oldukça düzenli bir hale geldi. Sizde bu şekilde sayfa düzenini özelleştirebilirsiniz.
Yazar

Hiç yorum yok:

Yorum Gönderme

Kaydol: Kayıt Yorumları (Atom)