Membuat Navigasi halaman Blogger Dengan Scroll

 

Awesome Page Navigation Widget Untuk Blogger Dengan Scroll adalah widget Navigasi halaman dan membantu pembaca Anda untuk melompat dari satu halaman ke halaman lain directly. Widget navigasi halaman ini dikembangkan oleh karaboz dan abu-farhan dikonversi menjadi blogger. Widget ini memiliki tombol kecil di bawah dimana setiap pengunjung bisa langsung pada halaman terakhir , juga mereka dapat memilih halaman di blog.Search Anda di Google Anda akan melihat widget banyak tentang navigasi halaman tetapi jika Anda menggunakan widget ini maka pembaca / pengunjung bisa pergi ke halaman tertentu yang mereka inginkan.

Langsung saja :
1. Login Ke Blogger, Buka Dashboard, lalu Layout > Edit Html
2. Centang “Expand Widget Templates”
3. Cari Kode Dibawah ini

]]></b:skin>

     Lalu ganti dengan Kode dibawah ini

.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/AVvXsEjWNdplPL90IC2LMB5_E4l6r9z7ogloDfN-Pl8ES9plCfbIe02KHekBhVzLpWKpQ7MtDiB6tvDsMYw4wisA59fYSj6JHPOaWHdmCvcW0myomq0M3i4EhD0K2FxaeYKFWJUllpOyIGsK8WM/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>

4. Cari kode dibawah ini

</body> 

     Lalu Ganti dengan Kode Dibawah ini

<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>

5. Kemudian Simpan