Cara Membuat Tombol Navigasi Halaman

Tombol Navigasi Halaman adalah seperangkat widget blog yang berfungsi untuk menunjukkan atau menginformasikan kepada para visitor tentang jumalah halaman yang ada pada blog kita berikut dengan postingan-postingan yang ada di dalamnya. Dengan adanya Tombol Navigasi Halaman ini, blog kita menjadi terlihat lebih profesional dan sama sekali tidak terkesan blog gratisan.

Gambar di atas menunjukkan bentuk Tombol Navigasi Halaman yang akan kita buat.

Banyak blog atau website yang telah membahas tentang cara membuat Tombol Navigasi Halamanini, namun Tombol Navigasi Halaman yang akan kita bahas berikut ini memiliki karakteristik tersendiri yaitu dengan tambahan tombol next page.

Berikut ini cara membuatnya (bila anda berminat) :

Oke langsung saja dengan menambahkan kode css berikut DI ATAS  ]]></b:skin>

.showpageArea{padding:10px;background:#fff} .showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none} .showpageNum a{font-weight:bold;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;} .showpageNum a:hover{color:#fff;background: #ca1717; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;} .showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} .totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} .showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px} .showpage a:hover{background: #ca1717; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px} #showlastpage a{font-weight:bold}

Setelah itu tambahkan script berikut DI ATAS tag </body>

<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='◄'; var downPageWord ='►'; </script> <script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/> </b:if>

Dan terakhir save template anda dan lihat hasilnya. Bagaimana, semakin tampil profesional khan ?
Semoga bermanfaat, happy blogging.