Kali ini saya akan tunjukkan tutorial cara memasang Page Number Navigation bar pada blog untuk memudahkan pelawat membuka halaman lain pada blog yang dilawati tersebut. Ikut langkah-langkah di bawah dengan betul. Jika ada masalah sila kongsi di bahagian comment.
Langkah 1
1. Seperti biasa masuk ke Dashboard > Layout > Edit html.
2. Buat backup pada template untuk langkah keselamatan.
3. Tekan Ctrl + F dan cari code di
bawah:
bawah:
]]></b:skin>
4. Paste code di bawah sebelum code ]]></b:skin>
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;}
.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;}
Langkah 2
1. Cari code di bawah:
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
2. Selepas </b:section> paste code di bawah:
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=6;
var displayPageNum=10;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCountundefinedjson) {
var thisUrl = home_page_url;
var htmlMap = new Arrayundefined);
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
forundefinedvar i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substringundefined0,19)+post.published.$t.substringundefined23,29);
timestamp = encodeURIComponentundefinedtimestamp1);
var title = post.title.$t;
ifundefinedtitle!=''){
ifundefineditemCount==0 || undefineditemCount % pageCount ==undefinedpageCount-1))){
ifundefinedthisUrl.indexOfundefinedtimestamp)!=-1 ){
thisNum = postNum;}
ifundefinedtitle!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;}}
itemCount++;}
forundefinedvar p =0;p< htmlMap.length;p++){
ifundefinedp>=undefinedthisNum-displayPageNum-1) && p<undefinedthisNum+displayPageNum)){
ifundefinedfFlag ==0 && p == thisNum-2){
ifundefinedthisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}
fFlag++;}
ifundefinedp==undefinedthisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
ifundefinedp==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ undefinedp+1) +'</a></span>';}}
ifundefinedeFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;}}}
ifundefinedthisNum>1){
html = ''+upPageHtml+' '+html +' ';}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages undefined'+undefinedpostNum-1)+')</span>'+html;
ifundefinedthisNum<undefinedpostNum-1)){
html += downPageHtml;}
ifundefinedpostNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByNameundefined"pageArea");
var blogPager = document.getElementByIdundefined"blog-pager");
ifundefinedpostNum <= 2){
html ='';}
forundefinedvar p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;}
ifundefinedpageArea&&pageArea.length>0){
html ='';}
ifundefinedblogPager){
blogPager.innerHTML = html;}
}
function showpageCount2undefinedjson) {
var thisUrl = home_page_url;
var htmlMap = new Arrayundefined);
var isLablePage = thisUrl.indexOfundefined"/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substrundefinedthisUrl.indexOfundefined"/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOfundefined"?")!=-1 ? thisLable.substrundefined0,thisLable.indexOfundefined"?")) : 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;
forundefinedvar i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substringundefined0,19)+post.published.$t.substringundefined23,29);
timestamp = encodeURIComponentundefinedtimestamp1);
var title = post.title.$t;
ifundefinedtitle!=''){
ifundefineditemCount==0 || undefineditemCount % pageCount ==undefinedpageCount-1))){
ifundefinedthisUrl.indexOfundefinedtimestamp)!=-1 ){
thisNum = postNum;}
ifundefinedtitle!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;}}
itemCount++;}
forundefinedvar p =0;p< htmlMap.length;p++){
ifundefinedp>=undefinedthisNum-displayPageNum-1) && p<undefinedthisNum+displayPageNum)){
ifundefinedfFlag ==0 && p == thisNum-2){
ifundefinedthisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}
fFlag++;}
ifundefinedp==undefinedthisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
ifundefinedp==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ undefinedp+1) +'</a></span>';}}
ifundefinedeFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;}}}
ifundefinedthisNum>1){
ifundefined!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';}}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages undefined'+undefinedpostNum-1)+')</span>'+html;
ifundefinedthisNum<undefinedpostNum-1)){
html += downPageHtml;}
ifundefinedpostNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByNameundefined"pageArea");
var blogPager = document.getElementByIdundefined"blog-pager");
ifundefinedpostNum <= 2){
html ='';}
forundefinedvar p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;}
ifundefinedpageArea&&pageArea.length>0){
html ='';}
ifundefinedblogPager){
blogPager.innerHTML = html;}}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if undefinedthisUrl.indexOfundefined"/search/label/")!=-1){
if undefinedthisUrl.indexOfundefined"?updated-max")!=-1){
var lblname1 = thisUrl.substringundefinedthisUrl.indexOfundefined"/search/label/")+14,thisUrl.indexOfundefined"?updated-max"));
}else{
var lblname1 = thisUrl.substringundefinedthisUrl.indexOfundefined"/search/label/")+14,thisUrl.indexOfundefined"?&max"));}}
var home_page = "/";
if undefinedthisUrl.indexOfundefined"?q=")==-1 && thisUrl.indexOfundefined".html")==-1){
if undefinedthisUrl.indexOfundefined"/search/label/")==-1){
document.writeundefined'<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.writeundefined'<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
</script>
var home_page_url = location.href;
var pageCount=6;
var displayPageNum=10;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCountundefinedjson) {
var thisUrl = home_page_url;
var htmlMap = new Arrayundefined);
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
forundefinedvar i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substringundefined0,19)+post.published.$t.substringundefined23,29);
timestamp = encodeURIComponentundefinedtimestamp1);
var title = post.title.$t;
ifundefinedtitle!=''){
ifundefineditemCount==0 || undefineditemCount % pageCount ==undefinedpageCount-1))){
ifundefinedthisUrl.indexOfundefinedtimestamp)!=-1 ){
thisNum = postNum;}
ifundefinedtitle!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;}}
itemCount++;}
forundefinedvar p =0;p< htmlMap.length;p++){
ifundefinedp>=undefinedthisNum-displayPageNum-1) && p<undefinedthisNum+displayPageNum)){
ifundefinedfFlag ==0 && p == thisNum-2){
ifundefinedthisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}
fFlag++;}
ifundefinedp==undefinedthisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
ifundefinedp==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ undefinedp+1) +'</a></span>';}}
ifundefinedeFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;}}}
ifundefinedthisNum>1){
html = ''+upPageHtml+' '+html +' ';}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages undefined'+undefinedpostNum-1)+')</span>'+html;
ifundefinedthisNum<undefinedpostNum-1)){
html += downPageHtml;}
ifundefinedpostNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByNameundefined"pageArea");
var blogPager = document.getElementByIdundefined"blog-pager");
ifundefinedpostNum <= 2){
html ='';}
forundefinedvar p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;}
ifundefinedpageArea&&pageArea.length>0){
html ='';}
ifundefinedblogPager){
blogPager.innerHTML = html;}
}
function showpageCount2undefinedjson) {
var thisUrl = home_page_url;
var htmlMap = new Arrayundefined);
var isLablePage = thisUrl.indexOfundefined"/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substrundefinedthisUrl.indexOfundefined"/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOfundefined"?")!=-1 ? thisLable.substrundefined0,thisLable.indexOfundefined"?")) : 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;
forundefinedvar i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substringundefined0,19)+post.published.$t.substringundefined23,29);
timestamp = encodeURIComponentundefinedtimestamp1);
var title = post.title.$t;
ifundefinedtitle!=''){
ifundefineditemCount==0 || undefineditemCount % pageCount ==undefinedpageCount-1))){
ifundefinedthisUrl.indexOfundefinedtimestamp)!=-1 ){
thisNum = postNum;}
ifundefinedtitle!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;}}
itemCount++;}
forundefinedvar p =0;p< htmlMap.length;p++){
ifundefinedp>=undefinedthisNum-displayPageNum-1) && p<undefinedthisNum+displayPageNum)){
ifundefinedfFlag ==0 && p == thisNum-2){
ifundefinedthisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';}
fFlag++;}
ifundefinedp==undefinedthisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
ifundefinedp==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ undefinedp+1) +'</a></span>';}}
ifundefinedeFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;}}}
ifundefinedthisNum>1){
ifundefined!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';}}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages undefined'+undefinedpostNum-1)+')</span>'+html;
ifundefinedthisNum<undefinedpostNum-1)){
html += downPageHtml;}
ifundefinedpostNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByNameundefined"pageArea");
var blogPager = document.getElementByIdundefined"blog-pager");
ifundefinedpostNum <= 2){
html ='';}
forundefinedvar p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;}
ifundefinedpageArea&&pageArea.length>0){
html ='';}
ifundefinedblogPager){
blogPager.innerHTML = html;}}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if undefinedthisUrl.indexOfundefined"/search/label/")!=-1){
if undefinedthisUrl.indexOfundefined"?updated-max")!=-1){
var lblname1 = thisUrl.substringundefinedthisUrl.indexOfundefined"/search/label/")+14,thisUrl.indexOfundefined"?updated-max"));
}else{
var lblname1 = thisUrl.substringundefinedthisUrl.indexOfundefined"/search/label/")+14,thisUrl.indexOfundefined"?&max"));}}
var home_page = "/";
if undefinedthisUrl.indexOfundefined"?q=")==-1 && thisUrl.indexOfundefined".html")==-1){
if undefinedthisUrl.indexOfundefined"/search/label/")==-1){
document.writeundefined'<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.writeundefined'<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
</script>
4. Klik Save Template.
Untuk customize:
Anda boleh tukar code berwarna di bawah:
var pageCount=6; - Nombor 6 untuk show berapa banyak post per page. Setting ini mesti sama dengan setting pada Dashboard > Setting > Formatting > Show > 6 posts
var displayPageNum=10; - Nombor 10 untuk show berapa page pada navigation bar.
var upPageWord ='Previous'; - Anda boleh tukar Previous dengan Sebelum atau sebagainya.
var downPageWord ='Next'; - Anda boleh tukar Next dengan Selepas atau sebagainya.
