09 Oktober 2016

Cara Membuat Anime Info Seperti Oploverz

Cara Membuat Anime Info Seperti Oploverz - Anime Info atau Informasi Anime biasa digunakan Fansub atau Fanshare agar pengunjung mengetahui sinopsis, jumlah episode, rating, genre, durasi dari anime tersebut. Biasanya dalam Anime Info juga terdapat tabel episode anime untuk mempermudah pengunjung mendownload anime favoritnya.

Cara Membuat Anime Info Seperti Oploverz, Cara Membuat Anime Info Seperti Fansub, Cara Membuat Anime Info Fansub, Cara Membuat Fansub, Cara Membuat Seperti Oploverz, Aka321, Aka321.blogspot.com, Tutorial Fansub, Cara Membuat Fansub

Ini merupakan postingan pertama saya dalam membuat Anime Info. Pada kesempatan kali ini saya akan berbagi ilmu tentang Cara Membuat Anime Info Seperti Oploverz. 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>

/* Anime Info Oploverz - Aka321 */
#aiopl321{font-family: 'Open Sans',sans-serif}
#aiopl321 a{text-decoration: none;font-family: 'Open Sans',sans-serif}
#aiopl321 a:hover{text-decoration: underline}
#aiopl321 h1{font-size: 15px;line-height: normal;margin-bottom: 10px}
#aiopl321 .imgdesc{overflow: hidden;margin-bottom: 10px;font-size: 13px}
#aiopl321 .imgdesc img{float: left;width: 150px;height: 210px;padding: 1px;border: 1px solid #DDD;margin-right: 10px}
#aiopl321 .desc{text-align: justify;font-family: segoe ui;color: #4B5360}
#aiopl321 .desc .synopsis{margin: 0;font-family: arial;font-size: 12px;line-height: 20px}
.desc .latestwrap{float: right;border: 1px solid #DDD;margin-left: 10px;padding: 1px;overflow: hidden;width: 150px;text-align: center}
.desc .latestwrap .latesthead{background: #333;color: #FFF;line-height: 27px;font-size: 13px}
.desc .latestwrap .latesteps{line-height: 34px;font-size: 17px;color: #4B5360}
.desc .latestwrap .latestnow{line-height: 27px;font-size: 13px}
.desc .latestwrap .latestnow a{display: block;background: #F13E3E;color: #FFF}
.infolist{padding: 6px 10px;font-size: 13px;background: #F7F7F7;border: 1px solid #E0DFDF;margin-bottom: 5px;color: #444}
.infolist a{color: #000}
.infolist ul{margin: 0px !important;padding: 0px !important}
.infolist ul li{line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333;list-style: none}
.infolist ul li b{display: block;float: left;width: 95px;color: #333}
.epslist{width: 100%;margin: 0;padding: 0;border-collapse: collapse;border-spacing: 0;font-family: tahoma}
.epslist tr:hover{background: #555 !important}
.epslist tr:hover th{background:#333}
.epslist tr:hover a, .epslist tr:hover td{color: #fff;transition: all 0.25s;background:transparent}
.epslist tr:hover td.dl {color: #fff;transition: all 0.25s;background: #f13e3e}
.epslist th{background: #333;color: #FFF;text-align:left}
.epslist th.eps, .epslist th.dl{text-align: center}
.epslist th, .epslist td{padding: 3px 5px !important;font-size: 11px;border: 1px solid #fff;font-weight: 400}
.epslist a{color: #000;text-decoration: none}
.epslist tr:nth-child(even){background: #F0F0F0}
.epslist tr:nth-child(odd){background: #F7F7F7}
.epslist td.eps{text-align: center}
.epslist td.dl{text-align: center;background: #F13E3E}
.epslist td.dl a{color: #fff}
.epslist td a:hover{text-decoration: underline}

  • Jika Sudah, Silahkan Simpan Template.

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

<div id="aiopl321">
 <h1>Tonton atau Download "Judul Anime" Subtitle Indonesia</h1>
 <div class="imgdesc">
  <img src="Link Gambar/Cover Anime" alt="Judul Anime"/>
  <div class="desc">
   <b>Sinopsis Judul Anime</b>
   <div class="latestwrap">
    <div class="latesthead">Episode Terbaru</div>
    <div class="latesteps"> Episode #</div>
    <div class="latestnow">
     <a href="Link Anime yang terakhir di rilis">Tonton Sekarang!</a>
    </div>
   </div>
   <div id="synopsis">
    Sinopsis Anime
   </div>
  </div>
 </div>
 <div class="infolist">
  <ul>
   <li>
    <b>Judul Asli</b>: Nama Lain Anime / Nama Jepang Anime
   </li>
   <li>
    <b>Tipe</b>: Tipe Anime
   </li>
   <li>
    <b>Episode</b>: Episode Anime
   </li>
   <li>
    <b>Status</b>: Status Anime
   </li>
   <li>
    <b>Disiarkan</b>: Tanggal Rilis Anime
   </li>
   <li>
    <b>Produser</b>: Produser Anime
   </li>
   <li>
    <b>Skor</b>: Skor Anime
   </li>
   <li>
    <b>Genres</b>:
     <a href="Link Genre">Genre Anime</a>,
     <a href="Link Genre">Genre Anime</a>,
     <a href="Link Genre">Genre Anime</a>,
     <a href="Link Genre">Genre Anime</a>
   </li>
   <li>
    <b>Durasi</b>: Durasi Anime
   </li>
  </ul>
 </div>
 <table class="epslist">
  <thead>
   <tr>
    <th class="eps">Episode #</th>
    <th>Judul Episode</th>
    <th>Tanggal Posting</th>
    <th class="dl">Download</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td class="eps">
     <a href="Link Anime">Episode Anime</a>
    </td>
    <td>
     <a href="Link Anime">Judul Anime</a>
    </td>
    <td>
     Tanggal Rilis
    </td>
    <td class="dl">
     <a href="Link Anime">Download!</a>
    </td>
   </tr>
  </tbody>
 </table>
</div>

  • Setelah itu, dibawah ini merupakan kode untuk menambah episode anime di anime info. Untuk menambahkan episode anime, silahkan salin dan terapkan pada kode diatas sebelum </tbody>.

   <tr>
    <td class="eps">
     <a href="Link Anime">Episode Anime</a>
    </td>
    <td>
     <a href="Link Anime">Judul Anime</a>
    </td>
    <td>
     Tanggal Rilis
    </td>
    <td class="dl">
     <a href="Link Anime">Download!</a>
    </td>
   </tr>

  • Jika sudah, silahkan kamu ganti kode yang sudah ditandai sesuai dengan tanda kode tersebut. Lalu, publikasikan dan lihat bagaimana hasilnya.


Sekian ilmu yang saya bagikan hari ini. Semoga bermanfaat. Terima kasih.

Artikel Terkait

Seorang Blogger yang mengharapkan recehan dari blog kecilnya.

14 komentar

Mantap gan, ditunggu Anime Info dari Nekonime!

bisa ko gan, ga bisa gimana?

Cara ganti warna dari merah ke biru gimana gan? yg mana yg harus diganti?

Agan cari kode ini #F13E3E di CSSnya, terus ganti sama kode warna yang agan pengen..

kalau mau warna biru ganti pake kode ini #285FC3

Makasih banyak gan, fast respon. Terbaik lah haha

Ini kira2 responsive gak gan ??

responsive gan, bisa dicoba aja dulu..

Gan mau tanya, kan fungsi "ul" "/ul" diatas itu untuk membuat simbol, saya coba pasang di beberapa template ada yang muncul ada juga yang engga, termasuk saya liat didemo ini simbolnya ga muncul. Kalo boleh tau itu permasalahannya emang di templatenya apa bukan gan?

Oh iya gan satu hal lagi, saya coba ganti nilai line-height "synopsis" di cssnya tapi sama sekali ga ada perubahan, terus saya coba ganti htmlnya dari (div id="synopsis") jadi (div class="synopsis") baru line heightnya bisa saya atur. Itu gapapa gan kalo gitu? Soalnya line-heightnya makan ruang gan kegedean.

Mungkin nanti saya akan buat untuk tutorial dalam bentuk videonya.

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