DameDame 1.2 - Template anime sederhana

Template anime Fansub dan Fanshare

DameDame 1.2 - Template anime sederhana

Cara memasang wiget rekomendasi

Widget ini murni css, namun kekurangannya tidak ada tombol next dan previous. Tidak mengapalah, daripada harus memasang seluruh jQuery librarry. Maklumi saja kalau ada kekurangan.

Wiget ini untuk versi 1 atau untuk dipasang di blog kalian (tidak dijamin berhasil). Bagi yang sudah update ke 1.2 skip tahapan ini.

HTML/JavaScript Wiget

Paste di bawah <b:section id='main' showaddelement='true'>


<b:widget cond='data:view.isHomepage' id='HTML1' locked='true' title='' type='HTML' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='content'><![CDATA[<div id="s-move"></div>]]></b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
        <div class='bc-white r5 y2x10 t-black fw700 s09'>Rekomendasi</div>
  <div class='s-wrap'>
    <data:content/>
  </div>
</b:includable>
    </b:widget>

CSS

Paste di atas ]]></b:skin>


/* HORIZONTAL SLIDER CSS*/
main #HTML1 {
    display: flex;
    align-items: center;
}
.s-wrap {
    width: 100%;
    overflow: hidden;
    height: 38px;
}
#s-move {
  position: relative;
  bottom: 0;
}
.t-black {color: #1e1b1b}
.slide {
  box-sizing: border-box;
  padding: 10px;
  /* Force all slides to layout horizontally */
  width: 100%;
  flex-shrink: 0; 
}
@keyframes slideh {
  /* Will use keyframes to shift the 5 slides *
  0% { bottom: 0; }
  20% { bottom: 100%; }
  40% { bottom: 200%; }
  60% { bottom: 300%; }
  80% { bottom: 400%; }
  100% { right: 0; }
 
  /* BUT the above will be non-stop */
  /* We want short pauses between each slide, so... */
  0% { bottom: 0; }
  15% { bottom: 0; }
  20% { bottom: 100%; }
  35% { bottom: 100%; }
  40% { bottom: 200%; }
  55% { bottom: 200%; }
  60% { bottom: 300%; }
  75% { bottom: 300%; }
  80% { bottom: 400%; }
  95% { bottom: 400%; }
  100% { bottom: 0; }
}
#s-move { animation: slideh linear 20s infinite; }
#s-move:hover { animation-play-state: paused; }

Javascript

Paste di atas </body>


<b:if cond='data:view.isHomepage'>
  <script>
    //<![CDATA[
    var homePage = "https://dame-dame-bt.blogspot.com/",
    numPosts = 5;
    function randomPosts(a){if(document.getElementById("s-move")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("s-move");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<div class="slide"><a class="fff" href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></div>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
    //]]>
  </script>
</b:if>

Ganti marker orange dengan alamat blogmu.

Demo

  • https://dame-dame-bt.blogspot.com/

Download

  • https://bit.ly/3vybf5J

Terimakasih Telah Berkunjung di Tokotheme.