• Kaynak; Weblog Tools Collection: Screencast on Editing a WP Theme

Not: Video’yu izlerken farkettiğim bir de Firefox eklentisi var, bahsetmeden geçemeyeceğim; Chris Pederick’s Web Developer Extension. Web sayfaları ile uğraşanlar için oldukça yararlı işlevler sunan bir araç çubuğu sunuyor ;)

Temanın özellikleri

• Tek kolonlu yapı
• AJAX açılır-kapanır üst menü ⁽¹⁾
• AJAX ile sayfaiçi linklerde yumuşak geçiş ⁽¹⁾
• Google arama modülü ⁽²⁾

Temayı buradan indirebilirsiniz. İsterseniz öncesinde hazırladığım örnek blogu ziyaret ederek fonksiyonları da test edebilirsiniz. Sizden ricam temayı kullanmadan önce sahip oldukları özellikler ile ilgili notları okuyarak anlamanız ve sonrasında kullanmaya başlamanız olacaktır. Ayrıca Digg’de bana destek olabilirseniz çok sevinirim :)

Notlar

⁽⁰⁾ Bu tema bütünlüğünün korunabilmesi için bazı grafik dosyalarına ihtiyaç duymaktadır. Temanın ihtiyaç duyacağı grafik dosyalarını tema paketi içinde bulunan “images” klasörü altında bulabilirsiniz. Bu klasör altındaki dosyaları teker teker bir ücretsiz grafik sunucusuna (örn. imageshack.us) göndermeniz ve daha sonra da bu sunucudan alacağınız linkler ile şablonun CSS bilgisi içindeki grafik dosyalarının adlarını değiştirmeniz gerekmektedir. Bunun için tema paketi içindeki şablon kodlarını barındıran “theme.txt” dosyasını bir metin editörü ile (notepad veya benzeri) açın ve içerisinde /* Tema Grafikleri */ ifadesini arayın. Bu başlık altında kolaylık olması açısından bir araya topladığım grafik dosyalarını bulabilirsiniz.

⁽¹⁾ Bu temanın AJAX fonksiyonları için jQuery ile birlikte jQuery için yazılan arayüz elemanları kullanılmıştır. Her ne kadar bunlar oldukça küçük dosya boyutuna sahip araçlar olsalar da yine de sayfa yükleme zamanlarınızın artmasına neden olabilirler.

⁽²⁾ Bu, Google tarafından sunulan ücretsiz bir araçtır ve arama için AdSense ile hiçbir ilişkisi yoktur. Bu modül sadece Google tarafından indekslenen sayfalar için sonuç üretebilir, dolayısı ile blogunuzun Google tarafından indekslenen içeriği yok ise sizin için çalışmayabilir.

⁽³⁾ Bu tema Internet Explorer 6, Firefox 1.5.x (Windows ve Linux), Opera 9, Safari 1.3 ve Konqueror 3.5 ile denenmiş ve bu tarayıcıların tamamında görüntüleme ile ilişkili bir soruna rastlanmamıştır. Fakat temanın AJAX üst menü fonksiyonu Safari ve Konqueror ile çalışmamaktadır!

⁽⁴⁾ Temayı kullanırken “Enable float alignment” şeçeneğini (”Blogger Dashboard > Settings > Formatting > Enable float alignment” altında “No” seçerek kaydedin, ve blogunuzu yeniden yayınlayın) devre dışı bırakmanızı ve fotoğraf/resim gönderirken Blogger’ın yönlendirme araçları yerine class=”left”, class=”right”, class=”center” kullanmanızı öneririm, aksi taktirde temanın görüntülenmesi ile ilgili sorunlar yaşabilirsiniz.

Güncelleme

• Tema kodlaması UTF-8′e dönüştürerek sorunlu karakterleri temizledim, şu an çok daha iyi görünüyor. Türkçe demo blogu inceleyebilirsiniz.

Şu an için sadece 3 tane tema bulunuyor, umarım zamanım olur ve yakında daha fazlasını da ekleyebilirim. Mevcut temaların özelliklerine ve Türkçe versiyonlarına buradan ulaşabilirsiniz. İngilizceleri için ise yine tanımlamalarda yer verdiğim Blogger templates linklerinden yararlanabilirsiniz. Sizden ricam temaları kullanmadan önce sahip oldukları özellikler ile ilgili notları okuyarak anlamanız ve sonrasında kullanmaya başlamanız olacaktır. Ayrıca temalarda bulunan ve tema bilgilerini barındıran bağlantıları değiştirmezseniz sevinirim.

Conzep

Bu benim ilk göz ağrım :) Orijinali Joe Mitcho tarafından WordPress’in öntanımlı teması Kubrick’den modifiye edilerek hazırlanmış olan bu temanın WordPress versiyonuna buradan ulaşabilirsiniz. Benim hazırladığım Blogger versiyonunun nasıl göründüğüne ise buradaki örnekten bakabilirsiniz. Tema özellikleri şöyle;

• İki kolonlu yapı
• Gelişmiş yorum girişi ⁽¹⁾
• Sidebar’da son yorumlar bölümü ⁽²⁾
• Technorati etiketleri gösterimi ⁽³⁾
• Google arama modülü ⁽⁴⁾

Bu temanın gelişmiş yorum girişi içeren versiyonunun Türkçe’sini buradan, normal yorum girişi içeren versiyonunun Türkçe’sini ise buradan indirebilirsiniz. İngilizce versiyonlar için bu linki kullanabilirsiniz.

Kiss

Bu da oldukça hoş ve sade bir tasarım. Oinam tarafından Movable Type, TypePad, Live Journal ve WordPress versiyonları yayınlanan bu temanın Blogger versiyonunu da ben hazırladım. Blogger versiyonunu bu örnekte inceleyebilirsiniz. Temanın özellikleri şöyle;

• İki kolonlu yapı
• Sidebar’da son yorumlar bölümü ⁽²⁾
• Google arama modülü ⁽⁴⁾

Bu temanın özel bir durumu var, tema öngösterimi sırasında saçma sapan bir karmaşa sergileyebiliyor, fakat blogunuzu kaydedip yayınladığınızda herşey normale dönüyor :) Türkçe versiyonunu buradan indirebilirsiniz. İngilizce versiyon için bu linki kullanabilirsiniz.

NewZen

Bu temayı da ilginç yapan AJAX sidebar menüsü. Blogger’da bile AJAX kullanılabilir mi düşüncesi ile yola çıkarak hazırladığım bu temanın orijinal WordPress versiyonunu burada bulabilir ve benim hazırladığım Blogger versiyonunu incelemek için buradaki örnek blogdan yararlanabilirsiniz. Temanın özellikleri şöyle;

• İki kolonlu yapı
• AJAX sidebar menüsü ⁽⁵⁾
• Sidebar’da son yorumlar bölümü ⁽²⁾
• Google arama modülü ⁽⁴⁾

Bu temanın Türkçe versiyonunu buradan indirebilirsiniz. İngilizce versiyonu için bu linki kullanabilirsiniz.

Notlar

⁽⁰⁾ Bu temaların hepsi bütünlüklerinin korunabilmesi için bazı grafik dosyalarına ihtiyaç duymaktadır. Her temanın ihtiyaç duyacağı grafik dosyalarını tema paketi içinde bulunan “images” klasörü altında bulabilirsiniz. Bu klasör altındaki dosyaları teker teker bir ücretsiz grafik sunucusuna (örn. imageshack.us) göndermeniz ve daha sonra da bu sunucudan alacağınız linkler ile şablonun CSS bilgisi içindeki grafik dosyalarının adlarını değiştirmeniz gerekmektedir. Bunun için tema paketi içindeki şablon kodlarını barındıran “theme.txt” dosyasını bir metin editörü ile (notepad veya benzeri) açın ve içerisinde /* Tema Grafikleri */ ifadesini arayın. Bu başlık altında kolaylık olması açısından bir araya topladığım grafik dosyalarını bulabilirsiniz.

⁽¹⁾ Bu temanın, birisi gelişmiş yorum giriş alanı içeren (K2 for Blogger‘dan modifiye edilmiştir) diğeri ise Blogger’ın öntanımlı yorum sistemini kullanan, iki versiyonu bulunmaktadır. Gelişmiş yorum girişi içeren versiyon bazen tarayıcılar ile (özellikle IE) sorunlara neden olabilmekte ve hatta yorum onaylamasını devre dışı bırakabilmektedir. Bu yüzden, size normal yorum giriş metodunu kullanan versiyonu kullanmanızı öneriyorum.

⁽²⁾ Blogger yardımında yer verilen bir ipucundan faydalanarak uyarlanmıştır.

⁽³⁾ Technorati etiketlerinin temanızda görünmesi için tema paketi ile birlikte gelen, ve bu tema ile çalışabilmesi için orijinal versiyonundan modifiye edilmiş olan, Grease Monkey scriptini kurmanız gerekmektedir. Eğer bu etiketlere ihtiyacınız olmadığını düşünüyorsanız (ya da Grease Monkey, Technorati, Etiket gibi ifadeler size karmaşık ve sıkıcı geliyorsa) bu notu gözardı ederek hiçbirşey yapmamanız yeterli :)

⁽⁴⁾ Bu, Google tarafından sunulan ücretsiz bir araçtır ve arama için AdSense ile hiçbir ilişkisi yoktur. Bu modül sadece Google tarafından indekslenen sayfalar için sonuç üretebilir, dolayısı ile blogunuzun Google tarafından indekslenen içeriği yok ise sizin için çalışmayabilir.

⁽⁵⁾ Bu temanın AJAX fonksiyonları için moo.fx ile birlikte Prototype‘ın basitleştirilmiş bir versiyonu kullanılmıştır. Her ne kadar bu araçlar şu an bu temada kullanılanlar gibi efektleri oluşturmak için en az dosya boyutuna sahip araçlar olsalar da yine de sayfa yükleme zamanlarınızın artmasına neden olabilirler.

Orijinal çalışmadan yola çıkarak hazırlanan bir eklenti sayesinde, daha çok WordPress kullanıcıları arasında (*) popülerlik kazanan sahip bu java scripti isterseniz Blogger veya Blogcu gibi ücretsiz sunucularda bulunan blogunuzda da kullanabilirsiniz. Bunun için daha önce QuickSub’ı Blogger’a entegre ederken kullandığımız yöntemi kullanacağız.

Aşağıdaki adımları izleyelim;

1. Buradaki bağlantı aracılığı ile gerekli dosyları içeren blogger-lightbox.zip’i indirin ve açın.
2. Açtığınız bu dosyanın içeriğinde bulunan loading.gif, close.gif, blank.gif ve overlay.png’yi ücretsiz bir grafik sunucusuna (örneğin; imageshack.us) gönderin ve bu dosyaların sunucudaki bağlantı adreslerini bir kenara not edin.
3. Zip içerisinden çıkan css.txt dosyasını açın ve bu dosyanın içinde overlay.png (2 kez) ve blank.gif ifadelerini arayarak yerlerine bir önceki basamakta elde ettiğiniz eşdeğer adreslerini girin (örneğin; “blank.gif” yerine “http://www.sunucuadi.com/blank.gif”).
   
4. Zip ierisinden çıkan js.txt dosyasını açın ve bu dosyanın içinde loading.gif ve close.gif ifadelerini arayın. Bu ifadeleri de bir önceki basamaktaki gibi ücretsiz sunucudaki karşılıkları ile değiştirin.
5. css.txt dosyasını açın ve içeriğini, CTRL+A tuş kombinasyonu ile tamamını seçtikten sonra, CTRL+C ile kopyalayın. Şablon kodunuzun içinde </style> ifadesini arayın ve kopyaladığınız metni bu ifadenin hemen üstüne yapıştırın (CTRL+V).
6. js.txt dosyasını açın ve içeriğini, CTRL+A tuş kombinasyonu ile tamamını seçtikten sonra, CTRL+C ile kopyalayın. Şablon kodunuzun içinde </head> ifadesini arayın ve kopyaladığınız metni bu ifadenin hemen üstüne yapıştırın (CTRL+V).
7. Şablonu kaydedin ve eğer Blogger kullanıyorsanız “Republish” ile blogunuzu yeniden yayınlayın.

Üstteki basamaklar ile kodu blogumuzun şablon kodu ile entegre ettik, bundan sonra ise yapmamız gereken Lightbox JS ile gösterilmesini istediğimiz fotoğrafların / resimlerin bağlantı kodlarına rel=”lightbox” ifadesini eklemek. Bunu da şu şekilde yapıyoruz; örneğin yukardaki gibi bir fotoğrafı Blogger’a gönderdiğinizde sunucu sizin için aşağıdakine benzer bir kod oluşturuyor;
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/2203/1472/1600/ari-viz-viz.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger/2203/1472/200/ari-viz-viz.jpg" alt="" border="0" class="centered" /></a>
Kodu görebilmek için Blogger’da düzenleme kutusunun üzerindeki “Edit Html”ye tıklayarak HTML formunda düzenlemeye geçmeniz gerek. Buradaki kodu aşağıdaki şekilde değiştiriyoruz.
<a rel="lightbox" title="Arı vız vız..." onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/2203/1472/1600/ari-viz-viz.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger/2203/1472/200/ari-viz-viz.jpg" alt="" border="0" class="centered" /></a>
Dikkat etmeniz gereken bir diğer nokta; eğer fotoğrafın altında açıklayıcı bir ifadenin yer almasını istiyorsanız bunu “title” etiketi ile belirtiyorsunuz. Yukardaki örnekle açıklayacak olursak, title=”Arı vız vız…” şeklindeki ifadede “Arı vız vız…” yerine görünmesini istediğiniz metni girmeniz gerekiyor.

Kolay gelsin.

(*) Katılıyorum Eray, yaşasın Wordpress!

Nette gezinirken bir sitede rastladığım bu javascript kodu çok işinize yarayacak. Biliyorsunuz ki spam yaratanlar nete saldıkları robotları ile web sayfalarındaki e-postaları topluyorlar ve daha sonra da bombardıman başlıyor. Bu robotlar sayfalardaki e-postaları kendilerine özgün formatından (adiniz@e-posta.com) kolayca tanıyabiliyorlar. Her ne kadar nette çeşitli siteler sağladıkları belirli bazı kodları sitenize eklemeniz durumunda sizi spamdan koruyacaklarını iddia etseler de ben bunlar aracılığı ile başarılı olabileni duymadım ve ne samimiyetlerine ne de etkinliklerine inanmıyorum.

Aşağıda açıklayacağım basit javascript kodu ise e-posta adresinizin kendine özgü yapısını biraz karıştırıyor ve robotların farketmemesini sağlıyor. Sadece kullanıcı üzerine tıkladığında bilgisayarındaki e-posta için tanımlı yazılımı (Outlook, Thunderbird vs.) uyarıp, adresi eski haline getirip ona sunarak işlevselliğini de koruyor. Aşağıdaki adımları takip ederek kodu kullanmaya başlayabilirsiniz;

1. Adım: e-Postanızı bir grafik dosyası şeklinde kaydedin
Bahsettiğim robotlar grafik dosyaları üzerindeki metinleri okuyamadıkları için e-postamızı bir grafik dosyası şeklinde kaydetmemiz gerekiyor. Photoshop veya benzeri bir araçla e-postanıza yetecek kadar bir alan hazırlayın ve üzerine site şablonunda kullanılan font ile e-posta adresinizi yazın. İstediğiniz herhangi bir formatta (.gif, .jpg, .png vs.) kaydedin.

2. Adım: Java kodunu blog kodunuza ekleyin
Aşağıdaki java kodunu blog HTML kodunuz içerisine, </HEAD> etiketinin hemen altına, dahil edin.

<script language="JavaScript"> <!-- function mask(end,middle,start,subject){ var one ='mai'; var two='lto:'; var three='?Subject='; var putogether= one+two+start+middle+end+three+subject; document.location.href=eval('"'+putogether+'"'); window.status=putogether; } //--> </script>

3. Adım: e-Postanızın 3′e bölün
e-Posta adresinizi çeşitli yerlerinden üç farklı parçaya ayırın. Bu işlemi belirli bir kuralı olmayan bir heceleme işlemi gibi düşünebilirsiniz. Örneğin ben kendi e-postamı aşağıdaki şekilde üçe ayırarak java koduna ekledim;

4. Adım: e-Posta bağlantınızı hazırlayın
e-Posta adresiniz için ilk adımda hazırladığınız grafik dosyasını sunucunuza (ya da imageshack.us gibi ücretsiz bir grafik sunucusuna) gönderin ve adresini bir yere not edin. Aşağıdaki kodu kullanarak e-posta adresinizin bağlantısını oluşturun. Burada e-posta adresinizin parçalarını belirtilen sıra ile (3, 2, 1) girin. 4 numaralı alana da size gönderilecek e-postanın konusunu girin (örneğin; Bir sorum var). e-Postanızı barındıran grafik dosyasının adresini de uygun alana girmeyi unutmayın (kod içinde http://sunucu.com/e-posta.gif şeklinde belirtiliyor).

<a href="javascript:;" onMouseDown="mask('3','2','1','4')"><img src="http://sunucu.com/e-posta.gif"></a>
Daha sonra hazırladığınız bu bağlantıyı HTML kodunuz içinde görünmesini istediğiniz yere girin ve kaydedin. Blogger kullanıyorsanız “Republish” ile blogunuzu yeniden yayınladıktan sonra kodu deneyebilirsiniz.

Kolay gelsin.

Kaynak;

• Stan: The Hot-Water Man (*)(**)

(*) Kod içinde herhangi bir copyright ifadesine rastlamadığım için sadece kodu farkettiğim site adresini verebiliyorum.
(**) Hayır, sandığınız gibi bir site değil :)

Color Scheme Generator

Sol taraftaki palet üzerinde beğendiğiniz renk üzerine tıkladığınızda size muhtemel sayfa görünüşü üzerindeki yazılar, başlıklar ve arka plan gibi elemanlar için renk alternatifleri üretiyor. Eğer tek rengin değişik tonlarından oluşan bir tasarım yerine birden fazla renk ile oluşturumuş bir şablon istiyorsanız paletin altındaki düğmeleri ve renk karakterini değiştirmek istiyorsanız örnek sayfa yerleşimi tablosunun altındaki düğmeleri kullanabilirsiniz.

Colrpickr

Eğer şablon tasarımınızda grafik dosyalarına da yer vermeyi düşünüyorsanız bu araç çok işinize yarayacak. Sayfanın ortasında bulunan palet üzerinde şablonunuzda kullanacağınız renklere yakın bir renk üzerine tıkladığınızda size o renk tonu ile kullanabileceğiniz bir dizi grafik dosyası alternatifi sunuluyor. Beğendiklerinizin üzerine tıkladığınızda yönlendirileceğiniz flickr’da yüksek çözünürlükte bir kopyasına ulaşabilirsiniz.

Kaynak;

• Performancing.com: Blog Template Colour Schemes

Bahsedilen servislerin üçüde özel olarak düzenlenmiş bağlantılar aracılığı ile kısayol eklemeye olanak veriyorlar. Aşağıda Blogger için hazırladığım kısayol örnekleri ve bu kısayolların blog kodunuz içine nasıl yerleştirileceği hakkında bilgi vermeye çalıştım. Eğer başka bir blog servisi kullanıyorsanız kodu rahatlıkla kendi servisinize uyarlayabilirsiniz, çünkü sadece iki parametre söz konusu.

del.icio.us kısayol ekleme kodu
http://del.icio.us/post?url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>
Y! My Web kısayol ekleme kodu
http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkUrl$>&ei=UTF-8
Furl kısayol ekleme kodu
http://www.furl.net/storeIt.jsp?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkUrl$>

Kodlar içerisinde Blogger için geçerli olan etiketlerden <$BlogItemTitle$> gönderi başlığının, <$BlogItemPermalinkUrl$> ise gönderi kalıcı bağlantısının yerine kullanılmaktadır. Blogger’ın kullandığı yazılım bu etiketleri gördüğü yerlere karşılıklarını otomatik olarak yerleştirir. Eğer farklı bir blog servisi kullanıyorsanız bu kodlara karşılık gelen kodları gerektiği yere girmeniz – büyük olasılıkla – yeterli olacaktır. Blogger için üstteki kodları kopyalayarak kullanabilirsiniz.

Bu kodları isterseniz sadece metin bağlantılar şeklinde ya da benim yaptığım gibi ikonlara bağlayarak kullanabilirsiniz. Eğer metin bağlantısı olarak kullanacaksanız kodunuz;
<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=<$BlogItemTitle$>&u=<$BlogItemPermalinkUrl$>&ei=UTF-8">My Web'e ekle</a>
şeklinde ve eğer bir grafik dosyası ile kullanacaksanız;
<a href="http://del.icio.us/post?url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$>"><img src="http://sunucu-adi.com/grafik-dosyasi.jpg"></a>
şeklinde olmalıdır. Tabii ki örnekteki sunucu ve grafik dosyası adını da doğru değerlerle değiştirmeniz gerekiyor. Daha sonra oluşturduğunuz kodunuzu blog kodunuz içerisinde;
<div class="post">
.
.
.
</div>
etiketleri arasına kopyalamanız gerekiyor. Büyük ihtimalle kapanış etiketi olan </div>’dan hemen önce yerleştirdiğinizde sorun yaşamazsınız, ama gene de görünüşünü kontrol etmeden kaydetmemenizde fayda var.

Kolay gelsin.