Home
WIDGET

RANDOM POST STYLE FOR BLOGGER

Random Post Style For Blogger

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



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

<div id="RandomPosts1" class="widget-content">
  <ul id="random-posts-list"></ul>
</div>
<style>
#RandomPosts1 ul {margin:0;padding:0;list-style: none;}
#RandomPosts1 ul li {position:relative;margin:6px 0;border-radius:25px 0 25px 0;border:2px solid #f7f7f7; -webkit-box-shadow: 3px 3px 3px #000; -moz-box-shadow: 3px 3px 3px #000;padding:10px;width:90%;overflow:hidden;background:#fff;}
#RandomPosts1 ul li a {color:#333;display:block;font-family:Georgia, 'Times New Roman',Times, serif;font-size:13px;line-height:18px;text-decoration: none !important;}
#RandomPosts1 ul li a:hover {color:#fff;text-decoration:none;}
#RandomPosts1 ul li .item-thumbnail {float:left;margin-right:10px;width:51px;height:51px;border-radius:8px;overflow:hidden;}
#RandomPosts1 ul li .item-thumbnail img {width:100%;height:100%;object-fit:cover;}
#RandomPosts1 ul li:after {position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535; -webkit-box-shadow: 0px 0px 5px #000; -moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px;color:#fff;content: attr(data-num);}
#RandomPosts1 ul li:nth-child(1) { background: #ff4c54; }
#RandomPosts1 ul li:nth-child(2) { background: #ff764c; }
#RandomPosts1 ul li:nth-child(3) { background: #ffde4c; }
#RandomPosts1 ul li:nth-child(4) { background: #c7f25f; }
#RandomPosts1 ul li:nth-child(5) { background: #33c9f7; }
#RandomPosts1 ul li:nth-child(6) { background: #f6993d; }
#RandomPosts1 ul li:nth-child(7) { background: #7ee3c7; }
#RandomPosts1 ul li:nth-child(8) { background: #df01d7; }
#RandomPosts1 ul li:nth-child(9) { background: #b041ff; }
#RandomPosts1 ul li:nth-child(10){ background: #f52887; }
</style>
<script>//<![CDATA[
function loadRandomPosts(json) {
  const posts = json.feed.entry;
  const total = posts.length;
  const randomIndexes = [];
  const maxPosts = 10; 
  const list = document.getElementById("random-posts-list");
  while (randomIndexes.length < maxPosts && randomIndexes.length < total) {
    const r = Math.floor(Math.random() * total);
    if (!randomIndexes.includes(r)) randomIndexes.push(r);
  }
  let html = "";
  randomIndexes.forEach((i, index) => {
    const entry = posts[i];
    const title = entry.title.$t;
    const link = entry.link.find(l => l.rel === "alternate").href;
    const media = entry.media$thumbnail
      ? entry.media$thumbnail.url.replace(/s72\-c/, "s100-c")
      : "https://via.placeholder.com/51";
    html += `
      <li data-num="${index + 1}">
        <div class="item-thumbnail">
          <img src="${media}" alt="${title}">
        </div>
        <a href="${link}" target="_blank">${title}</a>
      </li>
    `;
  });
  list.innerHTML = html;
}
document.write(
  '<script src="Your_Domain_Name_Here/feeds/posts/summary?alt=json-in-script&callback=loadRandomPosts"><\/script>'
);
//]]></script>

Your_Domain_Name_Here နေရာမှာမိမိ Website Address(လိပ်စာ)ထည့်ပေးပါ။ပြီးပြီ။

Post a Comment