Membuat Page Number Navigation

Membuat Page Number Navigation - Page number navigation memang memiliki peran yang cukup berarti dalam sebuah blog/web. Page number navigation ini bisa memudahkan para pengunjung untuk menuju ke suatu halaman yang di carinya. Karena itulah page number navigation sangat berarti keberadaannya dalam sebuah blog/web. Nanum, ada juga yang memilih untuk tidak memasang page number navigation ini. Itu semua tergantung dari anda dan bagaimana anda menyikapi page number navigation ini.

Nah, dan ini dia cara mudah membuat page number navigation di blog, silahkan simak dengan baik tutorial berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut 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/AVvXsEjfmniNoeWHynVlbrWvyUISHPb6nT1q9j4m66t0idBJESJ02FajovHIPfHEtA9QqrMsu_yZGY6HMgnnzkQnTO3BEmSSCXAlDO9jdgsdD21YywRvfI5z-DxJM5ENdRPINiPAlUHZwXq-CQ/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/AVvXsEjfmniNoeWHynVlbrWvyUISHPb6nT1q9j4m66t0idBJESJ02FajovHIPfHEtA9QqrMsu_yZGY6HMgnnzkQnTO3BEmSSCXAlDO9jdgsdD21YywRvfI5z-DxJM5ENdRPINiPAlUHZwXq-CQ/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/AVvXsEjfmniNoeWHynVlbrWvyUISHPb6nT1q9j4m66t0idBJESJ02FajovHIPfHEtA9QqrMsu_yZGY6HMgnnzkQnTO3BEmSSCXAlDO9jdgsdD21YywRvfI5z-DxJM5ENdRPINiPAlUHZwXq-CQ/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/AVvXsEjfmniNoeWHynVlbrWvyUISHPb6nT1q9j4m66t0idBJESJ02FajovHIPfHEtA9QqrMsu_yZGY6HMgnnzkQnTO3BEmSSCXAlDO9jdgsdD21YywRvfI5z-DxJM5ENdRPINiPAlUHZwXq-CQ/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/AVvXsEiOkqs9TTULKmUMenY44Fil-oHWuTANSq127qd9Jq4eYxlwmmyqTOtKwpwZIVnWIbV1O3wTWSTChkkXmsuE87-9cB1xK9sAXff_DkO8-_XJScMly_Cy4y26Ac8P7jshz7ui-a4fryen3g/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>

6. Kemudian klik save/simpan, dan selesai...

Note :
Previewnya bisa anda lihat pada gambar di bawah ini!

Sekian dulu postingan tentang cara membuat page number navigation ini, semoga bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Semoga Bermanfaat :')