RANDOM/RECENT POST AUTO SLIDER

Random/Recent Post Auto Slider

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

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

1. Random Auto Slider

<b:if cond='data:view.isHomepage'>
<style>
#randomCircleSlider {display:flex;gap:10px;overflow:hidden;scroll-behavior:smooth;padding:10px 0;}
.randomItem {width:150px;height:150px;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}
.randomItem img {width:150px;height:150px;border-radius:50%;object-fit:cover; object-position:center center;transition: transform 0.5s ease;}
.randomItem:hover img {transform: scale(1.1);}
.num {position:absolute;bottom:5px;right:45%;background:#ff4c54;color:#fff;min-width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow: 0 0 3px rgba(0,0,0,0.3);}
@media(max-width:768px){
  #randomCircleSlider {overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;}
  .randomItem {scroll-snap-align:center;}}
</style>
<div id="randomCircleSlider"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
//<![CDATA[
$.ajax({
  url: 'Your_Domain_Name_Here/feeds/posts/default?orderby=published&alt=json-in-script&max-results=100',
  type: 'get',
  dataType: 'jsonp',
  success: function(json) {
    let posts = [ ];
    json.feed.entry.forEach(function(entry) {
      let title = entry.title.$t;
      let link = entry.link.find(l => l.rel === 'alternate').href;
      let img = '';
      if (entry.media$thumbnail) {
        img = entry.media$thumbnail.url
          .replace(/\/s[0-9]+(-c)?\//, "/s300-c/");
      } else {
        let c = entry.content?.$t || "";
        let match = c.match(/src="([^"]+)"/);
        img = match ? match[1].replace(/\/s[0-9]+(-c)?\//, "/s300-c/") : "https://via.placeholder.com/300";
      }
  posts.push({title, link, img});
    });
    posts.sort(() => 0.5 - Math.random());
    let count = 1;
    posts.slice(0, 10).forEach(p => {
      $('#randomCircleSlider').append(`
        <div class="randomItem">
          <a href="${p.link}" title="${p.title}">
            <img src="${p.img}" alt="${p.title}">
            <div class="num">${count++}</div>
          </a>
        </div>
      `);
    });
    const container = document.getElementById('randomCircleSlider');
    let scrollAmount = 0;
    setInterval(() => {
      container.scrollBy({left: 100, behavior: 'smooth'});
      scrollAmount += 100;
      if (scrollAmount >= container.scrollWidth - container.clientWidth) {
        container.scrollTo({left: 0, behavior: 'smooth'});
        scrollAmount = 0;
      }
    }, 1500);
  }
});
//]]>
</script>
</b:if>

1. Recent Auto Slider

<b:if cond='data:view.isHomepage'>
<style>
#recentCircleSlider {display:flex;gap:10px;overflow:hidden;scroll-behavior:smooth;padding:10px 0;}
.recentItem {width:150px;height:150px;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0;background:#f5f5f5;display:flex;align-items:center;justify-content:center;}
.recentItem img {width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:center center;transition: transform 0.5s ease;}
.recentItem:hover img {transform: scale(1.1);}
.num {position:absolute;bottom:5px;right:45%;background:#ff4c54;color:#fff;min-width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow: 0 0 3px rgba(0,0,0,0.3);}
@media(max-width:768px){
  #recentCircleSlider {overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;}
  .recentItem {scroll-snap-align:center;}}
</style>
<div id="recentCircleSlider"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
//<![CDATA[
$.ajax({
  url: 'Your_Domain_Name_Here/feeds/posts/default?alt=json-in-script&max-results=10', 
  type: 'get',
  dataType: 'jsonp',
  success: function(json) {
    let count = 1;
    json.feed.entry.forEach(function(entry) {
      let title = entry.title.$t;
      let link = entry.link.find(l => l.rel === 'alternate').href;
      let img = '';
   if (entry.media$thumbnail) {
        img = entry.media$thumbnail.url.replace(/\/s[0-9]+(-c)?\//, "/s300-c/");
      } else {
        let c = entry.content?.$t || "";
        let match = c.match(/src="([^"]+)"/);
        img = match ? match[1].replace(/\/s[0-9]+(-c)?\//, "/s300-c/") : "https://via.placeholder.com/300";
      }
     $('#recentCircleSlider').append(`
        <div class="recentItem">
          <a href="${link}" title="${title}">
            <img src="${img}" alt="${title}">
            <div class="num">${count++}</div>
          </a>
        </div>
      `);
    });
    const container = document.getElementById('recentCircleSlider');
    let scrollAmount = 0;
    setInterval(() => {
      container.scrollBy({left: 100, behavior: 'smooth'});
      scrollAmount += 100;
      if (scrollAmount >= container.scrollWidth - container.clientWidth) {
        container.scrollTo({left: 0, behavior: 'smooth'});
        scrollAmount = 0;
      }
    }, 1500);
  }
});
//]]>
</script>
</b:if>

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