Page Anime List

How to Create Anime List in Blog

Anime list atau daftar anime biasanya identik dengan situs fansub atau fanshare yang berguna sebagai mempermudah navigasi pencarian anime yang diinginkan oleh pengunjung. Hal ini juga dapat memperindah tampilan situs.

Tutorial Blog: Cara Membuat Halaman Anime List


Instalasi

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>
/* List  */
.tml{overflow:hidden}
.tml .t-apb{font-size: 14px;display: block;position: relative;overflow: hidden}
.tml .t-apb a{line-height: 30px;width: 3.704%;color: #FFFFFF;background: #424242;transition: all 0.25s;text-align: center;float: left}
.tml .t-apb a:hover{text-decoration: none;background: #2977BE;color: #FFFFFF}
.tml .t-wrap{margin-top: 5px}
.tml .t-group{display: inline-block;width: 100%;margin-bottom: 10px}
.tml .t-head{font-weight: 700;border-bottom: 2px solid #2977BE;font-size: 15px;padding: 5px}
.tml .t-head a{color: #333333}
.tml .t-item{float: left;width: 50%;displa}
.tml .t-title{display: list-item;margin-left: 20px}
.tml .t-title a{line-height: 24px;font-size: 14px;color: #000000;text-overflow: ellipsis;overflow: hidden;}}
@media only screen and (max-width: 768px){.tml .t-item{width:50%}}
@media screen and (max-width:480px){.tml .t-item{width:100%}.tml .t-apb a{margin: 1px;width: 10.43%}}
@media screen and (max-width:320px){.tml .t-apb a{width: 10.24%}}

Simpan Tema

Untuk penerapannya, buat halaman baru, tambahkan kode HTML berikut ini pada pada tab bagian Compose HTML
<div class='tml'>
<div class='t-apb'>
<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>
<div class='t-wrap'>
<div class='t-group'>
<div class='t-head'>

<a name='#'>#</a></div>

<!-- KODE UNTUK ANIME "#" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='A'>A</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Against Oppression' href='/search?q=Against+Oppression'>Against Oppression</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Amon-Ra' href='/search?q=Amon-Ra'>Amon-Ra</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Anti Jumping Agumon' href='/search?q=Anti+Jumping+Agumon'>Anti Jumping Agumon</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='B'>B</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Baby Jumping' href='/search?q=Baby+Jumping'>Baby Jumping</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='C'>C</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Chikiesland' href='/search?q=Chikiesland'>Chikiesland</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Clovia' href='/search?q=Clovia'>Clovia</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='D'>D</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Delete Afraid' href='/search?q=Delete+Afraid'>Delete Afraid</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='E'>E</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='E nya tiga' href='#0'>E nya tiga</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='F'>F</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Fallin At Summer' href='/search?q=Fallin+At+Summer'>Fallin At Summer</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Famous Freak' href='/search?q=Famous+Freak'>Famous Freak</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='G'>G</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Green Electricity' href='/search?q=Green+Electricity'>Green Electricity</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Guardian Satan' href='/search?q=Guardian+Satan'>Guardian Satan</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='H'>H</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Her Current Rise' href='/search?q=Her+Current+Rise'>Her Current Rise</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Hubba Hubba' href='/search?q=Hubba+Hubba'>Hubba Hubba</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='I'>I</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='I Scream For IceCream' href='/search?q=I+Scream+For+IceCream'>I Scream For IceCream</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Ice Cream Chocolate' href='/search?q=Ice+Cream+Chocolate'>Ice Cream Chocolate</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='J'>J</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Jaroem Jahid' href='/search?q=Jaroem+Jahid'>Jaroem Jahid</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='K'>K</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Kurapika' href='/search?q=Kurapika'>Kurapika</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='L'>L</a></div>


</div>


<div class='t-group'>
<div class='t-head'>
<a name='M'>M</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Me And Melati' href='/search?q=Me+And+Melati'>Me And Melati</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Medicine For Diet' href='/search?q=Medicine+For+Diet'>Medicine For Diet</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='N'>N</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='No More Parents' href='/search?q=No+More+Parents'>No More Parents</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='O'>O</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='O aja yakan' href='#0'>O aja yakan</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='P'>P</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Paper Blanks' href='/search?q=Paper+Blanks'>Paper Blanks</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Partner In The School' href='/search?q=Partner+In+The+School'>Partner In The School</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='Q'>Q</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Q itu 9' href='#0'>Q itu 9</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='R'>R</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Robot Skip Party' href='/search?q=Robot+Skip+Party'>Robot Skip Party</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Romantic Bla Bla Bla' href='/search?q=Romantic+Bla+Bla+Bla'>Romantic Bla Bla Bla</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Ryna' href='/search?q=Ryna'>Ryna</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='S'>S</a></div>

<div class='t-item'>
<div class='t-title'>
<a title='Satu Kepalan' href='/search?q=Satu+Kepalan'>Satu Kepalan</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Scream To Ice Cream' href='/search?q=Scream+To+Ice+Cream'>Scream To Ice Cream</a></div>
</div>
<div class='t-item'>
<div class='t-title'>
<a title='Sempal Melodies' href='/search?q=Sempal+Melodies'>Sempal Melodies</a></div>
</div>
</div>


<div class='t-group'>
<div class='t-head'>
<a name='T'>T</a></div>

<!-- KODE UNTUK ANIME "T" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='U'>U</a></div>

<!-- KODE UNTUK ANIME "U" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='V'>V</a></div>

<!-- KODE UNTUK ANIME "V" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='W'>W</a></div>

<!-- KODE UNTUK ANIME "W" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='X'>X</a></div>

<!-- KODE UNTUK ANIME "X" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='Y'>Y</a></div>

<!-- KODE UNTUK ANIME "Y" DISINI -->
</div>


<div class='t-group'>
<div class='t-head'>
<a name='Z'>Z</a></div>

<!-- KODE UNTUK ANIME "Z" DISINI -->
</div>


</div>
</div>

Opsi

Hapus <!-- KODE UNTUK ANIME " " DISINI --> dan ganti dengan kode berikut
<div class='t-item'>
<div class='t-title'>
<a title='Sempal Melodies' href='/search?q=Sempal+Melodies'>Sempal Melodies</a></div>
</div>

Result

   DEMO

© Onanion 2019 | Made with ♥