Pagination or Page Navigation as it is called is not inbuilt into Blogger, but can be achieved with a simple hack. The main motive behind it is to make your Blog look more organized and make navigation easy for your visitors. Its simple and easy to integrate and styling can be changed as per your wish.
How To implement it into your Blog :
1. Login to Blogger Dashboard and navigate to Design > Edit HTML (For new interface Templates > Edit HTML)
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this (Using CTRL +F) ]]></b:skin>
4. Copy the following code just Before/Above it. (See How to Copy Code Easily)
5. Now paste the following code just Before/Above the </body> tag (Search Using CTRL+F)
Some basic options:
postperpage : Number of Post that will appear on a Page
numshowpage : Number of Pages that will appear in the Page Navigation Menu
3. Find this (Using CTRL +F) ]]></b:skin>
4. Copy the following code just Before/Above it. (See How to Copy Code Easily)
.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}5. Now paste the following code just Before/Above the </body> tag (Search Using CTRL+F)
<script type='text/javascript'>;
var home_page='/';
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
Some basic options:
postperpage : Number of Post that will appear on a Page
numshowpage : Number of Pages that will appear in the Page Navigation Menu
upPageword : Word or phrase that will appear in the Forward Link
downpageWord : Word or phrase that will appear in the Backward Link
Note: Make sure that the "postperpage" value and "Number of posts on main page" value (Present in the Design > Page Elements > Blog Post) is same
Note: You will observe that ,after applying it ,there are some problems while accessing the Labels using the Default Labels widget. To rectify, Tick on the "Expand Widget Templates" and search for
'data:label.url'
downpageWord : Word or phrase that will appear in the Backward Link
Note: Make sure that the "postperpage" value and "Number of posts on main page" value (Present in the Design > Page Elements > Blog Post) is same
Note: You will observe that ,after applying it ,there are some problems while accessing the Labels using the Default Labels widget. To rectify, Tick on the "Expand Widget Templates" and search for
'data:label.url'
Replace It with:
'data:label.url + "?&max-results=4"'
Make sure the Number is same as the value of "postperpage" value
6. Click on "Save Template" and you are ready to rumble
Having Problems ? , feel free to ask
Description: Pagination in Blogger
Rating: 4.5
Reviewer: Unknown -
ItemReviewed: Pagination in Blogger
'data:label.url + "?&max-results=4"'
Make sure the Number is same as the value of "postperpage" value
6. Click on "Save Template" and you are ready to rumble
Having Problems ? , feel free to ask
Posting Komentar