How to Add Recent Comments Widget? ( Recent Comments လန္းလန္းေလးေတြရမယ္ )

က်ြန္ေတာ္တို႔မိမိ ဘေလာ့မွာ ကြန္မန္႔ေပးသြားတာကို Recent Comments Widget ေလးထားခ်င္တယ္ဆို
ရင္ က်ြန္ေတာ္လန္းမယ္ထင္တဲ့ ဒီဇိုင္းေလးေတြ ျပခ်င္တယ္။ သူငယ္ခ်င္းတို႔ ၾကိဳက္တာေလးေတြမသြားေပါ့။
အခု အေပၚကဟာေလး ေမာက့္ ေလးတင္လိုက္တာနဲ႔ အခုလိုကာလာနဲ႔ အ၀ိုင္းေပၚလာျပီးျပတဲ့ဒီဇိုင္း
တစ္မ်ိဳးပါ။ ဒီပံုေလးကိုၾကိဳက္တယ္ဆိုရင္ေတာ့ ေအာက္မွာယူလိုက္ပါ။
1.Login to Blogger
2.Choose your style
3.HTML/Javascript gadget.
4.click on add a gadget
5. Now Copy the Below code and paste
6. Save.

အခု အေပၚကဟာေလး ေမာက့္ ေလးတင္လိုက္တာနဲ႔ အခုလိုကာလာနဲ႔ အ၀ိုင္းေပၚလာျပီးျပတဲ့ဒီဇိုင္း
တစ္မ်ိဳးပါ။ ဒီပံုေလးကိုၾကိဳက္တယ္ဆိုရင္ေတာ့ ေအာက္မွာယူလိုက္ပါ။ ။ ဒီေနရာမွာ မိမိဘေလာ့စ္လင့္ထည့္ပါ  ဆိုတဲ့ေနရာမွာ မိမိဘေလာ့စ္ရဲ႕ လင့္ကိုအစားထိုးထည့္ေပးလိုက္ပါ။

<style type="text/css">ul.bdlab_recent_comments{list-style:none;margin:0;padding:0}.bdlab_recent_comments li{background:none!important;margin:5px!important;padding:5px!important;display:block;clear:both;overflow:hidden;list-style:none}.bdlab_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}.bdlab_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}.bdlab_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4}.bdlab_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s}.bdlab_recent_comments li:hover{background:#C9FD7A!important;border-radius:100%;</style> <a href="http://mm-helperblogger.blogspot.com/" target="_blank" title="MM-HelperBlogger"><img src="https://bitly.com/24workpng1" alt="MM-HelperBlogger" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://mm-helperblogger.blogspot.com/" target="_blank" title="MM-HelperBlogger"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://mm-helperblogger.blogspot.com/" target="_blank" title="MM-HelperBlogger"><img src="https://bitly.com/24workpng1" alt="MM-HelperBlogger" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript" src="http://dl.dropboxusercontent.com/s/jgqucxiylfber8e/bdlab-recent-comments-with-avtar-ycode.js"></script><script type="text/javascript" src="ဒီေနရာမွ မိမိ ဘေလာ့စ္ရဲ႕ လင့္ကိုထည့္ပါ//feeds/comments/default?alt=json&callback=bdlab_recent_comments&max-results=5"></script>

-----------------------------------------------------------------------------------------------

ဒါေလးကလည္း ေနာက္ထပ္ စတိုင္အလန္းေလးပါပဲ။ ေမာက္စ့္ ေလးတင္လိုက္တာနဲ႔ အေပၚကို ေလးေထာင့္ စတိုင္ေလးနဲ႔ၾကြတက္လာတယ္။ ဒီ ဒီဇိုင္းကိုလည္းျမန္မာဘေလာ့စ္ေတြမွာ
သိပ္မေတြ႔ဘူးခင္ဗ်ာ့။ လိုခ်င္တယ္ဆိုရင္ေတာ့ ေအာက္က ကုဒ္ေလးကို ယူထည့္လိုက္ပါ။
။ ဒီေနရာမွာ မိမိဘေလာ့စ္လင့္ထည့္ပါ ဆိုတဲ့ေနရာမွာ မိမိဘေလာ့စ္ရဲ႕ လင့္ကိုအစားထိုးထည့္ေပးလိုက္ပါ။

<style type="text/css">ul.bdlab_recent_comments{list-style:none;margin:0;padding:0}.bdlab_recent_comments li{background:none!important;margin:5px!important;padding:5px!important;display:block;clear:both;overflow:hidden;list-style:none}.bdlab_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px}.bdlab_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}.bdlab_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4}.bdlab_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:2px solid transparent}.bdlab_recent_comments li:hover{-webkit-transform:scale(1.2) translate(15px);-moz-transform:scale(1.2) translate(15px);-ms-transform:scale(1.2) translate(15px);-o-transform:scale(1.2) translate(15px);transform:scale(1.2) translate(15px);box-shadow:0 0 20px 1px #aaa}</style> <a href="http://mm-helperblogger.blogspot.com/" target="_blank" title="MM-HelperBlogger"><img src="https://bitly.com/24workpng1" alt="MM-HelperBlogger" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://mm-helperblogger.blogspot.com/" target="_blank" title="MM-HelperBlogger"><img src="https://bitly.com/24workpng1" alt="MM-HelperBlogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://mm-helperblogger.blogspot.com/" target="_blank" title="MM-HelperBlogger"><img src="https://bitly.com/24workpng1" alt="MM-HelperBlogger" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript" src="http://dl.dropboxusercontent.com/s/jgqucxiylfber8e/bdlab-recent-comments-with-avtar-ycode.js"></script><script type="text/javascript" src="ဒီေနရာမွာ မိမိဘေလာ့ရဲ႕လင့္ကိုထည့္ပါ//feeds/comments/default?alt=json&callback=bdlab_recent_comments&max-results=5"></script>

-------------------------------------------------------------------------------

ဒါေလးကလည္း လန္းတယ္ေနာ္ သူက Avatar ေနရာမွာ ေလးေထာင့္စတိုင္ေလးနဲ႔ သူကိုလိုခ်င္ရင္
ေအာက္မွာ သူ႔ရဲ႕ကုဒ္ကို ယူျပီးထည့္ေပးလိုက္ပါ ။ဘယ္လိုထည့္လဲအေပၚမွာေျပာထားပါ။
သူကေတာ့  (CSS styling) ပါ။ လင့္ထည့္စရာမလိုပါဘူး...............

<style type="text/css">     .recent-comment        { margin-bottom:10px; padding-left: 24px; }     .recent-comment-admin  { background-color: #F4F4F4; }     .recent-comment-ico    { margin-left:-20px;margin-top:4px;float:left;}     .recent-comment-header {}     .recent-comment-body   { padding-right: 4px; font-size: 95%;}     .recent-comment-footer { font-size: 85%; }     </style>     <script type="text/javascript">     //     // Recent Comments blogger gadget by MS-potilas 2011     // see http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html     //     // CONFIG:     var numRecentComments = 5;     var numPerPost = 2; // max comments per post (to try) or 0     var maxCommentChars = 90;     var maxPostTitleChars = 0; // if 0, use full post title          var txtWrote = 'wrote:';     var txtMore = 'Continue >>';     var txtTooltip = '[user] on "[title]" - [date MM/dd/yy hh:mm]';     var txtAnonymous = ''; // empty, or Anonymous user name localized     // Variables [xxx] in texts:     // supports [title], [user], [date], [time], [datetime], [date format]     // format supports: yyyy=long year, yy=short year, MM=month(01-12), dd=monthday, hh=hour, mm=min, ss=sec          var getTitles = true;   // false faster     var trueAvatars = true; // false faster     var urlMyAvatar = '';   // can be empty (then it is fetched) or url to image     var urlMyProfile = '';  // set if you have no profile gadget on page     //     var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=16';     var maxResultsPosts = "";       // or for example "&max-results=100"     var maxResultsComments = "";    // or for example "&max-results=300"     // CONFIG END     var urlToTitle = {};     function replaceVars(text, user, title, date) {       text = text.replace('[user]', user);       text = text.replace('[date]', date.toLocaleDateString());       text = text.replace('[datetime]', date.toLocaleString());       text = text.replace('[time]', date.toLocaleTimeString());       text = text.replace('[title]', title.replace(/\"/g,'"'));       var i = text.indexOf("[date ");       if(i > -1) {         var format = /\[date\s+(.+?)\]/.exec(text)[1];         if(format != '') {           var txtDate = format.replace(/yyyy/i, date.getFullYear());           txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));           txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));           txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));           txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));           txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));     //or: txtDate = txtDate.replace("dd", date.getDate());           txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));     //or: txtDate = txtDate.replace("hh", date.getHours());           text = text.replace(/\[date\s+(.+?)\]/, txtDate)         }       }       return text;     }     if(urlMyProfile == "") {       var elements = document.getElementsByTagName("*");       var expr = /(^| )profile-link( |$)/;       for(var i=0 ; i<elements.length ; i++)         if(expr.test(elements[i].className)) {           urlMyProfile = elements[i].href;           break;         }     }     function getPostUrlsForComments(json) {       for(var i = 0 ; i < json.feed.entry.length ; i++ ) {         var entry = json.feed.entry[i];         var href;         for (var k = 0; k < entry.link.length; k++ ) {           if (entry.link[k].rel == 'alternate') {             href = entry.link[k].href;             break;           }         }         urlToTitle[href] = entry.title.$t;       }     }     function showRecentComments(json) {       var postHandled = {};       var j = 0;       if(numPerPost) {         while(numPerPost < numRecentComments) {           for(var i = 0 ; i < json.feed.entry.length ; i++ ) {             var entry = json.feed.entry[i];             if(entry["thr$in-reply-to"]) {               if(!postHandled[entry["thr$in-reply-to"].href])                   postHandled[entry["thr$in-reply-to"].href] = 1;               else                   postHandled[entry["thr$in-reply-to"].href]++;               if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)                 j++;             }           }           if(j >= numRecentComments)             break;           numPerPost++;           j = 0;           postHandled = {};         }         if(numRecentComments == numPerPost)            numPerPost = 0;       }       postHandled = {};       j = 0;       for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {         var entry = json.feed.entry[i];         if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)           continue;         if(entry["thr$in-reply-to"]) {           if(!postHandled[entry["thr$in-reply-to"].href])               postHandled[entry["thr$in-reply-to"].href] = 1;           else               postHandled[entry["thr$in-reply-to"].href]++;           j++;           var href='';           for (var k = 0; k < entry.link.length; k++ ) {             if (entry.link[k].rel == 'alternate') {               href = entry.link[k].href;               break;             }           }           if(href=='') {j--; continue; }           var hrefPost = href.split("?")[0];           var comment = "";           if("content" in entry) comment = entry.content.$t;           else                   comment = entry.summary.$t;           comment = comment.replace(/<br[^>]*>/ig, " ");           comment = comment.replace(/<\S[^>]*>/g, "");           var postTitle="-";           if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];           else {             if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");             postTitle = postTitle.replace(/-/g," ");             postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);           }           if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {             postTitle = postTitle.substring(0, maxPostTitleChars);             var indexBreak = postTitle.lastIndexOf(" ");             postTitle = postTitle.substring(0, indexBreak) + "...";           }                var authorName = entry.author[0].name.$t           var authorUri = ""           if(entry.author[0].uri && entry.author[0].uri.$t != "")             authorUri = entry.author[0].uri.$t;                  var avaimg = urlAnoAvatar;           var bloggerprofile = "http://www.blogger.com/profile/";           if(trueAvatars && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)               avaimg = "http://avafavico.appspot.com/?userid=" + authorUri.substr(bloggerprofile.length);           else {             var parseurl = document.createElement('a');             if(authorUri != "") {               parseurl.href = authorUri;               avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;             }           }           if(authorUri == urlMyProfile && urlMyAvatar != "")             avaimg = urlMyAvatar;           if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)             authorName = txtAnonymous;           var imgcode = '<img height="16" width="16" title="'+authorName+'" src="'+avaimg+'" />';           if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';                var clsAdmin = "";           if(authorUri == urlMyProfile)               clsAdmin = " recent-comment-admin";                var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601           var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);                var txtHeader = txtWrote;           if(txtWrote.indexOf('[')==-1)             txtHeader = authorName + ' ' + txtWrote;           else             txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);                var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);           if(!/#/.test(href)) href += "#comments";           document.write('<div title="'+tooltip+'" class="recent-comment'+clsAdmin+'"> ');           document.write('<div title="'+tooltip+'" class="recent-comment-header'+clsAdmin+'"> <div title="'+tooltip+'" class="recent-comment-ico'+clsAdmin+'"> '+imgcode+'</div> <a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div> ');           if(comment.length < maxCommentChars)             document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'">' + comment + '</div> ');           else {             comment = comment.substring(0, maxCommentChars);             var indexBreak = comment.lastIndexOf(" ");             comment = comment.substring(0, indexBreak);             document.write('<div title="'+tooltip+'" class="recent-comment-body'+clsAdmin+'"> ' + comment + '...</div> ');             if(txtMore != "") {               var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);               document.write('<div title="'+tooltip+'" class="recent-comment-footer'+clsAdmin+'"> <a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div> ');             }           }           document.write('</div> ');         }       }     }     if(getTitles)       document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');     document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');     </script>

------------------------------------------------------------------------------------------

 
သူ႕ကိုေတာ့ လူသိမ်ားၾကပါတယ္ ဘေလာ့စ္ေတာ္ေတာ္မ်ားမ်ားမွာ ထည့္ထားၾကတာေတြ႔ရပါတယ္။
သူကလည္း ဒီဇိုင္းတစ္မ်ိဳးေလး လန္းပါတယ္။ ၾကိဳက္တယ္ဆိုရင္ေတာ့ ေအာက္မွာသူ႕ ကုဒ္ကိုယူျပီး
ထည့္ေပးလိုက္ပါ။ ကိုယ္ထားခ်င္တဲ့ Comments အေရအတြက္ထားလို႔ရပါတယ္။ ဒီမွာေတာ့ 5 ခုပဲ
ျပထားပါတယ္။ ဒီေနရာမွာ မိမိဘေလာ့စ္လင့္ထည့္ပါ ဆိုတဲ့ေနရာမွာ မိမိဘေလာ့စ္ရဲ႕ လင့္ကိုအစားထိုး
ထည့္ေပးလိုက္ပါ။

<style type="text/css"> ul.latest_recent_comments{ list-style:none; margin:0; padding:0; }  .latest_recent_comments li{ background:none !important; margin:0 0 6px !important; padding:0 0 6px 0 !important; display:block; clear:both; overflow:hidden; list-style:none; }  .latest_recent_comments li .avatarImage{ padding:3px; background:#fefefe; -webkit-box-shadow:0 1px 1px #ccc; -moz-box-shadow:0 1px 1px #ccc; box-shadow:0 1px 1px #ccc; float:left;margin:0 6px 0 0; position:relative; overflow:hidden; }  .avatarRound{ -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; }  .latest_recent_comments li img{ padding:0px; position:relative; overflow:hidden; display:block; }  .latest_recent_comments li span{ margin-top:4px;color: #666; display: block; font-size: 12px; font-style: italic; line-height: 1.4; } .latest_recent_comments span{ display:none; } </style> <script type="text/javascript"> //<![CDATA[    // Recent Comments Settings    var numComments  = 5, showAvatar  = true, avatarSize  = 60, roundAvatar = true, characters  = 30, showMorelink = true, moreLinktext = "More �", defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true;//]]></script> <script type="text/javascript" src="http://yourjavascript.com/120631591214/nbtrecentcomments.js"></script> <script type="text/javascript" src="ဒီေနရာမွာ မိမိဘေလာ့စ္ရဲ႕ လင့္ကိုထည့္ေပးလိုက္ပါ//feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=6"></script>

သူငယ္ခ်င္းတို႕အဆင္ေျပတယ္ဆိုရင္  ေၾကာ္ျငာကလစ္ျခင္း ၊ Like ႏွိပ္ျခင္း ၊  မန္ဘာ၀င္ျခင္းျဖင့္
ကူညီၾကပါလို႔ ေျပာပါရေစ ခ်စ္သူငယ္ခ်င္းတို႕ေရ...ေနာက္လည္း ဒီဇိုင္းလန္းလန္းေလးေတြ
ထပ္ျပီးေ၀မွ်ေပးသြားပါမယ္...ေမွ်ာ္...................

Posted in: Blog ဆုိင္ရာနည္းပညာ,ကုဒ္မ်ား