Home
WIDGET

RECENT POST STYLE FOR BLOGGER

Recent Post Style For Blogger

ဒါကတော့အရမ်းကိုလှတဲ့ Recent Post widget လေးပါ။အရမ်းကိုလှပသေသပ်လွန်းပါတယ်။မိတ်ဆွေတို့လဲကြိုက်နှစ်သက်လိမ့်မယ်လို့မျှော်လင့်မိပါတယ်။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲထုံးစံအတိုင်း HTML/JavaScript နဲ့ပဲပြုလုပ်ရမှာပါ။


  1. မိမိ Blog site ကို account အရင်ဝင်ပါ
  2. dashboard ထဲက Layout ကိုနှိပ်ပါ
  3. Add a Gadget ကိုနှိပ်ပါ
  4. HTML/JavaScript ကိုနှိပ်
  5. အောက်က Recent Post Style(2) ခုထဲကကြိုက်နှစ်သက်တဲ့ Code ကို copy ယူ၍ထည့်ပါ။


<style>
#ColouredPosts ul {list-style:none;margin:0;padding:0;counter-reset:postCounter;}
#ColouredPosts ul li {position:relative;margin:6px 0;border-radius:25px 0 25px 0;border:2px solid #f7f7f7;box-shadow:3px 3px 3px rgba(0,0,0,0.3);padding:10px;min-height:60px;overflow:hidden;}
#ColouredPosts ul li a {color:#333;font-family:Georgia, 'Times New Roman', Times, serif;font-size:13px;text-decoration:none;display:block;margin-right:40px;line-height:18px;}
#ColouredPosts ul li a:hover {color:#fff;}
#ColouredPosts ul li img {float:left;width:50px;height:50px;margin-right:10px;border-radius:6px;object-fit:cover;}
#ColouredPosts ul li:after {position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;box-shadow:0 0 5px #000;width:30px;height:30px;line-height:28px;text-align:center;font-size:18px;color:#fff;counter-increment:postCounter;content:counter(postCounter);}
#ColouredPosts ul li:nth-child(1){background:#ff4c54;}
#ColouredPosts ul li:nth-child(2){background:#ff764c;}
#ColouredPosts ul li:nth-child(3){background:#ffde4c;}
#ColouredPosts ul li:nth-child(4){background:#c7f25f;}
#ColouredPosts ul li:nth-child(5){background:#33c9f7;}
#ColouredPosts ul li:nth-child(6){background:#7ee3c7;}
#ColouredPosts ul li:nth-child(7){background:#f6993d;}
#ColouredPosts ul li:nth-child(8){background:#df01d7;}
#ColouredPosts ul li:nth-child(9){background:#b041ff;}
#ColouredPosts ul li:nth-child(10){background:#f52887;}
</style>
<div id="ColouredPosts">
<script>
//<![CDATA[
function showColouredPosts(json) {
  let html = '<ul>';
  const total = json.feed.entry.length;
  const limit = Math.min(total, 10);
  for (let i = 0; i < limit; i++) {
    const entry = json.feed.entry[i];
    const title = entry.title.$t;
    const link = entry.link.find(l => l.rel === "alternate").href;
    let thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIPOAEPH1AvkWN0pM6p0g5zagfvufB1h_sw_ToAyXBUO1dQDFNCVEop8eAI0i9EgKMVXE2No_ZpGkrCppxn_ny-Di5o0gGajy8uI15wTmAK4fPJdDpaBSqcnnzO5nZbMkqu2c3dNar18/s72-c/thumbnail-img.png";
     if ("media$thumbnail" in entry) {
      thumb = entry.media$thumbnail.url.replace("/s72-c/","/s100-c/");
    }
      html += `
      <li>
        <a href="${link}">
          <img src="${thumb}" alt="${title}">
          ${title}
        </a>
      </li>`;
  }
  html += '</ul>';
document.getElementById("ColouredPosts").innerHTML = html;
}
//]]>
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showColouredPosts&max-results=10"></script>
</div>



<style type="text/css">
.coloured_recentPosts ul {list-style-type:none;margin:0;padding:0;}
.coloured_recentPosts ul li {list-style-image:none;border:0 none;margin:5px 0;padding:10px;position:relative;height:90px;}
.coloured_recentPosts ul li img {float:left;margin-right:10px;width:80px;height:70px;object-fit:cover;border-radius:10px;}
.coloured_recentPosts ul li h2 {font-weight:normal;margin:0;padding:0;font-size:14px;line-height:1.4;}
.coloured_recentPosts ul li:nth-child(1) { background: #FF4C54; width: 97%; }
.coloured_recentPosts ul li:nth-child(2) { background: #FF764C; width: 94%; }
.coloured_recentPosts ul li:nth-child(3) { background: #FFDE4C; width: 91%; }
.coloured_recentPosts ul li:nth-child(4) { background: #C7F25F; width: 88%; }
.coloured_recentPosts ul li:nth-child(5) { background: #33C9F7; width: 85%; }
.coloured_recentPosts ul li:nth-child(6) { background: #7EE3C7; width: 82%; }
.coloured_recentPosts ul li:nth-child(7) { background: #F6993D; width: 79%; }
.coloured_recentPosts ul li:nth-child(8) { background: #F59095; width: 76%; }
.coloured_recentPosts ul li:nth-child(9) { background: #e0c9ff; width: 73%; }
.coloured_recentPosts ul li:nth-child(10){ background: #85ecf7; width: 70%; }
.coloured_recentPosts ul li:after {background:#353535;border-radius:50%;color:#fff;font-size:20px;height:30px;width:30px;line-height:30px;position:absolute;right: -17px;top:1px;text-align:center;font-weight:bold;counter-increment:recentCounter;content: counter(recentCounter);}
.coloured_recentPosts ul {counter-reset:recentCounter;}
.coloured_recentPosts ul li a {color:#444;font-size:13px;text-decoration:none;display:block;}
</style>
<div class="coloured_recentPosts">
<script>
//<![CDATA[
function showRecentPosts(json) {
  document.write('<ul>');
  for (var i = 0; i < numposts_recent; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl = "";
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    var thumburl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwIPOAEPH1AvkWN0pM6p0g5zagfvufB1h_sw_ToAyXBUO1dQDFNCVEop8eAI0i9EgKMVXE2No_ZpGkrCppxn_ny-Di5o0gGajy8uI15wTmAK4fPJdDpaBSqcnnzO5nZbMkqu2c3dNar18/s72-c/thumbnail-img.png";
    if ("media$thumbnail" in entry) {
      thumburl = entry.media$thumbnail.url.replace("/s72-c/", "/s100-c/");
    }
    document.write('<li><a href="' + posturl + '">');
    document.write('<img src="' + thumburl + '" alt="' + posttitle + '"/>');
    document.write('<h2>' + posttitle + '</h2>');
    document.write('</a></li>');
  }
  document.write('</ul>');
}
//]]>
</script>
<script>
var numposts_recent = 10;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showRecentPosts&max-results=10"></script>
</div>

  1. save ကိုနှိပ်ပြီးပြီ။

Post a Comment