Blogger'a Sınırsız Sayfa Numaralandırma Eklentisi Ekleme

Sınırsız Sayfa Gezinme Eklentisi nasıl eklenir Blogger blogunuzda- Hey adam şimdi sizinle en iyi şekilde nasıl paylaşacağım hakkında bir öğretici Kolayca nasıl yapabilirsiniz? Bu Gezinme eklentisi, blogunuzun tüm sayfa numarasını göstermenize yardımcı olur. Bu sayfa gezinme eklentisinin bu en iyi kısmı, herhangi bir sorun olmadan 1000 Makaleye kadar yükleyebilmesidir.

Bu eklentiyi blogunuza eklemeden önce , aşağıdaki demo düğmesine tıklayarak bu Sayfa Gezinme Eklentisine bir göz attığınızdan emin olun.

Şimdi, hazır olduğunuz ve kendi blogunuza yüklemek istiyorsanız, lütfen aşağıdaki basit adımları izleyin.

Öncelikle şablon editör sayfamızda HTML/Düzenle'ye tıklıyoruz.

Daha sonra şablon editör sayfamızda Ctrl+F yardımıyla </head> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıda ki CSS kodlarını ekleyelim. Bu CSS kodları Işıklı kodlar için geçerlidir.

CSS<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation */
#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:rgba(0,0,0,0.03);color:#333;position:relative;}
.showpagePoint{background:#2980b9;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}}
</style>
</b:if>
</b:if>

Şimdi yine yine aynı kodun üzerine aşağıda ki CSS kodlarını ekleyelim ve bu kodlar Koyu renkli kodlar için geçerlidir.

CSS<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation */
#blog-pager{background:#2d3141;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{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;}
.showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>

Şimdi sıra da JavaScript kodunu eklemeye geldi yine Ctrl+F yardımıyla Html şablon editör sayfamız da </body> kodunu aratalım ve bulduğumuz kodun üzerine gelecek şekilde aşağıdaki kodları ekleyelim.

JS<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/unlipage.js' type='text/javascript'/>
</b:if>

Şimdi şablon editörünüzde aşağıdaki kodu bulun.

HTML<!-- navigation -->
    <b:include name='nextprev'/>

Yukarıda ki kodu bulduktan sonra aşağıda ki kodlar ile değiştirelim.

HTML<!-- 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'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if>

Bütün işlemler bu kadar herkese kolay gelsin.