Auto Fade Blog Feed Ticker

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

1. မိမိ Blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Layout ကိုနှိပ်ပါ
3. Add a Gadget ကိုနှိပ်ပါ
4. HTML/JavaScript ကိုနှိပ်
5. အောက်က Code ကို copy ယူ၍ထည့်ပါ။
6. CSS Code ကို <style>css_code_here</style> အဖွင့်အပိတ်ဖြင့်ထည့်ရန်
7. JavaScript Code ကို <script>javascript_code_here</script> အဖွင့်အပိတ်ဖြင့်ထည့်ရန်
8. https://www.khinmaungwin.dpdns.orgနေရာတွင်မိမိ website link ထည့်ရန်

 <div id="ticker">
  <ul class="fade-text">
  <li>loading feed...</li>
  </ul>
  </div>

#ticker {
    max-width: 450px;
    height: 80px;
    padding: 10px;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .fade-text {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
  }
  .fade-text.active { opacity: 1; }
  .thumbnail {
    width: 80px; height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
  }
.content { 
   flex-grow: 1; 
}
.title { 
   font-size: 1.1em; 
   font-weight: bold; 
}
.meta { 
   font-size: 0.85em; 
   color: #555; 
}

const ticker = document.getElementById('ticker');
fetch('https://api.rss2json.com/v1/api.json?rss_url=https://www.khinmaungwin.dpdns.org/feeds/posts/default?alt=rss')
    .then(res => res.json())
    .then(data => {
      ticker.innerHTML = ''; 
      const posts = data.items.slice(0, 10); 
      posts.forEach((post, i) => {
        const div = document.createElement('div');
        div.classList.add('fade-text');
        if (i === 0) div.classList.add('active');
const labels = post.categories && post.categories.length > 0 ?
  post.categories.join(', ') :
  'No Label';

div.innerHTML = `
  <img src="${post.thumbnail || 'https://via.placeholder.com/80'}" class="thumbnail"/>
  <div class="content">
    <div class="title">${post.title}</div>
    <div class="label" style="font-style: italic; color: #888; font-size: 0.9em;">${labels}</div>
    <div class="meta">
      ${new Date(post.pubDate).toLocaleDateString()}
    </div>
  </div>
`;
        ticker.appendChild(div);
      });

      let current = 0;
      const items = document.querySelectorAll('.fade-text');
      setInterval(() => {
        items[current].classList.remove('active');
        current = (current + 1) % items.length;
        items[current].classList.add('active');
      }, 3500);
    })
    .catch(err => {
      console.error(err);
      ticker.textContent = 'Failed to load feed.';
    });