Five Styles Page Navigation for Blogger New Script Part 2
May 30th, 2011
Bismillah…
As I promised you in my 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 Blogger.
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;
width:500px;
font-size: 0.8em;
padding: 0.6em 0.5em;
background-color:#000000;
text-align:center;
}
.showpageNum a,.showpage a {
text-decoration: none;
padding: 0.3em 0.5em;
color: #055d90;
white-space: nowrap;
color: #ffffff;
margin-right: 0.1em;
}
.showpageNum a:hover,.showpage a:hover {
color:#A30A1A;
text-decoration:none;
background-color:#ffffff;
}
.showpageOf{
margin:0 8px 0 0;
display:none;
}
.showpagePoint {
color:#ffffff;
text-decoration:none;
background-color:#A9061B;
width:36px;
height:16px;
font-size:12px;
padding-left:5px;
padding-right:6px;
padding-top:3px;
padding-bottom:4px;
}
]]></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 page navigation with Google Style using new navigation script.
Alhamdulillah…by Catur
Another post about the page navigation for Blogger :
444 Responses to “Five Styles Page Navigation for Blogger New Script Part 2”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
salam bro Abu Farhan,
thanks a lot for sharing.
is there any way to put the page navigation on top of the page also? i mean, the page navi will appear both on top and also at the bottom.
TQ :)
Not working for me although I completed all the steps above.. Maybe its my template. Nevermind.
wah terima kasih kang ;)
Salam brother.
I have tried almost all tutorials online for page navigation and followed all steps carefully but it is not working for me. Nothing shows up.please tell me what is wrong with it.
waiting fro your response.
jazakAllah
Wa’alaikumsalam
the problem usualy from the template, because the template delete some normal syntax from normal template
hi
i installed the page navigation and it worked on the home page, however when i click on the tabs the pages still shows “older posts” and “newer posts”;i connected the labels with the tabs..here are the codes:
Songs
Videos
Mixtapes
Suggestions
<b:include name='quickedit'/
please help!!!
You have to follow all steps
Hi!
I had no problem getting your pagination to work, but…
I used yours because others I tried limited content to 500 posts. While I have seen evidence that there are people using yours on their blogs that can go beyond the 500 — some in the 3000s — mine will not go past page 18.
I had it set to var postperpage=50;
var numshowpage=10; and under “formatting” in blogger, I made sure the numbers matched: show at most 50 posts on the main page.
So why, for me, is it still cutting content off at page 18?
not working pls help
which part that not working…
nice tips, langsung k TKP :D
Assalamualaikum,
I’ve tried with instructions given. I tried on my trial blog it was fine. But when i tried on my another blog the navigation doesnt appear. Still sticked the new and older post link. I need help if its fine for you.
My blog is temporary limited to author only. Ive uploaded the code in this link:
http://www.filefactory.com/file/cc5058f/n/help.txt
What is missing or the mistake? I removed back the navigation code.
i can’t find Javascript for this widget in your code that u sent to me..
(http://www.filefactory.com/file/cc5058f/n/help.txt)
please make sure, you follow step 2 (Aplly Javascript)
i use one for my blog. thats great tricks for blogger.com
Hi Farhan/Admin, nice work, keep it up, can u please tell me about the limit of post for these script as I believe all the navigation script of blogger only support 500 post. I have more than 500 post can u please help me with it.
Thanks
This Trick unlimited try to your blog and you will see more than 500 post can show the page navigation.
salam did you got my msg?
Simplex template using javascript at frontpage no post at your front page.
The Template not SEO friendly also. The template cant show post and page navigation.
Bismillah, Alhamdulillah
salm alukom dear bro
how are you?thanks for all your work masshaAllah>>>
i try this one with my blog but didnt work with me and i try so many other one but nothing and on many things>>>http://simplexenews1.blogspot.com/
that was the temp i use,and this my blog http://semo-freedoomegypt.blogspot.com/
i want 2 ask you bro 2 help my plz in this ?? i wait inshaAllah for ur reply??
Thanks you Abu Farhan
Greetings from Egypt#ِAbu Hanin
Very interesting and useful your article. I’ll try for my blog Anunturi gratuite Buzau
Congrats !
Hi petronius, I agree with u dude. Its great that abu-farhan works hard to bring new look to blogger.
Great! I have a question, is it possible to center this widget on my blog?
just make tag…
— your content here —
hihihi :)
<center> — your content here — </center>
wekekekekkk forget phrase LoL
Like Beben Koben said…
<center> — your content here — </center>
but this way can’t be used in this case. because you can’t find the HTML script for this widget in the menu Design => Edit HTML.
We should use CSS script to solve it,
Find this
.blog-pager,#blog-pager{
and replace with this one
.blog-pager,#blog-pager{
text-align:center;
Hi Maya, You need to just the css and make sure that align property should be center. So that the widget will be displayed in center.
Thank you so much. This is very helpful!
Your are great! I have seen some blogging trick which I have never seen before. Thanks friend for sharing this valueble tricks..Wish you great future..!
Lucky Bhumkar
Nice tutorial, i’ll try for my blog..
can we use it in blogger tube?
Yes you can try
Yes, off-course hammad. Its seems to be working fine.
good post ,thank you for sharing
[...] Five Styles Page Navigation for Blogger New Script Part 2 [...]
Trima kasih banyak kang Abu, saya Izin pake, trims..
the blogger not give any feed json for date archive.
Ok, thanks for the reply. I would definitely use it if I didn’t have a date archive on the blog.