Blogger Sayfa Numaralandırma Eklentisi



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


Blogger Sayfa Navigasyonu (PageNavi / Sıralama / Numaralandırma) Eklentisi
Her blog da olması gereken bir özellik olan sayfaları numaralandırıp sıralandırma eklentisi, blogger varsayılan temalarında  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 çok kullanışlıdır.


<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><!--Author: webkenti.net-->







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 , fontlar ve buton yapıları 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.


Blogger Numbered Pagination

Yorumlar

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

    YanıtlaSil
  2. Adsız3.1.14

    adam cosmuss sagol valla

    YanıtlaSil
  3. Adsız3.1.14

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

    YanıtlaSil
  4. Adsız13.11.14

    Şahane

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

    YanıtlaSil
  6. 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
  7. 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
  8. Adsız25.4.16

    Çok teşekkürler...

    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
  12. admin denedim olmuyor dediğin
    footer alanıda yok

    YanıtlaSil
    Yanıtlar
    1. Selamlar öncelikle ne demek istediğinizi tam anlayamadığımı belirtmek isterim.
      Kodlar çalışıyor, denedim sorun yok. Kodlar açık istediğiniz gibi değişik yapabilir yada internetteki başka kodları deneyebilirsiniz.

      Sil
  13. Adsız2.1.23

    Blogger Page Numbering Plugin

    YanıtlaSil

Yorum Gönder

🔺 YUKARI ÇIK 🔺