Auto Slide Blog Feed Ticker

ဒါကတော့မိမိ Blogger website ထဲကမှ မိမိ blog ရဲ့ post များကို feed အဖြစ်ယူ၍ပြသလို့ရ အောင် ပြုလုပ်ထားတဲ့ Slide 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 id="ticker-list">
    <li>Loading feed...</li>
  </ul>
</div>

 #ticker {
    width: 100%;
    max-width: 400px;
    height: 80px;
    overflow: hidden;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
    position: relative;
    background: #fff;
  }
  #ticker ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    transition: transform 0.5s ease;
  }
  #ticker ul li {
    height: 80px;
    line-height: 1.2;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    background: #f9f9f9;
  }
  .thumbnail {
    width: 60px; height: 60px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 12px;
    flex-shrink: 0;
  }
  .content {
    flex-grow: 1;
  }
  .title {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 4px;
  }
  .meta {
    font-size: 0.85em;
    color: #666;
  }
  

const tickerList = document.getElementById('ticker-list');
  const itemHeight = 80;
  let position = 0;

  function slideUp() {
    position++;
    if (position >= tickerList.children.length / 2) {
      position = 0;
      tickerList.style.transition = 'none';
      tickerList.style.transform = 'translateY(0)';
      void tickerList.offsetWidth; // reflow
      tickerList.style.transition = 'transform 0.5s ease';
    } else {
      tickerList.style.transform = `translateY(-${position * itemHeight}px)`;
    }
  }

  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 => {
      tickerList.innerHTML = '';

      const posts = data.items.slice(0, 10);

      posts.forEach(post => {

        // label (categories array)
        const label =
          (post.categories && post.categories.length)
            ? post.categories.join(', ')
            : 'No label';

        const li = document.createElement('li');

        const thumbnail = post.thumbnail || 'https://via.placeholder.com/60';

        li.innerHTML = `
          <img src="${thumbnail}" class="thumbnail" alt="Thumbnail"/>
          <div class="content">
            <div class="title">${post.title}</div>
            <div class="meta">
              ${new Date(post.pubDate).toLocaleDateString()} |
              ${label}
            </div>
          </div>
        `;

        tickerList.appendChild(li);
      });

      // Duplicate list for seamless scrolling
      tickerList.innerHTML += tickerList.innerHTML;

      setInterval(slideUp, 2500);
    })
    .catch(err => {
      console.error(err);
      tickerList.innerHTML = '<li>Failed to load feed.</li>';
    });