Blogger'da yazılarımız için kategori oluşturamadığımız dolayı bazı yazarlar
etiketleri kullanarak bu dar boğazı aşmaya çalışıyor, bunlardan biri de benim. Normal
şartlarda her hengi bir etikete tıkladığımızda "{etiket adı} etiketine sahip yazılar
gösteriliyor." uyarısını alırız. Ancak yazılar blogda normalde nasıl görünüyorlarsa öyle
görünürler. Blogger'ın tek yaptığı yazıları etiket süzgecinden geçirmektir. Peki etiket
araması sonucunda aradığımız etikete sahip yazıların özetler halinde bir sonuç tablosu
içinde görüntülenmesine ne dersiniz? Hem de AJAX kullanarak sayfanın sadece o kısmını yenileyerek yapmak. Kulağa çok hoş geliyor değil mi?
Özellikle
Damacana yazarı Erdal'ın çok hoşuna gideceği aşikar :-) "Ben nedediğini anlamadım" diyorsanız
"Kategoriler" altındaki veya yazıların altındaki her hangi bir etikete tıklamanız yeterli.
Şimdi giriş kısmını bitirelim ve gelişme bölümünde bu işi nasıl yapacağımıza bakalım.
İşin Mantığı (Bu bölümü okumadan işleme geçebilirsiniz, burada nasıl çalıştığını anlattım)
Bu işin çalışma mantığına öncelikle değinmek istiyorum. Arama sonuçlarımız bir pencere içinde
sadece sayfanın o kısmı yenilenerek çıkacağından, AJAX kullanmamız gerektiği aşikar.
Bunu yapabilmek için JavaScript kütüphanesinden yararlanacağız. Kullanacağımız kütüphane
piyasadaki en ünlü kütüphanelerden biri olan
Prototype kütüphanesi.
Daha sonra bir çok ipucunda kullandığımız JSON devreye girecek. Kullanacağımız bir script ile
RSS kaynağımıza başvurup ilgili etikete sahip yazıyı çekip AJAX kullanarak istediğimiz bir
yerde sonuçları göstereceğiz.
Not: HTML Düzenle kısmında çalışırken "Widget Şablonlarını Genişlet" kutucuğunu işaretlemeyi unutmayın.
Uyarı: Bu uygulama XML şablonlar içindir.
Düzeltme/Güncelleme: Yaklaşık 2 saat önce yayınladığım yöntemde bazı eksikler vardı. Bu
yüzden önceki yazımı geri çekip bu son halini yayınladım. (Erdal yorumun silindi, artık
tekrar yazarsın :-) )
i-) Bunlardan biri Türkçe karaktere sahip etiketlerin arama sırasında IE tarayıcısında
çalışmaması.
ii-) Arama sonuçlarında çıkan yazılar bizim belirlediğimiz sayı kadarı gözüküyordu. Burada 5
olarak belirledik. Ancak durum böyle olunca sadece son 5 yazı görüntüleniyordu. Şimdi ise
aradığımız etikete sahip ne kadar yazı varsa hepsi görüntülenebiliyor. Örnek vermek
gerekirse, Blogger İpuçları kategorisinde 5 tane yazıdan fazla yazı var. Artık her 5 yazıda bir
sayfa oluşturuluyor. Zaten açılan pencerede sayfa numaralarını göreceksinizdir. Sanırım
güncellemenin en iyi yanı bu oldu.
Hadi işe girişelim...
[Çalışmanın başlangıcı]
1. Adım) İlk öncelikle şablonuzu açın ve HTML'yi Düzenle moduna geçin. Şimdi şablon kodlarımız arasına aşağıdaki kodu koyalım. <script src='http://kullanıcıadı.googlepages.com/prototype.js' type='text/javascript'/>
Bu kodu <head> ve </head>
etiketleri arasına koymayı unutmayın. En iyisi ya <head> etiketinin hemen sonrası ya da </head>
etiketinin hemen öncesidir. Böylece bir düzen olur. Bu kod yardımı ile Prototype kütüphanesine
bağlanmış olacağız. Dikkat ederseniz ben sunucu adresini direkt GooglePages hesabınız varmış
gibi verdim. Siz her türlü şekilde siyah renk ile yazdığım adres kısmını kendi dosyanızın
olduğu adres ile değiştirebilirsiniz. Dosyayı indirmek ve kendi sunucunuzda barındırmak için
tıklayın.
2. Adım) Şimdi 1.basamaktaki koddan hemen sonra alttaki kodu koyalım.
<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Her sayfada görüntülenecek sonuç sayısı
// navFlag - Sayfa navigasyonunu kapayıp açmak. Açmak için 1, kapamak için 0 değerini verin.
// feedLabel - Yazı etiketinin besleme linki.
// catLabel - Görüntülenen etiketler.
// closeLabel - Arama sonuç penceresini kapatmak için düğme.
var maxresults = 5;
var navFlag = 1; //Başlangıçta açıktır. Siz değiştirebilirsiniz.
var feedLabel = "Bu etikete kaydol:";
var catLabel = "Yazının etiketleri:";
var closeLabel = "Kapat [X]";
//]]>
</script>
<script type='text/javascript' src='http://kullanıcıadı.googlepages.com/ajaxlabels.js' />
Buradaki siyah renkte yazdığım adrese ajaxlabels.js dosyasının sizin sunucunuzda bulunduğu adresi yazacaksınız. ajaxlabels.js dosyasını indirmek ve kendi sunucunuza yüklemek için
tıklayın.
2. adımdaki CSS'te bulunan tanımlı ögeler şöyle:
#indicator:
Etiket araması sonuçlarını beklerken çıkan
yükleme ekranı.
(Yükleniyor... yazısının
bulunduğu pencere)
#search-result: Sonuçların gösterildiği
kısım.
.search-result-meta: Sonuç ekranında "Bu
etikete kaydol : {etiket adı}" çıktısının
bulunduğu kısım.
.search-title: Arama sonucunda çıkan
yazıların başlıkları.
.search-close: Kapat yazısının bulunduğu
kısım.
3. Adım) Şablonuzda arama yaparak aşağıda verdiğim kod kümesini bulmalısınız. Bunu tüm kodları seçerek CTRL+F arama penceresi yardımı ile yapın. Çabucak bulabilmek için arama penceresine "data:post.labels" yazın.
Bulacağınız kod kümesi:
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a>
Bu kod kümesini aşağıdaki ile değiştirin.
<b:loop values='data:post.labels' var='label'><a expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' href='#sres' rel='tag'><data:label.name/></a>
4. Adım) Bu seferde yine CTRL+F ile arama yaparak aşağıdaki kod kümesini bulun. Arama penceresine "data:label.url" yazmanız işinizi kolaylaştıracaktır.
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
Bu kod kümesini aşağıdaki ile değiştirin.
<b:if cond='data:blog.url == data:label.url'><data:label.name/><b:else/><a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null),scroll(0,0)"' ><data:label.name/></a>
Böylece blogumuzdaki herhangi bir etikete tıkladığımız zaman scripti tetikleyeceğiz.
5. Adım) Son basamağımızda arama sonuçlarının nerede görüntüleneceğine karar vereceğiz. Bunu için Şablon kısmında "HTML/JavaScript Ögesini" kullanarak aşağıdaki
kodları girin.
<div id="indicator" style="display:none"><img alt="Indicator" src="http://mafiamax.googlepages.com/indicator.gif"/> Yükleniyor...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>
Burada siyah renk ile belirttiğim adres yükleme ekranında çıkan .gif formatındaki resmin adresi.
Siz bu resmi yine kendi sunucunuza kaydederek adres kısmını değiştirebilirsiniz.
Bu ögeyi kaydettikten sonra şablonda uygun olan bir yere sürükleyip bırakın. En iyi yer "Blog
Yazıları Ögesi"nin hemen üstüdür. Böylece arama sonuçlarınız blog yazılarının bulunduğu alanın
hemen üstünde görüntülenecektir.
[Çalışmanın bitişi]
Bundan sonra tek yapmanız gereken şablonunuzu kaydedip, işe yarayıp yaramadığına bakmak. ;-)
Kayıtlar
