BLOGGER SAYFA NUMARALANDIRMA EKLENTISI

Blogger'da ana sayfada ve sayfa başına gösterilecek konu sayısı Ayarlar > Yayınlar ve Yorumlar > En fazla şu kadar kayıt göster seçeneğinden ayarlanabiliyor. Fakat her ne kadar bu şekilde sayfa başına gösterilecek kayıtlar ayarlansa da sayfa navigasyonu arşivlere göre Eski Kayıtlar ve Yeni Kayıtlar olmak üzere ikiye ayrılıyor. Blogger'da sayfa numaralandırma el ile kod eklenmediği sürece otomatik olarak ayarlanamıyor. Bu konumuzda sizlerle blogunuza sayfa numaralandırma eklentisi nasıl eklenir resimli bir şekilde anlatacağım.


Tam olarak 7 adet birbirinden farklı stillere sahip blogger sayfa numaralandırma kodlarından öncelikle bir stil seçin. Stil seçtikten sonra:

Adım 1: Blogger Yönetici > Şablon > HTML'yi düzenle butonuna tıklayın.
Adım 2: Blogger şablon kodlarının bulunduğu alana tıklayıp CTRL + F 'e basıp Blogger kod arama butonunu açın.
Adım 3:  ]]></b:skin> kodunu aratın ve hemen üstüne aşağıdan seçmiş olduğunuz blogger sayfa numaralandırma stillerinden birini yapıştırın.

• Stil 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;}

•  Stil 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);}

• Stil 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;}

• Stil 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;}

• Stil 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;}

• Stil 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;}

• Stil 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;}

Page navigation stil kodlarından birini şablonlara ekledikten sonra sıra geldi gerekli Script kodlarını eklemeye.

Adım 4: </body> kodunu aratın.
Adım 5: Aşağıda ki scripti </body> 'nin üstüne yapıştırın

 <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=5;
    var numPages=6;
    var firstText ='İlk Sayfa';
    var lastText ='Son Sayfa';
    var prevText ='« Önceki';
    var nextText ='Sonraki »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://blogkaynagi-sayfa-numaralandirma.googlecode.com/svn/blogkaynagi-numaraland%C4%B1rma.js"/>
</b:if>
</b:if>

Eklenti Ayarları 
Eklentiyi blogunuza ekledikten sonra isterseniz Mavi ile renklendirilmiş alanları değiştirebilirsiniz.

    var perPage=5;  -Sayfa başına gösterilecek konu sayısı
    var numPages=6; 
    var firstText ='İlk Sayfa';
    var lastText ='Son Sayfa';
    var prevText ='« Önceki';
    var nextText ='Sonraki »';

• var perPage=5; Sayfa başına gösterilecek konu sayısı. Bu ayar ana sayfada gösterilecek kayıt sayısı ile aynı olmalıdır. Ayarlar > Yayınlar ve Yorumlar > En fazla şu kadar kayıt göster seçeneğinin den ana sayfada gösterilecek kayıtları ayarlayabilirsiniz.
• var numPages=6; Sayfa numaralandırma da gösterilecek sayfa sayısı.

Adım 6: Şablonu Kaydet butonuna tıklayıp eklentinin keyfini çıkarabilirsiniz!