Numbered Page Navigation For Blogger

Numbered page navigation merupakan navigation halaman blog yang memudahkan dan membantu visitor melihat setiap halaman yang ada di blog kite.

Apabila anda menggunakan hack ini. Anda akan dapat melihat nombor page di navigation bar.

Cara memasang numbered page navigation :-

Langkah 1 :

Log in blog à Dashboard àLayout àEdit HTML. Seterusnya, tick pada Expand Widget Templates.

Langkah 2 :

Dengan menggunakan keyboard, tekan Ctrl+ F. Seterusnya, taip atau paste kod ]]></b:skin> pada kotak Find dan kemudian tekan Enter.

Langkah 3 :

Salin kod di bawah dan pastekan di atas atau sebelum kod ]]></b:skin> (Rujuk langkah 2)

.showpageArea {

font-family:verdana,arial,helvetica;

color: #000;

font-size:11px;

margin:10px;

}

.showpageArea a {

color: #000;

text-shadow:0 1px 2px #fff;

font-weight: 700;

}

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #919106;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_urrrIYKwWgaXWCbR-dc5I732X9T6CDCZJ_11R5L4Ecj60zX-Pxcj4AWexbdzzX9v4xczZ5CfA8SIhO_TLhzUc_-Ewal9bM-RbADqBEIOl4vhbqyveAjSJI5GJ5JcqsZIqBggaAPFCC8/s400/wp2.jpg) 0 -50px repeat-x;

}

.showpageNum a:hover {

border:1px solid #aeae0a;

background: #ccc url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_urrrIYKwWgaXWCbR-dc5I732X9T6CDCZJ_11R5L4Ecj60zX-Pxcj4AWexbdzzX9v4xczZ5CfA8SIhO_TLhzUc_-Ewal9bM-RbADqBEIOl4vhbqyveAjSJI5GJ5JcqsZIqBggaAPFCC8/s400/wp2.jpg) 0 -25px repeat-x;

}

.showpageOf{

margin:0 8px 0 0;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #919106;

background: #666 url(ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_urrrIYKwWgaXWCbR-dc5I732X9T6CDCZJ_11R5L4Ecj60zX-Pxcj4AWexbdzzX9v4xczZ5CfA8SIhO_TLhzUc_-Ewal9bM-RbADqBEIOl4vhbqyveAjSJI5GJ5JcqsZIqBggaAPFCC8/s400/wp2.jpg) 0 0 repeat-x;

text-decoration: none;

}

Langkah 4 :

Dengan menggunakan keyboard, tekan Ctrl+ F dan taip atau paste kod </body> pada kotak Find dan seterusnya, tekan Enter.

Langkah 5

Salin kod di bawah dan pastekan di atas atau sebelum kod </body> (Rujuk langkah 4) .
Edit angka 7 yang berwarna merah pada kod di bawah mengikut jumlah post pada front page blog anda.

&lt;script type='text/javascript'&gt;

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;


var numshowpage=4;

var upPageWord ='Prev';

var downPageWord ='Next';

&lt;/script&gt;

&lt;script src='http://sites.google.com/site/testsajasite/pagenav.js' type='text/javascript'&gt;&lt;/script&gt;

Langkah 6

Sekali lagi, dengan menggunakan keyboard, tekan Ctrl+ F dan taip atau paste kod 'data:label.url' pada kotak Find. Seterusnya, tekan Enter.

Langkah 7

Salin kod di bawah dan gantikan kod 'data:label.url' (Rujuk langkah 6).
Edit angka 7 yang di warnakan merah pada kod di bawah mengikut jumlah post pada front page (muka depan) blog anda.

'data:label.url + &quot;?&amp;max-results=7&quot;'

Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik  Save.

Posted in: Tips / Tutorial