Blogger Sayfa Navigasyonu (PageNavi / Sıralama / Numaralandırma) Eklentisi

Her blogta olması gereken bir özellik olan sayfaları numaralandırıp sıralandırma eklentisi, varsayılan olarak gelmediğinden sizler için her temaya uyumlu bir kod düzenledim. Kodun .js kısmı açık ve direk site içerisinden çalıştığı için sayfa açılma hızını en az etkileyen sayfa numaralandırma (pagenavi) eklentisidir.








<style type="text/css">#blog-pager{font-size:normal;padding:10px 0;}
.showpageNum a{padding:3px;margin:4px; border:1px solid #444; background:#transparent }
.showpagePoint{padding:3px 8px;margin:4px; border:1px solid #444; background:#transparent }
</style>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Önceki";
var downPageWord="Sonraki";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' >
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Sayfa "+nomerhal+' / '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" title="Sayfa '+jj+'" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" title="Sayfa '+maksimal+'" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" title="Sayfa '+jj+'" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}html+='<div>&#160; &#160; &#160; &#160;</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
</script>






Diğer sayfa sıralama kodlarından farklı olarak her temaya uyumludur. Genelde eklenen pagenaviler tema renkleri yada yazı büyüklükleri uyumsuz tasarımı bozan yapıdadırlar , Bende bunun için her temada kullanılan renkleri varsayılan olarak gösteren bir kod düzenledim. Kısaca temada hangi renkleri  kullanıyorsanız o fontta gözükecektir. İstenirse bu renkler değiştirilebilir.

Bloggerde Yerleşim > Gadget ekle > HTML/Javascript ekle yolunu izleyerek basitçe ekleyebilirsiniz.
Tavsiyem footer alanına eklemeniz yönünde olacaktır.


border:1px solid #444; Numaraların etrafındaki çerçeve kalınlığı 0,1,2...px ve çerçeve rengi #... istediğiniz gibi ayarlayabilirsiniz.

background:#transparent : Numaraların arkafon rengi, varsayılanı şeffaftır isteğinize göre değiştirebilirsiniz.

border:1px solid #444; Seçili numaranın etrafındaki çerçeve kalınlığı 0,1,2...px ve çerçeve rengi #... istediğiniz gibi ayarlayabilirsiniz.

background:#transparent : Seçili numaranın arkafon rengi, varsayılanı şeffattır  isteğinize göre değiştirebilirsiniz.

Canlı Demo Sayfası


20 yorum:

  1. BLoguma ekledim güzel oldu :) Eline sağlık Şeffaf olması daha kullanışlı olmuş...Teşekkürler

    YanıtlaSil
  2. adam cosmuss sagol valla

    YanıtlaSil
  3. kardesım beenn ekledım ama sadece 1 görunuyor sayfa numarası olarak eline saglık

    YanıtlaSil
    Yanıtlar
    1. Tema renklerini otomatik aldığından olabilir,#transparent lara renk ata düzelir, yada tema link renk kodlarını düzenle.
      Kodu kontrol ettim çalışıyor.

      Sil
  4. tesekkurler kardes deneyım bakım olmazsa yazarım ılgın alakan ıcın tekrar tesekkurler takıpteyım hep cabbar ben

    YanıtlaSil
  5. Gerçekten çok güzel ve kolay eklenebiliyor bloğa teşekkürler.

    YanıtlaSil
  6. Herşey çok güzel ama search sayfasında ilk sayfada çalışmıyor sonrakilerde 1 den başlıyor bunun bir çözümü varmı acaba ? örnek: http://www.fullmoviehere.com/search/label/Action buarada çıkmıyor next page e basınca yani ikinici sayfada çıkıyor :(

    YanıtlaSil
    Yanıtlar
    1. Sizin temanın yapısından kaynaklı, yani sizin şablon ilk sayfanın tamamını ana sayfa olarak atamış diğer sayfaları ilk sayfa göstermiş, çözümü şablondan giriş sayfası kodlarını düzenlemek ile çözülür. Bu temayı beğeniyorum lakin çok fazla kod hatası var, haberiniz olsun.

      Sil
  7. Sayenizde öğrenmiş oldum teşekkür ederim. Peki sizin önerebileceğiniz bir tema varmı?

    YanıtlaSil
    Yanıtlar
    1. Tasarım bir tercih meselesi ama benim önereceğim bir sinema teması maalesef yok, Bazen temalara bakıyorum çoğu bir birine benziyor ama kaliteli bir şablona rastlarsam yardımcı olurum.

      Sil
  8. Teşekkür ederim zaten çoğu aynı kişinin temaları, wordpress'in hosting olayı olduğundan kullanmak istemiyorum ama bloggerda özellikle tema konusunda zorluyor doğrusu neyse tekrar çok teşekkürler iyi çalışmalar.

    YanıtlaSil
  9. Merhaba arkaaşım nasılsın? Yıllar önce yazdığın açık kaynak yazın yine kırmış ortalığı ancak değerini anlayan kişi yoktur. Yazını yarın benim blaga aktarıp yazıyı da biraz havalandıracam. Senden ricam borderde patlamalar var. Son kontrolü yaparsan çok memnun olurum.Sağ sol ve alt görülürken üst yok oluyor.Gerçi blog şablondaki pager %140 rakam değişirsek herhalde düzelir. Ben de deneyeceğim. Görüşmek üzere kardeşim. Kendine iyi bak.

    YanıtlaSil
    Yanıtlar
    1. Teşekkür ederim umarım sizlerde iyisinizdir. Canlı demo sayfası ekledim oradan kontrol edebilirsiniz. üst borderin çıkmaması ; gadget alanının yetersizli veya başka bir kod ile çakışması yüzünden olabilir ama bakmak lazım. Tabi ki istediğiniz yayını kullanabilirsiniz. Faydamız oluyorsa ne mutlu :)

      Sil
    2. Evet bazı şablonların gadget alanına üst boşluğu değer atamazlarsa 0px olup üst alanla yapışık çıkabiliyormuş. Buda üst çizginin gözükmemesine neden olmuş.
      Teşekkür ederim ufak bir ayrıntı ama düzeltim. Tabiki her kodu her temada deneme olanağımız yok , uyarı için teşekkürler.
      Şu hali daha eksiksiz oldu :)

      Sil
  10. Yararlı bir bilgi teşekkürler çok işime yarayacak.

    YanıtlaSil
  11. Nihayet çalışan bir kod buldum. Teşekkür ederim.

    YanıtlaSil