Ajax ile Blogger Etiket Ayari

Hepimizin bildiği gibi bloggerın bazı eksikleri var. Bunlardan biri de etiketlerden birine tıkladığımızda sonuçların aynı sayfada hep birlikte yığılması… Örneğin bir etikette 100 konu varsa, etiketin adına tıkladığımızda 100 tane içerik sayfaya yükleniyor ve bu da hiç hoş olmayan bir görüntüye sebep oluyor.

Oysaki birazı yüklense ve devamı şeklinde bir link olsa daha güzel bir görüntü olurdu. Blogger’ın biraz esnek bir yapısı olması sebebiyle buna bir çözüm getirilmiş. Bunun için bir Ajax geliştirilmiş. Konunun ingilizcesinin bulunduğu site burada

Örneğin Tenobook.net‘te kategorilerden birine tıkladığınıda sayfanın içerik bölümünde bir liste açılıyor ve kaç tane sonuç listelenmesini istiyorsanız o kadar sonuç karşınıza geliyor ve sayfada herhangi bir yığılma olmuyor. Yani çıkan etiket sonuçları sayfalara bölününce daha güzel bir görüntü oluyor. Ayrıca sonuçlar karşımıza daha hızlı geliyor.

Aşağıdaki resimde gördüğünüz gibi “Google” etiketine tıkladığımda 23 sonuç 5 ayrı sayfaya bölündü. İsterseniz bir listede kaç yazı listeleneceğini belirleyebilirsiniz.

Gelelim Blogger sitenize bu sistemi nasıl kuracağınıza. Gayet basit…

***Öncelikle sayfanızda

</head>

Tagını bulun ve bunun öncesine aşağıdaki kodları ekleyin.

<script src='http://siteadresi.com/prototype.js' type='text/javascript'/>

<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 src='http://siteadresi.com/ajaxlabels.js' type='text/javascript'/>

***Kodların başında ve sonunda bulunan, kırmızı olarak belirttiğim prototype.js ve ajaxlabels.js dosyalarını aşağıdaki linkten indirip kendiniz bir hosta yüklemeniz gerekir. Ücretsiz host da olabilir. (örneğin: googlepages.com) Hosta yükledikten sonra linkleri değiştirin.

Gerekli dosyaları indir

Koddaki linkleri güncelleyip kodları belirttiğim yere ekledikten sonra geçelim diğer adıma.

***Sonraki aşamada şablon kodlarınızda;

<b:widget id='Label1' locked='false' title='Kategoriler' type='Label'>

satırını bulun ve bunun yerine aşağıdaki kodları yerleştirin.

<b:widget id='Label1' locked='false' title='Kategoriler' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><data:label.name/><b:else/><a expr:onclick='&quot;javascript:getCat(\&quot;&quot; + data:label.name + &quot;\&quot;,null),scroll(0,0)&quot;' href='#sres'><data:label.name/></a></b:if>(<data:label.count/>)</li></b:loop></ul>

</div></b:includable></b:widget><b:widget id='HTML1' locked='false' title='' type='HTML'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div>

<b:include name='quickedit'/></b:includable></b:widget>

***Bunu yapıp şablonu kaydettikten sonra son olarak etiket (kategori) sonuçlarının görüneceği yere aşağıdaki kodları ekliyoruz.

<div id="indicator" style="display:none"><img alt="Yükleniyor..." src="http://i26.tinypic.com/2wpm0jl.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(close
Label);&am
p;lt
;/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>

Kodları şablon yerleşimi bölümünden gadget ekle dümesinden html-javascript seçeneğini seçerek ekliyoruz ve gadgeti şablonda aşağıdaki resimdeki yere taşıyoruz.

Böylece kullanıcılar sayfada herhangi bir kategoriye tıkladıklarında içeriğin hemen üzerinde o kategoriyle ilgili sonuçları görebiliyorlar.

Kaynak: TEKNOBOOK

Reklamlar
ajax ile blogger etiket ayari, blogger, blogspot kategorisinde yayınlandı

Bir Yanıt Bırakın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: