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 :
38 Responses to “Five Styles Page Navigation for Blogger New Script Part 1”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
than good. there’s no right or wrong…
answer to this. but if you are writing a 500 word article in less than an hour you are definitely heading down the right path.i’ve got writers blockfear not. we all have writers block days where every word feels like it…
just sum up all that you have…
said in your post.it will leave an impact on the reader’s mind and he will be compelled to think about your post even after he has finished reading. always relate your article to the reader.that can be done by either telling…
thanx 4 the widgets i aply on my blog thanx a lotsssssss
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
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.
Follow Step 3
I can see page navi at your blog on label position
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???