Anime Info OtakuDesu

Kali ini saya akan membagikan cara membuat Anime Info seperti web 'otakudesu' sekaligus grabber otomatis nya.

Anime Info OtakuDesu
Dagruel

Cara nya tinggal salin kode css berikut ke dalam template kalian, letakkan di atas tag </style>.

.aniFilz{display:inline-block;max-width:100%;margin:auto;overflow:hidden;width:100%;font-size:13px;color:#333}.aniFilz .aniMage{width:190px;height:246px;padding:1px;float:left;margin-right:10px;box-sizing:border-box}.aniInfo li,.aniInfo ul{list-style:none;padding:0;margin:0}.aniInfo li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}.aniInfo li b{display:block;float:left;width:95px;color:#000}.aniInfo li b:after{content:': ';float:right;margin-right:3px}.aniSinoc p{line-height:25px;padding:5px 0;margin:0 0 10px}@media only screen and (max-width:767px){.aniFilz .aniMage{width:30%;height:auto;float:none;display:block;margin:auto}}

Selanjutnya buat postingan dengan html berikut dan pastikan saat membuat post menggunakan mode HTML bukan Compose.

<div class="aniFilz">
  <img class="aniMage" src="urlGambar" alt="Judul_Anime" title="Judul_Anime" />
  <div class="aniInfo">
    <ul>
      <li><b>Judul</b><span>Example</span></li>
      <li><b>Japanese</b><span>Example</span></li>
      <li><b>Score</b><span>Example</span></li>
      <li><b>Producer</b><span>Example</span></li>
      <li><b>Tipe</b><span>Example</span></li>
      <li><b>Status</b><span>Example</span></li>
      <li><b>Total Episode</b><span>Example</span></li>
      <li><b>Durasi</b><span>Example</span></li>
      <li><b>Tanggal Rilis</b><span>Example</span></li>
      <li><b>Studio</b><span>Example</span></li>
      <li><b>Genre</b><span>Example</span></li>
    </ul>
  </div>
  <div class="aniSinoc">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
Silahkan ganti text yang di tandai sesuai keinginan kalian.

Juga jika tidak ingin ribet saat membuat anime info silahkan kunjungi link berikut klik di sini. Kalian tinggal masukkan id anime dari myAnimeList dan salin HTML.

Sekian dari saya, jika ada yang ingin di tanyakan silahkan berkomentar di kolom komentar. Terima Kasih.

Comments