21 September 2016

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.

Cara Membuat Jadwal Rilis Seperti Tonansub, Cara Membuat Jadwal Rilis, Cara Membuat Jadwal Rilis Seperti Fansub, Cara Membuat Jadwal Rilis Fansub, Cara Membuat Fansub, Tutorial Membuat Jadwal Rilis Seperti Tonansub, Tutorial Membuat Jadwal Rilis Seperti Fansub, Aka321, Tutorial Fanubs, Jadwal Rilis Fansub

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>

Jika Sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu.


Sekian Tutorial kali ini. Semoga Bermanfaat. Sampai jumpa pada tutorial berikutnya.

Artikel Terkait

Seorang Blogger yang mengharapkan recehan dari blog kecilnya.

2 komentar

min iklannya didaftar dimana ya?

nanti diupdate lagi ya gan

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon