POPULAR POST SLIDER

Popular Post Slider

ဒါက​တော့ Popular Post ကို Design တမျိုးနဲ့ပြုလုပ်ထားတဲ့ Widget Design ​လေးဖြစ်ပါတယ်။အရမ်းကိုလှပ​သေသပ်ပါတယ်။ဒီ Popular Post Design မျိုးက Template မှာနဂိုပါလာတဲ့ Template ​တွေရှိသလိုနဂိုမပါလာတဲ့ Template ​တွေလဲရှိပါတယ်။Popular Post Slider နဂိုမပါလာတဲ့ Template သုံးတဲ့သူ​တွေအတွက်အဓိကရည်ရွယ်၍တင်​ပေးခြင်းဖြစ်ပါတယ်။Popular Post Slider နဂိုပါလာပြီးသား Template သုံးတဲ့သူ​တွေက​တော့မိမိ Template မှာနဂိုပါလာတဲ့ Design ကိုမနှစ်သက်ရင်​တော့အခုပဲဒီ Popular Post Slider နဲ့​ပြောင်းလိုက်ကြပါစို့။ပြုလုပ်ပုံပြုလုပ်နည်းကလဲထုံးစံအတိုင်းပါပဲ HTML/Javascript နဲ့ပဲပြုလုပ်ရမှာပါ။

No(1) မိမိ site ကို account အရင်ဝင်ပါ

No(2) dashboard ထဲက Theme ကိုနှိပ်

No(3) Customize ဘေးက 🔻ကိုနှိပ်

No(4) Edit HTML ကိုနှိပ်

No(5) မိမိထားချင်တဲ့ နေရာမှာ </b:widget> နဲ့ <b:widget> ကြားမှာ‌ အောက်က code ကိုထည့် ပေးပါ။

<b:widget id='PopularPosts012' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
      <b:widget-settings>
        <b:widget-setting name='numItemsToShow'>10</b:widget-setting>
        <b:widget-setting name='showThumbnails'>true</b:widget-setting>
        <b:widget-setting name='showSnippets'>false</b:widget-setting>
        <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='AT_slidecontainer'>
      <svg class='arrow' height='27' id='slide-left' viewBox='0 0 16 27' width='14.6' xmlns='http://www.w3.org/2000/svg'><path d='M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z'/></svg>
    <section id='A__slider'>
      <b:loop values='data:posts' var='post'>
          <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='slider-details'><a expr:href='data:post.href'><data:post.title/></a></div>
           
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;Slide_thumbnail&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 672, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
             
            </b:if>
            <div class='slider-details'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
          <div style='clear: both;'/>
        </b:if>
      
      </b:loop>
    </section>
    
    <svg class='arrow' height='27' id='slide-right' viewBox='0 0 16 27' width='14.6' xmlns='http://www.w3.org/2000/svg'><path d='M16 23.207L6.11 13.161 16 3.093 12.955 0 0 13.161l12.955 13.161z'/></svg>
  </div>
</b:includable>
    </b:widget>
 

  <div class='clear'/>

No(6) </body> ကိုရှာတွေ့ပြီဆိုရင် အောက်က ပေးထားတဲ့ JavaScript code ကိုအဲဒီ </body> အပေါ်ကနေထည့်ပေးပါ။

<style>
.AT_slidecontainer { max-width: 1000px;position: relative; display: flex; justify-content: center; align-items: center;padding: 0 12px; margin: 0 auto; } 
#slide-left{left: 0; z-index: 999;} 
#slide-right{right: 0; z-index: 999;} 
.arrow { width: 2rem; fill: #000!important; margin: 0 1rem;position: absolute; } 
#slide-right{-webkit-transform: scaleX(-1); transform: scaleX(-1); } section#A__slider { width: 100%; /* height: 300px; */ margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; /* border: 1px solid black; */ } section#A__slider::-webkit-scrollbar { display:none; } section#A__slider .Slide_thumbnail { flex: 0 0 auto; object-fit: cover;position: relative; cursor: pointer; width: 530px; height: 328px; border: 1px solid #555; overflow: hidden; transform: scale(.95); transition: all .3s; } 
#A__slider .Slide_thumbnail img{width: 100%; height: 100%; object-fit: cover;} section#A__slider .thumbnail:hover { transform: scale(1); } 
.slider-details { z-index: 9; position: absolute; bottom: 0; left: 0; width: 100%; height: auto; opacity: 1; transition: all .3s; background: linear-gradient(0deg, rgb(2, 0, 36) 10%, rgba(0, 0, 0, 0) 100%); } 
@media (max-width: 480px){section#A__slider .Slide_thumbnail{width: 230px!important; height: 144px!important;}} 
.slider-details h2 { font-size: 1.2rem; font-weight: 500; } 
.slider-details a { color: #fff!important; display: table-cell; width: 100%; padding: 15px 10px; vertical-align: middle; font-weight: bold; }
</style>
<script>
//<![CDATA[
let thumbnails=document.getElementsByClassName("Slide_thumbnail"),slider=document.getElementById("A__slider"),buttonRight=document.getElementById("slide-right"),buttonLeft=document.getElementById("slide-left");buttonLeft.addEventListener("click",function(){slider.scrollLeft-=125}),buttonRight.addEventListener("click",function(){slider.scrollLeft+=125});const maxScrollLeft=slider.scrollWidth-slider.clientWidth;function autoPlay(){slider.scrollLeft>maxScrollLeft-1?slider.scrollLeft-=maxScrollLeft:slider.scrollLeft+=1}let play=setInterval(autoPlay,30);for(var i=0;i<thumbnails.length;i++)thumbnails[i].addEventListener("mouseover",function(){clearInterval(play)}),thumbnails[i].addEventListener("mouseout",function(){return play=setInterval(autoPlay,30)});
//]]>
</script> 

No(7) save ကိုနှိပ်ပြီးပါပြီ