Cara Membuat Navigasi Halaman pada Home Page Blogspot

Di blogger, secara default, aku melihat yang ada hanya tulisan Posting Lama, Posting Baru dibagian bawah halaman yang berfungsi untuk menavigasi ke posting lain dari blog-ku. Masalahnya adalah pengunjung sulit melihat posting yang lebih baru dan lebih lama di blog-ku ini. Jadi, untuk meningkatkan tampilan halaman blog aku menggunakan Page Number atau disebut juga Navigasi Halaman dengan menggunakan nomor atau angka.

Page Number ini berfungsi sebagai alat navigasi pada halaman utama (homepage) dengan tujuan untuk memudahkan pengunjung dalam menjelajahi halaman website atau blog-ku ini.

Yang pernah aku lihat gambarnya seperti ini;

Langkah membuatnya seperti biasanya yang aku lakukan:

Masuk ke dasbor > pilih Rancangan > Edit HTML > Klik Expand Widget Templates

Backup dulu template blog biar aman

Selanjutnya aku cari kode berikut ]]></b:skin> 

dan meletakkan kode di bawah ini persis diatasnya

.showpageArea a { 
text-decoration:underline; 
background: #ffffff; 
padding: 10px 10px 10px 10px; 
} 
.showpageNum a { 
text-decoration:none; 
border: 1px solid #cccccc; 
border-top: 1px solid #cccccc; 
margin:0 3px; 
padding:3px; 
} 
.showpageNum a:hover { 
border: 1px solid #cccccc; 
background-color:#cccccc; 
} 
.showpagePoint { 
color:#333; 
text-decoration:none; 
border: 1px solid #cccccc; 
background: #cccccc; 
margin:0 3px; 
padding:3px; 
} 
.showpageOf { 
text-decoration:none; 
padding:3px; 
margin: 0 3px 0 0; 
} 
.showpage a { 
text-decoration:none; 
border: 1px solid #cccccc; 
padding:3px; 
} 
.showpage a:hover { 
text-decoration:none; 
} 
.showpageNum a:link,.showpage a:link { 
text-decoration:none; 
color:#333333; 
} 

Langkah selanjutnya aku cari  (dengan tekan Ctrl+F) kode  </body>
dan aku letakkan kode di bawah tepat di atasnya.

<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:blog.pageType != "static_page"'> 
<script type='text/javascript'> 
var pageCount= 5 ; 
var displayPageNum=5; 
var upPageWord ='Previous'; 
var downPageWord ='Next'; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){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+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}} 
//]]> 
</script> 
</b:if> 
</b:if>   

Banyak banget kodenya aku harus mengkopi kode ini hati-hati gak boleh ada yang tertinggal... Selanjutnya aku cari kode berikut 'data:label.url' kemudian aku hapus dan aku ganti dengan kode di bawah ini:

'data:label.url + "?&max-results= 5 "'    

Aku klik Simpan Template dan jadi deh...
Selesai ...

Related product you might see: