Page Anime List V2

How to Create Anime List in Blog

Tutorial Blog: Cara Membuat Page Anime List


Instalasi

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>
/* Anime List v2 */
.ualads{overflow:hidden}
.ualads .ualads-apb{font-size: 14px}
.ualads .ualads-apb a{line-height: 30px;width: 38px;color: #FFFFFF;border-radius: 5px;background: #6AB2F2;transition: all 0.25s;display: inline-block;text-align: center}
.ualads .ualads-apb a:hover{text-decoration: underline;color: #FFFFFF}
.ualads .ualads-wrap{margin-top: 20px}
.ualads .ualads-group{display: inline-block;width: 100%;background: #F9F9F9;margin-bottom: 10px}
.ualads .ualads-head{font-weight: 700;overflow: hidden;margin-bottom: 10px;background: #1581BC;font-size: 15px}
.ualads .ualads-head a{color: #FFFFFF;background: #19A3EA;float: left;margin: -5px -10px -8px -10px;padding: 12px 30px;border-top-right-radius: 50px}
.ualads .ualads-item{float: left;color: #727272;width: 33.3%;border-left: 2px solid #D7D7D7}
.ualads .ualads-item a{line-height: 24px;font-size: 14px;color: #7A7A7A;padding-right: 10px;text-overflow: ellipsis;overflow: hidden;font-weight: 100;padding-left: 10px}
@media screen and (max-width:1066px){.ualads .ualads-apb a{margin:1px}}
@media only screen and (max-width: 768px){.ualads .ualads-item{width:50%}}
@media screen and (max-width:480px){.ualads .ualads-item{width:100%}}

Simpan Tema

Untuk penerapannya, buat halaman baru, tambahkan kode HTML berikut ini pada pada tab Compose HTML
<div class='ualads'>
<div class='ualads-apb'>
<center>
<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></center>
<div class='clear'>
</div>
</div>
<div class='ualads-wrap'>
<div class='ualads-group'>
<div class='ualads-head'>
<a name='#'>#</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='A'>A</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='B'>B</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='C'>C</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='D'>D</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='E'>E</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='F'>F</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='G'>G</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='H'>H</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='I'>I</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='J'>J</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='K'>K</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='L'>L</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='M'>M</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='N'>N</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='O'>O</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='P'>P</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='Q'>Q</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='R'>R</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='S'>S</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='T'>T</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='U'>U</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='V'>V</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='W'>W</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='X'>X</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='Y'>Y</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>


<div class='ualads-group'>
<div class='ualads-head'>
<a name='Z'>Z</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='ualads-item'>
<a title='Nama Anime' href='#'>Nama Anime</a></div>
</div>
</div>
</div>

Result

   DEMO

© Onanion 2019 | Made with ♥