Nomor Halaman Paling Cocok Untuk Semua Template Blogger

 Postingan dengan banyak halaman pasti lebih mudah jika ditambah navigasi nomer halaman, apalagi blog telah memasang fungsi readmore, tapi terkadang setelah mencoba beberapa tips sering gagal dan nomer halaman tidak tampil, nah ini ada navigasi nomer halaman yang bisa digunakan untuk template blogspot dan pasti cocok dengan template blogger sobat.

1. login ke blogger.com --> Go to Design --> Edit HTML > Check mark Expand Widget Templates.
Cari code ini :

<b:includable id='mobile-index-post' var='post'>

2. Pastekan  kode dibawah ini sebelum kode diatas :

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script src='http://nomer-halaman.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

3. Kemudian cari code ini pada template sobat :

<b:include name='nextprev'/>

4. Gantikan / replace dengan kode dibawah ini :

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

5. Untuk kode  CSS. cari ]]></b:skin>  kemudian copy kode scripts dibawah ini diatasnya

#blog-pager,.pagenavi {
clear:both;
text-align:center;
margin:30px auto 10px;
}

#blog-pager a,.pagenavi span,.pagenavi a {
text-decoration:none;
color:#fff;
background:#e06666;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-transition:all .3s ease-in;
-moz-transition:all .3s ease-in;
-o-transition:all .3s ease-in;
transition:all .3s ease-in;
margin:0 5px 0 0;
padding:2px 10px 3px;
}

#blog-pager a:visited,.pagenavi a:visited {
color:#fff;
}

#blog-pager-older-link,#blog-pager-newer-link {
float:none;
}

.pagenavi .pages,.pagenavi .current {
font-weight:700;
}

.pagenavi .pages {
color:#fff;
background:#e06666;
}

#blog-pager a:hover,.pagenavi a:hover,.pagenavi .current {
color:#fff;
text-decoration:none;
background:#000;
}

6. Save template.