Cara Membuat Anime List Responsive Seperti Anime21
Pada kali ini saya akan memberikan tutorial cara membuat anime list responsive seperti Anime21 Di blogspot, ga usah banyak cincong langsung aja di Sedot, Ikuti langkah langkah di bawah ini :
Masuk ke pengaturan Blog kamu.
1. Buka Tema > Edit Html > Salin Dan Copykan Kode CSS di bawah ini sebelum atau
/* Anime List Animeindo - codeperpus.web.id */
.alads321{overflow:hidden}
.alads321 .alads-apb{font-size: 14px}
.alads321 .alads-apb a{line-height: 30px;width: 38px;color: #FFFFFF;border-radius: 5px;background: #6AB2F2;transition: all 0.25s;display: inline-block;text-align: center}
.alads321 .alads-apb a:hover{text-decoration: underline;color: #FFFFFF}
.alads321 .alads-wrap{margin-top: 20px}
.alads321 .alads-group{display: inline-block;width: 100%;background: #F9F9F9;margin-bottom: 10px}
.alads321 .alads-head{font-weight: 700;overflow: hidden;margin-bottom: 10px;background: #1581BC;font-size: 15px}
.alads321 .alads-head a{color: #FFFFFF;background: #19A3EA;float: left;margin: -5px -10px -8px -10px;padding: 12px 30px;border-top-right-radius: 50px}
.alads321 .alads-item{float: left;color: #727272;width: 33.3%;border-left: 2px solid #D7D7D7}
.alads321 .alads-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){.alads321 .alads-apb a{margin:1px}}
@media only screen and (max-width: 768px){.alads321 .alads-item{width:50%}}
@media screen and (max-width:480px){.alads321 .alads-item{width:100%}}2. Setelah di copy save tema.
3. Lalu Buat postingan baru Di Halaman > Tambah Code HTML Ini Pada TAB HTML(Bukan Di Compose)Lalu Copy kan kode di bawah ini.
<div class='alads321'>
<div class='alads-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 class='clear'></div>
</div>
<div class='alads-wrap'>
<div class='alads-group'>
<div class='alads-head'><a name='#'>#</a></div>
<!-- KODE UNTUK ANIME "#" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='A'>A</a></div>
<!-- KODE UNTUK ANIME "A" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='B'>B</a></div>
<!-- KODE UNTUK ANIME "B" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='C'>C</a></div>
<!-- KODE UNTUK ANIME "C" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='D'>D</a></div>
<!-- KODE UNTUK ANIME "D" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='E'>E</a></div>
<!-- KODE UNTUK ANIME "E" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='F'>F</a></div>
<!-- KODE UNTUK ANIME "F" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='G'>G</a></div>
<!-- KODE UNTUK ANIME "G" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='H'>H</a></div>
<!-- KODE UNTUK ANIME "H" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='I'>I</a></div>
<!-- KODE UNTUK ANIME "I" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='J'>J</a></div>
<!-- KODE UNTUK ANIME "J" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='K'>K</a></div>
<!-- KODE UNTUK ANIME "K" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='L'>L</a></div>
<!-- KODE UNTUK ANIME "L" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='M'>M</a></div>
<!-- KODE UNTUK ANIME "M" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='N'>N</a></div>
<!-- KODE UNTUK ANIME "N" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='O'>O</a></div>
<!-- KODE UNTUK ANIME "O" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='P'>P</a></div>
<!-- KODE UNTUK ANIME "P" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='Q'>Q</a></div>
<!-- KODE UNTUK ANIME "Q" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='R'>R</a></div>
<!-- KODE UNTUK ANIME "R" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='S'>S</a></div>
<!-- KODE UNTUK ANIME "S" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='T'>T</a></div>
<!-- KODE UNTUK ANIME "T" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='U'>U</a></div>
<!-- KODE UNTUK ANIME "U" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='V'>V</a></div>
<!-- KODE UNTUK ANIME "V" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='W'>W</a></div>
<!-- KODE UNTUK ANIME "W" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='X'>X</a></div>
<!-- KODE UNTUK ANIME "X" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='Y'>Y</a></div>
<!-- KODE UNTUK ANIME "Y" DISINI -->
</div>
<div class='alads-group'>
<div class='alads-head'><a name='Z'>Z</a></div>
<!-- KODE UNTUK ANIME "Z" DISINI -->
</div>
</div>
</div>4. Jika sudah Save, Silahkan kamu ganti code " Nama Anime " sesuai keinginanmu, dan silahkan di publikasihkan lalu lihat hasilnya.
Jika kalian ingin menambahkan list Anime silahkan di copas saja code di bawah ini lalu tempelkan di code sebelumnya.
<div class='alads-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='alads-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='alads-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='alads-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
<div class='alads-item'><a title='Nama Anime' href='#'>Nama Anime</a></div>
Untuk Demonstrasinya bisa di lihat di bawah ini.
0 Response to "Cara Membuat Anime List Responsive Seperti Anime21 "
Post a Comment