ban

Hari ini aku akan menunjukkan bagaimana cara untuk membuat page navigation di blogspot.Aku membuat tutorial ini diatas permintaan budak malu818 kerana dia masih tidak berjaya membuatnya semoga dengan tutorial yang aku tunjukkan ini sedikit sebanyak akan dapat membantu budak malu818 serta kepada sesiapa yang masih belum berjaya dan masih tidak tahu untuk membuatnya.

screenshot.3 Page navigation yang ingin aku tunjukkan ini ialah page navigation hack yang telah dibuat oleh Mohamed Rias yang dibuat dalam bentuk memasukkan kode didalam template dan juga dalam bentuk widget.Jadi untuk memudahkan kepada anda semua membuatnya aku hanya akan menunjukkan cara membuat page navigation ini dalam bentuk widget.Sila ikuti langkah-langkah untuk membuatnya dibawah.

1.Login ke dashboard—pilih layout.

2.kemudian pergi ke Add A gadget dan pilih HTML/Javascript.

screenshot.4

3.Kemudian copy dan pastekan semua javascript dibawah ini dan pastekan didalam HTML/Javascript itu.Tidak perlu tulis tittle.

<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;color: #000000;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>

3.Selepas memasukkan Javascript itu sila letakkan widget itu dibawah post lihat gambar dibawah.Kemudian klik save.

Page Navigation Menu Widget

4.Jika mahu membuat page kelihatan lebih banyak anda boleh mengubah tempat yang aku tandakan dengan warna merah itu

1: var pageCount =5;

ini adalah untuk menunjukkan berapa halaman yang mahu anda tunjukkan contoh yang aku buat sekarang var pageCount =8;.maka untuk page yang kedua anda akan lihat ada sebanyak 8 post.

2: var displayPageNum = 3;

ini adalah menunjukkan jumlah halaman contoh yang aku buat sebanyak var displayPageNum = 2;

Apa lagi yang boleh anda ubah.

border: 1px solid #505050;
color: #000000;
background-color: #FFFFFF;

Anda boleh ubah yang aku tandakan dengan warna merah itu contohnya seprti

border adalah garisan tepi anda boleh besarkan sebanyak 2px atau 3px bersesuain dengan keinginan anda.#505050 adalah warna border tersebut contoh anda boleh tukarkan kepada warna hitam iaitu color kode #000000.

Untuk menukar semua color didalam page navigation ini anda perlukan software untuk membaca color kode

Dapatkan disini

atau jika anda menggunakan firefox anda boleh install add on Colorzilla

Dapatkan disini


12 comments:

  1. dari dulu aku nak buat ni.. tapi tak buat2 sbb igt cam susah.. guna cara ni aku tgk cam sng jer..

    ReplyDelete
  2. ala copy pastu paste je xde susahla cubala try

    ReplyDelete
  3. Nice post....!!!
    Akhirnya nemu juga tutorial yang selama ini aku idam2 kan... Thanks bro.. Bsok langsung mau ke TKP nih :D

    ReplyDelete
  4. Silahkan gunakan script terbaru dari page navigation di blog saya, Script yg ini banyak Bug nya. Ini alamat Script terbaru All Page Navi for blogger

    ReplyDelete
  5. tak jadi ke abii mgkn ada yg salah cuba skali lg.

    ReplyDelete
  6. Terima Kasih Abu Farhan semoga berguna utk semua..Bila mahu keluarkan blogger tube ver 2..

    ReplyDelete
  7. hai..tak jadi lagi lerrr.....kita copy paste masih tak jadi...conpius....

    ReplyDelete
  8. ids kena seting jumlah post dia..

    ReplyDelete
  9. still xmenjadi, kalau saya mohon Ariey bt semakan pada html code blog saya bole tak? tgk kt mana error tuh.

    ReplyDelete
  10. kt blog saya sudah ter-tulis camni kt html code utk navigation:

    #blog-pager-newer-link {
    display: none;
    }

    #blog-pager-older-link {
    display: none;
    }

    #blog-pager {
    display: none;
    }

    p/s: betul ke camni?

    ReplyDelete

Sila tinggalkan komen ada dibawah ini dan yang berkenaan dengan post sahaja dan semua komen akan ditapis dahulu sebelum ditampilkan.