How To Create Navigation Page Like Google

Navigation is useful to facilitate the reader to find all the post data, more time-saving and practical

For you who want to set up page navigation like that, follow the way below

1. Login> Design> edit HTML>

2. Find this code ]]></b:skin>

3. Then put the following code right above the code ]]></b:skin>

---

#nav a,#nav a:visited,.blk a{color:#000}

#nav a{display:block}

#nav .b a,#nav .b a:visited{color:#20c}

#nav .i{color:#a90a08;font-weight:bold}

.csb,.ss{background:url(

http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png

) no-repeat 0 0;height:26px;display:block}

.ss{background-position:0 -88px;position:absolute;left:0;top:0}

.cps{height:18px;overflow:hidden;width:114px}

.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}

#nav td{padding:0;text-align:center}

---

4. If you have, now looking for more code </body>

5. Then put the code below the above code </body>

---

<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 ='';

htmlMap[htmlMap.length]='/';

postNum++;

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

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

timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;

}

var banyaknomer = htmlMap.length;

if (json.feed.entry.length % pageCount == 0){

var banyaknomer = htmlMap.length -1 ;

postNum=postNum-1;

};

for(var p =0;p&lt; banyaknomer;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;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';

}else{

upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';

}

fFlag++;

}

if(p==(thisNum-1)){

if(p==0){

html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';

}else{

html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';

}

}else{

if(p==0){

html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

}else{

html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';

}

}

if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';

eFlag++;

}

}

}

if(thisNum&gt;1){

html = ''+upPageHtml+' '+html +' ';

}

html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';

html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';

html = html2+html;

if(thisNum&lt;(postNum-1)){

html += downPageHtml;

}else{

html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';

}

if(postNum==1) postNum++;

html += html3+ '&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;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';

var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;

postNum++;

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

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

timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

itemCount++;

}

var banyaknomer = htmlMap.length;

if (json.feed.entry.length % pageCount == 0){

var banyaknomer = htmlMap.length -1 ;

postNum=postNum-1;

};

for(var p =0;p&lt; banyaknomer;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 +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';

}else{

upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';

}

fFlag++;

}

if(p==(thisNum-1)){

if(p==0){

html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';

}else{

html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';

}

}else{

if(p==0){

html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

}else{

html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';

}

}

if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';

eFlag++;

}

}

}

if(thisNum&gt;1){

if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}

}

html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';

html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';

html = html2+html;

if(thisNum&lt;(postNum-1)){

html += downPageHtml;

}else{

html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';

}

if(postNum==1) postNum++;

html += html3+ '&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>

---

Description:

== Var pageCount = 10; / altered to your wishes

== Var displayPageNum = 6; / altered to your wishes

== Var upPageWord = 'Previous'; / Can you replace with the previous

== Var downPageWord = 'Next'; / you can replace the premises hereinafter

== Page ('+ (postNum-1) +') / Un