Lable ေလးေတြတစ္ခုျခင္းဆီ ကို Recent post အျဖစ္ေဖာ္ျပမယ္

ဒီေန႕ေရးသားျဖစ္တ့ဲအေၾကာင္းရာေလး က ေတာ့ မိမိ တို႕ Blog မွာ ရွိတ့ဲ Lable ေလးေတြတစ္ခုျခင္းဆီ ကို Recent post အျဖစ္ေဖာ္ျပႏိုင္မယ့္နည္းလမ္းေကာင္းေလးပါပဲ..အက်ယ္ရွင္းျပရမယ္ဆိုရင္ေတာ့ Mobile ႏွင့္ ပတ္သက္သမွ် က႑ ကို recent post ျဖစ္ေဖာ္ျပျခင္တယ္ဆိုရင္ ဒီနည္းေလး ကို အသံုးျပုႏိုင္ပါတယ္ Mobile ႏွင့္ ပတ္သက္သမွ်ကိုေဖာ္ျပေနမွာပါ။ ေအာက္ပါအတိုင္းေလးေတြလိုက္ ကလိရေအာင္ေနာ္။

Blogger မွာ login ဝင္ျပီးတာ နဲ႕ စပါမယ္ Template ကိုသြားလိုက္ပါ။
Edit HTML မွာကလစ္လိုက္ပါ ctrl + f ကို အသံုးျပဳျပီး ေအာက္ က ကုဒ္ေလး ကို ရွာေပးပါ

]]></b:skin> 

ေတြ႕ျပီဆိုရင္ သူ႕အေပၚနားေလး မွာ ေအာက္က ကုဒ္ေလးေတြ ကို Copy ကူးထည့္လိုက္ပါ။

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

ေနာက္ထပ္ရွာရပါဦးမယ္မျပီးေသးပါဘူး  ctrl + f ကို အသံုးျပဳျပီး ေအာက္ က ကုဒ္ေလး ကို ထပ္ရွာေပးပါ

</head>

ေတြ႕ျပီးဆိုရင္ သူ႕ေအာက္နားမွာ ေအာက္ကေပးထားတ့ဲ ကုဒ္ေလးေတြ ကို Copy ကူထည့္လိုက္ပါ။

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7cqbgHJ_ve-Z0B9p7MXZS7aR11C6Y-vi_03nwL4HRdnpmsVcf6MIQdGn1YwDjGokAXsTqBFbBvMw3qkn99sRg-QV6UtrXbsA9V-39kRapodJhN6xxV194ReHiIov8hKifuxCJr7h1Ei4/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script> 

ေနာက္ဆံုးအဆင့္ အေနႏွင့္အသံုးျပဳရမယ့္ကုဒ္ ကို Copy ကူးျပီး။

အသံုးျပဳရန္ကုဒ္ 

 <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label Name?published&alt=json-in-script&callback=labelthumbs"></script>

   ►1.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►2.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►3.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►4.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ 

Label Name ဆိုတ့ဲေနရာ မွာ မိမိ တို႕ ဘေလာ့မွာရွိတ့ဲ Label တစ္ခုခု က နာမည္ကိုအစားထိုးေပးလိုက္ရင္ရပါျပီ။

Zar Ni(Books,Knowledge & Articles)®

 

  

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