Blogger Sınırsız Sayfa Numaralandırma Navigasyonu

1.1.18
Blogger blogunuza sınırsız sayfa numaralandırma navigasyonu nasıl eklenir? Sayfa navigasyonu blog yayınlarının artması ve özellikle makale yayınlayanlarının blog sayfalarında numaralandırılmasıyla bir sonraki makaleyi açmak için yada birinci sayfadan beşinci sayfaya direk geçmek için kullanılan blogger eklentilerindendir. Sayfa navigasyonunun en önemli özelliklerinde biri de blog içi dolaşımı kolaylaştırmasıdır. Yani blog okuyucuları istedikleri sayfaya daha hızlı erişim sağlar ve bu da ziyaretçilerin blog sayfaları arasında rahat bir dolaşım yapmasını sağlar.

Blogger Sayfa Numaralandırma Eklentisi

Aşağıdaki adımları takip ederek sınırsız sayfa numaralandırma navigasyonunu blogunuza ekleyebilirsiniz.

Blog Sınırsız Sayfa Navigasyonu Nasıl Eklenir?


1. Blogger hesabınıza giriş yaparak eklemek istediğiniz bloğun kumanda panelinden Şablon > HTML'i Düzenle ve CTRL+F yardımıyla aşağıdaki kodları sırasıyla ekleyin.

2. Aşağıdaki JavaScript kodunu </body> kodunun bir satır üzerine kopyala-yapıştır yapın.

