Recent Post Widget For Blogger
ဒါလေးကတော့ Recent Post Widget လေးဖြစ်ပါတယ်။အရမ်းကိုလှပသေသပ်လွန်းပါတယ် ကြိုက်နှစ်သက်တယ်ဆိုရင်အောက်မှာ Recent Post Widget Code တွေပေးထားပါတယ်။ထည့်သွင်းအသုံးပြုလိုပါကအောက်မှာဖော်ပြပေးထားတဲ့အဆင့်အတိုင်းလိုက်ပါဆောင်ရွက်လိုက်ပါ။
NO(1) မိမိ Blog Site ကို account ကိုအရင်ဝင်ပါ
NO(2) dashboard ထဲက Layout ကိုနှိပ်
NO(3)။ Add a Gadget ကိုနှိပ်
NO(4)။ HTML / JavaScript ကိုနှိပ်
NO(5) အောက်ကပေးထားတဲ့ Code တွေကိုထည့် ပြီးပါပြီ။
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<style type="text/css">
img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif;width: 100%;min-height: 70px;margin: 20px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 36px; font-size: 16px;color: #fff;background: rgba(0,0,0,0.4);padding: 9px 14px;} .recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #f74f4f!important;} .post-date {color:#989c9c; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #111!important;}
.recent-post-title { margin: 5px 0px; } .recent-posts-details {border-top: 4px dashed #fd8c9e; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;} a.readmorelink {color: #4DACE3;} img.recent-post-thumb { padding: 2px 0px; width: 65px; height: 65px; float: left; margin: -14px 10px 0px 0px; border-radius: 10%; border:none!important} </style>
<script> function showlatestpostswiththumbs(json) { document.write('<ul class="recent-posts-container">'); for (var i = 0; i < posts_no; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var postsurl; 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 commentstext = entry.link[k].title; var commentsurl = entry.link[k].href; } if (entry.link[k].rel == 'alternate') { postsurl = entry.link[k].href; break; } } var recenthumb; try { recenthumb = 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 != "")) { recenthumb = d; } else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik-s6j9dfOliIm83H2P2zRbHSodIzXolJhyphenhyphen6f5FQMASJsE35xi5mmM5tO6sNZzXxlNnZMglTxaUlBAdHvf8uSW7vaCZr3RG2-byIVIxTtthqPnymWdisK3M1PmMU7BayzUsquzYgMl0tEB/s1600/no-thumb.png'; } var postdate = entry.published.$t; var showyear = postdate.substring(0, 4); var showmonth = postdate.substring(5, 7); var showday = 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] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; document.write('<li class="recent-posts-list">'); if (posts_date == true) document.write('<div class="post-date"> ' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear + '</div> '); if (showpoststhumbs == true) document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>'); document.write('<div class="recent-post-title"> <a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div> '); var posts_details = ''; var flag = 0; document.write('<div class="recent-posts-details"> '); if (showcommentslink == true) { if (flag == 1) { posts_details = posts_details + ' <br> '; } if (commentstext == '1 Comments') commentstext = '1 Comment'; if (commentstext == '0 Comments') commentstext = 'No Comments'; commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>'; posts_details = posts_details + commentstext; flag = 1;; } if (readmorelink == true) { if (flag == 1) posts_details = posts_details + ' | '; posts_details = posts_details + '<a class="readmorelink" href="' + postsurl + '" class="url" target ="_top">Read more</a>'; flag = 1;; } document.write(posts_details); document.write('</div> '); document.write('</li> '); } document.write('</ul> '); }</script> <script> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = false; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <noscript>Your browser does not support JavaScript!</noscript>