Membuat Navigasi Next Page dan Previous Page

Saya yakin anda tahu, atau setidaknya pernah melihat atau bahkan pernah menggunakan navigasi next page. Navigasi Next Page atau Navigasi Previous Page adalah sebuah navigasi yang akan membawa kita kepada halaman selanjutnya atau halaman sebelumnya. Navigasi ini akan sangat berguna apabila blog kita sudah berisi puluhan artikel dengan berbagai macam kategori atau label. Dengan Navigasi Next Page, kita tinggal klik Next atau Klik Previous untuk menuju halaman selanjutnya atau kita akan kembali ke halaman sebelumnya.

Navigasi Next Page dan Previous Page ini membuat tampilan blog kita akan semakin terlihat lebih profesional.
Untuk membuat Navigasi ini Next Page ini, kita bisa menggunakan cara cepat, yaitu dengan menggunakan pemasangan dengan metode pemasangan widget. Hal ini akan lebih memudahkan kita daripada kita harus repot-repot memasang kode html pada edit html layout blog.

Untuk membuat navigasi Next Page ini, kita bisa memasang kode di bawah ini pada blog kita.
Cara memasang kode Html Navigasi Next Page adalah seperti berikut:
1. Masuk ke account blog anda
2. Klik Lay Out
3. Klik ADD A GADGET
4. Pilih HTML/javaSCRIPT
5. Masukkan kode di bawah ini:

<style>

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #ccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #ccc;

background-color:#ccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #ccc;

background: #ccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #ccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333;

}

</style>

<script type="text/javascript">

function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var isPage = thisUrl.indexOf("/search?updated")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

var pageCount=5;

var displayPageNum=6;

var firstPageWord = 'First';

var endPageWord = 'last';

var upPageWord ='Back';

var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=''){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

}

}//end if(post.category){

itemCount++;

}

}else{

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;

}

}

itemCount++;

}

}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}

}else{

upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}

fFlag++;

}

if(p==(thisNum-1)){

html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';

}else{

if(p==0){

if(isLablePage){

html = labelHtml+'1</a></span>';

}else{

html += '<span class="showpageNum"><a href="/">1</a></span>';

}

}else{

html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';

}

}

if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){

if(!isLablePage){

html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';

}

}

html = '<div class="showpageArea"><span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += '</div>';

if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){

html ='';

}

for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&&pageArea.length>0){

html ='';

}

if(blogPager){

blogPager.innerHTML = html;

}

}

}

</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Masukkan kode di atas pada add a gadget pada blog anda. Kemudian Save.Anda bisa meletakkan Navigasi Next Page ini di mana saja, tapi lazimnya Navigasi Next Page berada di bawah Artikel anda.

Semoga Bermanfaat