Beautiful New Page Navi For Blogger With Scroll
Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)
After Long time not post in my Blog. I didn’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
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Don’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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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://all-in-one-blogger-widget.googlecode.com/files/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://all-in-one-blogger-widget.googlecode.com/files/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)
Related Articles :
Comments (36)
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