<b:if cond='data:view.isMultipleItems'>
<script>
//<![CDATA[
var postperpage=5;
var numshowpage=3;
var upPageWord="Geri";
var downPageWord="İleri";
var home_page="/";
var urlactivepage=location.href;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('6 M;6 i;6 h;6 u;1h();C 1k(15){6 5=\'\';J=I(U/2);4(J==U-J){U=J*2+1}A=h-J;4(A<1)A=1;d=I(15/j)+1;4(d-1==15/j)d=d-1;F=A+U-1;4(F>d)F=d;5+="<3 7=\'1G\'>1D "+h+\' 1C \'+d+"</3>";6 18=I(h)-1;4(h>1){4(h==2){4(i=="o"){5+=\'<3 7="1y"><a b="\'+B+\'">\'+13+\'</a></3>\'}c{5+=\'<3 7="g"><a b="/s/r/\'+u+\'?&9-m=\'+j+\'">\'+13+\'</a></3>\'}}c{4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+18+\');v z">\'+13+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+18+\');v z">\'+13+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a b="\'+B+\'">1</a></3>\'}c{5+=\'<3 7="g"><a b="/s/r/\'+u+\'?&9-m=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' <3 7="g 1B">...</3> \'}1j(6 k=A;k<=F;k++){4(h==k){5+=\'<3 7="1B">\'+k+\'</3>\'}c 4(k==1){4(i=="o"){5+=\'<3 7="g"><a b="\'+B+\'">1</a></3>\'}c{5+=\'<3 7="g"><a b="/s/r/\'+u+\'?&9-m=\'+j+\'">1</a></3>\'}}c{4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+k+\');v z">\'+k+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+k+\');v z">\'+k+\'</a></3>\'}}}4(F<d-1){5+=\'<3 7="g 1B">...</3>\'}4(F<d){4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+d+\');v z">\'+d+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+d+\');v z">\'+d+\'</a></3>\'}}6 1b=I(h)+1;4(h<d){4(i=="o"){5+=\'<3 7="g"><a b="#" y="L(\'+1b+\');v z">\'+1g+\'</a></3>\'}c{5+=\'<3 7="g"><a b="#" y="K(\'+1b+\');v z">\'+1g+\'</a></3>\'}};6 D=x.1J("D");6 1d=x.1K("1L-1M");1j(6 p=0;p<D.O;p++){D[p].1i=5}4(D&&D.O>0){5=\'\'}4(1d){1d.1i=5}}C 1e(S){6 Y=S.Y;6 1f=I(Y.1O$1N.$t,10);1k(1f)}C 1h(){6 f=n;4(f.e("/s/r/")!=-1){4(f.e("?X-9")!=-1){u=f.E(f.e("/s/r/")+14,f.e("?X-9"))}c{u=f.E(f.e("/s/r/")+14,f.e("?&9"))}}4(f.e("?q=")==-1&&f.e(".5")==-1){4(f.e("/s/r/")==-1){i="o";4(n.e("#G=")!=-1){h=n.E(n.e("#G=")+8,n.O)}c{h=1}x.1w("<l Q=\\""+B+"N/P/V?9-m=1&11=12-W-l&T=1e\\"><\\/l>")}c{i="r";4(f.e("&9-m=")==-1){j=1H}4(n.e("#G=")!=-1){h=n.E(n.e("#G=")+8,n.O)}c{h=1}x.1w(\'<l Q="\'+B+\'N/P/V/-/\'+u+\'?11=12-W-l&T=1e&9-m=1" ><\\/l>\')}}}C L(H){Z=(H-1)*j;M=H;6 R=x.1x(\'1l\')[0];6 w=x.1u(\'l\');w.1o=\'1n/1m\';w.1v("Q",B+"N/P/V?1p-1q="+Z+"&9-m=1&11=12-W-l&T=1a");R.1t(w)}C K(H){Z=(H-1)*j;M=H;6 R=x.1x(\'1l\')[0];6 w=x.1u(\'l\');w.1o=\'1n/1m\';w.1v("Q",B+"N/P/V/-/"+u+"?1p-1q="+Z+"&9-m=1&11=12-W-l&T=1a");R.1t(w)}C 1a(S){17=S.Y.1I[0];6 1r=17.1s.$t.E(0,19)+17.1s.$t.E(1A,1z);6 16=1F(1r);4(i=="o"){6 1c="/s?X-9="+16+"&9-m="+j+"#G="+M}c{6 1c="/s/r/"+u+"?X-9="+16+"&9-m="+j+"#G="+M}1E.b=1c}',62,113,'|||span|if|html|var|class||max||href|else|maksimal|indexOf|thisUrl|showpageNum|nomerhal|jenis|postperpage|jj|script|results|urlactivepage|page|||label|search||lblname1|return|newInclude|document|onclick|false|mulai|home_page|function|pageArea|substring|akhir|PageNo|numberpage|parseInt|nomerkiri|redirectlabel|redirectpage|nopage|feeds|length|posts|src|nBody|root|callback|numshowpage|summary|in|updated|feed|jsonstart||alt|json|upPageWord||banyakdata|timestamp|post|prevnomer||finddatepost|nextnomer|alamat|blogPager|hitungtotaldata|totaldata|downPageWord|halamanblogger|innerHTML|for|loophalaman|head|javascript|text|type|start|index|timestamp1|published|appendChild|createElement|setAttribute|write|getElementsByTagName|showpage|29|23|showpagePoint|ve|Sayfa|location|encodeURIComponent|showpageOf|20|entry|getElementsByName|getElementById|blog|pager|totalResults|openSearch'.split('|'),0,{}));
//]]>
</script>
</b:if>

3. Aşağıdaki HTML kodu bulun şablonunuzda CTRL+F ile arayın ve bulun,

<b:includable id='main' var='top'>

Bulduğunuz kodun bir kaç satır altında aşağıdaki HTML kodu arayın ve bulun. (standart şablonlara göre)

<b:include name='nextprev'/>

Bulmuş olduğunuz kod ile aşağıdaki HTML kodu değiştirin.

<!-- page navigation -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- page navigation -->
<b:include name='nextprev'/>
</b:if>
</b:if>
</b:if>

4. CTRL+F yardımıyla ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki eklemek istediğiniz renkli navigasyonu seçin ve seçmiş olduğunuz kodu ]]></b:skin> veya </style> kodunun bir satır üzerine kopyala-yapıştır yapın.

