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
- Six Styles Page Navigation for Blogger
- Numbered Page Navigation For Blogger New Script
- Page navigation for Blogger with Google Style
- Page Navigation for Blogger (Problems Solved)
83 Responses to “Beautiful New Page Navi For Blogger With Scroll”
Leave a Reply
Asalam o alaykum Farhan bhai !!
first time i use this script page navigator
but not apearing on my blog whats wrong can u help me !!!?
[...] شكرا لصاحب هذه الاضافة الاخ abu-farhan [...]
What an idea sir ji!
Help me, please!
and to me, just – not working about a week.
I really liked this method of navigation.
You can help to work again?
I think that does not work
http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js
Help me, please!
_____
P.S. Please excuse me if I spelled correctly – do not know English and I used translate.google
I Updated my script please copy and paste again to your XML
Waaaaaaaaw, you are amazing!
I love you because you helped me.
I hope you waaaay many joys!
step two went after I posted so:
_____________________
var home_page="/";
var urlactivepage=location.href;
var postperpage=1;
var numshowpage=6;
__________________
Thaaaaaaaaaaaaaanks!
var home_page="/";
var urlactivepage=location.href;
var postperpage=1;
var numshowpage=6;
I do not see him.
I mean not the first:
You so many script, I can’t see the script
I wanted to say that is an error in step 2 (first line should not be closed)
I tried to post as it should be – I knew he did not take the script
i still can’t understand what is your meaning?
hi, paginator is not working anymore…
what happened !!
and to me, just – not working about a week.
I really liked this method of navigation.
You can help to work again?
I think that does not work
http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js
Help me, please!
_____
P.S. Please excuse me if I spelled correctly – do not know English and I used translate.google
Hi the script is not workin any more
pleaze the new code send to me.
does not work??
Hi my friend this tabbed bar script not working please post the new edited working script
thank you
nice tutor bro. patut di praktekkan neh
awesome thing but how can i hide some widgets which are hidden on the main page (or some other exact pages like ‘about me’) but displayed on the second, third and so on pages?
Hi Alexey this should help you out
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html
thanks, that would probably help but today this widget stopped working in webkit and mozilla browsers, still works in opera and IE though.
Very nice tip :D I can’t wait to try it out on my blog :D thank you so much
Thanks farhan
I has been tring lot of codes from different sites for long time but they didn’t work for me. I am so happy this one is really working (unbeliveable)
Thanks farhan
I has been tring lot of codes from different sites for long time but they didn’t work for me. I am so happy this one is really working (unbeliveable)
hai, such of good site, I have tried your Tutorial at my blog (endigolabs.blogspot.com) but i have facing a problem, can you please visit my blog to see what problem which i facing on???
your “page navi widget” position is behind my body post, can you help me please????
Good job brother…
Salam .
Thanks Farhan Its Working In My Site .
شكرا لك
cool !!!
i’ll practice this stuff now..
thx for your tutor :)
assalamualaikum wr.wb.
:p great job bro.. he..he..he.., anyway punya tutorial / script buat masang slider dock menu(apple) di blogger ga? kl da posting juga ya…
thanx..
sudah saya praktekan, bagus memang. kang abu hebat nih. masang tulisan widget by bu-farhan nya. bagus banget buat copyright.. ampuh nih tutorialnya…
bismillah hello ı am turk ı read your all text but ı have got a questions ı cant do this..If ı give my account password can you do ? please my account cihatkora@gmail.com
send to message please ı will give my password
I’m sory, I can’t understand what is the problem?
http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/ ı cant do this nafigation if ı give my account can you do it for me ? Please
ok, but I only have time on saturday or sunday, this is my email admin@abu-farhan.com
ok
Subhanallah….Navigasinya beda lagi nih dari yang tadi..ini lebih bagus lagi. yang ini aja ahh yang kupake…
Assalamualaikum wbt!
I am writing to you because I like your tutorial as well as your job that you create. I can’t believe all these for free. Thank you Abu Farhan. Hopefully Allah will give you a lot of Pahala.
I have a few questions regarding about this hack. My question is:
1. Is it possible to hide our pages or post such as contact form, disclaimer and thank you post since we are using this page navigation on blogspot.
2. My purpose is to hide all those pages. So, when user of my blog click on page navi until the end of page and my contact form post and all of them exlclude in it.
Thank you.
I can make like that but I have to change the script, I still busy for now to change the script.
For that purpose Blogger now have Static page like WP you can put your contact , and other page to that static page.
Hi again, I did that before. For your information, I am using read more pages which is 5 posts in the homepage.
When I click on static page such as contact form, I cant view it at all. I dont know why.
That’s why I come here to ask help from you. Since you are busy, I can wait. Thanks
Please give your blog link and I can check what is the problem
here is my blog link http://bukitbesi.blogspot.com
glad you will help me. Thanks Abu Farhan
if possible, you give any suggestion or comment about my blog. I really appreciate your help, furthermore I cant believe that you reply my message asap. Mashaallah, A professional blogger like you view my blog. I am newbie however. Thanks Abu Farhan. Thank you
In your blog used old page navigation, which one do you to make ?
I am prefer old one. to me it is better than the rest. or u can suggest me. since u know better than me. thanks Abu
ass. makasih atas triknya, tp knp di blog ana pas dipasang dibawah page nav, ada tulisan Widget by Abu Farhan, gimana cara ngilanginnya, mohon dijawab secepatnya. trims.
can u help me that how can i change my bloger adress to .net or .com is that possible or not replay me as soooon as possible at my email
Assalamualaikum..
Its not working on my blog I have tried it on http://genuinedigest.blogspot.com/
can u tell me what could have been a problem ?
I have done everything as u said.. but it is not even showing the buttons. no change on my blog…
thanku sir , very usefull
coba dulu….thanks kang abu
Salam
Hey Bro, Can U upload paginator3000.js in other services? Cuz we can’t acces it from Iran!
ThanX
I installed this on my blog but it doesn’t seem to be showing up… is there something in my template interfering with it and stopping it from working?
Thanks man, you are the best.
Would it be possible to make it work for this template:
http://btemplates.com/2008/03/09/literary-life/
?
Thans in advance.
As a webmaster , I’m very glad to find that someone brought up this topic.
Quite a few people just don’t understand what all is needed in this field, and I think also we are all too often underrated
or taken for granted. Never the less I’m very glad to see that you may feel the same way I do , thanks so much for your blog!
baraka allahou fik wonderful work im using yours on my blog your bro from tunisia
isogamesdownload.blogspot.com
Generally I do not post on blogs, – but I would like to say that this post really forced me to do so! really nice post.
Must say you`ve done GREAT stuff this time. I created the Paginator too for my blog but that is based on your older page navigation. This one though, without all the drawbacks is great. Will install your code soon. Great Thanks to you for providing this hack with all the drawbacks removed, Thanks again :)
very cool
thank u so much
Beautiful! Yes it’s just beautiful!
nice job brader….
awesome… pokoknya kasih jempol deh :D buat kamu…
akhirnya ada juga yang lebih dari 500 posts
langsung pasang nih
numpang blogwalking
http://www.takeaworld.com
Just Another Full Download Site
Jazakallahu khairan akh.. bagus banget artikel artikel antum.. semoga Allah semakin menambahkan ilmu kepada antum yang banyak dan bermanfaat
Amiin, waiyyakum
bagus kang
kebetulan blogku gak ada accesories sama sekali wkwkw
semoga mantep
ok silahkan, kalau mau review juga silahkan
Assalamualaikum
bagus sekali, setelah melihat demonya, saya benar2 tertarik dengan widget ini, terima kasih
The first time I saw this kind of page navigation was on WDL, I can’t believe that you’ve made it works on Blogger. Congrats, it’s just amazing, I can’t wait to test it! You are a genius. =]
Yes this page navigation very popular, SM make post about many type of Page Navigation and someone just made this plugin for WP last month, and I read this plugin from Tuts+.
Thanks for coming here, you are the best Original Blogger/Web Designer.
saya udah coba berkali-kali tapi nggak bisa juga, masalahnya terletak pada ‘data:label.url’ ada 3 di blog saya apa harus ditambahin semua?
bisa tau link blog nya ?, nanti aku cek salahnya. asal pasang scriptnya dulu
link blognya rudyazhar.blogspot.com
Bisa muncul kok Page Navinya, tapi yg label belum dipasang Max nya jadi utk label masih ga muncul.
Btw di blognya kebanyakan scriptnya jadi agak berat dan ada Popupnya beberapa jadi akhirnya script page navi kadang2 ga muncul karena mungkin paling akhir dipanggilnya
tapi yg label belum dipasang Max nya jadi utk label masih ga muncul maksudnya gimana Abu? saya udah coba pasang ‘data:label.url + "?&max-results=7"’ tapi malah widget categories malah enggak muncul…
Satu lagi Abu, cara ngilangin poup gimana? udah saya ubek-ubek masih nggak jumpa..
harusnya bisa, itu gunanya membatasi postingan maksimum sesuah yg diinginkan, karena secara default Blogger selalu 20.
Itu aku ga tau popupnya dari widget yg apa.
Assalamu Alaykum Bro,,,
Masha Allah wa Alhamdu lillah,,,
Congratulation akhi
nice work you do for us,,,May ALlah bless you!
Keep it going Akhi
Wa’alaikumsalam, amiin
Jazakallahu khoiran ya akhi
[...] Beautiful New Page Navi For Blogger With Scroll [...]
Abu Farhan you are the man!!!! thank you sooooo muchhhhh!!!!!
[...] Alhamdulillah New Page Navi has been finished for normal view, from my previous post using Paginator 3000. For the next post I will give you Normal Page Navigation for blogger but before that I’ll [...]
Oh The Smartest Indonesian Blogger is Back, I am very happy and I really can’t wait for next Post Abu ….
Doctor Course !!!! what is that ???? 8 years after high School ???
waduh jd kepengen yg ini nih page navigationnya, tp males ngedit” laginya BOS…awesome…mau review keduluan ama CHOEN…hsuahsuahsuhauhsua thanks a lot Abu Farhan