Akhir-akhir ini banyak blogger baru bermunculan dengan membawa kratifitas masing-masing. Salah satunya blogger dengan niche anime.
Dalam mengurus blog fansub dan fanshare tidaklah mudah seperti blog dengan berita, entertainment, pendidikan dan sebagainya.
Membuat blog anime biasanya akan membutuhkan sebuah list anime sesuai abjad yang beraturan dan rapih.
Berikut tutorial membuat list anime di blogger
1. Buka Blogger > Tema > Edit HTML
2. Copy dan paste kode CSS di atas tag /head
<style>
.kesn123{overflow:hidden}
.kesn123 .kens234{font-size: 14px}
.kesn123 .kens234 a{line-height: 30px;width: 38px;color: #FFFFFF;border-radius: 5px;background: #333;transition: all 0.25s;display: inline-block;text-align: center}
.kesn123 .kens234 a:hover{text-decoration: underline;color: #FFFFFF}
.kesn123 .kens345{margin-top: 20px}
.kesn123 .kens456{display: inline-block;width: 100%;background: #F9F9F9;margin-bottom: 10px}
.kesn123 .kens567{font-weight: 700;overflow: hidden;margin-bottom: 10px;background: #3F51B5;font-size: 15px}
.kesn123 .kens567 a{color: #FFFFFF;background: #000;float: left;margin: -5px -10px -8px -10px;padding: 12px 30px;border-top-right-radius: 50px}
.kesn123 .kens678{float: left;color: #727272;width: 33.3%;border-left: 2px solid #D7D7D7}
.kesn123 .kens678 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){.kesn123 .kens234 a{margin:1px}}
@media only screen and (max-width: 768px){.kesn123 .kens678{width:50%}}
@media screen and (max-width:480px){.kesn123 .kens678{width:100%}}
</style>
3. Buat halaman baru lalu copy dan paste Kode HTML di bawah
<div class='kesn123'>
<div class='kens234'>
<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='kens345'>
<div class='kens456'>
<div class='kens567'><a name='#'>#</a></div>
<!-- KODE UNTUK ANIME "#" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='A'>A</a></div>
<!-- KODE UNTUK ANIME "A" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='B'>B</a></div>
<!-- KODE UNTUK ANIME "B" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='C'>C</a></div>
<!-- KODE UNTUK ANIME "C" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='D'>D</a></div>
<!-- KODE UNTUK ANIME "D" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='E'>E</a></div>
<!-- KODE UNTUK ANIME "E" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='F'>F</a></div>
<!-- KODE UNTUK ANIME "F" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='G'>G</a></div>
<!-- KODE UNTUK ANIME "G" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='H'>H</a></div>
<!-- KODE UNTUK ANIME "H" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='I'>I</a></div>
<!-- KODE UNTUK ANIME "I" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='J'>J</a></div>
<!-- KODE UNTUK ANIME "J" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='K'>K</a></div>
<!-- KODE UNTUK ANIME "K" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='L'>L</a></div>
<!-- KODE UNTUK ANIME "L" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='M'>M</a></div>
<!-- KODE UNTUK ANIME "M" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='N'>N</a></div>
<!-- KODE UNTUK ANIME "N" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='O'>O</a></div>
<!-- KODE UNTUK ANIME "O" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='P'>P</a></div>
<!-- KODE UNTUK ANIME "P" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='Q'>Q</a></div>
<!-- KODE UNTUK ANIME "Q" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='R'>R</a></div>
<!-- KODE UNTUK ANIME "S" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='S'>S</a></div>
<!-- KODE UNTUK ANIME "S" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='T'>T</a></div>
<!-- KODE UNTUK ANIME "T" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='U'>U</a></div>
<!-- KODE UNTUK ANIME "U" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='V'>V</a></div>
<!-- KODE UNTUK ANIME "V" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='W'>W</a></div>
<!-- KODE UNTUK ANIME "W" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='X'>X</a></div>
<!-- KODE UNTUK ANIME "X" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='Y'>Y</a></div>
<!-- KODE UNTUK ANIME "Y" DISINI -->
</div>
<div class='kens456'>
<div class='kens567'><a name='Z'>Z</a></div>
<!-- KODE UNTUK ANIME "Z" DISINI -->
</div>
</div>
</div>
4. Selesai
Cara pengguanaannya daftar isi anime ini menggunakan kode dibawah
Letakkan kode tepat pada bagian <!-- KODE UNTUK ANIME "A" DISISNI --> mau di bawahnya atau di atas tidak masalah
<div class='kens678'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='kens678'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='kens678'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='kens678'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='kens678'><a title='Nama Anime' href='#'>Nama Anime</a></div>
Untuk lebih jelasnya lihat kode di demo
DEMO