Page Navigation Bar

Blog တြင္ Numbered Page Navigation Bar ထည့္သြင္းျခင္း

အားလုံးပဲမဂၤလာပါခင္ဗ်ာ။ ကၽြန္ေတာ္အခု ေဖာ္ျပမွာကေတာ့ စာမ်က္ႏွာနံပါတ္ပါတဲ့ Navigation Bar ထည့္သြင္းနည္းေလးပဲျဖစ္ပါတယ္။ မသိၾကေသးသူမ်ားအတြက္ ရည္ရြယ္ေရးသားျခင္းျဖစ္တဲ့အတြက္ သိၿပီးသူမ်ားက သီးခံေပးၾကပါအုံး။ မိမိတုိ႔ ဘေလာ့ရဲ႕ ေအာက္ေျခမွာ ေအာက္က ပုံေလးေတြလုိ ေပၚေနမွာျဖစ္ပါတယ္။ နမူနာကို
ဤစာမ်က္ႏွာ ေအာက္ေျခတြင္ၾကည့္ပါ။

အဆင့္(၁)

၁။ Dashboard >> Layout >> Edit html ကုိသြားပါ။ (ထုံးစံအတုိင္း template ကုိ backup (Download Full Template ) လုပ္ခဲ့ဖုိ႔မေမ့ပါနဲ႔)။

၂။ ]]></b:skin> ဆုိတဲ့ ကုတ္ကုိ ရွာပါ ( Expand Widget Templates ကုိ check မလုပ္ပါနဲ႔)။ ေတြ႕ရင္ အဲဒီအေပၚမွာ ကပ္ၿပီး ေအာက္မွာေပးထားတဲ့ ကုတ္ေတြကုိ ထည့္လုိက္ပါ။

.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;

}

အဆင့္(၂)

၁။ အခုတစ္ခါ ေအာက္က ကုတ္ေတြကုိ ရွာလုိက္ပါအုံး။

<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

၂။ ေတြ႕ရင္ </b:section> ရဲ႕ေအာက္ကေနကပ္ၿပီး ေအာက္မွာေပးထားတဲ့ကုတ္ေတြကုိ ထည့္ေပးလုိက္ပါ။ ၿပီးရင္ Template ကုိ Save လုပ္လုိက္ပါ။

<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>

မိိမိလုိခ်င္တဲ့ Navigation Bar ပုံစံရေအာင္ အထက္ပါကုတ္ေတြကုိ ျပင္ေပးႏုိင္ပါတယ္။

var pageCount=10;

အဲဒီကုတ္ထဲက 10 ကေတာ့ စာမ်က္ႏွာတစ္ခုစီမွာ ေဖာ္ျပေပးမယ့္ ပုိ႔စ္အေရအတြက္ပဲျဖစ္ပါတယ္။ ဒါေပမယ့္ Setting=>> Formatting မွာ မိမိေပးထားတဲ့ Main Page မွာေပၚမယ့္ စာမ်က္ႏွာအေရအတြက္နဲ႔ ကိုက္ညီေအာင္ ထားသင့္ပါတယ္။

var displayPageNum=6;

အဲဒါကေတာ့ Navigation Bar မွာ ကုိယ္ေပၚေစခ်င္တဲ့ စာမ်က္ႏွာအေရအတြက္ပါပဲ (ဥပမာ. ၁ မွ ၆ အထိ)။

var upPageWord ='Previous';

var downPageWord ='Next';

အဲဒီကုတ္ထဲက Previous နဲ႔ Next တုိ႔ကုိ မိမိအလုိရွိသလုိေျပာင္းေပးႏုိင္ပါတယ္။ ဥပမာ ေရွ႕သုိ႔ ၊ ေနာက္သုိ႔။

အဆင့္(၃)

၁။ ဘေလာ့ဂ္မွာ Label Gadget မရွိေသးရင္ ထည့္ေပးဖုိ႔လုိပါတယ္။ Layout >> page elements >> Add Gadget >> Select Labels ။

၂။ Dashboard >> Layout >> Edit html ကုိျပန္သြားပါ။ Expand Widget Templates ကုိ Check Mark လုပ္ခဲ့ပါ။ ေအာက္မွာ ေပးထားတဲ့ကုတ္ကုိရွာပါ။

 <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

၃။ အထက္ပါကုတ္ရဲ႕ေနရာမွာ ေအာက္မွာေပးထားတဲ့ကုတ္ေတြကုိ အစားသြင္းလုိက္ပါ။

<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>

၄။ Template ကုိ Save လုပ္လုိက္ပါ။ အဆင္ေျပၾကပါေစခင္ဗ်ာ။

ref:
http://it-traveller.blogspot.com/2009/10/blog-numbered-page-navigation-bar.html