Home
TICKER

RSS SCROLL TICKER

Rss Scroll Ticker



ဒါကတော့မိမိ Blogger website ထဲကမှ မိမိ blog ရဲ့ post များကို feed အဖြစ်ယူ၍ပြသလို့ရ အောင် ပြုလုပ်ထားတဲ့ RSS Ticker လေးပါ။ကြိုက် နှစ်သက်လို့ အသုံးပြုချင်တယ်ဆိုရင်‌ အောက်မှာပြထားတဲ့အတိုင်းလုပ်‌ဆောင်၍ထည့်သွင်းအသုံးပြုနိုင်ပါသည်။


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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.ticker-wrap {background:#fff;border:1px solid #e5e5e5;height:50px;display:flex;align-items:center;overflow:hidden;position:relative;font-family: 'Oswald', sans-serif;}
.ticker-title {background:#71db00;padding:12px 15px;font-size:16px;color:#fff;text-transform:uppercase;min-width:90px;text-align:center;z-index:10;}
#ticker-list {display:flex;gap:60px;white-space:nowrap;transform: translateX(100%);margin-left:15px;padding-left:5px;}
#ticker-list li {list-style:none;display:flex;align-items:center;gap:10px;}
#ticker-list li img.thumb {width:25px;height:25px;flex-shrink:0;object-fit:cover;border-radius:50%;display:block;}
#ticker-list li a {color:#71db00;font-size:15px;text-decoration:none;white-space:nowrap;}
#ticker-list li a:hover {text-decoration:underline;}
.mbtmeta span {
 font-weight: 600;font-size: 12px;padding: 2px 6px;border-radius: 4px;margin-left: 8px;white-space: nowrap;user-select: none;}
</style>
<div class="ticker-wrap">
  <div class="ticker-title">HOT🔥</div>
  <ul id="ticker-list"></ul>
</div>
<script>//<![CDATA[
const feedURL = window.location.origin + "/feeds/posts/default?alt=json&max-results=10";
const maxTitle = 70;
fetch(feedURL)
  .then(res => res.json())
  .then(data => {
    const entries = data.feed.entry || [];
    const box = document.getElementById("ticker-list");
    entries.forEach((e, i) => {
      const title = e.title.$t.substring(0, maxTitle);
  const link = e.link.find(l => l.rel === "alternate").href;
  let thumb = "";
  if (e.media$thumbnail) {
    thumb = e.media$thumbnail.url.replace("s72-c", "s120");
  } else {
    thumb = "https://via.placeholder.com/120x80?text=No+Image";
  }
  const author = e.author ? e.author[0].name.$t : "Anonymous";
  const d = new Date(e.published.$t);
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  const dateText = d.getDate()+" "+months[d.getMonth()];
  const com = e.thr$total ? e.thr$total.$t : "0";
  const labels = e.category ? e.category.map(c => c.term).join(", ") : "";
  const item = `
    <li>
      <img class="thumb" src="${thumb}">
      <div class="mbtmeta">${dateText} • ${author} • 💬 ${com} • <span style="background:#0066ff;color:#fff;">${labels}</span></div>
      <a href="${link}" target="_blank">${title}</a>
    </li>
  `;
  box.innerHTML += item;
});
    startScrolling();
  });
function startScrolling() {
  const box = document.getElementById("ticker-list");
  let x = window.innerWidth;
  function move() {
    x -= 1;
    box.style.transform = "translateX(" + x + "px)";
    if (x < -box.scrollWidth) {
      x = window.innerWidth;
    }
    requestAnimationFrame(move);
  }
  move();
}
//]]></script>

Post a Comment