Blogger sayfa numaralandırma eklentisi
Blogger şablonlarının çoğunda sayfa numaralandırma eklentisi yok. Sayfalar arasında geçiş, sayfa sonunda alt tarafta bulunan "daha eski kayıtlar", "daha yeni kayıtlar" gibi linklerle sağlanıyor. Şimdi yapacağımız sayfa numaralandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Ziyaretçiler yazılarınıza bakarken örneğin en eski yazılarınızı görmek için 10-15 kere önceki kayıt butonuna basmak zorunda kalır fakat bu eklenti ile buna gerek kalmayacak. Sayfanın altındaki önceki kayıt ve sonraki kayıt yazılarını kaldırıp onun yerine sayfa numaralarını nasıl ekleyeceğinizi anlatmaya başlayalım.

1. CSS style kodlarını ekleme


1. Adım :
  • Blogger kontrol Paneli > Şablon > HTML'yi Düzenle tıklayıp devam edin:
  • Herhangi bir yerde kod alanının içinde Blogger arama kutusunu açmak için CTRL + F tuşlarına basın.
  • Arama kutusunun içine aşağıdaki etiketi yapıştırın ve onu bulmak için Enter'a basın:
  • ]]></b:skin>
    2. Adım :
  • Şimdi Aşağıdaki numaralandırılmış sayfa navigasyon stillerinin birini seçin ve hemen altındaki kodu kopyalayın.
  • ]]></b:skin> kodunun hemen üst satırına kullanmak istediğiniz stil kodunu kopyalayıp yapıştırın:

  • Style 1

    Blogger sayfa numaralandırma eklentisi style 1
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
     .showpageOf{display:none!important}
    #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
     #blog-pager .pages{border:none;}

    Style 2:

    Blogger sayfa numaralandırma eklentisi style 2
     #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
    #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

    Style 3:

    Blogger sayfa numaralandırma eklentisi style 3
     #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
    a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
    #blog-pager .pages{border:none;background: none;}

    Style 4:

    Blogger sayfa numaralandırma eklentisi style 4
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    Style 5

    Blogger sayfa numaralandırma eklentisi style 5
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
    #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    Style 6

    Blogger sayfa numaralandırma eklentisi style 6
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    Style 7

    Blogger sayfa numaralandırma eklentisi style 7
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
     .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}

    2. Script Komut Dosyasını Ekleme


    3. Adım :
  • Simdi (CTRL + F) tuş kombinasyonu yardımıyla aşağıdaki kodu bulun:
  • </body>

  • Hemen üstüne aşağıdaki komut dosyasını ekleyin:
  • <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
      /*<![CDATA[*/
        var perPage=7;
        var numPages=6;
        var prevText ='« Önceki';
        var nextText ='Sonraki »';
        var urlactivepage=location.href;
        var home_page="/";
      /*]]>*/
    </script>
      <script src="https://meftunmede.github.io/javascripts/sayfa_numaralandirma_eklentisi.js"/>
    </b:if>
    </b:if>

    Yapılandırma


    Yükledikten sonra, bu varsayılan ayarları değiştirmek isteyebilirsiniz:
    perPage: 7,
    numPages: 6,
    var prevText ='« Önceki';
    var nextText ='Sonraki »';
    }
    - perPage: mesajların sayısı her sayfada gösterilir. (7)
    - numPages: sayfa sayısı sayfa navigasyon gösterilir. (6)
    - "« Önceki" and "Sonraki »" metnini değiştirebilirsiniz.

    4. Adım :
  • Son olarak Şablonu kaydet diyip çıkıyoruz. işlem bukadar!

  • Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    43 Yorumlar

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    1. Merhaba. Bloga eklentiyi kurdum. Ancak belirlediğim sayıda yazıyı göstermiyor. Sebebi ne olabilir?
      verido.net

      YanıtlaSil
      Yanıtlar
      1. Eklentide istediğiniz 20 blog yazısı ise bunu bloggerda da belirtin. Yani Blogger kontrol panelinizden > Yerleşim > Blog Kayıtları bölümünü düzenleye tıklayarak yapılandırma seçeneklerinden Ana sayfadaki kayıt sayısı: 20 yapın.

        Sil
      2. Öyle olduğu halde olmuyor.

        Sil
      3. Şablonunuzu yedekleyip bana burdan gönderin. Sanırım Hata şablonda, bunu çözüp size geri yollarım.

        Sil
    2. Bende Çalışmadı :( Kondları ilgili yerlere yapıştırdım. ama Olmadı.

      YanıtlaSil
    3. Peki kategoriler sayfasini nasil numaralandiracaz ? Mesela burada nasil yapacagiz ? Anasayfada gorunuyor sadece.kategiri sayfalarini nasil numaralandiracagiz http://www.mustafaalniak.net/search/label/kültür-sanat

      YanıtlaSil
    4. sagol dostum cok yardimci oldun

      YanıtlaSil
    5. çok tşk ederim anlatımınla her şey çok süper olmuş iyi çalışmalar

      YanıtlaSil
    6. Çalışmıyor yardımcı olabilecek misiniz?

      YanıtlaSil
    7. hocam sağolun oldu ama numaralandırma başına ''page 1 of 38'' yazısı çıkıyor bir adım geçince ''page 2 of 38'' oluyor.. şu page of nasıl kaldırabilirim??? siteme gelip kontrol edebilirsiniz.. efsanevifilmizle.blogspot.com

      YanıtlaSil
      Yanıtlar
      1. Style kodlarında .showpageOf olan bölümü bulun ve aşağıda gösterdiğim gibi değiştirin.
        .showpageOf{height:0;visibility:hidden;display:none;}
        Kolay gelsin.

        Sil
    8. hocam dediğiniz gibi kodu değiştirdim olmadı.. ama farklı bir kod kullandım.. sorunsuz çalışıyor.. ilginiz için teşekkürler.. siteme beklerim :D

      YanıtlaSil
    9. Merhaba benim normal kendime ait olan bir sitem var bir blog değil.Acaba buradaki işlem sitemde de işler mi? Denedim olmuyor çünkü. Teşekkürler :)

      YanıtlaSil
    10. Süper Teşekkürler... Harfiyen yaptım oldu tekrar teşekkrler

      YanıtlaSil
    11. meftun bey ben dedıklerınızı aynen yaptım fakat bende sadece 1. sayfa çıkıyor yanı sadece 1 yazıyor 2. sayfaya gecmek için ne yapacaz 2.3.4.5.6.7 sayfalar yok sadece 1 yazıyor altta

      YanıtlaSil
    12. Web sitenizi hemen her gün ziyaret ediyorum. Çok güncel ve başarılı bir siteniz var. Çağrı Merkezi

      YanıtlaSil
    13. tesekkurlerr cokkk hemde cokk isime yaradi ne kadar tesekkur etsem azdir

      YanıtlaSil
    14. bende bu kod ]]> > Şablon > HTML'yi Düzenle'de çıkmıyor. neden acaba? yardımcı olur musunuz? hiç bir şey ekleyemiyorum.

      YanıtlaSil
    15. işe yaramadı
      http://i.hizliresim.com/zVMyNY.png

      YanıtlaSil
    16. Aynı kod test bloğumda çalışırken asıl bloğumda çalışmıyor?? Neden olabilir acaba? işlemleri aynı şekilde yaptım.

      YanıtlaSil
    17. Hocam dediklerinizi aynen uyguladım fakat çalışmıyor. Blogu daha yeni açtım adresi veriyorum hocam size zahmet bi bakasnız. Sizden cevap bekliyorum http://islaminbekcileri.blogspot.com/

      YanıtlaSil
    18. meftun dede yaptım tamam oldu fakat sadece anasayfada oldu hani etiketleri kategori olarak kullanıyoruzya biz etiketlere tıkladığımızda o kateori altında ki konularda geşerli olmuyor bu numaralandırma o nasıl olacak

      YanıtlaSil
    19. teşekkürler oldu
      http://www.sercankarahan.com/

      YanıtlaSil
    20. Merhaba, kodları başarılı bir şekilde bloguma uyguladım. Ama sadece ana sayfada çalışıyor. Diğer kategorilerde çalışmıyor. Ne yapmam gerekiyor? Şimdiden teşekkürler...

      YanıtlaSil
    21. allah razı oldo teşekürler

      YanıtlaSil
    22. merhaba,bende uygulamaya çalışıyorum ama ]]> bunu bulamıyor.o/o diyor.ne yapmalıyım

      YanıtlaSil
    23. Peki hocam Her menüde bunu nasıl yapabiliriz ?

      YanıtlaSil
    24. hocam olmadı dediklerinizi yaptım ama yine içerik paylaştığımeda aşağı doru iniyo

      YanıtlaSil
    25. - perPage: mesajların sayısı her sayfada gösterilir. (7)
      - numPages: sayfa sayısı sayfa navigasyon gösterilir. (6)
      - "« Önceki" and "Sonraki »" metnini değiştirebilirsiniz.

      Bu yapılandırma kısmını tam anlamadım? burdakı 7 ve 6 sayısı neyı ifade ediyor. 6 sayısı 1 sayfada gosterılen mesaj sayısıymıs onu 10 yaptım, 7 ne anlama gelıyor?

      YanıtlaSil
    26. Çok teşekkür ederim kardeşim gayet güzel oldu
      https://islamguzelahlaktir.blogspot.com

      YanıtlaSil
    27. eline sağlık kardeşim

      YanıtlaSil
    28. Teşekkür ederim. Anlatım ve Kodlar güzel. Bloguma ekledim.

      YanıtlaSil
    29. Teşekkür Ederim işime çok yaradı ellerinize sağlık.

      YanıtlaSil
    30. Allah razı olsun harikasınız

      YanıtlaSil

    Yorum Gönder

    Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

    Önceki Makale Sonraki Makale