Beautiful New Page Navi For Blogger With Scroll

December 10th, 2009

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)
After Long time not post in my Blog. I didna’t post anything because I was busy for my Dissertation for my Doctor Defense. Alhamdulillah now I’m graduated (not in web designer, my major is not related with web designer)
Now I want to give all of you beautiful Page Navigation. Like I said before in my comment I’ll make new Page Navigation that can support more than 500, and now this Page Navigation can support more than 500, Alhamdulillah.
To make it beautiful I used New Pugin from WP Paginator
This Plugin call Paginator 3000
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)
To see the result open This

Demo

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Dona’t click the checkbox which says “Expand Widget Templates”
3. Find this

	
]]></b:skin>

and replace it with

	
.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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/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>

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

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

Change based on your blog setting :
var postperpage=7;
var numshowpage=6;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page

only That, I hope it can work and make your blog easy to navigate, amiin

1. Six Styles Page Navigation for Blogger
2. Numbered Page Navigation For Blogger New Script
3. Page navigation for Blogger with Google Style
4. Page Navigation for Blogger (Problems Solved)

Categories: Blogger Tricks, Featured, Page Navigation

Tags: Blogger, Page Navi