Cara Memasang Page Number Navigation Bar Pada Blog
Kali ini saya nak tunjukkan tutorial cara pasang Page Number Navigation bar pada blog untuk memudahkan pelawat membuka halaman lain. Ikut langkah-langkah di bawah dengan betul. Kalau ada masalah sila kongsi di bahagian comment k.
Langkah 1
1. Seperti biasa masuk ke Dashboard > Template > Edit HTML > Proceed
2. Tekan Ctrl + F dan cari code di bawah:
1. Seperti biasa masuk ke Dashboard > Template > Edit HTML > Proceed
2. Tekan Ctrl + F dan cari code di bawah:
]]></b:skin>
3. 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>
3. Klik Save Template.
Untuk customize:
Korang boleh tukar code berwarna di bawah:
var pageCount=6; - Nombor 6 untuk show berapa banyak post per page. Setting ni 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'; - Boleh tukar Previous dengan Sebelum atau sebagainya.
var downPageWord ='Next'; - Boleh tukar Next dengan Selepas atau sebagainya.
10 comments:
langkah 1 & 2 bole pilih ke atau dua2 kena gune?
2 2 kena gune..tp sblm tu buat backup template dlu k:-D
camne nak buat backup template bro,saya tak tahu....
tak blh jadi la..huhu
:D tq
x boleh..kuar error jek..
coder no 2 template blog aku xder arr..??
tak jadi o0o T_T
nape sy nye xjd...huhu kua url web awk kt header lak...pls help me...=(
dah try buat tp x jadi??... mungkin korang salah search code ni sbb ada sesetengah hacked templates code diatas berada amat jauh ...daripada kod ni
saya tak guna cara diatas..
Post a Comment
Singgah je???Komen la sikit.:-D