Cara Membuat Page Number Dengan Warna Unik dan Keren

Page Number sangat berguna sekali bagi pengunjung..pengunjung lebih mudah mencari artikel yg ingin dibaca..pernah kah anda melihat page number pada suatu blog..??ya sobat bisa lihat di blog saya ini contoh page number yg saya maksud..selain tampilannya keren dan bagus juga ada manfaatnya..apakah sobat ingin memasangnya juga..??silahkan di copy paste kode2 dibawah ini sesuka hati sobat..

1. Login ke akun Blogger sobat
2. Klik Tata letak >> Tambah Gadget >> HTML / Javascript
3. Masukkan kode dibawah ini 

 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RRtg2Q0xyGrBMxiFejCS2L_LdbAAyMOs37X-nIo1Mn-1y2hEgBViDmdXH6q_SniOdEVL4uaUEZIWnfZSBbd0uD9S0uerwcoq7feGS6Pbg0kKmWErSrSqAnzw1mrO8fupjU-0IBTGgrs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RRtg2Q0xyGrBMxiFejCS2L_LdbAAyMOs37X-nIo1Mn-1y2hEgBViDmdXH6q_SniOdEVL4uaUEZIWnfZSBbd0uD9S0uerwcoq7feGS6Pbg0kKmWErSrSqAnzw1mrO8fupjU-0IBTGgrs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RRtg2Q0xyGrBMxiFejCS2L_LdbAAyMOs37X-nIo1Mn-1y2hEgBViDmdXH6q_SniOdEVL4uaUEZIWnfZSBbd0uD9S0uerwcoq7feGS6Pbg0kKmWErSrSqAnzw1mrO8fupjU-0IBTGgrs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RRtg2Q0xyGrBMxiFejCS2L_LdbAAyMOs37X-nIo1Mn-1y2hEgBViDmdXH6q_SniOdEVL4uaUEZIWnfZSBbd0uD9S0uerwcoq7feGS6Pbg0kKmWErSrSqAnzw1mrO8fupjU-0IBTGgrs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFldYSotafr0rElh3xEITmQOpJuf9Z5vnFw-o7JizHxyUQrffBMDT0OKpoQqMp0SonD2q6mIzCGc_3GN6rzaeFCU8cAV0jxow_IgHm9HJwt0l3FYw_tkSqceTKnIrzIMIgt0GQOYEQucE/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>

 Hasilnya :

 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdUEjPIJN-k3JNf9re3i7re9-2n9XDqWQpGzu_21ZRp6FVVwRyQwQ8_NcLlXME5APcK7rSwnUzs5KMIlpcvsvsxH5cnc6LP1fb4MEtCqQkF1TYUPnymUWavuybOigFKQTT8Mq1DFCaQg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdUEjPIJN-k3JNf9re3i7re9-2n9XDqWQpGzu_21ZRp6FVVwRyQwQ8_NcLlXME5APcK7rSwnUzs5KMIlpcvsvsxH5cnc6LP1fb4MEtCqQkF1TYUPnymUWavuybOigFKQTT8Mq1DFCaQg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdUEjPIJN-k3JNf9re3i7re9-2n9XDqWQpGzu_21ZRp6FVVwRyQwQ8_NcLlXME5APcK7rSwnUzs5KMIlpcvsvsxH5cnc6LP1fb4MEtCqQkF1TYUPnymUWavuybOigFKQTT8Mq1DFCaQg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHdUEjPIJN-k3JNf9re3i7re9-2n9XDqWQpGzu_21ZRp6FVVwRyQwQ8_NcLlXME5APcK7rSwnUzs5KMIlpcvsvsxH5cnc6LP1fb4MEtCqQkF1TYUPnymUWavuybOigFKQTT8Mq1DFCaQg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFldYSotafr0rElh3xEITmQOpJuf9Z5vnFw-o7JizHxyUQrffBMDT0OKpoQqMp0SonD2q6mIzCGc_3GN6rzaeFCU8cAV0jxow_IgHm9HJwt0l3FYw_tkSqceTKnIrzIMIgt0GQOYEQucE/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>

 Hasilnya :
 

 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0i3Sdgt3l1ITsw8I9ZNQKxb1q0sZ-6m6Ee7FAHALMA7uWFBcLT68Ldca9ioaKGgBx8ekpGqX8KYrGic8vZlLbbVIwMvrFZTBzP0p-z7wQxAqHYznNlLFKWoSqOAJjYN_5uwBucM_eCw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0i3Sdgt3l1ITsw8I9ZNQKxb1q0sZ-6m6Ee7FAHALMA7uWFBcLT68Ldca9ioaKGgBx8ekpGqX8KYrGic8vZlLbbVIwMvrFZTBzP0p-z7wQxAqHYznNlLFKWoSqOAJjYN_5uwBucM_eCw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0i3Sdgt3l1ITsw8I9ZNQKxb1q0sZ-6m6Ee7FAHALMA7uWFBcLT68Ldca9ioaKGgBx8ekpGqX8KYrGic8vZlLbbVIwMvrFZTBzP0p-z7wQxAqHYznNlLFKWoSqOAJjYN_5uwBucM_eCw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0i3Sdgt3l1ITsw8I9ZNQKxb1q0sZ-6m6Ee7FAHALMA7uWFBcLT68Ldca9ioaKGgBx8ekpGqX8KYrGic8vZlLbbVIwMvrFZTBzP0p-z7wQxAqHYznNlLFKWoSqOAJjYN_5uwBucM_eCw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFldYSotafr0rElh3xEITmQOpJuf9Z5vnFw-o7JizHxyUQrffBMDT0OKpoQqMp0SonD2q6mIzCGc_3GN6rzaeFCU8cAV0jxow_IgHm9HJwt0l3FYw_tkSqceTKnIrzIMIgt0GQOYEQucE/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>

 Hasilnya :
 


   4.  Simpan dan lihat hasilnya


 Semoga bermanfaat!! jangan lupa tinggalkan komentarny sobat..

Sumber : http://luhurfatah10.blogspot.com/