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
Step 1 : Apply Style
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Dona’t click the checkbox which says “Expand Widget Templates”
- 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="/";
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
170 Responses to “Beautiful New Page Navi For Blogger With Scroll”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
use these just once or twice for…
every 100 words to avoid exceeding the acceptable keyword density. the way to write a good blog that gets real traffic is quite simple really. make it interesting, entertaining and informative with everything in its ‘right’ place. you don’t need to…
I provide Chinese translation service…
[You really make it seem so easy together with your presentation however I in finding this topic to be really something which I feel I might never understand. It sort of feels too complex and very broad for me. I am looking forward for your next put up…
your page number very awesome. i like it. thanks for sharing mr abu farhan. you can view my blog here http://daftarsemauku.blogspot.com for check your page in my blog heheheh
Assalamu’alaikum
I want to ask.. :-)
How to make this navigation appear in homepage of blog?
because this is only appear in my post(every post) not in my homepage.
Thanks before..
see what works. play around a bit…
to find the things that work the best with your site so you can do what is most productive.invite other bloggers who have found success to write guest blog posts on your blog. this is a great way to increase the…
Can you add Total Page along with widget by can you do that…..
I follow step 3 but nothing. Is there something wrong to the code?
thks for your widget…
How can i edit number font size?
this is very small now…
hi dear i have installed this widget but works only @ homepage what should i do???
you can see mobilemillion.blogspot.com
Regards
Mobile Million
It is very good, Thank you
Selamün aleyküm kardeş.Allah razı olsun senden.5. kez uğraşmam ama yılmadım.Bu arkadaş müslümansa yalanı olmaz dedim ve nerde hata yaptığımı aradım.Hatam şuydu ; Diğer arkadaşlarada belki örnek teşkil eder.
Sayfa translate olarak değiştiğinden tabiki kodlardada bazı değişikler oluyor.Html kısmında değiştiği için kodu bulamıyorduk.Orjinal çeviri yaptıktan sonra oldu.Diğer bir konuda yazılan kodda araların açık kalması.Bunlarada dikkat edilirse çok arkadaş başaracak.Bende başlarda yapamayacağım dedim ama başardım.Tekrar teşekkür ederim.Sizi izlemeye devam edeceğim.
AOA Farhan,
first of all thanks for having such an informative blog and sharing such wonderful things. Second I have configured this Page Navigation on my blog:
http://handsetbusiness.blogspot.com
But the problem is its configured on my main Home Page but not on others. I am using LINK LIST as tabs. I need to know how can I configure this NAVIGATION on those pages?
Third This configuration just eliminates
“HOME” Button right down in between Older and Newer Post options?
How Can it be left working or any other solution that can bring the reader to the home page?
Thanks
Zee
I ADORE this pagination method BUT I am using one of the new Blogger templates and I don’t seem to be able to add the script you provide…. It is there but it tells me that some of the XML settings are left open or are not closed. I KNOW NOTHING about coding… so you have to explain as if I was a 2 year old child, possibly worse, since 2-year-olds are better at this than old ladies like myself.
Thanks so much IN ADVANCE for any help you can provide to include this pagination “beauty” to my Blog. The template I am using is “Awesome” or words to that effect. Hope you get back to me. Best, PUCK
So many times i tried this trick, but not workout.. please help me sir…………
i specially request you sir…
I installed this page navigation on my blog, now I want to add links such that when some on click the link it will be directed to the page with posts with some specific label but after adding that link when I try to save it gives error 500.
if I remove “&” from link I work but then on redirected page page navigation don’t appear
Help me out of this.
Thanks in advance
धन्यवाद. बढ़िया काम करता है.
i have blog-pager and still doesnt work like either of navigation from you site,but i really need one.
The only difference in other psot you write to put belove blog pager bsection or ending body,i dont have bsection near blog pager and when i put it above ending body nothing happens.
I have codes from this tutorial on my testing site,please take a look and help me
http://zaifootprebacit.blogspot.com/ what should i do ?
hi abu,i use your amazing widget on my blog http://varis-vanjava.blogspot.com
But i found a problem,why this pagination is not show on safari and Chrome ?
You are using my old Page Navi, I can open my demo from Chrome
okay,thanx abu.
i now understand.i must replace blog-pager from default template by spicytricks with new code.
Thanx abu, because of you,my knowledge to be increased.
Duh cape pake basa inggrish terus,pokonya terima kasih ya. :)
bravo !
[...] Now I’ll show to all of you that my Page Navi for Blogger can use more than 500 posts. This page navi not only for normal Page Navi but also Page Navi using Paginator 3000. [...]
Asalam-o-Alikum i have used this on my website but there is little but big problem in it that when we open some post it vanishes…. I want to show as it is when post is opened… when i open any post there is old post and new post is written kindly fix this error please
if you open one post, it can’t show page navigation because not show some posts or category
i am not sure i understand you in this regard. do i need to show the category in each post to solve this??
(in a specific category)after clicking read more i will be transferred to the complete post page/display.
after finishing reading the post when i click next post, i will be taken to post from another category as the ordering is depending on date/time of posting.is there a way in solving that i.e. i shall be moved to next post in same category i.e. in this situation (when reading specific category)when finish reading the post the next button shall move me to next post from the same category?
Hi. Interesting theme nice. Congratulations. Thanks..
kok pasti pesannya gak ada tag html ya om. mohon dicerahkan.
terima kasih
Asalam-o-Alikum, I just tried to install this page navigation on my blog but it didn’t worked. I don’t understand where the problem occurred. Can you help me with this. Please !
Wa’alaikumsalam
You dont’t have id=blog-pager
The script need that id to replace with page navigation
bisa d kreasikan nice, infonya gan :D
Hi, i feel that i saw you visited my website thus i came to ¡§return the want¡¨.I am trying to find things to enhance my site!I assume its good enough to make use of some of your ideas!!