Blogger'da CSS ile Renkli Kutu Yapalım

Herkese Merhaba. Bazen Metinin tam ortasında dikkati çekmek istediğimiz yeri renklendirmemiz gerekir fakat daha Orjinal birşeye gerek duyarız. Örneğin renkli bir Kutucuk. Işte bunu bugün sizlere göstereceğim. Aslında çok basit birşey. CSS yi yazıyorsunuz ve Blogger da kullanmak için de belli bir Satır kullanıyorsunuz. Bu kadar basit aslında. Herneyse, bu kutucuğun Arkaplanını ben sarı yaptım, siz kendinize göre değiştirebilirsiniz tabi. Nasıl değiştirileceğini bilmiyorsanız üzülmeyin, ben anlattım herşeyi aşağıda.

Ilk önce Bloğumuza giriş yapıyoruz. Sonra Kumanda Paneli ne giriyoruz. Ardından Yerleşim'e, sonra HTML'yi Düzenle ye. Şimdi CTRL+F kombinasyonumuzu kullanarak Arama pencerimizi açıp ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları ]]></b:skin> kodunun üzerine yapıştırıyoruz.

KODLAR:

.kutucuk {
background: #FFFF99;
width: 500px;
height: 40px;
text-align:justify;
overflow: hidden;
position:relative;
}

Kodlarımızı ekledikten sonra Şablonumuzu kaydediyoruz. Bu kadar. Konunuzda kullanmak için aşağıdaki Satırı kullanın:

<div class="kutucuk">Blog Doğuhanca</div>

KISA AÇIKLAMA - Ne yaptık?

• Yukarıdaki Satırda kullandığımız id bize CSS mizi yazarken kullandığımız #kutucuk bölümünü gösterir.
• Yukarıdaki Blog Doğuhanca kısmı yerine istediğiniz Metni yazın.
• Yukarıdaki kutucuk yazan yeri CSS nizde değiştirdikten sonra bu Satırdada değiştirebilirsiniz.

KOD AÇIKLAMASI - Ne nedir?
background --> Arkaplanımız (Renk Kodumuz burada)
width --> Kutunun genişliği
height --> Kutunun yüksekliği
text-align --> Kutunun içindeki Yazının geleceği yer (left,right,center,justify)
overflow --> Kutuda taşan yerleri taşmamış gibi göstertir.
position --> Kutunun olduğu yerde kalıp kıpırdamamısını sağlar.

Örnek kutucuk.

Blogger Devamını Oku Özelliği

Google'ın 9 Eylül 2009 tarihli blog gönderisinde yaptığı açıklamayla, Blogger'da "devamını oku" özelliği resmen devreye girmişti. Bunu size yazmayı, anlatmayı o gün çok istemiştim ama çok yoğundum bir türlü yenilikleri duyurma fırsatım olmadı. Şimdi Blogger'ın bu özelliği üzerinde biraz duracağım.


İlk olarak "Yazıları devamını oku özelliğine göre nasıl yazmalısınız?" konusuna değineceğim. Size tavsiyem yazılarınızı yazarken "Güncellenmiş düzenleyici" veya "Blogger Draft" kullanmanız. Çünkü Güncelleştirilmiş düzenleyici üzerinde bir tuşa basarak yazınıza devamını oku özelliğini kazandırabiliyorsunuz.
Güncellenmiş Düzenleyiciyi nasıl aktif hale getireceğinizi bilmiyorsanız önce şu yazıyı okuyun:
http://www.bloggerdestek.com/2009/10/blogger-metin-editorunu-degistirin.html

Metin editörünüzü değiştirdiyseniz veya blog yazılarınızı blogger draft üzerinden yazıyorsanız yazıyı bölmek ve devamını oku bağlantısını eklemek sizin için sadece bir tıklamaya bakıyor demektir.

1) Güncellenmiş Düzenleyici ile Devamını Oku Bağlantısı
Güncellenmiş Düzenleyiciyi kullanan blogger kullanıcıları! Yazılarınızı yazarken, yazının bölmek istediğiniz kısmına tıklıyorsunuz, daha sonra metin editörlerünüzün sağ üst köşesindeki "Atlama aralığı ekle" butonuna tıklıyorsunuz. Yazınızı nereden bölmek istiyorsanız orada sembolik bir çizgi çıkıyor. Bu çizgi sadece yazıyı düzenlerken görünecek, yazı yayınlandıktan sonra okuyuculara görünmeyecektir.

2) Eski Metin Editörünü Kullananlar İçin Devamını Oku

Draft kullanmayabilirsiniz, hatta yeni metin editörünü de kullanmıyor olabilirsiniz. Fakat bu sizin devamını oku özelliğinden faydalanamayacağınızı göstermez. Eğer eski düzenleyiciyi kullanıyorsanız yapmanız gereken şey, yazıyı yazarken "HTML'yi Düzenle" kısmına girip, yazıyı neresinden bölmek istiyorsanız orasına <!--more--> etiketini eklemeniz. Aşağıdaki resimde görüldüğü gibi.

3) Devamını Oku Linkini Ayarlardan Düzenlemek
Devamını oku linkini yazınıza eklediğinizde yazınızın altında Devamı» şeklinde bir bağlantı göreceksiniz. Bu bağlantıya istediğiniz metni nasıl yazarsınız? Şöyle: Blogger Ayarlarınızda Yerleşim > Sayfa Ögeleri yolunu izleyin. Daha sonra orada göreceğiniz Blog Kayıtları ögesinin altındaki  Düzenle bağlantısına tıklayın. Açılan pencerede "Kayıt Sayfası Bağlantı Metni" kutusuna ne istiyorsanız onu yazın.

4) Sorunlu Şablonlar İçin
Eğer klasik şablonlardan birisini kullanmıyorsanız ve devamını oku bağlantısı otomatik olarak blogunuzda görünmüyorsa, şimdi anlatacağım şeyleri yapmanız gerekecektir.
Şablonunuzun ayarlarına girin, Yerleşim > HTML'yi Düzenle sayfasına girin.
"Widget Şablonlarını Genişlet" seçeneğini işaretleyin.
<data:post.body/> kodunu bulun ve hemen altına şu kodu yapıştırın:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>  
      </div>
    </b:if>

Daha sonra şablonunuzu kaydetmeniz bu işlem için yeterlidir. Eğer anlatımı yeterli bulmadıysanız, kaynaklarda belirttiğim linklerden keyfinize göre birini seçerek bakabilirsiniz. MaFiAMaX tavsiyemdir.

Son Olarak Kaynaklar:
http://www.mafiamax.com/2009/09/blogger-devamini-oku-ozelligi-devrede.html
http://bloggerindraft.blogspot.com/2009/09/you-might-as-well-jump.html
http://buzz.blogger.com/2009/09/you-might-as-well-jump.html (bir üsttekinin aynısı)

Yazı Sonuna Eklenen Resimlerden Kaynaklanan Sorun

Sevgili blogger ahalisi, bu yazıda az önce tasarım yaparken karşıma çıkan bir dandiklikten ve bunun için uyguladığım çözümden bahsedeceğim. Bu sorun şu, eğer bir yazının sonuna sağa veya sola dayalı bir resim eklerseniz, o resim blogunuzun yazıdan sonraki kısmının tasarımına zarar veriyor. Yani o yazı görüntülenirken sayfanızda türlü türlü tasarım sorunları oluşuyor. Aslında çok basit olan olay şundan ibaret, biz bir resimi yazımıza yüklediğimizde o resime sağa veya sola dayalı olarak bir ayar veriyorsak, bu ayar yazının o resimin yan tarafından akmasını istemiş olmamız anlamına geliyor. Örneğin resimi sola yasladığımızda yazılar resimin sağından akarlar. Ancak resimi yazının sonuna eklediysek, yani resimden sonra yazı yoksa, yada çok az yazı varsa, o resim sağına blogdaki diğer elemanları da alıyor. Bu durumda da aslında yazının altında olması gereken elemanlar yazının içindeymiş gibi bir görüntü sergiliyorlar. Bir resim ile açıklayacak olursak:

Gördüğünüz gibi şirin kedimizin olduğu resim sayfada yazının altında bulunması gereken turuncu kısım ile sarı kısımı kendi sağına almış.

Peki bunu nasıl düzeltebiliriz? Bunu şablonumuza yapacağımız çok kısa bir ilaveyle düzeltebiliyoruz. Yapmamız gereken blogger kontrol panelinde, Yerleşim sayfasında HTML'yi Düzenle'ye girip widget şablonlarını genişlettikten sonra şu kodu bulup:
<data:post.body/>
Altına şu kodu yerleştirmek:
<div style='clear: both;'/>
Ve şablonunuzu kaydetmek. Bir resim de bu basit işlemi yaptıktan sonrası için ekleyeyim de farkı göstermiş olayım.

Umarım anlatmak istediğimi verebilmişimdir. İyi günler dilerim :)

Blogger'a Şablon/Tema Yüklemek

Şu sıralar bana gelen soruların büyük bir kısmı "şablon yükleyemiyorum" konusu üzerine. Bu yüzden bu konuyu anlatma ihtiyacı duydum.

İlk olarak birbirinden güzel temaların bulunduğu http://btemplates.com/ sitesini kullanmayı göstereceğim sizlere. Size tavsiyem basit, sade temaları kullanın, hareketli cafcaflı temalardan uzak durun. Çünkü tema ne kadar karmaşık olursa içerisinde o kadar javascript dosyası olur ve o dosyaları da hostunuza yüklemeniz, daha sonra da şablonda yerleştirmeniz gerekir. Uyarıyı da verdikten sonra şimdi anlatıma geçelim.

İlk olarak http://btemplates.com/ sitesine giriyorsunuz. Sağda "Categories" başlığı altında birçok tema kategorisi görebilirsiniz. Onlardan birisine tıkladığınızda karşınıza yine ana sayfadaki gibi birçok tema çıkacaktır. Şimdi o temalardan sade olarak gördüğünüz herhangi birisine tıklayın. Daha sonra açılan sayfada "Download" ve "Live Demo" şeklinde iki tane buton görürsünüz. Bunlardan "Download" butonuna tıklayarak şablonunuzu bilgisayarınıza indirebilirsiniz. "Live Demo" ise o şablonun yüklü olduğu bir blog açar size ve şablonu canlı canlı inceleme imkanı sunar. Neyse uzatmadan, "Download" butonuna basın ve şablonu masaüstünüze indirin.

Şimdi masaüstünüze inmiş olan dosyayı inceleyelim. O bir sıkıştırılmış dosyadır ve onu açmadan şablon olarak blogunuza yükleyemezsiniz. Bu dosyaya sağ tıklayıp "klasöre çıkart ...\" şeklindeki winrar komutunu seçiyoruz. Örnek olsun diye ben "Nourish" isminde bir tema indirdim masaüstüne onu gösteriyorum resimlerde:

Bu işlemi yaptıktan sonra masaüstünüzde yeni bir klasör oluşacak, klasörün ismi indirdiğiniz zipli dosyanızın ismiyle aynı olacak şekilde. O klasörün içine göz gezdirecek olursanız, bir tane "XML Belgesi" bulursunuz.

Şimdi bu dosyayı Blogger'a yüklemek kaldı geriye. Şu yolu takip edin:
Blogger yönetim panelinde Yerleşim -> HTML'yi Düzenle sayfasına giriyorsunuz.
Orada "Dosya Seç" butonuna tıklıyorsunuz. Masaüstünüzde zipi açtıktan sonra oluşan klasörün içindeki xml dosyasını  seçiyorsunuz ve "Aç" butonuna basıyorsunuz. Daha sonra da "Dosya Seç" butonunun yanındaki "Yükle" butonuna basıyorsunuz.
"Lütfen aşağıdaki widget’ların silinmesi gerektiğini doğrulayın. Tüm widget’ların yapılandırma verileri kaybolacak."
şeklinde bir uyarı alırsanız "Onayla ve Kaydet" butonuna basın ve yolunuza devam edin. Şablonunuzda bir hata yoksa yüklenecektir.

Not: Bilgisayarınıza indirdiğiniz sıkıştırılmış dosyayı açabilmek için Winrar programına ihtiyacınız olacaktır. Winrar programını indirmek için aşağıdaki linke tıklayın:
http://www.rarlab.com/rar/wrar380tr.exe

Status Message(Durum Mesajı) Bloğunu Düzenliyoruz

Blogger'da etiketlerden herhangi birisine tıklayıp etiket sayfasını açtığınızda veya arama yapıp arama sayfasını açtığınızda "Status Message" isimli bir blok belirir sayfanızda. Bu blokta gittiğiniz sayfanın özelliğiyle ilgili bilgi verir. Örnek vermek gerekirse:
- "widget etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster"
- "Sorgunuzla eşleşen kayıt yok. Tüm kayıtları göster"
- "blogger sorgusuna yönelik kayıtlar görüntüleniyor. Tüm kayıtları göster"

Şimdi bu mesajın görüntülendiği bloğu düzenleyeceğiz. Bu blok normalde css kodlarınıza ekleyeceğiniz basit birkaç kod ile düzenlenebilir ancak ben html kodlarının da üzerinde duracağım.


Status Message bloğu, blog HTML'nizde "widget şablonlarını genişlet" seçeneğinizi aktif ettiğinizde karşınıza çıkan şu kodlar ile tanımlanmıştır:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

"Bazı Özel Kodlar" isimli yazıda anlattığım gibi b:includable kodu sadece bir nesneyi tanımlamaya yarar. O nesnenin nerede duracağını ise b:include koduyla düzenleriz. Yani üstteki kodları takiben şablonunuzda bir de b:include kodunun bulunması gerekiyor. Bu kod ise şudur:
<b:include data='top' name='status-message'/>

Evet bu kodları gösterdiğime göre düzenleme kısmına geçebilirim. Öncelikle renklendirme ve resim ekleme olayını anlatacağım. Bunu CSS aracılığıyla yapıyoruz.
Şablon HTML'mizde ctrl+f tuş kombinasyonunu kullanarak ]]></b:skin> kodunu arıyoruz, buluyoruz ve hemen üstüne şu kodları yapıştırıyoruz:

.status-msg-wrap {
width:90%;
padding:5px;
}
.status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 5px 30px;
width:auto;
}
.status-msg-border {
border:1px solid #a19a36;
opacity:1;
}
.status-msg-bg {
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
opacity:1;
}

Renklerden ve biçimlendirmeden biraz bahsedecek olursam:

1) Kenarlık:
Yukarıdaki css kodlarında gördüğünüz border:1px solid #a19a36; kodu Status Message bloğunuzun kenarlıklarını belirtmek için kullanılmış. Buradaki 1px kenarlığın genişliğini, solid kenarlığın cinsini, #a19a36 ise kenarlığın rengini belirtir. 1px değerini büyüterek(2px,3px,..) kenarlığı kalınlaştırabilir, solid yerine dotted yazarak kenarlığı kesik çizgilerden oluşan bir hale getirebilir, #a19a36 yerine de başka bir renk kodu yazarak kenarlığın rengini değiştirebilirsiniz. Kenarlıkları kaldırmak için ise border:1px solid #a19a36; kodu yerine border:0; kodunu yazabilirsiniz.

2) Arkaplan Rengi
Yukarıdaki CSS kodları içerisinde gördüğünüz
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodundaki #FFF9B3 renk kodunun yerine başka bir renk kodu yazarsanız Status Message bloğunuzun rengini değiştirmiş olacaksınız.

