Cara Membuat Anime List Seperti Meongs - Anime list atau daftar anime biasanya digunakan oleh fansub atau fanshare agar pengunjungnya tidak kesulitan mencari anime yang diinginkannya. Ini juga membuat website 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.
Karena sudah lama sekali saya tidak memposting cara membuat anime list, dan ini saatnya saya memposting pembuatan anime list dari fansub dan sekaligus juga fanshare yaitu meongs. Sebelumnya saya memposting tentang pembuatan download box, yaitu Cara Membuat Cara Membuat Download Box Seperti Meongs, dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Anime List Seperti Meongs. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.
- Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>
- Jika Sudah, Silahkan Simpan Template.
- Kemudian, Saat Kamu membuat postingan baru terapkan Kode Anime List Meongs di bawah ini pada Tab HTML (Bukan Compose).
- Setelah itu, dibawah ini merupakan kode untuk menambah anime di anime list meongs. Untuk menambahkan anime, silahkan salin dan terapkan kode dibawah ini di bawah kode yang sudah ditandai.
- Jika sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu, dan silahkan di publikasikan lalu lihat bagaimana hasilnya.
/* Anime List Meongs - Aka321 */
.alm321 .alm-info{width: 100%;text-align: center}
.alm321 .alm-info ul{margin: 0}
.alm321 .alm-info ul li{border: 1px solid #ddd;margin: 0 0 10px;list-style: none;padding: 8px;display: inline-block;text-align: center}
.alm321 .alm-apb{text-align: center;font-weight: bold;margin: 10px 0;font-size: 13px}
.alm321 .alm-apb a{line-height: 30px;width: 30px;color: #FFFFFF;border-radius: 25%;background: #00A3A3;margin: 2px;transition: all 0.25s;display: inline-block}
.alm321 .alm-apb a:hover{color: #FFFFFF;background: #000000}
.alm321 .alm-list{display: block;position: relative;overflow: hidden}
.alm321 .alm-list .alm-wrap{width: 33.333%;float: left}
.alm321 .alm-list .alm-item ul{margin: 0 !important;padding: 0 6px !important}
.alm321 .alm-list .alm-item ul .alm-head{font-size: 125%;font-weight:bold}
.alm321 .alm-list .alm-item ul .alm-head a{color:#000000}
.alm321 .alm-list .alm-item ul li{list-style: none;font-size:14px}
.alm321 .alm-list .alm-item ul li a{color:#00A3A3}
@media only screen and (max-width: 768px){.alm321 .alm-info ul li{width:100%;margin:0 0 2px !important}.alm321 .alm-list .alm-wrap{width:100%}}
<div class='alm321'>
<div class='alm-info'>
<ul>
<li>List Info</li>
<li>List Info</li>
<li>List Info</li>
<li>List Info</li>
<li>List Info</li>
<li>List Info</li>
</ul>
</div>
<div class='alm-apb'>
<a href='##'>#</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='alm-listn'>
<div class='alm-wrap'>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='#'>#</a></li>
<!-- KODE UNTUK ANIME "#" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='A'>A</a></li>
<!-- KODE UNTUK ANIME "A" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='B'>B</a></li>
<!-- KODE UNTUK ANIME "B" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='C'>C</a></li>
<!-- KODE UNTUK ANIME "C" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='D'>D</a></li>
<!-- KODE UNTUK ANIME "D" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='E'>E</a></li>
<!-- KODE UNTUK ANIME "E" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='F'>F</a></li>
<!-- KODE UNTUK ANIME "F" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='G'>G</a></li>
<!-- KODE UNTUK ANIME "G" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='H'>H</a></li>
<!-- KODE UNTUK ANIME "H" DISINI -->
</ul>
</div>
</div>
<div class='alm-wrap'>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='I'>I</a></li>
<!-- KODE UNTUK ANIME "I" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='J'>J</a></li>
<!-- KODE UNTUK ANIME "J" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='K'>K</a></li>
<!-- KODE UNTUK ANIME "K" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='L'>L</a></li>
<!-- KODE UNTUK ANIME "L" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='M'>M</a></li>
<!-- KODE UNTUK ANIME "M" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='N'>N</a></li>
<!-- KODE UNTUK ANIME "N" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='O'>O</a></li>
<!-- KODE UNTUK ANIME "O" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='P'>P</a></li>
<!-- KODE UNTUK ANIME "P" DISINI -->
</ul>
</div>
</div>
<div class='alm-wrap'>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='Q'>Q</a></li>
<!-- KODE UNTUK ANIME "Q" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='R'>R</a></li>
<!-- KODE UNTUK ANIME "R" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='S'>S</a></li>
<!-- KODE UNTUK ANIME "S" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='T'>T</a></li>
<!-- KODE UNTUK ANIME "T" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='U'>U</a></li>
<!-- KODE UNTUK ANIME "U" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='V'>V</a></li>
<!-- KODE UNTUK ANIME "V" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='W'>W</a></li>
<!-- KODE UNTUK ANIME "W" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='X'>X</a></li>
<!-- KODE UNTUK ANIME "X" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='Y'>Y</a></li>
<!-- KODE UNTUK ANIME "Y" DISINI -->
</ul>
</div>
<div class='alm-item'>
<ul>
<li class='alm-head'><a name='Z'>Z</a></li>
<!-- KODE UNTUK ANIME "Z" DISINI -->
</ul>
</div>
</div>
</div>
</div>
<li><a href='# ' target='_blank'>Nama Anime </a></li>
<li><a href='# ' target='_blank'>Nama Anime </a></li>
<li><a href='# ' target='_blank'>Nama Anime </a></li>
<li><a href='# ' target='_blank'>Nama Anime </a></li>
<li><a href='# ' target='_blank'>Nama Anime </a></li>
<li><a href='# ' target='_blank'>Nama Anime </a></li>
Kode | Pengaturan |
---|---|
List Info
|
Ganti dengan informasi anime tersebut. |
<!-- KODE UNTUK ANIME "#" DISINI -->
|
Ganti dengan kode untuk menambah anime. |
#
|
Ganti dengan URL atau Link yang akan dituju. |
Nama Anime
|
Ganti dengan Nama Anime tersebut. |
Sekian postingan kali ini semoga bermanfaat untuk kalian, jangan lupa di bagikan ke teman-teman, dan jika ada yang ingin ditanyakan silahkan bertanya di kolom komentar. Sampai jumpa di tutorial berikutnya Terima kasih.
9 komentar
kalo wordpress gimana ?
Kalo WP copy terus paste CSSnya ke style.css, terus simpan. setelah itu copy terus paste HTMLnya di tempat agan mau posting anime list-nya
Keren
supaya bisa jadi di samping gimana ? kalo kebawah semua makan tempat ? tolong bimbingannya ^ ^
cara menyesuaikan lebar sama postingan blog gimana kak?
Memangnya belum sesuai gan?, bisa dilihat contohnya gak?
Makasih banyak.. hehe
Mau kesamping gimana gan? mungkin bisa memberi contoh?
gan itu css diletakkan di posisi mna di style.css kok gk berhasil. mohon infonya gan. klw bsa buat lngkah khusus buat wordpress biar paham. thanks sblumnya gan.
Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon