Membuat List Character dan Voice Actors Anime Otomatis - Dayat

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.

Demo