3) Soldaki Resim
Yine bir üst maddede yazdığım kod olan
background: #FFF9B3 url(http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png) center left no-repeat;
kodunun içinde soldaki resimin de kodu mevcut.
http://img3.imageshack.us/img3/2228/gnomestatus5b25d.png
Bu resim linkinin yerine kendi resim dosyanızın linkini yazdığınız zaman Status Message bloğunuzun sol tarafında o resim çıkacaktır. Burada dikkat etmeniz gereken şey ise sizin yükleyeceğiniz resimin genişliği normalde orada bulunan resimin genişliğinden fazlaysa
padding:5px 5px 5px 30px;
Kodundaki 30px değerini büyütmeniz gerekir.

4) Status Message Bloğunu Kaldırmak
Bunu uygulamak için iki tane yöntem var:

4.1) Birinci yöntem CSS kodlarıyla kaldırmak, bu yöntemi kullanırsanız, Status Message bloğu aslında blogunuzda var olacak, ancak ziyaretçiler onu göremeyecek. Yukarıdaki CSS kodlarını blogunuza yapıştırdıysanız silin, çünkü ona artık ihtiyacınız kalmadı. Şimdi ]]></b:skin> kodundan hemen önce şu kodları yapıştıracaksınız:

.status-msg-wrap {
width:0;
height:0;
display:none;
}

Bu işlemi yaptıktan sonra şablonunuzu kaydedin. Olmuş olmalı :)

4.2) İkinci yöntem ise html kodlarının arasından b:include kodunu silmek. Şablon HTML'nizde "Widget Şablonlarını Genişlet" seçeneğini aktifleştirin ve ctrl+f yardımıyla şu kodu bulun:
<b:include data='top' name='status-message'/>
Ve o kodu silin... Şablonunuzu kaydettiğinizde olmuş olmalı :)

Tarayıcı Uyumu: CSS Sıfırlama Tekniği

Bir web sayfası hazırlarken bazı etiketlerin her tarayıcıda farklı göründüğünü fark ettiniz mi hiç? Bazı html etiketleri, eğer css ile onlara belirli değerleri vermediyseniz her tarayıcıda farklı değerler alırlar. Örnek verecek olursak h1 etiketini hiçbir css tanımlaması yapmadan bir şablona yerleştirdik. Bazı tarayıcılar h1 etiketini yorumlarken yukarıdan biraz boşluk bırakırlar. Bazı tarayıcılar ise hiçbir boşluk bırakmazlar. Bu nedenle tarayıcılar arasında büyük farklar oluşabilir.

Ancak CSS Sıfırlama Tekniklerini kullandığımızda ise iş biraz değişir. Bu tekniği kullanarak web sayfamızdaki tüm html etiketlerini başlangıçta sıfırlıyoruz. Bu sayede tarayıcılar değil siz belirlemiş oluyorsunuz nasıl görüneceğini. Sıfırlama tekniği CSS kodlarınızın en başında öylece dururken siz de istediğiniz etiketleri onun altında tekrar tanımlamaya başlıyorsunuz.

Aşağıda benim en çok kullandığım ve bloggerdestek'de de kullandığım CSS Sıfırlama Tekniği olan Eric Mayer'in ürettiği "Tam Sıfırlama" tekniğinin kodları var.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Sanırım en çok kullanılan sıfırlama tekniği de budur. Bu kodu CSS kodlarımızın en başına eklememiz gerekiyor. Blogger için konuşmak gerekirse:
<b:skin><![CDATA[
kodundan hemen sonra yukarıdaki kodları yapıştırabiliriz. Kodların yukarıdaki haliyle şablonunuzda çok yer kapladığını düşünecek olursanız aşağıdaki haliyle de koyabilirsiniz. Nasıl olsa sıfırlama kodu üzerinde hiçbir değişiklik yapmanız gerekmiyor. Aşağıdaki kod yukarıdaki kodun düzenlenmiş halidir. İşlevsel olarak hiçbir fark yoktur.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus {outline:0;}
body {line-height:1;color:black;background:white;}
ol, ul {list-style:none;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

Daha fazla CSS Sıfırlama Tekniği öğrenmek isterseniz Web Deneyimleri isimli blogu ziyaret edebilirsiniz. Link:
http://webdeneyimleri.donanimhaber.com/css-sifirlama-teknigi/

Blogger'da Bazı Özel Kodlar

Blogger şablonunda belli başlı anlamlı kodlar vardır. Şablonun tamamen html veya css'den oluştuğunu sananlar yanılırlar çünkü bu kodlar html olarak tanımlı değildir. Bugün bu kodlardan ele alabildiğimce fazlasını ele almaya çalışacağım, çünkü kendi şablonunu yapmak isteyen her ferdin bilmesi gerektiğini düşünüyorum bunları. Başlıyorum.

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 == &quot;item&quot;'> (.....) </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 == &quot;item&quot;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 == &quot;item&quot;'> 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 != &quot;item&quot;'> 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 != &quot;true&quot;'>,</b:if></b:loop>.
</b:if>

Burada koşul olarak data:post.labels kullanılmış. Hani sayfa ögelerinde Blog Yazıları widgetini düzenlerken etiketler diye bir onay kutusu var. Bu kod o onay kutusuna tik koyarsanız çalışacak, diğer durumlarda çalışmayacaktır. İsterseniz buradaki b:if kısımlarını kaldırıp koşulu ortadan kaldırabilirsiniz. Böylece kontrol paneliyle alakayı kesmiş olacaksınız, etiketler her zaman yazıda görünecektir. Bu şekilde tek ifadeli çok sorgu vardır şablonunuzda ben burada etiketleri örnek verdim.

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>

Gördüğünüz gibi bu şekilde b:if koşulunun içerisine yazılan bir koşullamadır b:else. Yani b:if'in tamamlayıcısıdır diyebiliriz. Ama kullanmak da zorunlu değildir tabi :)

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 != &quot;true&quot;'>,</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...

Blogger için Kışa Özel Logolar

Kışa özel birbirinden hoş ve kullanışlı blogger logolarını Taizzar tarafından hazırlanmış bu güzel çalışmayı sizlerle paylaşmak istedim.Lafı fazla uzatmadan ;

İndir

Tasarımcılara Faydalı Olabilecek Kaynaklar

Bloggercılar ve diğer blogculara tasarımda yardımcı olabilecek birkaç kaynak bir araya getiriyorum. Bunlar hiç tasarımdan anlamayanından tasarım manyaklarına kadar herkesin işine yarayabilecek kaynaklar. Sizler de yorumlarınızla bu arşive katkıda bulunabilirsiniz.

1) Fatih Hayrioğlu'nun CSS Dersleri
Fatih Hayrioğlu'nun web sitesinden birçok şey öğrendim bu ay, çok iyi hazırlanmış bir web sitesi var, CSS hakkında birçok kaynak incelemiş, bizler için bu bilgileri derlemiş. Ve en sonunda da bütün bunları tek bir başlık altına arşivlemiş. Neredeyse CSS ile ilgili herşeyi anlatmış. Helal olsun valla. Ayrıca bir de e-kitap yazmış CSS ile ilgili... Buyrun...

2) Temel CSS Dersleri: CSS Nedir ve Nasıl Kullanılır
Bunu da ben blogumda yazmıştım bir gün oturup da. CSS'ye iyi bir giriş yapmıştım. Ama daha sonra Fatih Hayrioğlu'nun sitesini görünce bunları boşuna yazdığımı düşündüm :) Buyrun...

3) Javascriptİndir
Burada da birçok kullanışlı javascript kodunun derlenmiş ve kategorilenmiş halini görüyoruz. Az çok javascript ve HTML'den anlayanlar için çok güzel bir kaynak. Buyrun...

4) DHTMLGOODİES
Javascript ve HTML Kodlarıyla harikalar yaratıyorlar ajax ve javascript alanında kendi ürettikleri kodları yayınlıyorlar kaynak ingilizce ama gayet güzel. Birçok güzel kodu burada bulabilirsiniz. Buyrun...

Düzenleme(unuttuğum bir ayrıntı);
Az kalsın Web 2.0'ı unutuyordum. Onunla ilgili de bir kaynak vereyim istedim.
5) Hazır Web 2.0 Tasarım Araçları
eburhan hazırlamış birçok web 2.0 kaynağını bir araya getirmiş. Çok işe yarar bir çalışma olmuş doğrusu... Buyrun...

Bunlar benim en çok kullandığım kaynaklar... Sizin de beğendiğiniz başka güzel html, javascript, css kaynakları varsa buraya bir şekilde iletebilirsiniz. (Mesela yorum yaparak :))

İyi günler dilerim...

Wordpress Gibi Yazı İçinde Yorum Formu

Blogger Draft üzerinde yapılan yeniliklerden birisi de bugün ortaya çıktı! Blogger'de artık yazı içine yorum formu ekleyebiliyoruz. Şüphesiz bu biz blogger yazarlarının en çok istediği şeylerden birisiydi ve bu özellik meydana çıktı. Bu özelliğin nasıl uygulanacağını hemen büyük blogger yazarları bloglarında yazmışlar bize de bunu çalıp buraya yazmak düşmez ya :) İşte Mafiamax'ın anlatımıyla Blogger'da Yazı İçine Yorum Formu Eklemek; tıkla!

Reklamlarınız Yazı İçinde Yayımlansın 2

Adsense'den aldığımız kodun ana sayfaya değil de yazı sayfalarına, ve yazıların üstüne eklenmesini şu yazıda görmüştük. Reklamlar Yazı İçinde Yayımlansın.
Bu şekilde yaptığımızda reklamlar yazı sayfasında, yazının üstünde görünüyordu.
Şimdi bu reklamları tasarım açısından hoş bir hale getirmek için kendim de uyguladığım ve gelirimi de iyi arttırdığını gözlemlediğim bir yöntemi anlatayım.
Bu yazıyı uyguladıktan sonra adsense reklamınız yazı içinde, yazı ile aynı hizada yazının sağında veya solunda olarak görünecekler.
İlk iş olarak blogumuzun paneline girip, Yerleşim -> HTML'yi Düzenle kısmına giriyoruz ve Widget Şablonlarını Genişlet seçeneğini açıyoruz.
1) Adsense'den kodlarımızı alıyoruz. Bunu yapmayı biliyorsunuzdur. Yazının dizaynını bozmaması için alacağınız reklamların boyutu 200x200 idealdir bence.

2) <data:post.body/> kodunu buluyoruz ve üzerine şu kodları yapıştırıyoruz;
<span style='float:right;'>
<b:if cond='data:blog.pageType == "item"'>

</b:if></span>
b:if ile başlayan kodlar reklamın sadece yazı sayfalarında görünmesini, yani ana sayfada görünmemesini sağlar, span kodu arasına almamın nedeni ise sağa dayalı yapmak için float css tagını eklemektir. float: right yerine float:left yazarsanız reklamlarınız sola dayalı olur.
3)Bu kodların arasına adsense reklam kodumuzu yerleştiriyoruz ve
Yerleştirdiğimiz adsense kodlarındaki bütün
(<) işaretlerinin yerine (& l t ;) (>)işaretlerinin yerine (& g t ;) ve
(") işaretlerinin yerine (& q u o t;)
kodlarını yazıyoruz. Tabi parantezsiz ve karakterlerin aralarındaki boşlukları silerek. Biz bu kodları aralarında boşluklar olarak verdik çünkü burada o kodları yazdığımızda otomatik olarak simgelediği işarete dönüşüyor.
Daha sonra şablonumuzu kaydediyoruz.
Örnek olarak PCDostu'ndaki herhangi bir yazıya girebilirsiniz.

Lightbox Nasıl Yapılır?

Bugün, ufak tefek çalışmalar sonucu Lightbox'ı bloguma uygulamayı başardım. Lightbox'ı bileniniz var, bilmeyeniniz var. Peki nedir bu Lightbox?
Lightbox, küçük resimlerin önizlemelerini sayfayı terketmeden görmenizi sağlayan basit bir JavaScript uygulamasıdır. Örnek için şurayı ziyaret ediniz.
Peki nasıl yapılır bu Lightbox denen şey?
1. Lightbox 2.0 için gerekli olan dosya buradan indiriyoruz.
2. İndirdikten sonra, zipli dosyayı bir yere çıkartıyoruz. 'images' klasörü içerisindeki; close.gif, closelabel.gif, loading.gif, nextlabel.gif, prevlabel.gif dosyalarını ImagesHack gibi yerlere upload ediyoruz.
3. Lightbox.css dosyasını açıp, önceden bir sunucuya yüklediğimiz resimlerden nextlabel.gif ve prevlabel.gif'i alıp o dosyaya yerleştiriyoruz.[Orada (...images/nextlabel.gif) şeklinde olan yerlere.]
4. Lightbox.js dosyasını açıp; loading.gif, closelabel.gif dosyalarını yerleştiriyoruz.
5. Şimdi, GooglePages gibi yerlere resimleri yerleştirdiğimiz; Lightbox.css, Lightbox.js, Prototype.js, scriptaculous.js dosyalarını yüklüyoruz.
6. Yerleşim>Html'yi düzenle yolunu izliyoruz, <head> kodundan sonra aşağıdaki kod kümesini ekliyoruz.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder">
</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>

7. Bu kod kümesine 5. adımda bir servise yüklediğimiz dosyaları yerleştiriyoruz.
8. Temamızın kodlarıyla burada işimiz bitiyor. Kaydediyoruz.
Yazı yazarken resmimize Lightbox'ı uygulamak için aşağıdaki kodu kendimize göre düzenliyoruz.

<a href="Resim adresi" rel="lightbox" title="Resim açıklaması">
<img src="Resim Adresi"/></a>

NOT: Bu yazı, Blogger Kontrol Paneli baz alınarak yazılmıştır.

Anket sonuçları

Anketimiz kapandı, sonuçlar aşağıda.

Temanızı seçerken en çok neye dikkat ediyorsunuz?

Az kullanılmasına	131 (54%)
Yaygın olarak kullanılmasına	15 (6%)
Bol sütunlu olmasına	48 (19%)
Reklamlara tıklanma oranına	48 (19%)

Şu ana kadar kullanılan oy sayısı: 242
Anket kapandı

Anktetten ziyaretçilerimiz ve yazarlamız gerekli sonuçları çıkarıp değerlendirecektir.
Anketimize katılan ziyaretçilerimiz az kullanılan bir temayı tercih ediyor. Az kullanılan tema istiyorsanız temanızı kendiniz hazırlamalısınız. Ya da mevcut temalar üzerinde değişiklik yaparak farklı birşeyler ortaya çıkarılabilir.

Sütunlarınız sadece ana sayfada görünsün.

Blogunuzda kullandığınız sütunların veya bazı eklentilerin sadece anasayfanızda veya sadece yazı sayfalarına görünmesini ister miydiniz?

Yalnızca ana sayfa

Ana sayfada yayımlanmasını istediğiniz öğeyi şu kodlar arasına alın.
<b:if cond='data:blog.pageType == "item"'>

</b:if>

Yalnızca yazı sayfası

<b:if cond='data:blog.pageType != "item"'>

</b:if>
İki kod arasındaki fark sadece = yerine ! işaretinin gelmesidir.
Bunları koşullu da kullanabilirsiniz. Şöyle ki:

<b:if cond='data:blog.pageType == "item"'>
ana sayfada görünecek öğe
<b:else/>
eğer anasayfa değilse bunu gösterir.
</b:if>

Yukarıdakiler XML temalar içindi. Klasik temalar için yapmak isterseniz şu kodları kullanmalısınız.

Ana sayfa ve arşiv sayfası


<MainOrArchivePage>

</MainOrArchivePage>

Yazı sayfaları


<ItemPage>

</ItemPage>


TemanizaTab Navigasyon Menüsü Eklemek

Size anlatacagim konu ise yukardaki resimdeki gibi temaniza menü yapma

ilk önce css tabs'lari nereden buluruz diyorsaniz burada verilmis istiyorsaniz sizde yapabilirsiniz programla ama ben hazirini kullandim

Örnek menüleri görmek icin tiklayin.
Menüleri indirin.

Simdi anlatima basliyalim

menü dosyasini indirdikten sonra dosyanin icinde Menus.htm diye dosya vardir o dosyayi sag tiklayarak bir editor ile aciyoruz

sonra örnek menülerde begendigimiz menünün css kodunu buluyoruz ve kopyaliyoruz

Blogger'a giriyoruz

Yerlesim / HTML’yi Düzenle ve Widget Sablonlarini Genisleti Tikliyoruz

Assagidaki kodu buluyoruz

]]></b:skin>

Bu kodun üstüne kopyaladiginiz css kodunu yapistiriyoruz ve kodlarin icinde 2 tane "background:url" yazisi var bunlarin yaninda resim linki olacak ama koymamislar sadece resimlerin isimlerini yazmislar siz imageshack.us adresinden resimleri yükler degistirsiniz. Resimler indirdiginiz dosyanin icindedir.

Simdi menüleri yerlestirme zamani

Assagidaki kodu bulun

<div id='content-wrapper'>

Bu kodun üstüne gine Menus.htm dosyasinin en assagilarinda sectiginiz menünün harfine bakarak kodumuzu aliyoruz ve yapistirip kendimize göre düzenliyoruz

Herseyi yaptiktan sonra Sablonu Kaydet'e tiklayip isimiz bitmis oluyor

Suanda gece saat 02:09 üsenmeyip yazdim :)

Hem çok sesli hem çok renkli blog

Önceki yazılarımızdan birinde blog yazarının yorumlarını farklı renklerde göstermiştik. Acaba blog yazılarını için de aynı benzeri yapabilir miyiz diye araştırdık. Yapılabiliyormuş. Blogunuzda tek başına değilseniz, birden fazla yazar var ise yazarların yazılarını farklı biçimlerde gösterebilirsiniz. Entel yazarın yazılarını siyah tonlarda, Dantel yazarın yazılarını ise işlemeli fon üzerinde yayımlayabilmek mümkün. Anlatmakla olmuyor, Güç Kaynağı adlı örnek sayfaya bakın:

Nasıl yapılıyor?

Blogger Yardım Sayfalarında verilen kodlar işe yaramadı. Üzerinde ufak değişiklik yaparak kullanılır hale getirdim.

1. Blogger Kontrol Paneli >>> Yerleşim >>> HTML’yi Düzenle>>> Temanızı yedekleyin. "Widget Şablonlarını Genişlet" işaretli olsun
.
2. Her bir yazar için CSS ile her bir yazar için farklı renkler, arkaplan resimleri, fontlar vs. belirleyin. Mesela şöyle:
.yasin{
background-color:#FFC69F;
border:1px solid #BDDE5B;
color:#333333;
display:block;
}

.avare{
background-color:#2B292E;
border:1px solid #00A817;
color:#eeeeee;
display:block;
} Renkleri değiştirebilir, yeni özellikler ekleyebilirsiniz.


3. <p><data:post.body/></p> satırını bulun.
4. Bu satırın öncesine şu kodları<span class="<data:post.author/>"">sonrasına ise şu kodları </span"> yerleştirin.
5. Şablonu kaydedin.

Bu anlattıklarımız XML şablonlar içindir. Klasik şablon kullananlar Blogger Yardım sayfalarına bakabilirler veya bir yazarımızın (ben değilim:) ) aynı özelliğin klasik şablonlar için nasıl yapıldığını anlatan yazısını bekleyebilirler.

Örneğe ve anlattıklarıma bakarak "Ne işe yarar ki bu!.." diyerek kestirip atmayın. Hayal gücünüze ve hünerinize bağlı olarak, bütünlüğü bozmadan çok güzel ve özel tasarımlar oluşturabilirsiniz. Hem çok sesli hem de çok renkli bir blog görür sanal âlem.
Blogger Destek yazarları için günün ipucu: HTML kodlarını <xmp> </xmp>arasına yazdığınızda yorumlanmayacaktır.

CSS ile RSS Butonu

Blogunuzda fazla tek bir grafik bile bulunmasını istemiyorsanız ve bu yüzden gerekli olan RSS butonunu kaldırıyorsanız artık durun! RSS butonunu CSS ile grafik kullanmadan yapabilirsiniz.

Nasıl mı?
1 - Blogunuzun Yönetim Paneli >>> Yerleşim >>> HTML'yi Düzenle >>>

2 - Bul:
]]></b:skin>

Üstüne Ekle:
.rss {
border:1px solid;border-color:#FFF #FFF #FFF #FFF;padding:0 3px;font:bold 10px verdana,sans-serif;color:#000000;background:#F60;text-decoration:none;margin:4px;
}

3 - RSS butonunu eklemek istediğiniz yere bu kodu yerleştirin:
<a href="http://www.blogger.com/post-edit.do">RSS ADRESİ BURAYA" class="rss"><span style="color:white;">RSS</span></a>

DİKKAT! Buradaki RSS ADRESİ BURAYA yazan yere, RSS adresinizi yazmalısınız =).

ÖRNEK GÖRÜNÜM
RSS

Blogunuzda renkli yorumlar

Wordpress kulllanıcılarında görüp kıskandığım bir özellik vardı: Site yazarının yorumları yani ziyaretçilerin yorumlarına verdiği cevaplar farklı renkte gösteriliyordu. Buradan bu özelliğin Blogger için de yapılabileceğini gördük.
Eğer çok yorum alan bir blogcu iseniz kullanmanızda fayda var. Nasıl olduğunu merak edenler şu sayfaya veya bu yazının sonuna bakabilirler.

Nasıl yapılıyor?

1. Kontrol Panel>>>Yerleşim>>>HTML'yi düzenle
2. Widget Şablonlarını Genişlet seçeneğini işaretleyin.
3. CSS tagları arasına yani şu kodlardan (]]></b:skin> ) hemen öncesine şu satırları ekleyin.
   


.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

.comment-body-author {
margin:0;
padding:0 0 0 20px;

}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#CC3300;
text-decoration:bold;
background: #6699FF;
}
Burada background ve color değerleri ile oynayarak renkleri temanıza uydurun. (Not:
Bazı temalarda .comment-body etiketi olabilir.
4. Şu kodları bulun. (Firefox ile CTRL+F )
   <dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>
<data:comment.author/>
</b:if>
yazdı...
</dt>
   
5. Yukarıda yazılanlardan hemen sonra sonra şu kodları ekleyin. <b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
6. Şu satırın önüne <dd class='comment-footer'> şu kısacık kodu ekleyin. </b:if>
7. Şablonu Kaydet'e tıklayın.

Anlattıklarımız karışık geldi ise şu sayfadaki kodlar işinizi kolaylaştırabilir.

Blogger Yukarı Butonu

Bazı Blogger temalarında vardır yukarı butonu.Ancak ya yoksa?Yada ziyaretçi boğuk bir mesajın içinde kaybolmuşsa. İşte tam bu anda yardımınıza Superman gibi uçup geliyorum. Aslında Dmry'de gördüğüm bu kodları Blogger adına keşfetmiş oluyorum.Ayrıca çok ufak düzenlemeler yapıp sizlere sunuyorum.

Önceki anlatımlarımda olduğu gibi "-" işaretini kodları yazarken kaldırın.
İlk olarak <-body-> kodundan önce aşağıdaki kodu yazın.
<-a id="sayfaustu"><-/a->Sonra ise <body> kodundan önce aşağıdaki kodu yazın.

<-p id='page-top' -><-a href='#sayfaustu' title='Kaybolduysan Yukarı'->Yukarı

Daha sonra ise CSS kodlarınız arasında bir yere aşağıdaki kodu yapıştırın.



#page-top {
position: fixed;
display: block !important;
display: none; /* Hide from IE6 */
bottom: 5px;
right: 10px;
padding: 2px 0 2px 20px;
background: url(images/sayfa-yukari.png)
left center no-repeat;
font-size:11px;
}

#page-top a:link, #page-top a:active,
#page-top a:visited, #page-top a:hover
{text-decoration:none;}


Şablonu kaydetmeden önce resmi kendi hostunuza yükleyin.Daha sonra kodlar kırmızı ile işaretlediğim yerleri silip resmin linkini yazın.

CSS ile hoş mesaj kutuları

2 gündür kullandığım şu üstteki mavi kutuyu sanırım herkes biliyor ve görmüştür.Bu mesajımda size o kutunun nasıl yapıldığını anlatacağım.Aslında bu kodların mucidi E-Burhan.Ve bende sanırım bu eklentiyi Blogger'da kullanan ilk kişiyim.Bu yüzden bu olayı size bir güzel anlatmak istiyorum.Çok basit bir olay.

ÖNEMLİ:Bu işlemleri yapmadan önce mutlaka şablonunuzu yedekleyiniz.Ufak bir yanlış işlemde site kayabilir.(Başıma geldi oradan biliyorunm).

İlk olarak şu linkteki CSS Message Box dosyasını indirin.

Paket içerisinden çıkan "css.css" dosyasını kendi sunucunuza yerleştirin.

Not:Kod aktif olmasın diye "-" işaretini koydum.Siz kodları yazarken o işaretleri kaldırın.

<-style type="text/css">@import "css.css dosyasının linki";<-/style->Kırmızı ile işaretlediğim bölgeye az önce kendi sunucumuza yüklediğimiz "css.css" dosyasının linkini yazalım.

Bu kodu olduğu gibi kopyalayın ve Blogger HTML Düzenle kısmında <-head-> kodundan hemen sonra koyun.

<-div class="bilgi">
KaaN-Blog en iyi Firefox tarayıcı ile görüntülenir.
<-/div->

Kırmızı olan yere aşağıdakileri yazarsanız kutunun rengi değişecektir.

"hata" yazarsanız rengi kırmızı.
"ikaz" yazarsanız rengi sarı.
"tamam" yazarsanız rengi yeşil.
"bilgi" yazarsanız rengi mavi.

Yazıyı kendinize göre değiştirebilirsiniz tabiki.Şablonu önizleyin ve kaydedin.
Tamamdır bu kod bu kadar.Ancak birde sonradan dedinizki ben bu kenara bu kutu ile birlikte bir pano hazırlamak istiyorum. Biz de olur nasıl istersen diyoruz.

Bunun için bu işlemleri tekrarlamaya hiç gerek yok.

Sayfa ögeleri/Sayfa ögesi ekle/HTML/Javascript Oluştur ve yukarıdaki <-div->'li kodu yani 2.kodu yazmanız yeterli olacaktır.
*Kodu şablona kaydettiğimiz için ilk baştaki kodu yazmamıza gerek kalmadı.