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

 #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:

 #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:

 #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:

#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

#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

#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

#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...