Cara Membuat Page Navigasi 123 di Blogspot

Baca Juga

Page Navigasi 123

Pada postingan kali ini saya akan mencoba membuat Page Navigation 123 sesuai dengan request dari comment faros di  postingan Setting Template Designer. sebenarnya caranya banyak sekali. dan setyle nya juga banyak.. saya akan mencoba membuat tutorial ini sesuai dengan page navigasi yang saya gunakan.

Langkah pertama anda login ke blogger dan klik Design, langkah selanjutnya Klik Edit HTML dan jangan lupa anda centang Expand Widget. nah setelah itu anda cari kode ]]></b:skin> , setelah ketemu anda anda paste kode di atas tepat di atas kode di atas yang berwarna merah.    

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 1px;
text-decoration: none;
border:1px solid #999;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiBzIFWb05htPNVAeAJvEx7wJsxR9LyV4_j3BGrCPZ3xLR34kFchV8B6S9cfWxyi31KS8j6rpyuY7Ihcf6ja0PhYMJ6ZUhpIbeqjKya5WpPPIn6mopW-58pyCcWoVndSqLyKBo9tQow7_/s0/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiBzIFWb05htPNVAeAJvEx7wJsxR9LyV4_j3BGrCPZ3xLR34kFchV8B6S9cfWxyi31KS8j6rpyuY7Ihcf6ja0PhYMJ6ZUhpIbeqjKya5WpPPIn6mopW-58pyCcWoVndSqLyKBo9tQow7_/s0/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {font-size:11px;
color:#fff;
padding: 3px 8px;
margin: 1px;
font-weight: 700;
border:1px solid #888;
background: #444;
text-decoration: none;
}

Oke setelah itu save template blog anda dulu biar poll.. he he.. tidak di save juga tidak apa apa. oke next anda cari kode </body> setelah bertemu dan berjumpa dengan dengan kodenya kenalan dulu biar saling kenal dan tidak asing lagi dengan dengan kode </body> he he just kidding. oke setelah ketemu anda copy kode di bwah dan letakan di atas kode tadi.

<script type='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord =&#39;Sebelumnya&#39;;
var downPageWord =&#39;Selanjutnya&#39;;
</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"><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>

Setelah selesai anda save template blog anda. dan lihat hasilnya. jika belum ada hasil dan masih tetap seperti semula anda cari kode ini 'data:label.url' jika setelah ketemu anda ganti code tersebut dengan kode ini 'data:label.url + &quot;?&amp;max-results=5&quot;' terus klik save biar cepet. he he.. 

keterangan untuk yang berwana merah diatas yang kodenya seperti ini Sebelumnya dan Selanjutnya silahkan anda ganti sesuai dengan selera anda.    

var pageCount=3; jumlah tampilan nomor yang di bawah kode ini akan menampilkan cuma 3 

var displayPageNum=5 sedangkan yang ini untuk menapilkan postingan ketika di klik angka/nomor anda akan menapilkan berapa postingan, silahkan anda sesuaikan dengan banyak postingan yang kan di tampilkan tiap halamannya. 

Sekian dulu postingan kali ini semoga bermanfaat. Good Luck Haapy Blog