A) Widget Şablonları Genişletilmeden
Öncelikle widget şablonlarını genişletmeden karşımıza çıkan kodlardan bahsedeyim.
Not: İçi nokta dolu parantez o kodun ortasında başka kodların var olduğu anlamına gelir. Bunu her kodda yapacağım. Parantezin solundaki kod anlatacağım kodun başlangıcı, sağındaki değer ise bitişidir. Ve parantezin yerinde de başka kodlar mevcuttur genellikle.
1) <b:skin><![CDATA[ (.....................) ]]></b:skin>
Bu kodun arasında HTML'den <style> ve </style> taglarının arasına yerleştirmeye alışık olduğumuz, şablonun CSS kodları bulunur. Bir tasarım yaparken siz ister bu kodun arasına yazın css kodlarınızı, isterseniz de yine alışık olduğunuz gibi <head> tagından sonra <style> ve </style> taglarını kopyalayın ve bu tagların arasına yazın.
2) <b:section class='....' id='....' > (....................) </b:section>
Bu kodun arasında widgetleriniz bulunur. Etiketler, blog yazıları, blog arşivi, son yazılar vs. sayfa ögelerinden eklediğiniz tüm widgetler bu kodların arasında bulunur. Bu kod sayfanızda birkaç yerde bulunabilir. Örneğin header, sidebar ve main kısımlarının içerisinde olabilir. Tagın içindeki id='....' kısmındaki noktaları silerek kendi şablonunuzda olmayan bir kelime girmeniz şartıyla bu kodu şablonda çeşitli yerlere kopyalayarak blogunuzda istediğiniz yeri widget eklenebilir hale getirebilirsiniz.
3) <b:widget id='.....' title='..........' type='.....'/>
Bunlar da eklediğiniz widgetleri gösterirler ve bu kodlar yukarıda 2. maddede verdiğim kodun arasında bulunurlar. Her widget için bu koddan bir tane çıkar ve widget şablonlarını genişlet dediğiniz zaman bu kodlar genişleyerek içlerindeki tüm html kodlarını size gösterirler. Bu kodlardan birini silmeniz demek o widgeti silmeniz demektir ve şablonu kaydederseniz geri dönüşü yoktur.
B) Widget Şablonlarını Genişlettikten Sonra
Widget şablonlarını genişlettiğimize göre widgetlerin tasarımıyla ilgili kodlarla uğraşacağız demektir.
Not: Sayfa ögeleri kısmından girip bir widgeti düzenlemek ile buradan bir widgeti düzenlemek arasında fark vardır. Buradan widgetin tasarımını düzenlerken sayfa ögelerinden widgetin içeriğini düzenlersiniz.
1) <b:includable id='............'> (...........) </b:includable>
Noktalı yerlerde belirli html kodları ve aşağıda anlatacağım birkaç özel kod daha vardır genellikle. Bu kod belirli değerleri tanımlamak için kullanılır. Mesela "Yorumlar" veya "Yazılar" ın şeklini falan tanımlamaya yarar. İçerisindeki html kodunu değiştirerek tanımladığı nesneler üzerinde değişiklik yapabilirsiniz.
2) <b:include data='......' name='.........'/>
Genellikle kapalı koddur yani kod tek tag ile oluşur kapatma tagı olmaz ve yukarıdaki gibi "/" ile biter. Neyse b:include koduna gelecek olursak, yukarıdaki b:includable koduyla tanımladığımız olayı herhangi bir yere çağırmak için kullanılır. Yani biz b:includable ile belirtilen şeyin görünmesini istediğimiz yeri b:include kodunu taşıyarak belirliyoruz. Çünkü b:includable sadece onun ne olduğunu ve nasıl olduğunu tanımlamak için kullanılırken b:include ise onun nerede olacağını belirtir.
3) <b:if cond='......'> (...............) </b:if>
Bu kod isminden de anlaşılacağı gibi eğer(if) ifadesini içeriyor. Yani belirli koşullarda belirli tepkiler verilmesini sağlıyor. Bu kodun üzerinde çok duracağım çünkü blog tasarımında çok önemli bir yeri var bence. Yerine göre kullanmasını bilen tasarımcı bu kod ile harikalar yaratabilir.
Öncelikle, bir koşullu sorgulama oluşturabilmek için elinizde bir koşulun olması gerekiyor. Bu koşulu da kodun içerisindeki cont='...' kısmında belirtmelisiniz. Şimdi örnek koşulları işleyelim.
3.1) <b:if cond='data:blog.pageType == "item"'> (.....) </b:if>
Bu koşulda gördüğünüz üzere eşitliğini kurmuş. Burdaki matematiksel sembollerden ve ingilizce ifadelerden de anlayabiliyoruz aslında ancak açıklayayım, data:blog.pageType == "item"data:blog.pageType kodu sayfanın ne sayfası olduğunu sorguluyor. item ise sayfanın yazı sayfası olduğunu belirtiyor. Arada iki tane eşittir(==) işaretinin olması da koşulun eşitlik anlamı taşıdığını gösteriyor. Burdaki koşulun anlamı şu: "eğer sayfa yazı sayfasıysa". Bu kod şu şekilde çalışır:
<b:if cond='data:blog.pageType == "item"'> kodu ile </b:if> kodu arasına yazdığınız kodlar sadece yazı sayfalarında çalışır. Onun harici sayfalarda çalışmaz. İki adet eşittir(=) işaretinden birincisini ünlem(!) ile değiştirerek kodu kullanırsanız kod tam tersi anlamda çalışır. Yani <b:if cond='data:blog.pageType != "item"'> kodu ile </b:if> kodu arasına yazdığınız kod sadece yazı sayfasında görünmez. Onun harici tüm sayfalarda görünür.
3.2) <b:if cond='data:blog.pageType == "archive"'> (.....) </b:if>
Bu kod da bir üstteki maddeyle benzer bir özelliğe sahip. Bu kodun içerisine yazdığınız kod sadece arşiv sayfalarında çalışır. Arşiv sayfasında değilseniz yani anasayfada veya yazı sayfasındaysanız bu kodu çalıştırmaz, sadece arşiv bağlantılarından birine tıkladığınızda açılan sayfada çalışır. Aynı şekilde yukarıdaki maddede olduğu gibi ünlemli(!) versiyonu da vardır. Yani arşiv sayfası olmayan sayfalarda elemanın görünmesini sağlar.
3.3) <b:if cond='data:blog.pageType == "index"'> (.....) </b:if>
Bu kodda da sayfa tipinin index, yani anasayfa olması koşulu verilmiş. Bu kodun içine yazdığınız diğer kodlar veya yazılar sadece anasayfada görünecektir. Yukarıdaki iki maddede olduğu gibi ünlemli(!) kullanımı da vardır. Yani yazıların ana sayfa harici sayfalarda görüntülenmesi koşulu. Bu kod aşağıdaki şekilde de karşınıza çıkabilir:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
Bu kodun da blog ana sayfanızın adresinin şu anda açık olan sayfaya eşit olması durumunda çalışacağını koşullamış. Yani bir şeyin sadece ana sayfada görünmesi için yazılan bir kod.
3.4) <b:if cond='.........'> (.......) </b:if>
Bu kodda anlatılan şey .... olan yere yazılan şeyin doğru olduğu durumlarda çalışmasıdır. Eşittir işareti yoktur yada herhangi bir matematiksel ifade yoktur diyelim. Koşul sizin yönetim panelinden yaptıklarınıza bağlı olarak çalışır. Anlatımda tıkantım kendi kodlarımdan bir örnek veriyorum :)
<b:if cond='data:post.labels'>
Kategoriler:
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>.
</b:if>
3.5) <b:else> kodunun <b:if> ile birlikte kullanımı:
İngilizcede "aksi halde" anlamına gelen "else" kelimesinden oluşan bu kod b:if kodunun içinde kullanılır. Biz az önce yaptığımız uygulamalarda şöyle şeyler yapmıştık, mesela bir kodu sadece ana sayfada gösteriyorduk. Ancak öyle yazdığımız bir koşulda kod sadece ana sayfada görünüyor, diğer sayfalarda görünmüyordu. b:else kullanırsak durum şöyle olacak, mesela bir yelemanı ana sayfada görünsün diye ayarlayacağız, eğer girilen sayfa ana sayfa değilse başka bir eleman görünecek. Bir örnekle pekiştirecek olursak:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
Bu kısım sadece ana sayfada çıkacak
<b:else/>
Bu kısım ise ana sayfa harici sayfalarda çıkacak
</b:if>
4) b:loop Tekrarlama Kodu:
Evet en sevdiğim şeye geldi sıra. Bazı olayları tekrarlama kodu. Örneğin ana sayfada yazıların alt alta listelenmesi, yazı sayfasında yorumların alt alta listelenmesi, yazının altında etiketlerin yan yana sıralanması, bağlantılar widgetinizde kaydettiğiniz linklerin alt alta sıralanması gibi peş peşe gelen listeleme işlemlerini yapar bu eleman. Etiketlerden bir örnek vermek gerekirse:
Bu yazı şu etiketlere sahiptir:
<div id='etiketlerimiz'>
Kategoriler:
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>.
</div>
Kodda gördüğünüz biçimlendirme üzerinden anlatayım. Burada b:loop kodunun içerisinde yazının etiketlerini çağıran koşullar var. Etikete tıklandığında açılacak olan sayfa falan kodlanmış. Ancak b:loop olmasaydı burada etiketlerin tamamını peş peşe çağıramazdık sayfaya. b:loop burada tek tek her etiketi temsil ediyor. b:loop kodunun içerisinde yapacağınız değişiklik etiketleri tek tek etkilerken b:loop kodunun dışında yapacağınız değişiklik etiketleri toptan etkiler. Mesela b:loop kodunun bir satır üstünde bir resim eklerseniz o resim sayfada bir tane çıkacaktır ancak b:loop kodunun içine bir resim eklemişsek, bu resim sayfada her etiketin yanında görünecektir. Yukarıdaki örnekte gördüğünüz "Kategoriler:" yazısı b:loop kodunun dışında olduğu için sadece bir kere etiketlerden önce görüntüleniyor. Eğer onu b:loop kodunun içerisine yazmak gibi bir hata etse idik her bir etiketten önce kategoriler diye bir kelime çıkacaktı.
5) <data:..../> Kodu
Bu kod belirli verileri Blogger veritabanından şablonumuza çağırmak için kullanılıyor. Örneğin <data:post.author/> kodunda post.author, yani yazının yazarı, verisini blog yazısına çağırma amacı vardır. Bu şekilde pek çok veri vardır şablonda. Örneğin yukarıdaki örneklerin birinde bulunan <data:label.name/> kodu da herhangi bir etiketin ismini çağırmak için kullanılmış.
Bugünlük bu kadar. 3 saatlik bir yazının sonunda sonuna geldim, umarım faydalı olur, eksiklerim veya hatalarım için yorum yapmayı ihmal etmeyin. İyi günler...
Bu yazıyı beğendiyseniz RSS akışına abone olarak yeni yazılarımızı e-posta aracılığıyla takip edebilirsiniz. Bu link ile abone olabilirsiniz.
hoşgeldiniz
her bloggercinin bilmesi gereken bilgiler şu etiketle ilgili olan ilgimi çekti sağolun :)
Evet bilinmesi gereken şeyler. Ayrıca sadece etiketler değil b:loop ifadesinin yer aldığı tüm kodlarda geçerli o söylediklerim etiketler sadece bir örnek :)
Sedran,
Ben de bant genişliğim nerden gidiyor diye düşünüyordum. KOD blogunu aynen almışsın da bari resmi felan kendin barındırsaydın :) Ne diyeyim.
MaFiAMaX,
Abi kusura bakma ya değiştirdim hemen :) Olayı zaten senin blogdan öğrenmiştim ama oradaki anlatım senin sitedeki kod blogunun yanında tasarım olarak çok yavan kalınca bunu almıştım kısa süreliğine.
Bu siteyi eskisi gibi tutulan bir kaynak haline getirebilmek için öncelikle berbat olan tasarımından başlamak gerekli diye düşünüp, 3-4 gün boyunca tasarımıyla uğraştıktan sonra artık kod blogu için photoshop'u açmaya bile üşenir olmuştum o sıralar :) Üşene üşene onu orada öylece unutmuşum.
Bir daha tekrarlanmayacak olan bu hata için özür diliyor, bu olayın sorumlusunun sadece ben olduğumu, bloggerdestek ekibine mal edilmemesi gerektiğini bildirmek istiyorum.
Bu arada smallbusiness'ın da mı bant genişliği var :(
@Serdar,
Daha önce buradan yorum yapmıştım ama en son iletişim formu mesajından anladığım kadarıyla o attığım yorumda sorun oluşmuş.
Farkındaysan işi şakayla karışık sana söyledim, gerçekten kızsaydım farklı olurdu ;) Senin Blogger kullanan ahaliye katkılarını görmeyerek bu iş için kızılır mı.
Bir haftadır bilgisayarımda sorun olduğu için nete gremiyorum, bu sebeple de yorumumun sana ulaşmadığını yeni farkediyorum ;)
Kardeşim ben hani bloggerda kayıt yaparken belli bir yazıyı alıntı içine alıyoruz ya bazı blospot sitelerinde bunun daha dar ve daha farklısını görüyorum bunu yapmanın yolu nedir acaba? bir yardım edersen sevinirim..
Siz neden bahsettiniz ben anlamadım ki. Bir örnek verebilirdiniz mesela...
Blogger tema düzenleme işine merak saldım ama pek Türkçe kaynak bulamıyordum. Yazınız oldukça yararlı oldu. Çok teşekkür ederim. :)
Hi,
A good post on BLOGGER DESTEK. We are VA4World a virtual assistant firm who provide admin support service for SME’s all over the world. We would like to hear your feedback.
Thanks,
Sridhar – VA4World for viral marketing, SEO and admin support
Paylaşım ve yardımların çin teşekkür ederim yalnız ben hiç anlamıyorum bu kod işlerinden aslında baya kafa yormam lazım. Ama anlamakta güçlük çekiyorum şu aralar kusura bakma.
Kendi blog sayfamı kişiselleştirmek istiyorum.
Bana yardımcı olurmusunuz?
1 : hazır şablon kullanıyorum ve şablonun sağ tarafı çok geniş ve sayfaya yayılmamış şablon.
2 : Blogun sağ üst köşesine sende olduğu gibi RSS koymak istiyorum
3 : ve her yazımın altında otomatik olarak paylaş botuno olsun istiyorum widget ile olmuyor.
Bu 3 konuda yardımcı olurmusunz?
blog sayfam BU
bu koşulların reklam yerleşimleri açısından uygulanışı benmim açımdan önemli olan kısım. kod bilgim olmamasına rağmen işlemlerin bir kısmını uygulayabildim yalnız bir sorun var: örneğin sayfanın en altında metin ya da video olacağı varsayıldığında metin alanının bittiği noktada reklam devreye sokabilirmiyiz. Yani yukarıdan aşağıya sayfa yerleşimi metin, reklam, video, metin reklam, oyun vs olabilir mi...
video ya da oyunun da bir kod kümesi olduğunu düşünürsek şablondaki metinin ayrılmasını nasıl yapacağız.
anlatmak istediğim ama becerip beceremediğim konusunda henüz karar veremediğim konunun örnek sayfası şurası
http://www.theblogfullofgames.com/2010/01/helicops.html
bkz oyunun üzerindeki 728'lik reklam...
kolay gelsin
Merhaba,
Çok faydalı bilgiler bunlar, her tarafda bulmak mümkün değil, elinize sağlık, teşekkürler. Ben blogumdaki tüm yazıları alfabetik olarak, tıklanabilir biçimde sidebarda göstermek istiyorum. Nasıl bir widget yazmam gerekir. Yardımcı olursanız memnun olurum.
Herşeyden önce size bu kadar derli toplu anlattığınız için çok teşekkür ederim. Bu konu hakkında ingilizce olanlarıda okumuş olmama rağmen sizinki tam ders niteliğindeydi. Ve çok şey açıklığa kavuştu kafamda.
Eğer cevaplayabilirseniz, benim bir sorum olacak;
Blogger da BODY altına gelebilecek ve o sayfanın bir SEARCH yada LABEL sayfasını anlamama yarayacak bir kod varmı ? Zira static benzeri sayfalar yapmaya çalışıyorum IF komutu ile.
Saygı ve teşekkürle
Teşekkürler güzel bilgiler bunlar..
Yorum Gönder
Yorum yazarken dikkat ediniz;
1) Öncelikle, kesinlikle küfür etmiyorsunuz.
2) Eğer önceki yorumlardan birine cevap veriyorsanız kime cevap verdiğinizi belirtiyorsunuz.
3) Web sitenizin reklamını yapmak için saçma sapan, konuyla alakası olmayan yorumlar atmıyorsunuz.
4) Bunlar haricinde kardeş kardeş yorumlarınızı yazabilirsiniz.:)
BloggerDestek Ekibi