Anime Info Awsubs Part 2 [Update]

Cara membuat Anime info seperti awsubs, artikel kali ini sama seperti tutorial yang sebelumnya yaitu Anime Info Auto Index Part 1, yang membedakan hanya stylenya saja, anime info kali ini mirip dengan anime info awsubs 2018 ini.



Kalian bisa cek demo atau pratinjau nya dibawah ini.



Cara Membuat Anime Info Awsubs [Part 2]

  1. Buka Blogger > tema > Edit HTML
  2. Simpan CSS berikut di dalam <style> ... </style>
  3. /* Anime Info Awsubs - Arlethdesign
       ================================ */
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i');
    #--info-statistik{overflow:hidden;clear:both}
    #--info-statistik .--left{float:left;overflow:hidden;max-width:190px;margin-right:10px}
    #--info-statistik .--right{line-height:normal;list-style:none;overflow:hidden;margin:auto;padding:0}
    #--info-statistik .--right li{margin:0 auto 1px;padding:8px 10px;line-height:normal}
    #--info-statistik .--right li:nth-child(even){background:#f5f5f5}
    #--info-statistik .--right li:nth-child(odd){background:#fafafa}
    #--info-statistik .--right li>b{min-width:100px;display:inline-block;float:left}
    #--sinopsis-info{padding:10px;border:1px solid #e1eaf0;line-height:21px;overflow:hidden;clear:both;margin:10px auto}
    #--sinopsis-info>h3{margin:0;font-weight:500i;font-size:16px;font-family:"Roboto",sans-serif}
    #--sinopsis-info>p{text-align:justify;line-height:20px;font-size:13px;margin:1.5em 0}
    #--box-list>h3{margin:0;padding:7px 12px;color:#fff;background:#7598e3;border-radius:5px;font-size:14px}
    .--wrap{margin:auto;padding:0;overflow:hidden;clear:both;list-style:none}
    .--wrap .--post{display:block;margin:auto;line-height:20px;border-bottom:1px solid #eee;}
    .--wrap .--post span{display:inline-block;padding:5px;margin:auto;}
    .--wrap .--post .--item a{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .--wrap .--post .--update{float:right;color:#999;font-size:12px;}
    @media screen and (max-width:600px){
    .--wrap .--post .--update{display:none}
    }

  4. Jika sudah, tambahkan Javascript berikut ke atas </head>
  5. <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
    <script type='text/javascript'>//<![CDATA[
    var posts_no=9999;var post_rilis=true;function post_latest(e){document.write('<ul class="--wrap">');for(var l=0;l<posts_no;l++){var d,f=e.feed.entry[l],p=f.title.$t;if(l==e.feed.entry.length){break}for(var h=0;h<f.link.length;h++){if("replies"==f.link[h].rel&&"text/html"==f.link[h].type){var b=f.link[h].title,c=f.link[h].href}if("alternate"==f.link[h].rel){d=f.link[h].href;break}}var o=f.published.$t,m=o.substring(0,4),k=o.substring(5,7),g=o.substring(8,10),i=new Array;i[1]="Jan",i[2]="Feb",i[3]="Mar",i[4]="Apr",i[5]="May",i[6]="Jun",i[7]="Jul",i[8]="Agu",i[9]="Sep",i[10]="Okt",i[11]="Nov",i[12]="Des",document.write('<li class="--post">'),document.write('<span class="--item"><a href="'+d+'" >'+p+"</a></span>"),1==post_rilis&&document.write('<span class="--update">'+i[parseInt(k,10)]+" "+g+", "+m+"</span>");var n="",a=0;document.write("</li>")}document.write("</ul>")};
    //]]></script>
    </b:if>
  6. Jika Sudah Save tema
  7. Lalu Buatlah Post atau Page!! Untuk Anime Info nya
  8. Tambahkan HTML & Javascript berikut ke dalam post/page tersebut.
  9. <div id='--info-statistik'>
    <div class='--left'><img src='LINK GAMBAR' alt='TITLE' title='TITLE'/></div>
    <ul class='--right'>
     <li><b>Japanese</b>: Nama Lain / Nama Jepang Anime</li>
     <li><b>Producer</b>: Produser Anime</li>
     <li><b>Type</b>: Tipe Anime</li>
     <li><b>Status</b>: Status Anime</li>
        <li><b>Genres</b>:
          <a href="#">Genre Anime</a>,
          <a href="#">Genre Anime</a>,
          <a href="#">Genre Anime</a>
        </li>
     <li><b>Durasi</b>: Durasi Anime</li>
     <li><b>Episode</b>: Episode Anime</li>
     <li><b>Rating</b>: Rating Anime</li>
     <li><b>Added On</b>: Tanggal Rilis Anime</li>
    </ul>
    </div>
    
    <div id='--sinopsis-info'>
    <h3>Synopsis ANIME TITLE </h3>
    <p>SINOPSIS ANIME</p>
    <center>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ku7XxxXpIKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </center>
    </div>
    
    
    <div id='--box-list'>
    <h3>Episode TITLE ANIME</h3>
    <script src='/feeds/posts/default/-/LABEL ANIME?orderby=published&amp;alt=json-in-script&amp;callback=post_latest&start-index=1&max-results=888'></script>
    <noscript>Opps, Javascript No Load, Please Reload Again</noscript>
    </div>
    

  10. Silahkan edit bagian yang sudah di tandai.

  11. Tag Keterangan
    max-results=888Ganti Dengan Jumlah Post Yang ingin ditampilkan
    LABEL AnimeGanti Dengan Label Post


Sekian tutorial kali ini tentang Cara Membuat Anime Info Awsubs [Part 2], jika masih bingung silahkan tinggalkan komentar dibawah ini, & sampai jumpa di artikel berikutnya. Terima kasih.

Related Posts