Membuat List Character dan Voice Actors Anime Otomatis

Membuat List Character dan Voice Actors Anime Otomatis

Cara membuat character list yang ada pada template AnimeStream (Wordpress). Juga versi otomatis yang berguna mempercepat dalam pembuatan nya.

Pertama, pasang css berikut di atas tag ]]></b:skin>.

.charvoice {
  --border: #cbd4eb;
  --bodyBg: #f2f2f2;
  --postBg: #fefefe;
  --postTeks: #3a4a68;
  --childTeks: #555;
  --titleTeks: #17294d;
}
/*CSS Dark Mode*/
.dark .charvoice {
  --border: #36495b;
  --bodyBg: #15202b;
  --postBg: #1c2834;
  --postTeks: #9dafbd;
  --childTeks: #999;
  --titleTeks: #ccdff8;
}
.charvoice {background: var(--postBg);border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;margin-bottom: 18px;box-shadow: 1px 3px 8px rgb(49 49 49 / 10%);overflow: hidden;}.charvoice .releases {position: relative;display: flex;justify-content: space-between;align-items: baseline;border-bottom: 1px solid var(--border);padding: 8px 15px;font-family: 'Inter', sans-serif;}.charvoice .releases h2 {font-size: 1.1em;color: var(--titleTeks);line-height: 20px;font-weight: 700;margin: 0;position: relative;}.charvoice .cvlist {margin: 10px;overflow: hidden;}.charvoice .cvitem {float: left;width: calc(100% / 2);}.charvoice .cvitempad {margin: 5px;overflow: hidden;background-color: var(--bodyBg);border-radius: 5px;}.charvoice .cvsubitem {width: calc(100% / 2);}.charvoice .cvcover {width: 45px;}.charvoice .cvcontent {width: calc(100% - (45px + 5px));}.charvoice .cvsubitem.cvchar, .charvoice .cvchar .cvcover, .charvoice .cvactor .cvcontent {float: left;}.charvoice .cvchar .cvcover {margin-right: 5px;}.charvoice .cvsubitem.cvactor, .charvoice .cvchar .cvcontent, .charvoice .cvactor .cvcover {float: right;}.charvoice .cvactor .cvcontent {text-align: right;}.charvoice .cvactor .cvcover {margin-left: 5px;}.charvoice img {min-height: 70px;max-width: 100%;height: auto;}.charvoice .cvcontent span {display: block;font-size: 13px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: var(--childTeks);}.charvoice .cvcontent .charrole {margin-top: 3px;font-size: 11px;}.charvoice a {color: var(--postTeks);text-decoration: none;}@media screen and (max-width: 650px) {.charvoice .cvitem {float: none;width: 100%;margin-bottom: 10px;}}

Text yang di tandai dapat kalian ganti jika ingin mengubah warna background dan text character list.

Kedua pasang html ini saat membuat postingan baru.

<div class='charvoice'>
    <div class='releases'>
      <h2>Character And Voice Actors</h2>
    </div>
    
    <!--Kode Di bawah adalah Versi Manual-->
    <div class='cvlist'>
    
      <!--Ini Item nya di duplicate-->
      <div class='cvitem'>
        <div class='cvitempad'>
          <div class='cvsubitem cvchar'>
            <div class='cvcover'><a href='https://myanimelist.net/character/137293/Bartender_A' target='_blank'>
                <img class='lazy' src='https://cdn.myanimelist.net/images/characters/14/297960.webp?s=43e496e8b5d1d157a955fd27a2a75627' width='45' height='70'>
              </a></div>
            <div class='cvcontent'><a href='https://myanimelist.net/character/137293/Bartender_A' target='_blank'><span class='charname'>Bartender A</span></a><span class='charrole'>Supporting</span></div>
          </div>
          <div class='cvsubitem cvactor'>
            <div class='cvcover'><a href='https://myanimelist.net/people/8035/Katsumi_Chou' target='_blank'>
                <img class='lazy' src='https://cdn.myanimelist.net/images/voiceactors/3/15551.jpg?s=1375d6f7464851de979c460229d459cc' width='45' height='65'>
              </a></div>
            <div class='cvcontent'><span class='charname'><a href='https://myanimelist.net/people/8035/Katsumi_Chou' target='_blank'>Chou, Katsumi</a></span><span class='charrole'>Japanese</span></div>
          </div>
        </div>
      </div>
      <!--End Item nya di duplicate-->
      
    </div>
    <!--End Versi Manual-->
    
  </div>

Kalian bisa ganti tag html versi manual dengan yang otomatis. atau duplicate kode item di bawah nya.

Untuk membuat tag html otomatis silahkan klik link Di Sini.

Kalian bisa masukkan informasi nya seperti gambar di bawah dan klik Confirm. Silahkan tunggu dan copy hasil html nya nanti.

Grabber Themes

Artikel Terkait

10 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • Rizal
    13 Oktober 2022 00.16
    Profil: https://www.blogger.com/profile/05283757175222371330
    Bang request fitur kaya gini tapi dibuatkan versi kaya spotify/music apple dong.
    • Dagruel.com
      13 Oktober 2022 07.41
      Profil: https://www.blogger.com/profile/02480525259652322034
      maksud nya gimana?
      ngambil data dari spotify? Tapi apa yang di ambil?
    • Rizal
      13 Oktober 2022 15.40
      Profil: https://www.blogger.com/profile/05283757175222371330
      recent post, tapi style nya begitu.
  • Lulu
    16 Oktober 2022 11.40
    Profil: https://www.blogger.com/profile/00641227521953921929
    Bang, bisa tambahin fitur mydramalist.com?
    • Lulu
      16 Oktober 2022 11.42
      Profil: https://www.blogger.com/profile/00641227521953921929
      Anda juga dapat menambahkan themoviedb.org
  • NEKOPEX
    23 Oktober 2022 17.05
    Profil: https://www.blogger.com/profile/13378729905234811987
    Bang tutor bikin lazyload animasi dong
    • Шош. Сом
      23 Oktober 2022 17.46
      Profil: https://www.blogger.com/profile/11131198046075365419
      contoh nya gimana?
    • NEKOPEX
      23 Oktober 2022 23.18
      Profil: https://www.blogger.com/profile/13378729905234811987
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Z-tpr2m6i1Kd3fmKzUNPcX9rvoeQ8VCe2UIdtZ4uU0zfUAl6wFwas-cm3ibPyzxa_h1qOvlqmF1vLdVE5YeIjkSA0ES8V-edSH_IeaXhZ0RorZFwuoPl3u07cXQ5nDLYm8WVaMaRltg7ZNC3nTsdrSS2AUua_ccfHxi7ievwkrlIL0-blLcUNatjAw/s1042/Screenshot_2022-10-22-21-20-45-68_40deb401b9ffe8e1df2f1cc5ba480b12-picsay.jpg
    • NEKOPEX
      23 Oktober 2022 23.21
      Profil: https://www.blogger.com/profile/13378729905234811987
      Kek gitu bang
  • smartclover
    27 November 2022 18.01
    Profil: https://www.blogger.com/profile/13651833130757460673
    min, bagi template grabber nya dong min.