Thứ Tư, 9 tháng 12, 2009

Adding Numbered Page Navigation Bar For Blogger


 Hi all, today we are going to learn how to add page navigation bar with numbers for blogspot blogs,
i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.
so lets see how to do it.
Step 1: Adding The CSS Code.

Log into your blogger account and go to,
Dashboard >> Layout >> Edit html.
And find the following code.

]]></b:skin>
 
And just before it Add the next code

.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;
}
 
Step 2: Adding The Java Code.

Find the next code Or some similar code

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
 
And After the </b:section> Tag add the next code.

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

 

 

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.
substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+
pageCount;
}
}
itemCount++;

}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;
&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}else{
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;
'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
}else{
if(p==0){
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;
&gt;1&lt;/a&gt;&lt;/span&gt;';

}else{
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;
'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;
'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}

html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;
COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;
/span&gt;'+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '&lt;/div&gt;';


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;
/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,
thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

 

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;
a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;
';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.
substring(23,29);
timestamp = encodeURIComponent(timestamp1);



var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+
'&amp;max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}else{
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;
'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
}else{
if(p==0){
html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
}else{
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;
'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;
'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;
COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;
/span&gt;'+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '&lt;/div&gt;';

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,
thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,
thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;
.html&quot;)==-1){ 
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?
alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;
&gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+
lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&
quot; &gt;&lt;\/script&gt;')
}
}
</script> 
 
And Click “save template

In the above code you may only edit four lines to customize your navigation bar.
 
var pageCount=10;
In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.

Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts

 
var displayPageNum=6;
Number 6 here control the number of pages that will be shown in the navigation bar.
 
var upPageWord ='Previous';
var downPageWord ='Next';
if you want to change the language or just change it to any thing, please change Previous for example to Older

Final Step

This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.

1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.

2. go to, Dashboard >> Layout >> Edit html.
And find the following code.

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label
.name/></a>
 
And replace it with the following code.

<script type='text/javascript'>
var lblname = &quot;<data :label.name/>&quot;;

lblname2 = encodeURIComponent(lblname);
var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;
+lblname+&#39;&lt;/a&gt;&#39;);
</script>

And Click “save template
We are done.
Max

0 nhận xét:

Đăng nhận xét

Bạn có ý kiến hay thắc mắc về bài viết --> Hãy để lại nhận xét bên dưới !

Phản hồi của bạn luôn được đánh giá cao. Tôi sẽ cố gắng trả lời sớm nhất có thể.
Nhắc bạn:
1. Vui lòng đừng Spam ! Tôi sẽ xóa ngay lập tức nếu phát hiện.
2. Các bài comment phải nghiêm túc, không dung tục.
3. Nội dung phải liên quan tới chủ đề bài viết.
4. Hãy để lại tên của bạn khi bạn post bài comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.
5.Đối với những thắc mắc không liên quan đến bài viết này, bạn vui lòng để lại câu hỏi ở đây --> PC Help

Thân chào,
Admin

  Sản phẩm mới của KNC