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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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/AVvXsEiekg6lsf06BW5LAaPGY6txaUdtveFIZp9m4zXwlogayhBL5CZaZ_Fm6zyLFeDeBWz1WkhyVszwerKN5wVczC67aB0ElW6og5z98rqUDbU4NZwi5wV6qhHC3RvzEdOfIGGEP4eiryDoXV8/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekg6lsf06BW5LAaPGY6txaUdtveFIZp9m4zXwlogayhBL5CZaZ_Fm6zyLFeDeBWz1WkhyVszwerKN5wVczC67aB0ElW6og5z98rqUDbU4NZwi5wV6qhHC3RvzEdOfIGGEP4eiryDoXV8/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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekg6lsf06BW5LAaPGY6txaUdtveFIZp9m4zXwlogayhBL5CZaZ_Fm6zyLFeDeBWz1WkhyVszwerKN5wVczC67aB0ElW6og5z98rqUDbU4NZwi5wV6qhHC3RvzEdOfIGGEP4eiryDoXV8/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/AVvXsEiekg6lsf06BW5LAaPGY6txaUdtveFIZp9m4zXwlogayhBL5CZaZ_Fm6zyLFeDeBWz1WkhyVszwerKN5wVczC67aB0ElW6og5z98rqUDbU4NZwi5wV6qhHC3RvzEdOfIGGEP4eiryDoXV8/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/AVvXsEhQHsR58QRIOiCXVnSsXmrxMcThynLMKaUvTEymLc32Xxa8CfTCQrQgabSxsRL721IdqbzNv1aiWCfIFRMWMFh1CKf5p1wGcwDyPVIOhzazizJSq4J1pYdR9EnV091oLKv1ytkApXFjoVI/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. Salam sejahtera by ngeposta...
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Membuat Page Number Navigation page-number-123. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment