DameDame 1.2 - Tema anime sederhana

April 30, 2021

#1

Tempate blogger anime sederhana ini khusus untuk pengguna blogger pemula, karena tidak banyak yang perlu di atur. Pengerjaan tema ini sudah lama sejak januari kemarin. Pengerjaan yang ugal-ugalan ditambah admin sibuk main game, menyebabkan tema ini terantar seketia. Ketika ada yang bertanya "Kapan tema Dame Dame jadi?" barulah lanjut pengerjaannya. Padahal ingin saya batalkan.

Update 1.2

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.