Blogger Tutorial: Adding Numbered Page Navigation

Salam & Hello.

Hai hari ni aku nak buat tutorial macam mana nak letak Numbered Page Navigation yang telah lama ditangguhkan. Hehe~ Jadi sekarang lah aku buat. Huhu~


1. Mula² copy code di bawah ni:

<script style='text/javascript'>var pageCount=5;var displayPageNum=4;var upPageWord="Prev";var downPageWord="Next";</script><script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>

Tukar apa yang perlu:
Red - Ubah nombor kepada berapa post yang dipaparkan di blog anda
Green - Ubah nombor berapa banyak yang anda ingin paparkan
Blue - Ubah tulisan Prev kepada apa yang anda mahu.
Purple - Ubah tulisan Next kepada apa yang anda mahu juga.

2. Paste dekat Dashboard > Design > Add a Gadget > HTML/JavaScript. Save dan seretkan gadget tu di bawah post.

3. Kemudian copy pulak code di bawah ni:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

Dekat sini boleh lah ubah apa yang perlu contohnya macam warna ke border ke dan sebagainya. Ikut kesesuaian blog dan kekreatifan anda. ^^

4. Pergi ke Dashboard > Design > Edit HTML. Paste selepas ]]></b:skin> sebelum </head>.

5. Preview dan save kalau takde error. Siap!

Selamat mencuba kepada sesiapa yang nak cuba. :D

Sources: Google 100%

No comments:

Post a Comment