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
196 Responses to “Beautiful New Page Navi For Blogger With Scroll”
Leave a Reply
pekerjaan yang hebat , blogger yang mengharumkan nama bangsa , saya berharap bisa seperti anda tapi bagaimana mungkin? :D
nyoba ditaruh diwordpress ternyata gak bisa :D
ya ga bisa lah, di WP ada plugin sendiri utk ini
i already tried many navigation widgets for my blog..,,thanks
ini hal sangat bagus untuk pemula blogger seperti saya makasi om farhan.,,,,
makasi ini ajib beer mas om farhan ,,,…
ow ini sangat ajib dan bagus untuk saya makasi om farhan.,,,
ow ini amazing scrip ajib bener om farhan makasi banyak
thx, but i think i, get a problem it,s not work in my blog, would you help me…….
senang berkunjung kembali :D
terimakasih , Segera saya coba :D
Hello can you please tell me how to remove credit widget by it not cool can you please tell me.
Thank You
Definitely maintained and respected trap directory. Free admittance and moderation. Go on increase your link and you wish feel the power of our directory. setakowa.
drag mouse is not working, huhu. Please help. Thanks.
Makasih banyak bang admin atas infonnya ..
Download Film Baguz hannya di sini
Thanks sob .. :D
Muito bom =D
–
Very good ;b
it’s nice but one problem!
i hate when it says Widget by Abu … instead of total page number (like shown in the screenshot above) ….
Hello Abu Fahran,
Congratulations on this great improvement.
No problem except when you click on previous (with firefox 4.0), the page displayed is not the same.
Apparently there is no problem with Internet Explorer 7.0.
Thanks again for your work.
Great ,,,Very Good ,,,
Great blog, Just wanted to comment that i can not connect to the rss stream, you might want install the right wordpress plugin for that to workthat.
Just wanted to give you a shout from the valley of the sun, great information. Much appreciated.
Muito obrigado, finalmente consegui concluir com sua instrução.
Ótimo site!
Farhan, saya coba di template “masonry” kok ngga bisa ya ??
Mohon pencerahannya.
Terima Kasih
makasih mas,,infonya sangat membantu
bonjour
merci pour vos astuces!
pour mon blog j’ai mis en place la numérotation et ca apparait en haut du blog
je voudrais que ca apparaisse en haut et en bas du blog
merci de votre aide
sorry but i don’t write english very well
Hey, I have followed all the steps you showed there, but I am not getting it, although everything is saving perfectly, I am not even etting newer and older page links at the bottom, Please vistit my blog and help me . . .
Thank u Sir
aku suka dengan ini mas, semua artikel mas hampir semua saya coba hehehehe…
terimakasih banyak :D
I love this widget.. just installed it on my blog.. Thanks Abu :)
asli, keren abis widgetnya… sukses selalu buat abu farhan
Thank you for this article, you are great teacher :), i am learning a lot of from you
Great Job
Thanks
I’m glad I found something better job TKS.
Thank you very much for this!
Best ever thx a lot u are doing a awesome job ! thx again
Awesome story it is without doubt. We have been seeking for this information.
[...] Existe um script que faz iso por vc : chama-se Paginator 3000 :) do Abu Farhan. [...]
Parabéns pelo post, sempre que preciso de novidades e atualizações venho até aqui, os blogs brasileiros estão um pouco fracos em relação a tutoriais e quando temos alguma dúvida é dificil o retorno.
Sou super fã do seu site.
Abraço
Wow.
Great…
Very detailed guide.
Thanx bro.
VERY ELEGANT >> see it in my blog
THANK YOU ABU FARHAN
Mas abu. Bisakah widget ini tanpa ada tulisan “Widget by Abu-farhan”. Biar lebih indah?
Lagipula saya yakin, dengan adanya tulisan itu pasti tidak banyak orang akan memakai widget ini. Sekedar usul, menurut saya tulisan itu tidak perlu di tampilkan. Kalau tujuannya untuk SEO, mas Abu pasti ahli dalam hal ini. Tapi kalau bertujuan untuk memberikan, lebih baik tulisan itu tidak ada. Jika postingan-postingan mas abu bermanfaat, pasti semua orang akan selalu mengunjungi alamat ini. Tidak perlu dengan cara seperti itu. Terima kasih
Terrific This really is one of the most beneficial web sites I’ve ever come across on this subject.
Muito bom !,
Simples , Pratico e Organizado
Parabéns.
como vc fez para o seu ficar transparente? o meu ficou dentro de um espaço branco
hi dear how are you
Thank you I liked your great work
eyedea dead
gold prices and currency
Muito bom mesmo. Consegui instalar no meu blog e ficou muito bom. Usei o modelo novo do próprio blog e deu tudo certo. Crazy! Thanks
its work ~!! thx ya i like this hack ~
Very good! Congratulations…
[...] Buradaki link ile http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/ [...]
it’s not working for my blogger template… i already tried many navigation widgets for my blog… but none of them working…please help me how to make work this widget in my blog…please any one help…
Its not working friend. plz help
hi the code is offline, dosn’t work http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js