Bismillah, Alhamdulillah

Skip to Content

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

Paginator3000

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 + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post every page

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

For All My Page Navi Can read from Read this :
  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: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

202 Responses to “Beautiful New Page Navi For Blogger With Scroll”

  1. […] or try some more styles given by ABU-FARHAN in his blog:-1.Six style page navigation for blogger2. Beautiful New Page Navi For Blogger With ScrollAlso look his these navigation posts:-1.Numbered page navigation for blogger new script2.Page […]

  2. […] is a very cool and beautiful pagination widget by Abu-farhan. The cool thing about it is that you see all the numbering of pages in one page.I mean to say that […]

  3. […] →製作數字分頁 (from 香腸炒魷魚) 一開始最想做的是這種很質感的拉桿 […]

  4. The next step is to find out where this leakage is occurring.
    ISO 14000 training teaches standards for hazardous waste management and will
    give you the same education regardless of whether you take the course online or in a classroom.

    The role of first party auditing in relation to a quality system.

  5. Rehan Zafar says:

    sir new blogger interface did`T sohw me *]]>* n the templete section……what can i do?
    help me
    im waitng your answer on this page…….plz do something……..because i ove this pagenavigation for my blog…….Thnx
    [Sorry for My Bad English]

  6. Adnan Warsi says:

    Hello Farhan, As this widget not easy to install on customized blog, kindly favor me to install this widget on my metro UI template . i spend 4 hour to install this with different tricks but failed :( kindly help us to install on my metro UI template .

    Following is template link for your refrence
    http://templateism.com/blogger-templates/Metro-UI-Blogger-Template.zip

    Hope u’ll reply me with success

    Shukriya in advance

  7. Veteasabertu says:

    Thanks!, too useful.

Leave a Reply


+ eight = twelve

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen