Page Navigation Widget

Ok aku baru saja dapat 1 lagi ilmu baru.
Kalau korang kurang faham apa yang dimaksudkan dengan 'Page Navigation Widget', cuba perhatikan gambar di bawah :-


atau tengok blog aku ini yang paling bawah sekali


Mula-mula korang kena pergi Layout>Add Page Element>HTML/Javascript

Korang copy kan kod di bawah dan masukkan ke dalam Page Element tadi.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px 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=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
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"><a href="/">'  firstPageWord  ' </a></span>' upPageHtml ' ' html  ' ';
}else{
html = '' labelHtml   firstPageWord  ' </a></span>' upPageHtml ' ' html  ' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page ' thisNum ' of ' (postNum-1) ': </span>' html;

if(thisNum<(postNum-1)){
html  = downPageHtml;
html  = '<span class="showpage"><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://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>

Selepas korang masukkan widget tadi, korang mesti letakkan page element tadi di bawah blog post korang. Rujuk gambar di bawah:-



Ok, di sini korang boleh tukarkan berapa banyak pos korang yang akan terpapar di setiap page.
Korang tukarkan nombor(merah) yang terdapat dalam kod di atas.

Warna hijau pula untuk nombor page.

p/s: Kalau korang tak ubahkan kod di atas pun tak mengapa..

Enjoy..