အားလုံးပဲမဂၤလာပါခင္ဗ်ာ။ ကၽြန္ေတာ္အခု ေဖာ္ျပမွာကေတာ့ စာမ်က္ႏွာနံပါတ္ပါတဲ့ 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 လုပ္လုိက္ပါ။
မိိမိလုိခ်င္တဲ့ Navigation Bar ပုံစံရေအာင္ အထက္ပါကုတ္ေတြကုိ ျပင္ေပးႏုိင္ပါတယ္။
အဲဒါကေတာ့ Navigation Bar မွာ ကုိယ္ေပၚေစခ်င္တဲ့ စာမ်က္ႏွာအေရအတြက္ပါပဲ (ဥပမာ. ၁ မွ ၆ အထိ)။
<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+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
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+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>
မိိမိလုိခ်င္တဲ့ Navigation Bar ပုံစံရေအာင္ အထက္ပါကုတ္ေတြကုိ ျပင္ေပးႏုိင္ပါတယ္။
var pageCount=10;
အဲဒီကုတ္ထဲက 10 ကေတာ့ စာမ်က္ႏွာတစ္ခုစီမွာ ေဖာ္ျပေပးမယ့္ ပုိ႔စ္အေရအတြက္ပဲျဖစ္ပါတယ္။ ဒါေပမယ့္ Setting=>> Formatting မွာ မိမိေပးထားတဲ့ Main Page မွာေပၚမယ့္ စာမ်က္ႏွာအေရအတြက္နဲ႔ ကိုက္ညီေအာင္ ထားသင့္ပါတယ္။
var displayPageNum=6;
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 လုပ္ခဲ့ပါ။ ေအာက္မွာ ေပးထားတဲ့ကုတ္ကုိရွာပါ။
၃။ အထက္ပါကုတ္ရဲ႕ေနရာမွာ ေအာက္မွာေပးထားတဲ့ကုတ္ေတြကုိ အစားသြင္းလုိက္ပါ။
၄။ Template ကုိ Save လုပ္လုိက္ပါ။ အဆင္ေျပၾကပါေစခင္ဗ်ာ။
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
၃။ အထက္ပါကုတ္ရဲ႕ေနရာမွာ ေအာက္မွာေပးထားတဲ့ကုတ္ေတြကုိ အစားသြင္းလုိက္ပါ။
<script type='text/javascript'>
var lblname = "<data:label.name/>";
lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=10';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>
၄။ Template ကုိ Save လုပ္လုိက္ပါ။ အဆင္ေျပၾကပါေစခင္ဗ်ာ။
ref:
http://it-traveller.blogspot.com/2009/10/blog-numbered-page-navigation-bar.html
0 comments:
Post a Comment