Navigasi Halaman angka berguna untuk pengunjung untuk menulusuri data pada blog , dan mempercepat atau bisa melompat ke bagian tertentu. Navigasi ini bisa di atur baik nomor yang ingin di tunjukan dan juga berapa posting yang ingin di tujukan tiap halamannya.
Cara membuat Navigasi halaman pada blog sangat mudah, perhatikan langkah-langkah ini dengan benar :
1. Buka akun
Blogger anda.
2. Sekarang menuju ke
Tata Letak >>
Tambah Gadget.
3. Pilih
Gadget "
HTML/ Java Script" .
4. Tambahkan Kode Diwah 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/AVvXsEi3ZTofZcezrWLmbd-4WvhgF7-HePXOj4v_QUMfOFPuz_au6XcbEN7wIDNaX8N3nzzMTjavBCDxmASqo25DK4dvpBJEVKvsODnWfIy6Y8pf94ag8xeed-LDsCBwnwF5oDBVNWbjnfrQUZc/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/AVvXsEi3ZTofZcezrWLmbd-4WvhgF7-HePXOj4v_QUMfOFPuz_au6XcbEN7wIDNaX8N3nzzMTjavBCDxmASqo25DK4dvpBJEVKvsODnWfIy6Y8pf94ag8xeed-LDsCBwnwF5oDBVNWbjnfrQUZc/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/AVvXsEi3ZTofZcezrWLmbd-4WvhgF7-HePXOj4v_QUMfOFPuz_au6XcbEN7wIDNaX8N3nzzMTjavBCDxmASqo25DK4dvpBJEVKvsODnWfIy6Y8pf94ag8xeed-LDsCBwnwF5oDBVNWbjnfrQUZc/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/AVvXsEi3ZTofZcezrWLmbd-4WvhgF7-HePXOj4v_QUMfOFPuz_au6XcbEN7wIDNaX8N3nzzMTjavBCDxmASqo25DK4dvpBJEVKvsODnWfIy6Y8pf94ag8xeed-LDsCBwnwF5oDBVNWbjnfrQUZc/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://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
var postperpage=4;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js'></script>
5. Save
Java Script , untuk judul tidak usah di isi tidak masalah.
Note :
var postperpage=4;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
Untuk warna Hijau Bisa di ganti sesuka kalian, Semoga bermanfaat .
