Yükleniyor...
Yeni, yine, yeniden...
Sanırım bu sloganın ne anlama geldiğini biliyorsunuzdur. Bilmeyenler için tekrarlarsam, bu sloganı Blogger İpuçları kategorisi altında yazdığım yazılarda başlangıç cümlemdir :-) Yaklaşık bir haftadır bir çok kişi bana "Yorum Gönder" butonunu nasıl değiştirdiğimi sorup durdu. Aslında cevabı çok basit; <img src=.../> etiketini kullanarak :-) İşlem bu kadar basit olmasına rağmen bir çok kişi bu ve bunun gibi basit işlemleri yapamıyor. Daha doğrusu sorun Blogger şablonunun XML olmasından kaynaklanıyor. Blogger şablonumuza baktığımızda herşeyin sunucularda barındırılan bir değişkene atandığını görüyoruz. Yani kimse şablununun kodları arasında "Yorum Gönder" ibaresini göremez! Onun yerine, <data:...> etiketi ile atanan değişkeni görür. Ancak değişken diyince akla garip garip ifadeler gelmesin, Google bu işi yaparken değişkenlere verdiği adlarda İngilizce anlamlarını verecek şekilde isimlendirme yapmış. Burda bahsi geçen "Yorum Gönder" bağlantısının sunuculardaki adı post.addCommentOnclick
Şimdi sorunumuzun kaynağını belirledikten sonra sıra Blogger şablonumuzu adım adım çözmeye geldi. E hadi ne bekliyorsun dalışa geçsene :-)
Güncelleme yazısı: "Blogunuzun başlık (header) kısmına resim sayfa ögesi ekleme" yazısı, yazının en sonuna eklenmiştir.
Web 2.0'ın hayatımıza girmesiyle artık herşey çok daha kolay bir aldı. Tasarım kısmında CSS artık vazgeçilmez. CSS kullanmayan site kalmışmıdır bilmiyorum. Artık bir kimlik oluşturup o kimliğe tasarım değerlerini girip daha sonra da onu istediğimiz yerde div ile çağırmak çocuk oyuncağı. Söz gelimi;
CSS kodu ile <h2> etiketine bir stil atadık; bu stil sayesinde.h2{text-decoration:underline;}
yazdığımda artık Merhaba yazısının altı çizgili olacak. Üstelik bunu her yerde kullanabilirim. CSS'i gerçekten öğrenmek istiyorsanız Web üzerindeki kaynaklardan bahsetmeme gerek yok sanırım. Tek gereken istek ve sabır! CSS üzerinde özellikle durmamın elbette bir sebebi var. Blogger şablonunuzdaki herşeyin CSS tarafında bir kimliği ve stillendirmesi var. Bu olmak yada olmamak gibi birşey :-))<h2>Merhaba</h2>
CSS'in önemini vurguladıktan sonra şimdi Blogger şablonumuzun iskelet yapısına gelelim. Unutmayın bu iskeleti giydirmek tamamen sizin hayal gücünüze ve becerinize kalmış birşey.
A-)Blogger Şablonunun Genel Yapısı
1-) Şablonun ana bölümleri
Tüm herşey şu meşhur
etiketi arasında. Blogunuz genel anlamda 4 ana bölümden oluşur. Bunlar sırasıyla Header-wrap, Main-wrap, Sidebar-wrap ve Footer-wrap kısımlarıdır. Bunlar da kendi içinde parçalara ayrılmıştır. Örneğin iki kolonlu bir şablonunuz varsa bunlar büyük ihtimalle Sidebar1, Sidebar2 veya Sidebartop, Sidebarbottom şeklinde alt kısımlara (section) ayrılır.<body> Blogunuzun iskeleti </body>
Eğer bu laf salatasını kod bazında incelersek;<div align='center' id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
Yukarıdaki güzide kodumuza baktığımızda header ana bölümünde en fazla 2 adet widget koyabiliyoruz. Şablonunuzun header ana bölümünde "Yeni Sayfa Ögesi" ibaresi varsa demek ki showaddelement değişkenin değeri yes olarak belirlenmiştir. ;-)
2-)Widgetler
Blogger kullanan herkes widget'in (bundan sonra bazı yerlerde Sayfa Ögesi olarak anılacaktır) ne olduğunu bilir sanırım. Bu zımbırtı sayesinde onlarca widget servisi ekmek yiyor :-) Hiç kod bilmeyen biri bile bu hazır widget kodlarını veren servislere gidip oradan kodunu aldıktan sonra Blogger şablonununda "Yeni Sayfa Ögesi" bağlantısı ile Mesaj panoları, resim galerileri, flash ögeleri, vs... koyabiliyor. Peki bu widgetlerin çalışma mantığı ne olaki?
Aşağıdaki örnekte bir sayfa ögesinin genel yapısı bulunmakta. Buradaki her değişkeni size anlatarak nasıl çalıştığını anlatmaya çalışacağım. <b:widget id='HTML4' locked='false' title='Sayfa Ögesi Başlığınız' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'> <data:title/> </h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Yukarıdaki örneği adım adım inceleyelim:<b:widget id='HTML4' locked='false' title='Sayfa Ögesi Başlığınız' type='HTML'>
Kodun ilk satırında sayfa ögesine bir kimlik (id) tanımlanmakta. Hatırlarsanız siz bu sayfa ögesini oluşturuken içine bir takım kodlar yerleştirdiniz ve sayfa ögesini kaydedip çıktınız. Hiç bu kaydettiğiniz kodları şablonunuzda aramayı denediniz mi? İstediğiniz kadar arayın bulamazsınız :-) Bunlar Blogger'ın güzide sunucularında kendilerine atanan bir kimlik ile sizin şablonunuz tarafından ulaşılmayı bekliyorlar. Onlara ulaşabilelim diye de kendilerine bir kimlik tayin ediliyor.
Blogger şablonuzun ana görünümünde bir çok sayfa ögesini fare ile tutarak ordan oraya sürüklemek mümkün. E niye bazılarını sürükleyebiliyoruz da bazıları bizi dinlemiyor? O söz dinlemeyen sayfa ögelerinin locked değişkeni locked='true' değerini aldığı için asla kıpırdamaz.<h2 class='title'> <data:title/> </h2>
Yukarıdaki satıra baktığımızda ise h2 etiketleri arasında data değişkeni bulunuyor. Data değişkenine verilen değer <data:title/> şeklinde. Bu title ilk satırdaki title'ın ta kendisi. Bu 2. satırdaki kod sayesinde sayfa ögesinin başlığını gösteriyoruz. Sayfa ögesinin başlık stili ise CSS tarafında h2'ye verdiğimiz değerler sayesinde oluyor.<div class='widget-content'>
<data:content/>
İnceleyeceğimiz bu son kod parçacığına bakarsak sayfa ögemiz bir div içinde tanımlanmış. (Bir anlamda Web 1.0'da tabloların yaptığını yapıyor kendileri) Bu div içinde ne gösterileceğini ise <data:content/> sayesinde belirliyoruz.
Bu kadar dersten sonra "Yorum Gönder" butonunu değiştirmenin aslında ne kadar kolay olduğunu anlamışsınızdır. Şimdi aşağıdaki örnekle bunu da anlatalım.
Örnek: "Yorum Gönder" butonu yapma
Blogger şablonumuzun HTML Düzenle kısmına gelip, sayfa ögelerini genişlet kutucuğunu işaretledikten sonra kodlar arasında p class='comment-footer' ibaresini arayın. Bulmanız gereken kodlar aşağıdakiler olmalı:<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
Bu kodddaki eğik yazı ile yazdığım data değişkenin yerine koymak istediğiniz butonun bağlantı adresini yazmalısınız. Bunun için;
kodunu koymanız yeterli ;-)< img src="Butonun linki"/>
Bakın artık data değişkeni yerine sabit bir değer geldi.
Bu kadar çok koddan bahsettikten sonra benim de pilim tükenmek üzere. Sizlere bu yazımda genel hatları ile Blogger şablonunun yapısını ve çalışma mantığını anlatmaya çalıştım.
Yakın bir zamanda script.aculo.us JavaScript kütüphanesini kullanarak şablonumuzda ufak tefek efekt geçişleri yapmayı anlatacağım.
Görüşmek üzere...
He unutmadan, yoklama kağıdına imza atmayan var mı? :-))
Güncelleme: Blogunuzun başlık (header) kısmına resim sayfa ögesi ekleme
Bu başlık altında İsitmeKaybı'nın sorusu yorumda geçiştirilecek kadar basit olmadığından bu yazıya güncelleme olarak eklenmiştir.
İşitmeKaybı'nın sorusu çok yerinde bir soru olduğu için kendisine öncelikle teşekkür ederim. Sorunun kaynağı şundan kaynaklanıyor:
Blog şablonunuzda "Blog başlığınız" (Üstbilgi) şeklinde bir sayfa ögesi varsayılan olarak gelir. Bu sayfa ögesi yazımda da anlattığım gibi Header-Wrapper ana bölümü içerisinde header kısmında (section) bir sayfa ögesidir. Şimdi bir çok kişi burada başka bir sayfa ögesi bulunmadığı için blog başlığına resim eklerken (Üst bilgi) Sayfa ögesini kullanarak resim eklemeye çalışır. Eklemeye çalışır ama ne yazık ki bu sayfa ögesi resimleri hiç bir zaman düzgün göstermez. Bizim sorunumuz buysa yapmamız gereken Header-Wrapper ana bölümü içerisine bir sayfa ögesi ekleyip türünü de resim olarak belirlemeliyiz. Tabi bunu kodlara bulaşmadan yapmak imkansız. Eliniz kodlara bulaşmışken bu işi de aradan çıkarabilirsiniz ;-)
İlk olarak sayfa ögesini kodlar arasında nereye koyacağınızı göstereyim. Kodlar arasında div id='header-wrapper' ibaresini arayın. Bulmanız gereken kodlar şu şekilde olmalıdır: (Şablonunuzda köklü değişiklikler yapmadıysanız)<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog başlığınız (Üstbilgi)' type='Header'>
Bu kod blog başlığınızın bulunduğu sayfa ögesinin başlangıcı. Bu arasında bir sürü kodu peşine takarak uzayıp gider. Önemli olan başını bulmak. Buraya kadar geldikten sonra tek yapmanız gereken maxwidgets değerini 2 yapmak. Daha sonra ise bu sayfa ögesinin nerede kapandığını bulmak. Yani </widget> etiketini bulmalısınız. Bu etiketi bulduktan sonra hemen ardına benim aşağıda verdiğim resim sayfa ögesi kodlarını koyun ve kaydedin.<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Bundan sonra şablonuzun ana görünümüne baktığınızda (Üst bilgi) Sayfa ögesinin hemen altında bir resim sayfa ögesi oluşacak. İsterseniz bu sayfa ögesini başlığın üstüne alabilirsiniz. Bunun için de ilk verdiğim kod içindeki locked değişkenini false yapın. Böylece sayfa ögelerini fare ile sürükleyip alt-üst yerlerini değiştirebilirsiniz ;-)
+rep'leri bekliyorum :-))
Blogger Şablonunu Düzenleme (Güncellendi)
|
Kategoriler:
Blogger İpuçları,
Nasıl Yapılır?
|
| Yazar: MaFiAMaX | Tarih: Perşembe, Aralık 13, 2007 |
| Permalink | e-postala! |
Son Yorumlar
43 yorum:
Elinize sağlık. Bu güzel dersten sonra
Bir tema oluşturmak da bize düşüyor artık. Yakında...:)
Mükemmel bir yazı.Beklediğimize değdi.Eline emeğine sağlık..
En alttaki ana sayfa, önceki yazılar, önceki yazı, sonraki yazı gibi linkleri değiştiremedim bunların datasını nasıl bulacağız?
Önceki yazılar: <data:olderPageTitle/>
Sonraki yazılar: <data:newerPageTitle/>
Çok teşekkürler mafiamax.Bu arada kendi özgün butonumu yaptım bak bakalım beğenecekmisin (:
Bu arada bunları bizim kendimiz bulmamız mümkün değil mi?İngilizce karşılıklarına göre fln mı oluyor?Anasayfayıda bulamadım malesef ):
Senide yoruyorum ama umarım kusuruma bakmazsın.Bulduk ustayı yararlanıyoruz (:
Erhan harika anlatmışsın en kısa zamanda bende yapıcam bloguma yorum gönder butonunu..
her zamanki gibi süper bir anlatım ve konu teşekkürler
Çok güzel bir yazı olmuş...
Ama birkaç sorum olacak:
1-)Bu ve diğer bilgiler ışığında sıfırdan bir Blogger teması yapılabilir mi?(grafik dosyaları olacak tabii)
2-)WordPress temalarından dönmüş değil de sıfırdan yapılmış bir tema biliyormusun Erhan?(Blogger'ın kendi temaları dışında)
Bu sorularımı yanıtlarsan çok sevineceğim.Şimdiden teşekkür ederim.
1. soru: Tabiki yapabilirsin. Ama CSS bilgin sağlam olmalı. Ayrıca Blogger'da kullanılan değişkenleri iyi bilmek gerek.
2.soru: Hayır bilmiyorum. Belki görmüşümdür ama hiç dikkat etmedim.
mafiamax, header'a koyduğum resimdeki yazının üzerine title başlığı da geliyor...hazırladığım banner üzerindeki yazıların üzerine diğer yazıların binmemesi için nasıl yerleştirmeliyim?
tşkler
@İşitmeKaybı soruna yazımda bir güncelleme yaparak cevap verdim. Çünkü burada cevap verilecek kadar basit değil. Sayen de yazım uzayıp gitti ama ben çok akıcı olduğuna inandığım için fazla dert etmiyorum.
Hazır lafı açılmışken blog okurlarımdan yazılarımın akıcılığı ve anlaşılabilirliği konusundaki fikirlerini almak isterim ;-)
tebrikler güzel bir anlatim olmuş..
Hocam tebrik ediyorum seni başarılarının devamını diliyorum
Yorum gönder butonunu kendi blogumda şuanda yazıyorum ama tabiki kaynağı belittim. :)
Harika bir yazı.
Sen zaten kararını vermişsin, yani nezaketen söyleyeyim demen de güzel birşey tabi :-)
Kolay gelsin.
Yok yazmadım. İçime sinmedi izin almadan. :)
mesela üstteki blogger bölümünü kaldırmak için top -100px; gibi bir kod kullanılıyor ya . Ben onu sayfanın aşağısındaki boşluğu kapatmak için kullanmak istiyorum
bottom -100 , sub -10 footer -10
gbi bildiğim bütün alt anlamına gelen kelimeleri düşündüm faydası olmadı
nasıl yapmam lazım =/
CSS kodlarında uygun yere (*)
padding-bottom: 0px; şeklinde ekleme yapmalısınız.
*: Blog şablonunuzda #footer ibaresini aratın. Burada sayfa altlığının CSS kodlarını bulmuş olacaksınız. Buraya dediğim şekilde ekleme yaparak sayfa altında sıfır boşluk bırakabilirsiniz. Fakat blogunuzu profiliniz kısıtlı olduğu için göremedim. Kullandığınız şablona göre eklemeniz gereken bu kodu #main-wrap ögesini de eklemeniz gerekebilir. ;-)
profilimde blogumun görüntülenmesi seçeneğini açtım görebilirsiniz psp hakkında olan
-
benim sitemde verdiğiniz kod zaten var footer altında fakat ne yaparsam yinede değişmiyor aşağıdaki boşluk
siteyi üste kaydırdığım için olacak sanırım =/
Şablonunuza bakabildiğim için sorunun nerde olduğunu görebildim. Şimdi sizin yaptığınız ilk hata sayfa gövdesini (body etiketi) -95 px değeri ile başlatarak blog başlığını gizlemeye çalışmışsınız. Bunu neden yaptınız anlamış değilim! Eğer yukarıdaki Blogger yönlendirme çubuğunu (navbar) kaldırmak için yaptıysanız buna gerek yok. Tek yapmanız gereken CSS kodları arasına aşağıdaki kodu koymak.
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
İkinci olarak sayfanızı düzeltmek için aşağıda verdiğim kodu aynen uygulayın.
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: ??????;
background: #??????;
background-image: url("http://www.repliktv.com/wp-includes/images/stripe_0.png");
}
Soru işaretli olan değerleri siz dilediğiniz gibi değiştirin.
benim bide header resminde sorun vardı onuda sildim =)
teşekkür ederim
2 gündür "bX-ji78k6" hatası alıyorum bunu düzeltmemin yolu varmı yoksa benden kaynaklanan bi sorun değilmi bilgisi olan varmı arkadaşlar?
İnternet tarayıcındaki geçmiş bilgilerinin tümünü temizleyip bir daha deneyin. Bu tür sorunlar genellikle bu yöntemle aşılabiliyor.
bilgiler için teşekkürler bende ekledim blogumda isterseniz bir bakın bana garip geldi
Video çubuğu sidebarın bir ögesi olduğu için onu öylece sola alamazsınız. Sol tarafta bir sidebar oluşturmanız gerekir.
Uğraşacak vaktim yok, kusura bakmayın.
Bilgiler için teşekkürler.
mafia kardeş kod bilgim sıfır.webmaster değilim.tasarımla uğraşmaya pek vaktim de yok sevmem de ama benim bir sorunum var.abicim nerden hangi şablonu yani temayı alırsam alayım 4-5 k lik tekil hitim bir anda sıfırlıyor.sebebi google de hiç bir kelimede yer almıyorum.temayı değiştirdikten iki üç saat sonra kesiliyor gelenler.kaldırdıktan iki gün sonra da geri aynı hiti yakalıyorum.bunun bir sebebi olmalı.yani temada googleyi kısıtlayan kod ya da kodlar olmalı.lütfen yardım et.
Bu konuda hiç bir bilgim yok. Daha önceki sorunuz üzerine cevabımı burada belirtmiştim.
İyi günler mafiamax, gördüğüm kadarıyla yüksek bir bilgiye sahipsiniz bu konuda. benim sorum şu, etiketlerle yazı başlıkları arasını nasıl açabilirim? çok sıkışık gözüküyor? isterseniz bloguma bakıp ne demek istediğimi kolayca anlayabilirsiniz. Cevabınız için çok teşekkür ediyorum..
Merhaba GabrieL MeQueR,
Şablonunda CSS kodları arasında aşağıda vermiş olduğum kodu bul ve margin-bottom:20 px; satırını ekle.
.post-footer {
font-family: Verdana, sans-serif;
font-size:74%;
margin-bottom:20px;
border-top:1px solid #BFB186;
padding-top:6px;
}
Burada sayısal değer ile istediğin gibi oynayabilirsin.
verdiğiniz cevaba çok teşekkür ediyorum. bir sorum daha var :) navbar ı yoketme hilesi güzel de, açılır kapanır şekilde yapabilir miyiz bunu? hani windowsta alttaki çubuğu otomatik gizlenir hale getirdiğimiz gibi? Teşekkürler.
Açılır-kapanır yapmak için JavaScript kullanmak gerekli. Bunun için Google'da arama yapabilirsiniz ;)
Açılır kapanır dediğim, soldaki blog arşivi gibi birşey :) hiyeraşi var ya, onun gibi olmaz mı?
Yazıyı okudum. "Yorum gönder" kısmı içim bahsi geçen yerde bende farklı bir yazı var:
}#comments-block .comment-footer {
border-left:1px dashed #31afda;
border-right:1px dashed #31afda;
border-bottom:1px dashed #31afda;
margin-bottom:15px;
margin-left:0px;
padding:0px 15px 12px 15px;
display:block;
şeklinde görünüyor. Yorum gönder yazısının daha büyük font olması için burda hangisini değişmem gerekiyor?
Buraya font-size:??px; satırını ekleyin.
Soru işaretli yere iki basamaklı bir değer girin. 14 veya 18 gibi...
dediğinizi yaptım ama yorum gönder yazısı değil de yorumların altındaki tarihler büyüdü malesef.
Sizi de uğraştırıyorum ama tekrar bakabilirseniz minnettar kalırım.
Öyleyse yeni bir CSS kodu ekleyelim.
p.comment-footer {
font-size:??px;
}
@mafiamax; ikinci verdiğin kodla oldu. Çok ama çok teşekkür ederim.
Paylaşım için teşekkürler, + rep falan demek isterdim ama ne işe yarar ne de burda oyle bir sistem var :)
Gerçekten cok makbule geçti.
Başarılar!
Reca ederim efendim ne demek :) Yorum yazıp teşekkür etmen yeter ;)
Yorum Gönder
Küfür ve hakaret içeren yorumları sevmiyor, Türkçe'nin doğru kullanıldığı yorumları ise çok seviyoruz.
HTML: <b>, <i>, <a> gibi temel HTML etiketlerini kullanabilirsiniz.