Numbered page navigation for blogger With 8+ new styles ترقيم صفحات البلوجر |Free Tools

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdeQNSJoekFk2t8otoOgi_AUhk4uEQVg4WwTiNkptQygPRi3TKY3oF2kYDxk35qOYfPnTFzucX1nyi9O79LyGFktOwJtH-LN892bSLyPIlbiaOYTuzg9eaNF8ZgY-FQyALwm9LgF6NtfvX/s1600/Numbered-Page-Navigation-for-blogger.gif

Today we are going to see how to add a beautifull numbered page navigation hack in blogger. The default navigation links (i.e Older Posts) are not visitor friendly if you are having a large amount of posts and readers.Few bloggers has some problems with previous Page Navigation script. Now here is a completely new and working script for Numbered Page Navigation (i.e. Panigation) for Blogger. The pagination widget for blogger make it simple for your visitor. Its a must have widget for any blogspot blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.

Here's the steps to add Numbered Page navigation to your blog:

Instructions To Follow:

STEP #1
Log in to Blogger,go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJDWYRKRfGyTzHR9YiPqGy2Z1ObM7J511-AECGFidDfo7tn3lzBU9eWZTr3GutFXgQtrImdT0PRsu_t2P8NDRgVwFRrQSFCCe4gokQrTTKY6ReJlr13vSYCFff1zp9Fd7V-1l2D-g8qVO/s1600/Image+5.png

STEP #2
Now find (CTRL+F) this code in the template:

</body>

And immediately before it, paste this code:

Here you can change Prev and Next Text.

var postperpage=7;

var numshowpage=4;

Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation

e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;

STEP #3
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this CSS Style Code to Your template

You Can change the CSS Style of Navigation just replace the above code with anyone of the bellow codes

style 1 :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDjccDiXTXqKw_YwuVuQ6QDwajuHKTOu7B2INx2HPVJP5OuLOVu6Ur3Y6N1BdYxBNvKfFliDqkSzHMGjNk9t86ahmpR-hYdGOeAwb21gG9iLSKj-gSouK3aFsncxd4P912Qnzyg_DZ3MP/s1600/Styles+Page+Navigation+for+Blogger-1.gif

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

style 2 :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo0sJsJ8LE65Cy4C250lkMd2iBHe-J9cOBRUdMOMlZXr9tnD3CqY8tEykdN4f1vmeVq_zS8xLKywYaCnrOGU0Yj_wbt-A5wWandgui4McqwJfo8rb6CTwsIj4hMTg6gfV9rSOfHwqFQAl4/s1600/Styles+Page+Navigation+for+Blogger-2.gif

.showpageArea {
font-family:verdana,arial,helvetica;
color: #fff;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #333;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #666;
}
.showpageNum a:hover {
background: #888;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #da6100;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

style 3 :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDuVJBdDjJ2K05pyxtkUh21KeJU5wRLBQmmDzUzkwuLDy-O6IQ1LgtdSIa2JZnsOPpfgTevVysOgrunKMYiveVHzhmcJsTBB0fxlEAYaENbF9vjmg7Mj03zioi8TX31VTHUICkT_CCXIX0/s1600/Styles+Page+Navigation+for+Blogger-3.gif

.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 -25px repeat-x;
}

.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}

.showpageOf{
margin:0 8px 0 0;
}

style 4 :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgIcL8Gtf_8XCv5U6lAfBk7P5HlvsYf2D-pJM9nqI1JmsJWazWxCHf2niAMUWgeVRwKlKPyHLZjaxwwCG7PgI0cbe0_Vt1AGTq1O2JmePK12iKz1f-mANpMk60gPjqAiL4gbSYMN9cc6a/s1600/Styles+Page+Navigation+for+Blogger-4.gif

style 5 :

.showpageArea {

font-family:verdana,arial,helvetica;

color: #000;

font-size:11px;

margin:10px;

}

.showpageArea a {

color: #000;

text-shadow:0 1px 2px #fff;

font-weight: 700;

}

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #919106;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -50px repeat-x;

}

