En yeni: Dünyanın en iyi 10 video düzenleme programı Trending: İnternetten para kazanmak, Ekgelir, En iyi Tıkla Kazan (PTC) Siteleri

Blogger sayfa numaralandırma eklentisi

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="http://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...

    42 yorum:

    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. Yanıtlar
      1. bu şekilde arayın ve kodu bundan önce koyun ]]

        Sil
    19. 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
    20. teşekkürler

      http://www.yuklex.blogspot.com.tr

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

      YanıtlaSil
    22. 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
    23. allah razı oldo teşekürler

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

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

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

      YanıtlaSil
    27. - 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
    28. Çok teşekkür ederim kardeşim gayet güzel oldu
      https://islamguzelahlaktir.blogspot.com

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

      YanıtlaSil

    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!

     
    • Meftun Apart

      Meftun Apart Fethiye

      Apartlarımız deniz ve plaja 50 metre mesafede olup, klimalı, full eşyalı 2+1, 1+1, 4-6 kişilik ve havuzlu apartlardan oluşmaktadır.

    • Meftun Mede Blogger

      MEDE Blogger Tema Yardım

      Blogger şablonuzda, temanızda yardımamı ihtiyacınız var? Hertürlü blogger tema yardımı ücretsiz yapılır...

    • Sitemap sayfası oluşturma

      Sitemap sayfası oluşturma

      Sitemap bir web sitesinin haritasıdır.Arama motorlarının web sitelerini hızlı, daha çabuk ve tam olarak indexlemesi için oluşturulurlar.

    • hit arttırma

      Sitenizin hitini arttırın!

      Kaliteli hit arttırma sitemi ile ücretsiz hit kazanın, sitenizi Google'da yükseltin! Sitenizi ekleyin ve binlerce ziyaretçi kazanın!

    • internetten para kazan

      İnternetten para kazan !

      Boş zamanınızı internetde reklam izleyek ve bundan para kazanarak geçirebilirsiniz. Ek gelir elde edebilirsiniz!