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

4/27/2016
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 Sınırsız Sayfa Numaralandırma Navigasyonu

Blog Sınırsız Sayfa Navigasyonu Nasıl Eklenir? - Aşağıdaki adımları takip ederek sınırsız sayfa numaralandırma navigasyonunu blogunuza ekleyebilirsiniz.

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:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;var numshowpage=2;var upPageWord ='Geri';var downPageWord ='İleri';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://cdn.rawgit.com/Bloggeritunes/pages/4ae1ae0c/ux.js' type='text/javascript'></script>
</b:if>
</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.

Kırmızı Navigasyon Kodu
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
    }
}

Siyah Navigasyon Kodu
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
    }
}

Yeşil Navigasyon Kodu
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
    }
}

Mavi Navigasyon Kodu
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
    }
}

Pembe Navigasyon Kodu
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
    }
}

Sarı Navigasyon Kodu
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
    }
}

Gri Navigasyon Kodu
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.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok