Pada umumnya dalam membuat Navigasi halaman blog harus melalui proses edit HTML, mungkin dengan cara serperti ini sedikit agak rumit untuk netter pemula. Kegunaan dari navigasi halaman dengan nomor atau angka ini, sebetulnya tombol newer post dan tombol older post secara default sama. jika Sobat dapat mengganti newer-older post original dari blogger menjadi halaman bernomor urut /angka berurutan. Seperti gambar di bawah:
Di postingan sebelumnya sudah saya publikasikan, namu pada postingan ini melalui edit HTML. Sengaja saya posting dengan dua cara agar Sobat dapat memilih diantara dua cara tersebut, mana yang lebih mudah menurut Sobat. Nah, postongan yang ini, Sobat tidak perlu ribet mengedit HTML, sengaja saya suguhkan untuk Sobat code JavaScript nya silahkan copy code di bawah: Cara menambah gadget baru Blogger atau Add a Gadget
<style>
.showpageArea {
padding:2px;
font-size:14px;
border: 0px solid #333;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 0px solid #ffffff;
color: #cc0000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:14px;
border: 0px solid #333;
color: #000000;
background-color: #FEFF5F;
}
.showpageNum a {border: 0px solid #ffffff;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:14px;
border: 0px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:13px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 0px solid #333;
color: #fff;
background-color: #006F0F;
}
.showpage a:hover {font-size:14px;
border: 0px solid #333;
color: #006F0F;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:14px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 0px solid #0066cc;
color: #006F0F;
background-color: #ffffff;}
.showpageNum a:hover {font-size:14px;
border: 0px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</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=8;
var firstPageWord = ‘First‘;
var endPageWord = ‘Last‘;
var upPageWord =’Previous‘;
var downPageWord =’Next’;
var labelHtml = ‘<span><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><a href=”/”>’+ upPageWord +'</a></span>’;
}
}else{
upPageHtml = ‘<span><a href=”‘+htmlMap[p]+'”>’+ upPageWord +'</a></span>’;
}
fFlag++;
}
if(p==(thisNum-1)){
html += ‘ <span><u>’+thisNum+'</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span><a href=”‘+htmlMap[p]+'”>’+ (p+1) +’ </a></span>’;
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span> <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><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}
html = ‘<div><span style=”font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;“>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span><a href=”‘+htmlMap[htmlMap.length-1]+'”> ‘+endPageWord+'</a></span>’;
}
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>
<div style=”text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;”> <a href=”http://create-freeblogs-n-widgets.blogspot.com/”>Free widgets for Blogs</a> Custumized by <a href=”http://create-freeblogs-n-widgets.blogspot.com/”>s66</a></div>
Catatan:
Perlu Sobat perhatikan bahwa code warna merah, var pageCount=5; ini untuk jumlah tampilan, sedangkan code var displayPageNum=8; ini menunjukkan jumlah seluruh halaman.
Sedangkan code din bawah ini seperti: First, Last, Previous dan Next, ganti dengan kata-kata Sobat, atau biarkan saja.
var firstPageWord = ‘First‘;
var endPageWord = ‘Last‘;
var upPageWord =’Previous‘;
var downPageWord =’Next’;
Untuk merubah warna tampilan halaman seperti warna font, warna latar belakang/background color dan warna border, code warna ini yang diberi tanda warna kuning.
Pergi dan masuk ke Blogger Sobat untuk proses membuat Gadget baru
Semoga yang satu ini dapat bermanfaat