Cara Memasang Daftar Judul Sesuai Abjad

Anime list atau daftar anime biasanya digunakan oleh fansub atau fanshare agar pengunjungnya tidak kesulitan mencari anime yang diinginkannya. Ini juga membuat situs mereka tampil bagus, rapih, dan juga seperti fansub atau fanshare yang profesional. Tetapi terkadang ada juga fansub atau fanshare yang belum tahu Cara Membuat Anime List. Tips ini bisa juga di gunakan dengan yang lain

Cara Memasang Daftar Judul Anime Sesuai Abjad

Buka Blogger > Tema > Klik tombol Edit HTML dan tambahkan kode CSS di bawah ini sebelum </b:skin> atau </style>

/* Daftar Judul */
.naminadaftar{overflow:hidden}
.naminadaftar .namina-ini{font-size:14px}
.naminadaftar .namina-ini a{line-height:30px;width:32px;color:#fff;border-radius:3px;background:#6AB2F2;transition:all 0.25s;display:inline-block;text-align:center;margin-bottom:3px}
.naminadaftar .namina-ini a:hover{text-decoration:underline;color:#FFFFFF}
.naminadaftar .namina-wrap{margin-top:20px}
.naminadaftar .namina-group{display:inline-block;width:100%;background:#F9F9F9;margin-bottom:10px}
.naminadaftar .namina-head{font-weight:700;overflow:hidden;margin-bottom:10px;background:#1581BC;font-size:15px}
.naminadaftar .namina-head a{color:#FFFFFF;background:#19A3EA;float:left;margin:-5px -10px -8px -10px;padding:12px 30px;border-top-right-radius:50px}
.naminadaftar .namina-item{float:left;color:#727272;width:33.3%;border-left:2px solid #D7D7D7}
.naminadaftar .namina-item a{line-height:24px;font-size:14px;color:#7A7A7A;padding-right:10px;text-overflow:ellipsis;overflow:hidden;font-weight:100;white-space:nowrap;padding-left:10px}
@media screen and (max-width:1066px){.naminadaftar .namina-ini a{margin:1px}}
@media only screen and (max-width:768px){.naminadaftar .namina-item{width:50%}}
@media screen and (max-width:480px){.naminadaftar .namina-item{width:100%}}

Setelah itu klik tombol Simpan tema dan saat membuat postingan baru, tambahkan kode di bawah ini di dalam post pada tab HTML (Bukan Compose) kemudian ganti link dan keterangan sesuai dengan kebutuhan

<div class='naminadaftar'>
   <div class='namina-ini'>
      <a href='#%23'>#</a>
      <a href='#A'>A</a>
      <a href='#B'>B</a>
      <a href='#C'>C</a>
      <a href='#D'>D</a>
      <a href='#E'>E</a>
      <a href='#F'>F</a>
      <a href='#G'>G</a>
      <a href='#H'>H</a>
      <a href='#I'>I</a>
      <a href='#J'>J</a>
      <a href='#K'>K</a>
      <a href='#L'>L</a>
      <a href='#M'>M</a>
      <a href='#N'>N</a>
      <a href='#O'>O</a>
      <a href='#P'>P</a>
      <a href='#Q'>Q</a>
      <a href='#R'>R</a>
      <a href='#S'>S</a>
      <a href='#T'>T</a>
      <a href='#U'>U</a>
      <a href='#V'>V</a>
      <a href='#W'>W</a>
      <a href='#X'>X</a>
      <a href='#Y'>Y</a>
      <a href='#Z'>Z</a>
      <div class='clear'></div>
   </div>
   <div class='namina-wrap'>
      <div class='namina-group'>
         <div class='namina-head'><a name='#'>#</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='A'>A</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='B'>B</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='C'>C</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='D'>D</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='E'>E</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='F'>F</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='G'>G</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='H'>H</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='I'>I</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='J'>J</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='K'>K</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='L'>L</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='M'>M</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='N'>N</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='O'>O</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='P'>P</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='Q'>Q</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='R'>R</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='S'>S</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='T'>T</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='U'>U</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='V'>V</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='W'>W</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='X'>X</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='Y'>Y</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
      <div class='namina-group'>
         <div class='namina-head'><a name='Z'>Z</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
         <div class='namina-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
      </div>
   </div>
</div>

Setelah itu klik Publikasikan post dan lihat hasilnya di blog Anda.

• Result

Demikian tips Cara Memasang Daftar Judul Sesuai Abjad, semoga bermanfaat.