Blogger Sayfa Numaralandırma Eklentisi

Normalde Blogger bloglarda sayfalar arasında geçiş yapmak için önceki kayıtlar – sonraki kayıtlar linkleri kullanılır. Örneğin her bir sayfada 5 kayıt göstermeyi seçtiyseniz blgunuzun ana sayfasında en son yayınladığınız 5 yazınız görünür. Ondalardan önce yayınladığınız 5 yazınızı görmek için de önceki kayıtlar linkine tıklanır.

Fakat Blog Hocam’da ve bazı bloglarda göreceğiniz gibi önceki kayıtlar – sonraki kayıtlar linklerinin yerinde numaralar var. Sayfalar numaralandırılarak ziyaretçinin blogda dolaşması kolaylaştırılmıştır.

Bu yazıda 2016 yılının teknolojisine uygun, HTML5 uyumlu olan Blogger sayfa numaralandırma eklentisini blogunuza nasıl ekleyeceğinizi anlatacağım.

blogger sayfa numaralandırma eklentisi


!!! Eğer kodlar konusunda deneyimli değilseniz her ihtimale karşı şablonun yedeğini almanızı öneririm.

1. Adım: İlk olarak eklentinin CSS kodlarını şablona ekleyeceğiz. Bu kodlar üzerinde oynama yaparak eklentinin renklerini ve yazı boyutlarını değiştirebilirsiniz. CSS kodlarını şablona eklemek için Blogger kumanda panelimize gidip Şablon > HTML’yi Düzenle diyerek şablonumuzun kodlarının olduğu bölümü açacağız. Burada Ctrl+F tuş kombinasyonunu kullanarak açılan aram kutusunun da yardımıyla  <b:skin>...</b:skin> yazan bölümü bulup 1 kez tıklayacağız. Böylece o bölüm genişleyecek ve tüm CSS kodları gözükecek. Ardından </b:skin> kodunun hemen üzerine şu CSS kodları yapıştıracağız.

