CARA MUDAH MEMBUAT NAVIGASI HALAMAN BLOG

Seringkali saya mampir di blog-blog lain. Dan tak jarang saya perhatikan terdapat navigasi halaman di bagian bawah halaman blognya. Lalu saya pun berpikir tidak ada salahnya kalau saya memasang navigasi halaman di blog saya. Biar semakin betah tuh mereka yang berkunjung ke blog saya, he he. Mereka bisa membuka halaman blog saya satu per satu cukup dengan mengklik navigasi halaman.

Lalu saya mulai mencari-cari cara untuk memasang navigasi halaman blog. Tentunya yang saya cari adalah alternatif yang paling mudah dan yang paling menarik. Akhirnya proses pencarian pun selesai. Navigasi halaman mulai saya pasang di blog saya. Bentuknya seperti ini : 

Kelebihan dari navigasi halaman ini, panah di bagian bawah bisa digeser-geser ke arah halaman mana pun.

Cara memasangnya gampang :

• Login ke dashboard blog
• Klik rancangan halaman > edit html
• Centang expand widget templates
• Cari kode ini ]]></b:skin> lalu hapus dan ganti dengan kode berikut :

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje_n7HM188eyLv03Pwirs_zObNN3w7RflKb5XJ9Ii3PIt1qsaFFOi2i7q6-OFsW0Nwr7ISgjr6X1Sm-moUcDo2RV27PpGFfdLYQ4w_sVTCzK0ozODqnhOb6qP4B5UfRfYYf2guKNvOaEE/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
]]></b:skin>

• Selanjutnya cari kode </body> lalu hapus dan ganti dengan kode berikut :

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>

<script type='text/javascript'>

var home_page=&quot;/&quot;;

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=6;

</script>

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

</body>

Note : var postperpage bisa dirubah-rubah tergantung mau berapa jumlah posting per halaman yang ingin ditampilkan. var numshowpage pun sama bisa dirubah-rubah tergantung mau berapa jumlah navigasi yang ingin ditampilkan.

• Terakhir cari kode 'data:label.url' dan ganti dengan kode berikut : 'data:label.url + &quot;?&amp;max-results=7&quot;'

Note : angka 7 harus sama dengan angka di var postperpage

• Simpan template & selesai