Blogger Sayfa Navigasyonu Eklentisi

Kırmızı Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #eb313e;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #eb313e;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

Blogger Sayfa Navigasyonu Eklentisi

Siyah Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #000;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #000;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

Blogger Sayfa Navigasyonu Eklentisi

Yeşil Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #5da248;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #5da248;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

Blogger Sayfa Navigasyonu Eklentisi

Mavi Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #85ccee;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #85ccee;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

Blogger Sayfa Navigasyonu Eklentisi

Pembe Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #ec407a;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #ec407a;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

Blogger Sayfa Navigasyonu Eklentisi

Sarı Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #F4AB36;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #F4AB36;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

Blogger Sayfa Navigasyonu Eklentisi

Gri Navigasyon Kodu
#blog-pager {
    background: #fff;
    clear: both;
    width: auto;
    padding: 22px;
    line-height: normal;
    position: relative;
    display: block;
    text-align: left;
    overflow: visible;
    margin: 20px 0 5px 0
}
.showpage a,
.showpageNum a,
.showpagePoint,
.showpageOf {
    position: relative;
    background: #fff;
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, .8);
    padding: 5px 8px;
    margin: 0 4px 0 0;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    transition: all .3s
}
.showpageNum a:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.5s
}
.showpage a:hover,
.showpageNum a:hover,
.showpagePoint:hover {
    background: #828e9b;
    color: #fff;
    position: relative;
}
.showpagePoint {
    background: #828e9b;
    color: #fff;
}
@media screen and (max-width: 640px) {
    #blog-pager {
        padding: 12px;
    }
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        margin: 0 2px 2px 0;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
}
@media screen and (max-width: 320px) {
    .showpage a,
    .showpageNum a,
    .showpagePoint,
    .showpageOf {
        padding: 3px 6px
    }
}

5. Şablonu kaydedin ve blogunuzu kontrol edin.
Blogunuzda görmek istediğiniz navigasyonun kodunu seçin. Eğer blogunuz farklı renklerden oluşuyor ve farklı bir renk talep ederseniz iletişim sayfasından yada yorum bölümünden bize ulaşabilirsiniz.
Faydalı mı?
  1. Yorumlarınıza biraz geç cevap verilmesi nedeniyle özür dilerim.

    YanıtlaSil
  2. şimdi oldu elinize sağlık süper oldu hemde

    YanıtlaSil
  3. Blog temanızda farklı bir sayfa navigasyonu kullandıysanız, kullanmış olduğunuz navigasyonun tüm kodlarını değiştirmelisiniz.

    YanıtlaSil
  4. etiketlerden herhangi birine tıkladığımda o etikete ait sayfada navigasyon çalışmıyor..

    YanıtlaSil
  5. Hocam Blogger Eklentileri temasında sayfa numaralandırma var fakat şöyle bir durum söz konusu. Sayfada gösterilecek yayın sayısını hem kod tarafında hem de blogger ayarlarında 5 olarak ayarlıyorum. Fakat 6 yayın var ilk sayfada 5 yayın gösteriyor 2. sayfaya geçtiğimde bir yayın gözükmüyor. Neden böyle bir hata oluyor.

    YanıtlaSil
  6. Hocam konu ile ilgili geri dönüş yapmadınız. Mail de attım fakat ona da geri dönmediniz.

    YanıtlaSil
    Yanıtlar
    1. Merhaba Onur bey blog sayfanızı kontrol ettim herhangi bir sorun yok.. Eğer hala bir sorun yaşıyorsanız beni tekrardan yönetici olarak ekleyin lütfen..

      Sil
  7. Hocam sitenizde kullandığınız sayfalar navigasyonunuda psylaşsanız güzel olur.

    YanıtlaSil
  8. Merhaba Admin, Blogger sabit sayfalar için navigasyon eklentisi: https://www.arlinadesign.com/2018/04/blogger-sayfalar-widget-ile-sabit.html

    YanıtlaSil