.showpageNum a:hover {

border:1px solid #aeae0a;

background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 -25px repeat-x;

}

.showpageOf{

margin:0 8px 0 0;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #919106;

background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp2.jpg) 0 0 repeat-x;

text-decoration: none;

}

style 6 :

.showpageArea {

font-family:verdana,arial,helvetica;

color: #000;

font-size:11px;

margin:10px;

}

.showpageArea a {

color: #000;

text-shadow:0 1px 2px #fff;

font-weight: 700;

}

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #999;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -50px repeat-x;

}

.showpageNum a:hover {

border:1px solid #888;

background: #ccc url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 -25px repeat-x;

}

.showpageOf{

margin:0 8px 0 0;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #999;

background: #666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp1.jpg) 0 0 repeat-x;

text-decoration: none;

}

style 7 :

.showpageArea {

font-family:verdana,arial,helvetica;

color: #000;

font-size:11px;

margin:10px;

}

.showpageArea a {

color: #fff;

}

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

background: #363636 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -25px repeat-x;

}

.showpageNum a:hover {

background: #044697 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 -50px repeat-x;

}

.showpagePoint {

color:#fff;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

background: #e30000 url(whttp://i879.photobucket.com/albums/ab351/bloggerblogimage/wp3.jpg) 0 0 repeat-x;

text-decoration: none;

}

.showpageOf{

margin:0 8px 0 0;

}

style 8 :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggkArsVl4kqP4vZ0WqWIbzUwLSBOjZ-XxCWlqlsDdkuXMTbCl3IwK4wLPdtfeKGV0UQgcAiW7wBUCguiOsDW4k6DUleDZigtTKbMxOa3cbwFFH3uRo8hRQXMgDZElBmN3Y-rurW_C7dCK_/s1600/Styles+Page+Navigation+for+Blogger-5.gif

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

you can find new style here

Step 3 - Customize the Label Pages

(This is optional but recommended. By default, the blogger label pages will show 20 posts. Best to reduce the number of posts per page to reduce download time. Those who have added a widget for the page navigation are advised to modify this area too.)

Follow these steps:

Go to the Edit HTML page to edit your template. Click the Expand Widget Templates
Find
```
'data:label.url'
```
and replace all such code with the following:
```
'data:label.url + &quot;?&amp;max-results=7&quot;'
```
the value 7 defines the number of posts per page, change as you wish.
Click Save Template to finish and View Blog.

21 التعليقات:

Anonymous said...: اي يشخص يواجه مشكلة يترك رد; May 11, 2011 at 5:20 AM
Anonymous said...: ياعم الطريقة دى بقالها عشرين سنه انت لسه مكتشفها دلوقت; May 11, 2011 at 9:37 AM
Anonymous said...: اعرف ان الطريقة قديمة ولكن عند دخولي منتدى عرب بلوقر وجدت الكثيرين يشكون من ترقيم الصفحات وخاصا التسميات وانا قررت اعمل موضوع كامل واتحدى واحد يقولي هذه الطريقة مو شغالة وشكرا غع مرور

قال رسول الله ص:
الكلمة طيبة حسنة
صدق رسول الله; May 11, 2011 at 12:06 PM
Palsky said...: شكرا على الاضافة

ياعمي قديمة قديمة

لكن ذكر ان نفعة الذكرى

اخي واصل مشوارك
ادعوك لزيارة مدونتي
http://alfrs.blogspot.com/; May 11, 2011 at 4:14 PM
Anonymous said...: شكرا يافارس ع مرور; May 11, 2011 at 4:27 PM
Anonymous said...: good; May 14, 2011 at 7:23 PM
Anonymous said...: hi; May 29, 2011 at 9:16 AM
Unknown said...: أنا ما أشتغلت عندي وهي رابط المدونة
http://jorpersonalities.blogspot.com/; January 10, 2012 at 2:50 PM
Panomovie said...: انا اواجه نفس المعضلة أيضا , افففففففففففففففففففففففففففففف; April 29, 2012 at 12:38 PM
Panomovie said...: احد يساعدني , انا مااشتغلت عندي , حاولت بكل الطرق وماخليت طريقة ماسويتها ومازبطت , يارب رحمتك; April 30, 2012 at 1:59 AM
Anonymous said...: كيف ماشتغلت عندك اخي تاكد من تطبيق جميع الخطوات جيدا اهو انا مشغلها في مدونتي; June 29, 2012 at 5:31 AM
Anonymous said...: I was curious if you ever thought of changing the structure
of your site? Its very well written; I love what youve
got to say. But maybe you could a little more in the way
of content so people could connect with it better. Youve got an awful lot of text for
only having 1 or two images. Maybe you could space it out better?

