Cara Membuat Jadwal Rilis Seperti Tonansub

Cara Membuat Jadwal Rilis Seperti Tonansub - Jadwal Rilis biasa digunakan Fansub atau Fanshare agar pengunjung mudah mengetahui kapan anime yang diinginkannya atau yang ingin ditontonnya rilis.

Sebelumnya saya sudah posting tentang Cara Membuat Jadwal Rilis Seperti Kurogaze. Dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Jadwal Rilis Seperti Tonansub. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>

/* CSS Jadwal Rilis Tonansub - Aka321 */
.jrtns321{font-family:Arial, sans-serif !important;font-size:13px;color: #333333;}
.jrtns321 a{color: #75c5cf;}
.jrtns321 a:hover{color: #5e5e5e;}
.jrtb321{border-bottom: 1px solid #ebebeb;padding: 0 !important;margin: 0 !important;list-style: none;display: inline-block;width: 100%;}
.jrtb321:before, .jrtb321:after{display: table;content: " ";}
.jrtb321 li{float: left;margin: -1px !important;position: relative;display: block;}
.jrtb321 > li.active > a, .jrtb321 > li.active > a:hover, .jrtb321 > li.active > a:focus{color: #555555;cursor: default;background-color: #ffffff;border: 1px solid #ebebeb;border-bottom-color: transparent;}
.jrtb321 li a{position: relative;display: block;margin-right: 4px;border: 1px solid transparent;line-height: 1.428571429;border-radius: 4px 4px 0 0;font-weight: 600;padding: 15px 20px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
.jrtb321 li a:hover{border: 1px solid #ebebeb;background: #fff;}
.jrctn321{padding: 20px;}
.tab2, .tab3, .tab4, .tab5, .tab6, .tab7, .tab8{display:none;}
.jrctn321 hr{margin-top: 4px;margin-bottom: 4px;border: 0;border-top: 1px solid #eeeeee;height: 0;background: none;}
.jrctn321 .row{margin-right: -15px;margin-left: -15px;display: flex;}
.jrctn321 .row:before, .jrctn321 .row:after{display: table;content: " ";}
.jrava0{float: left;padding-left: 15px;}
.jrava0 img.avatar{width:50px;height:50px;border-radius:50%;background:#ebebeb;}
.jrinfo{width:80%;position: relative;padding-right: 15px;padding-left: 15px;float:left;}
.jrinfo p{margin: 0 0 10px;}

Lalu, Terapkan Kode Jquery dibawah ini sebelum </head> (Jika sudah ada lewati langkah ini).

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

Setelah itu, Salin dan Terapkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
jQuery(document).ready(function($){$('.jrtb321 li:first').addClass('active');$('.jrctn321 > div').hide;$('.jrctn321 > div:first').fadeIn(700);$('.jrtb321 a').click(function(){$('.jrtb321 li').removeClass('active');$(this).parent().addClass('active');var activeTab=$(this).attr('href');$('.jrctn321 > div:visible').hide();$(activeTab).fadeIn(700);return!1})});
</script>

Jika Sudah, Silahkan Simpan Template.

Kemudian, Buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).

<div class="jrtns321">
 <ul class="jrtb321">
  <li><a href="#senin">Senin</a></li>
  <li><a href="#selasa">Selasa</a></li>
  <li><a href="#rabu">Rabu</a></li>
  <li><a href="#kamis">Kamis</a></li>
  <li><a href="#jumat">Jum'at</a></li>
  <li><a href="#sabtu">Sabtu</a></li>
  <li><a href="#minggu">Minggu</a></li>
  <li><a href="#random">Random</a></li>
 </ul>
 <div class="jrctn321">
 <!------- INI TAB SENIN ------->
  <div class="tab1" id="senin">
   
   <!--- ANIME SENIN DISINI --->
   
  </div>
 <!------- INI TAB SELASA ------->
  <div class="tab2" id="selasa">
   
   ><!--- ANIME SELASA DISINI --->
   
  </div>
 <!------- INI TAB RABU ------->
  <div class="tab3" id="rabu">
   
   <!--- ANIME RABU DISINI --->
   
  </div>
 <!------- INI TAB KAMIS ------->
  <div class="tab4" id="kamis">
   
   <!--- ANIME KAMIS DISINI --->
   
  </div>
 <!------- INI TAB JUMAT ------->
  <div class="tab5" id="jumat">
   
   <!--- ANIME JUMAT DISINI --->
   
  </div>
 <!------- INI TAB SABTU ------->
  <div class="tab6" id="sabtu">
   
   <!--- ANIME SABTU DISINI --->
   
  </div>
 <!------- INI TAB MINGGU ------->
  <div class="tab7" id="minggu">
   
   <!--- ANIME MINGGU DISINI --->
   
  </div>
 <!------- INI TAB RANDOM ------->
  <div class="tab8" id="random">
   
   <!--- ANIME RANDOM DISINI --->
   
  </div>
 </div>
</div>

Setelah itu, dibawah ini merupakan kode untuk menambah anime di jadwal rilis. Untuk menambahkan anime, silahkan salin dan terapkan di bawah kode yang sudah ditandai.

   <hr>
    <div class="row">
     <div class="jrava0">
      <img class="avatar" src=" LINK GAMBAR " alt=" NAMA ANIME "/>
     </div>
     <div class="jrinfo">
      <p><a href=" LINK TUJUAN "> NAMA ANIME </a></p>
      <p>Genre: <a> GENRE ANIME </a></p>
     </div>
    </div>