Cara Membuat Page Number Navigation

With Colour

Hai..sob...kali ini saya akan membahas mengenai "Cara Membuat Page Number Navigation
With Colour", pasti di sobat semua udah penah kan lihat  Page Number, Klo tidak pernah lihat,
lihat aja gambar di atas, Page Number  ini sering di gunakan oleh para blogger untuk menghias
blog mereka, Selain itu juga bisa membantu pengunjung untuk menemukan postingan yg bagus
yg ada di blog kalian, Kenapa Bisa..?
menurut saya ini lebih mudah dimengerti olah si pengunjung di banding menggunkan Postingn
lama dan postinagn baru, nah gimana sobat sudah tau kan..apa sobat berminat untuk
memasangnya di blog sobat,..?
kalo iya ikuti langkah-langkah berikut ya..!!!

 Login ke Blogger

 Pergi ke Tata Letak >> Tambah Gatget >> HTML/Java Script

 Pilihlah slah satu dariu model Page Number berikut.

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-

size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent
url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/
QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px
solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-
height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/
AAAAAAAAAF8/QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:-10px
-43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-
decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent
url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/
QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px
solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-
height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent
url(http://1.bp.blogspot.com/-U8Em8uxNiRk/TrqwS1Z9JVI/AAAAAAAAAF8/
QEtTKMr5HIw/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px
0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid
#FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-
radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img
src="http://1.bp.blogspot.com/-l3S13r6EFGk/UJKXM_Tuu8I/AAAAAAAAFhA/
Ix1Lh7r9LXw/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed;
bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script> <script style='text/javascript'
src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-

size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent
url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/
s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-
webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0
1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px
12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px
6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/
AAAAAAAAAGU/lJ-qXnp5Td0/s1600/greendiamond.png) repeat-x;background-position:0px -
30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-
decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent
url(http://1.bp.blogspot.com/-kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/
s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-
webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-
height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0,
0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px
rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(http://1.bp.blogspot.com/-
kLtghYQy-Ao/TrrjlqQLU8I/AAAAAAAAAGU/lJ-qXnp5Td0/s1600/greendiamond.png) repeat-
x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-
height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-
radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-
decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-
moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0,
0.2);} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img
src="http://1.bp.blogspot.com/-l3S13r6EFGk/UJKXM_Tuu8I/AAAAAAAAFhA/
Ix1Lh7r9LXw/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed;
bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript'
src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-

size:12px;width:98%;}.showpageNum a,.showpage a {
background:transparent
url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/
s1600/darkblue.png) repeat-x;
border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-
radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-
space:nowrap;
}.showpageNum a:hover,.showpage a:hover {
background-image:url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/
AAAAAAAAAF0/n6jjqE6iLv8/s1600/darkblue.png) repeat-x;
border:2px solid #5C8CFB;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
}.showpageOf{
margin:0 8px 0 0;
background:transparent
url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/
s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-
border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
}.showpagePoint {
background:transparent
url(http://3.bp.blogspot.com/-jx9IKa-4vog/TrqvgwWzXHI/AAAAAAAAAF0/n6jjqE6iLv8/
s1600/darkblue.png) repeat-x;
margin:0 3px 0 3px;padding:3px 10px;
line-height:30px;cursor:pointer;white-space:nowrap;
border:2px solid #5C8CFF;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-
weight:bold;
} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img
src="http://1.bp.blogspot.com/-l3S13r6EFGk/UJKXM_Tuu8I/AAAAAAAAFhA/
Ix1Lh7r9LXw/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed;
bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript'
src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>