Here is my blog ... vera wang shoes bridal
my webpage :: vera wang wedding shoes flats; February 21, 2013 at 1:12 PM
Anonymous said...: Greetings! Τhis is my first comment here sо I ϳuѕt wanted to giѵe a
quicκ ѕhout out and tell you I gеnuіnely enјoу
гeаding уоuг artіclеѕ.

Can you ѕuggeѕt anу other blogs/websіtеs/forums that gо over the same tоpіcs?
Thanκѕ а lot!

Feel fгee tο suгf tо my web-sіtе .
.. Vapor Ultra Electronic Cigarette Starter Kits
Also see my website > http://www.Quarkidea.com; February 24, 2013 at 9:42 AM
Anonymous said...: Hi would you mind sharing which blog platform you're working with? I'm looking to
start my own blog soon but I'm having a hard time selecting between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I'm looking for something completely unique.

P.S My apologies for being off-topic but I had to ask!

my web blog: Symptoms Of Methadone Withdrawal; February 25, 2013 at 4:26 AM
Anonymous said...: Do yοu havе a sρam iѕsuе оn this
blog; I also am a bloggеr, anԁ I was ωondering your sіtuаtion;
many of us have devеlopеd some niсe pгoceduгes
and wе агe lookіng to exchаnge tеchniqueѕ with
othеrs, be suгe to shοоt me an е-mail іf іnterested.

Also ѵiѕit my рage - Vapor Ultra; March 4, 2013 at 11:02 AM
Anonymous said...: When I initially commented I clicked the "Notify me when new comments are added" checkbox and now each time a comment is added I get several e-mails with the same
comment. Is there any way you can remove people from that service?

Appreciate it!

Review my web-site - Detox From Methadone; March 4, 2013 at 4:40 PM
Anonymous said...: Hmm is anyone else having problems with the images
on this blog loading? I'm trying to figure out if its a problem on my end or if it's the blog.
Any suggestions would be greatly appreciated.

My web blog :: How To Get On Methadone; March 4, 2013 at 6:34 PM
Anonymous said...: Howdy would you mind letting me know which hosting company
you're utilizing? I've loaded your blog in 3 different web browsers and I must say this blog loads a lot faster then
most. Can you recommend a good internet hosting provider at a reasonable
price? Kudos, I appreciate it!

Here is my web-site :: vera wang bow shoes; March 4, 2013 at 11:17 PM
Anonymous said...: Thanks for your marvеlous рostіng!
I cеrtainly enјoyed readіng it, you're a great author.I will be sure to bookmark your blog and will eventually come back sometime soon. I want to encourage you to definitely continue your great job, have a nice holiday weekend!

Also visit my web-site new balance minimal running shoes; March 5, 2013 at 1:36 PM
Anonymous said...: I’m not that much of a online reader to be honest but your blogs really
nice, keep it up! I'll go ahead and bookmark your website to come back in the future. Many thanks

Also visit my homepage - camo cargo pants; March 5, 2013 at 4:14 PM
Anonymous said...: Hello I am so delighted I found your blog, I really found you by error, while I was looking on Askjeeve for something
else, Anyhow I am here now and would just like to say many thanks for a
fantastic post and a all round thrilling blog (I also
love the theme/design), I don’t have time to look over
it all at the moment but I have book-marked it and also added your RSS feeds, so when I
have time I will be back to read a great deal more,
Please do keep up the superb work.

Also visit my web page - dickies cargo pants; March 5, 2013 at 8:07 PM

Free Tools