/* Blogger Sayfa Numaralanadırma Eklentisi – Blog Hocam*/
.navipager{clear:both;margin:0;text-align:center;font-weight:bold;color:#fff !important;}
.navipager span,.navipager a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#9cd9d5;line-height:1.6em}
.navipager .current{color:#fff !important;background-color:#9cd9d5;}
.navipager .current,.navipager .pages{color:#fff !important;background-color:#9cd9d5;}
.navipager a:hover{color:#fff !important;background-color:#f1583b;}
.navipager .pages {margin:0 -1px 0 0}



2. Adım: Şimdi yine şablonun kodlarında <b:widget id='Blog1' locked='true' title='Blog Kayıtları' type='Blog'> satırını bulup bunun hemen altına şu kodları ekleyeceğiz.
 
 <b:includable id='navi-pager'>
<div class='navipager'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;Başa Git&quot;,
lastText: &quot;Sona Git&quot;,
nextText: &quot; &#9658; &quot;,
prevText: &quot; &#9668; &quot;
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Sayfa '+e+' / '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
        //]]>
</script>
    </div>
    </b:includable>
 
 
3. Adım: Son olarak <b:include name='nextprev'/> kodunu bulup siliyoruz ve bunun yerine şu kodları yapıştırıyoruz.
 
    <b:if cond='data:blog.pageType == "index"'>
        <b:include name='navi-pager' />
        <b:else/>
        <b:if cond='data:blog.pageType == "archive"'>
            <b:include name='navi-pager' />
        </b:if>
    </b:if>
 
 

!!! Eklentinin düzgü çalışması için dikkat etmeniz gerekin önemli bir nokta var. Her sayfada kaç yazı görünmesini istiyorsanız 2. adımdaki kodlarda kırmızı ile gösterdiğim yere o sayıyı yazıyorsunuz. Ardından Blogger kumanda panelinde Yerleşim > Blog Kayıtları > Düzenle yolunu takip ederek ana sayfadaki kayıt sayısı bölümüne aynısını yazıyorsunuz.

52 yorum:

  1. Görsellik ve işleyiş açısından; bloglar için, önemli bir eklenti. Blog sahiplerine 'sayfa numaralandırma' işlemini tavsiye ederim.
    İçeriğiniz için teşekkürler. :)

    YanıtlaSil
  2. tşkürler hocam bbbende böyle bir şey arıyordum zaten ve hoccam bir sorum sizce Bloguma daha neler eklemeliyimm
    http://webkodla.blogspot.com.tr/

    YanıtlaSil
  3. Hocam bir sorun var su seo paketleri alinca etkisi ne kadar olur

    YanıtlaSil
  4. Merhabalar. Eklenti güzel ve faydalı. Her blogger kullanmalı ki zaten ihtiyaç duyuyor olmalı. Fakat benim aklım bir yerde kaldı hocam; bazı blogger bloglarda sayfa numaralandırma eklentisi çok daha farklı. Mesela sayfa seçimi yapınca sayfa yenilenmeden sayfa içinde yazılar değişiyor eski yayınlar geliyor. Ama sayfa yenilenmeden oluyor bu. Sanırım Jquery ile yapılıyor. O tür sayfa numaranlandırma eklentisi nasıl yapılır hocam?

    YanıtlaSil
  5. olmadı yapamadım yaa çok zor

    YanıtlaSil
  6. Blog hocam merhaba iletişim kutusuna yazdım ancak güvenlik nosu çıkıyor ve iletildiğinden emin olmadığım için buraya yazmak istedim. Konu ile alakasız kusura bakmayın bu nedenle.

    Merhabalar 1 senedir bloguma dönmüyorum çünkü pc çöpe gitti. Telefonda pc yerini tuttu ancak blog yazma konusunda tutamadı. 1 yıldır blog yazmıyorum. Bugün başlamak istedim artık ancak yazı yazma işkencesi bittikten sonra fotograf yüklemek isteyince sorunlar aldı başını gitti:
    1. Fotograf yükleme kutusunda 'telefonunuzdan' yazan yere tıklayınca tlfndaki fotograflar çıkmıyor.
    2. İphone galerideki fotografları kopyalayıp metin yazan kutuya yapıştırdığımda görünüyor ve metni yayınladıktan sonra fotograf yok oluyor.
    3. Acaba png jpeg ya da jpg sorunumu var diye düşünüp çeşitli programlarla fotografların formatını değiştirdim yine olmadı.
    4. Postimage.orga girip kopyalama kaydetme ile beraber url ile yükleme yapmayı denedim ancak url kutusuna yapıştır yazısı çıkmadığı için o da olmadı. İnanın 2 saatten fazladır deniyorum hiç bir sonuç elde edemedim.
    Zaten bloggerın bir mobil uygulaması da yok..
    Bunun bir çözümü var mı? Sırf blog yazmak için bir bilgisayar almak istemiyorum ve sanırım emek verdiğim blog hayatımı tamamen sonlandırıp büyük bir üzüntü ile blogumu sileceğim :(

    Misspoine
    Miss.poinepa@gmail.com

    YanıtlaSil
    Yanıtlar
    1. Meraba...
      Evet blogger mobil uygulaması google play veya appstoreda yok. Ancak apk olarak indirebilirsiniz. Ben yaptım. İyi günler...

      Sil
  7. Kullanıcı rahatlığı için önemli bir detay! Tşk

    YanıtlaSil
  8. Yararlı olmuş

    http://sorunshift.blogspot.com

    YanıtlaSil
  9. Ana Sayfamızın vazgeçilmezi.
    Herkesi Bloguma bekliyorum.

    YanıtlaSil
  10. merhaba
    eklentinizi denedim.Ancak bir yerde hata oldu galiba ilk sıradaki css kodunun içeriği blog sayfasında en üstte görülmekte.anasayfada yani nette görünen sayfada.yapıştırmada hatamı yaptım acaba. kodunun üstüne yapıştırıldı.benmi yanlış anladım.acil cevap kolay gele.

    YanıtlaSil
    Yanıtlar
    1. Yanlış yere yapıştırmışsınız

      Sil
    2. şöyle bir hata çıkıyor:)The widget with id "Blog5" cannot contain element: "b:if". A widget can only contain b:includable elements.)ne yapabilirim acil cevap

      Sil
  11. emeğinize sağlık

    www.kelepirexpress.com

    YanıtlaSil
  12. http://tavlaturkiye.blogspot.com siteme uyguladım. Teşekkür ederim

    YanıtlaSil
  13. Hocam herhalde çok yoğunsunuz artık eskisi gibi değil konularınız geç geliyor özletiyorsunuz kendinizi bu arada bloguma uyguladım fakat pek hoşuma gitmedi kaldırdım
    http://harunlog.blogspot.com

    YanıtlaSil
  14. Arkafaşlar benim blogumda sayfa numaraları mobilde çalışmıyon. Nedenini bilen var mı?

    YanıtlaSil
  15. Hocam Merhaba. Ben size iletişim bölümünden mesaj attım fakat ulaşmadı galiba. Burdan söyleyeyim dedim: ben de hobi olarak bir blog açtım ama devamı gelir mi nasıl gelir, iyileştirmeler nelerdir? Bunlar hakkında sizden yardımınızı rica ediyorum. Şimdiden teşekkürler.
    https://akilli-karsilastir.blogspot.com/

    YanıtlaSil
  16. Hocam Selamlar,

    12 gündür yeni yazı girmediniz, takipteyiz umarız her şey yolundadır :)

    YanıtlaSil
  17. 2016 yılının teknolojisine uygun bir eklenti olabilmesi için mobili desteklemesi gerekmektedir. ;)

    YanıtlaSil
  18. 'Blog1' yeri hata veriyor acil ne yapacağımı söylermisiniz

    YanıtlaSil
  19. Çok Gerekli Bir Çalışma Ama Sağdaki Etiketlere Tıklayınca Sayfa Numaratörü Onlarda Çıkmıyor Maalesef :(

    http://canayvideo.blogspot.com.tr/

    YanıtlaSil
  20. Teşekkürler. Ama bir sorunum var 150 yayından sonrasını göstermiyor. Acaba nedeni ne olabilir?

    YanıtlaSil
    Yanıtlar
    1. Yardımcı olabilecek yok mu? Kaç haftadır uğraşıyorum çözüm bulamadım :(

      Sil
  21. Gerçekten çok açıklayıcı olmuş. Çok teşekkür ederim. ^_^

    YanıtlaSil
  22. Şahane oldu, bayıldım. Çok teşekkürler ;)

    YanıtlaSil
  23. Şahane oldu, bayıldım. Çok teşekkürler ;)

    YanıtlaSil
  24. Hoş bir görünüme sahip, teşekkürler. :)

    YanıtlaSil
  25. Olmuyor sayfaya ilk kez girdiğinizde sayfada yayınlar önceki gibi sayda gösteriyor yalnız ilave etdiğimiz sayfa 1 , 2 üzerine tıkladıkdan sonra yayınların sayı biz kurduğumuz gibi gösteriyor

    YanıtlaSil
  26. Oldukça uzun bir işlem . Deneyeceğim yinede .

    YanıtlaSil
  27. Çok yararlı ve açıklayıcı yazılar. Ben de blogumu oluştururken sadece sizin soylediklerinizi uygulamaya calistim. Bazilarini tam yapamadim ama genel olarak cok guzel ışık tuttu.
    1haritaci.blogspot.com.tr

    YanıtlaSil
  28. Bloguma uyguladım . Yararlı olmuş .Teşekkürler

    YanıtlaSil
  29. sementit temada işe yaramıyor..olsun.

    YanıtlaSil
  30. Hocam eklenti için teşekkür ederim. Bir sorun yaşıyorum, siz veya bilenler yardımcı olur umarım. Eklentiyi uyguluyorum herhangi bir sorun yok, gayet güzel çalışıyor, bir kaç gün veya bir kaç hafta sonra tekrar yok oluyor, sanki hiç yapılmamış gibi css kodu dışındakiler kayboluyor. Tekrar uyguluyorum, belirsiz bir süre sonra yine aynı şekilde kayboluyor. Bir kodun kendi kendine yok olması mantıken mümkün değil ama bu konuda tecrübeli arkadaşların bir bildigi vardır mutlaka. Bu yorumu okuyan arkadaşlardan yardım bekliyorum...

    YanıtlaSil
  31. İkinci adımda bahsettiğiniz satırlar yok şablonda. Daha önce de hiç kullanmadım buradan şablon değiştirmeyi. Yardımcı olursanız sevinirim. Tek tek bile baktım yok yani.

    YanıtlaSil
  32. Teşekkürler Gerçekten çok işime yaradı temamın sayfa numaralandırması yoktu hallettim sayenizde.

    www.nasilyapilirshow.blogspot.com.tr
    Tamamen BLOG HOCAM Yardımı ve yazılarıyla hazırlanmaya başlamış bir blogtur.
    teşekkürler Bloghocam

    YanıtlaSil
  33. Bu yorum yazar tarafından silindi.

    YanıtlaSil
    Yanıtlar
    1. düzelttim oldu şimdi çalışıyor. Ama başka bir sitemde olmadı sayfalar hiç görünmüyor neden olabilir ?

      Sil
  34. Hocam sharefancy.blogspot.com Bloguma Ekledim Güzel Fakat Renk Nası Değiştircez Benim Turuncu Yapmam Lazım Bunu Acil Cevap Verirmisiniz

    YanıtlaSil
    Yanıtlar
    1. 1. adımdaki renk kodlarını değiştirebilirsiniz.

      Sil
    2. renklerle oynayınca turuncu yapyorum hocam olmuyor yani sorun var

      Sil
  35. Merhaba ben blogumda hazır temalardan kullanyorum o yüzden yapamadım yardımcı olursanız sevinirim.

    YanıtlaSil
  36. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  37. pagenave anasayfada gözüküyor bloğumda fakat menüye ait diğer sayfalarda görünmüyor sadece anasayfada var ..ben hepsinde görünmesini istiyorum bunu nasıl yapabilirim

    YanıtlaSil
  38. Tekrar teşekkür ederim.

    YanıtlaSil
  39. tesekkurler faydali bir makale hocam

    YanıtlaSil
  40. Teşekkürler,

    Gayet detaylı ve titizlikle anlatılmış.
    Paylaşımınız sayesinde bende başarılı bir şekilde yaptım.

    YanıtlaSil
  41. CTRL + F YAPIYORUM ARATIYORUM ÇIKMIYOR

    YanıtlaSil
  42. Blogger sayfa numaraları yeni geliştirilen temaların içinde hazır bulunmasına rağmen bazı durumlarda düzgün çalışmayabilir. Html kod içerisinde bulunan "POSTPERPAGE_NUM" ile ana sayfada gösterilmesi gereken kayıt sayısının aynı olması gerekmektedir. İşleyiş düzgün olmasına rağmen bazı durumlarda ana sayfada sadece bir kayıt görüyorsanız bu hatanın sebebi de tamamen yayınlardaki uzun içeriklerden kaynaklanmaktadır. Temanın uzun içerikleri kesme ve devamını oku özelliği olmasına rağmen yine de kesme işlemi yapılmalıdır. Böylelikle sayfa numaraları düzgün çalışacaktır.

    YanıtlaSil
  43. aradığım ilaçtı ama renklerini nerden değiştircez sitemde renk uyumu olmadı
    https://filmdizicu.blogspot.com.tr/

    YanıtlaSil
  44. yalnız 160 kayıt gösteriyor en fazla. sorunlu sanırım

    YanıtlaSil
    Yanıtlar
    1. Aynen 160 kayıtta kalıyor. Bir sayfada gözükecek kayıt sayısını 28 yaptım toplamda 168 kayıt gösterdi. gene tamamını göstermiyor. bunun bir çözümü var mı

      Sil

Blogger tarafından desteklenmektedir.