Five Styles Page Navigation for Blogger New Script Part 1
May 28th, 2011
Bismillah…
Let me introduce myself, my name is Catur.
I am new staff that will work with Master Abu.
Nice to meet you guys …=)
This styles page navigation i got from WebDistortion but in these blogs do not provide page navigation for Blogger. So I have to convert it first so can be used in Blogger.
Maybe in the pagination style that I made not exactly the same as the original, but I try my best to make it seem like the page navigation at the original website.
This is view of those Page Navigations
This Demo for All CSS Style Script :
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>
Copy the css script from the demo file.
Then insert the script in front of
]]></b:skin>
Example :
.blog-pager,#blog-pager{
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:12px;
width:500px;
}
.showpageNum a,.showpage a {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
border:1px solid #97a7af;
margin:0px 1px 0 1px;padding:3px 8px;
text-decoration:none;
color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
}
.showpageNum a:hover,.showpage a:hover {
background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');
border:1px solid #e4905a;color:#e4905a;text-decoration:none;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;
margin:0 3px 0 3px;padding:3px 8px;
line-height:14px;cursor:pointer;white-space:nowrap;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;
}
]]></b:skin>
Step 2 : Aplly Javascript
Find This :
</body>
Replace with :
<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>;
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
</body>
Change based on your blog setting :
var postperpage=7;
var numshowpage=4;
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 (all of this text in your xml or template)
'data:label.url'
and Replace with this
'data:label.url + "?&max-results=7"'
Change 7 base on how many post every page
In the next post, I will give you 5 other styles page navigation…
If you have any questions please leave a comment. thank you
Alhamdulillah…
Another post about the page navigation for Blogger :
45 Responses to “Five Styles Page Navigation for Blogger New Script Part 1”
Leave a Reply
yang druppal warna teks nya hitam.,tp ketika diblog saya warna teks 1,2,3,nya kuq jadi putih yya??
Cek css temppatenya
oke @admin. masalah tu sudah teratasi. rupanya cssnya yg harus dirubah warna menjadi hitam#000; seperti dibawah ini :)
#blog-pager a, .page-nav a:visited {
color: #000;
text-decoration: none;
}
#blog-pager a:hover {
color: #000;
text-decoration: none;”
OKE.ADA PERBAIKAN SEDIKIT SAMA SKRIPT DIATAS., YAITU tidak ada titik koma sesudah close script ”
var downPageWord =’Next’;
;
” kalo ditambahin titik koma nanti ada penampakan di bawah footer’a :) terima kasih.
oya. mau tanya satu lagi.? page navigator ini tidak berlaku untuk halaman posting yya?? dihalaman home page dan nextnya saja???
;
tidak ada titik koma sesudahnya:)
halaman posting bakal banyak bgt numbernya nanti
thanx 4 the widgets i aply on my blog thanx a lotsssssss
Thanks a lot bro. i used the yahoo style on my blog.Please check and comment.Blogger Tricks.
Have fun here for the efforts that you have got place in this. intriguing info .
You might be so cool man, the post upon your blogs are super great
Assalamu’alaikum abu farhan,
thank you for the code. I have installed it in my blog abbazisme. But i face a problem and still confusing how to solve it. The pagination is appear and looks good. But when i want to jump to page other than page 1, the pagination vanishes. Please help me to solve the problem.
Thank you.
wassalam,
abbazIsMe
Mr. Abu Farhan or Mr. Catur, if u look into my site, it doesn’t have any page navigation at “categories” and “search” page.. the problem is, i’m not familiar with CSS at all..
when i read you tutorial, i cant even found “Layout>Edit html” in my dashboard.. T__T
will u help me please? what should i do first in wordpress-bronte theme?
if its okay with you, will u give me step by step tutorial for me?
thx a bunch before.. ;)
thanks its great post. I have used this page navigation script on my blog
Bismillah, Syukran for the tutorial navigation pages. and I have a question about
How do I display the page navigation on the label?
Follow Step 3
I have try but still not working , please look in my site
I can see page navi at your blog on label position
mas abu… page nav nya kepotong jd cuma keliatan setengah.
ini blog gw
http://bretyapatisena.blogspot.com/
please help me…
makasi dan bagaimana caranya widget html related posts pada blogspot bisa pakai Page navigation?
thanks and can you help me?
thank very much abu
thanks your blog have some javascript that make my javascript can’t load.
very nice………………i m happy……………….thnx fr posting
common dude,,i’m so happy that you shared your ideas and it really works as well, but the things that makes me upset is….you just kept your advertisement below the navigation bar, could you please remove that advertise??????????
Catur, this script has the same limitations, the
earlier, for the amount of pages?
For in my blog was kind of weird.
is not because of limitations…this widget is unlimited..
You may use google translate to view this page includes demo page.
because when I saw your website . I found this
.ShowpageNum a, showpage fundo a { : url transparente
different with my scripts.
.showpageNum a,.showpage a {
background:transparent
to solve it,..
- remove all css styles of this widget
- just follow Step 1 (Apply Style).
do not use Google Translate when copying scripts.
Oh..Yahoo style is very cool . I will apply this navi for my blog.
Yahoo style is very cool . I will apply this navi for my blog.
Mas, aku minta pencerahannya dong…
bagaimana caranya widget html related posts pada blogspot bisa pakai Page navigation? karena related posts yang ada sekarang ini tidak memakai Page
Mohon Pencerahannya…
Terima kasih
Related post yang mana ya? Yg dibagian bawah postingan?
[...] blog: Five Styles Page Navigation for Blogger New Script 1, [...]
[...] Five Styles Page Navigation for Blogger New Script Part 1 [...]
[...] previous post. I’ll give you five new css styles for your page navigation. just like “Five Styles Page Navigation for Blogger New Script Part 1“, i just convert from the collection of WebDistortion to css styles for [...]
Hi! It’s not that I don’t respect your work, but I’d like to remove “Widget by Abu-farhan” for my blog’s homepage. Could you teach me how to do that, please? Thank you very much. And I totally understand if you can’t.
css styles are not working…
+ the labels are so crampt….
plz help i want to use yahoo style…
my blog :
sahil-tech.blogspot.com
find this:
.jump-link
{
margin-bottom: +20px;
then replace with :
.jump-link
{
margin-bottom: +20px;
}
you forgot this “}” on your script..
oh…silly mistake…many many thnx..
a little prblm…
its working now but looking as if the top 1px or 2px are cut off(see my blog once…)
any fix for that?
Ok..try this
find :
.blog-pager,#blog-pager{
font-family:”Times New Roman”, Times, serif;
font-weight:normal;
font-size:12px;
width:500px;
}
replace with:
.blog-pager,#blog-pager{
font-family:”Times New Roman”, Times, serif;
font-weight:normal;
font-size:12px;
width:500px;
padding-top:20px;
}
by adding “padding-top:20px;” can fix it…insyaallah..
makasi banyak mas ini sangat keren
nice amazon style…
sukron :)
Hi Abu, i did all, for me the numbers apears, but for other browsers the page navigation dont show up… can you help me?
I resolved the problem, ty! :)
ok good,
But you not follow 3rd step for your label
Ok i changed… but still having the same problem
I tried your blog using ie8 and chrome
for ie8 can show you page navi,but for chrome cant’t.
I tried my demo can show page navi i all browser.
The problem is in your blog have some javascript that make my javascript can’t load.