Cara Membuat Anime List Seperti Awsubs

Anime List - Fitur yang biasa disebut sitemap atau daftar isi dari suatu blog, setiap blog memiliki beberapa macam design sitemap / daftar isi yang berbeda namun tetap satu fungsi. Anime List ini biasa digunakan pada blog dengan niche anime.
Jika Kalian mau menggunakan di blog dengan niche yang berbeda (tidak anime) bisa kalian edit cssnya maupun htmlnya
Anime List / daftar isi ini biasa dibuat pada Halaman Blog (https://contoh.blogspot.com/p/anime-list.html) tidak pada bagian post blog (https://contoh.blogspot.com/2017/08/contoh.html)

Pada kesempatan Tutorial kali ini kita akan membahas Cara Membuat Anime List Seperti Fansub Awsubs, cara membuatnya cukup mudah kalian tinggal mengikuti langkah (2 langkah) yang akan diberikan dibawah ini. Kalian bisa lihat contoh yang sudah jadi pada demo dibawah ini.

Demo

Cara Membuat Anime List Awsubs

1. Pertama, Silahkan Buka Dashboard Blogger > Buat Halaman Baru, lalu tambahkan CSS dibawah ini

<style>
/* CSS Anime List Wardhanime */
.nominal_apb{text-align:center;margin:0 0 5px;padding:1px 0}
.nominal_apb a{display:block;width:26.7px;float:left;background:#424242;font-weight:500;color:#FFF;padding:5px 0}
.nominal_apb a:hover{background:#2977BE;text-decoration:none}
.filter-kata{position:relative;margin-bottom:10px}
.judul-filter{font-family:segoe ui;font-weight:700;color:#333;font-size:13px;border-bottom:2px solid #2977BE;margin-bottom:5px;background:none;text-transform:uppercase;position:relative;padding:5px}
.judul-filter a{color:#6D6D6D}
.filter-column{float:left;line-height:21px;width:308px;color:#000;padding-left:16px}
.judul-anim{line-height:21px;font-weight:300;display:list-item}
.judul-anim a{font-size:12px;color:#2E2E2E;font-family:segoe ui}
/* shiftngeblog */
</style>

2. Kedua, tambahkan HTML berikut dibawah CSS / diatas CSS yang sudah dimasukkan sebelumnya

<div id="animelist">
<div class="nominal_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 id="a-z">

<div class="filter-kata"><div class="judul-filter">
<a name="0">0</a>
</div>

<div class="filter-column"><div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div></div>
<div class="filter-column"><div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div></div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="A">A</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="B">B</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="C">C</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="D">D</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>

<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="E">E</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="F">F</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="G">G</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="H">H</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="I">I</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="J">J</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="K">K</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="L">L</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="M">M</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="N">N</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="O">O</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="P">P</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="Q">Q</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="R">R</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="S">S</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="T">T</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="U">U</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="V">V</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="W">W</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="X">X</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter">
<a name="Y">Y</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
   
<div class="clear"></div>
</div>
<div class="filter-kata">
<div class="judul-filter"><a name="Z">Z</a>
</div>
   
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>
<div class="filter-column">
<div class="judul-anim">
<a class="series" href="LINK TUJUAN" title="NAMA ANIME">NAMA ANIME</a>
</div>
</div>

<div class="clear"></div></div></div></div>

3. Silahakan bisa kalian edit bagian yang sudah diberi Tanda, Selesai.
Nama Anime : Tulis dengan Nama Anime yang akan didaftar di anime list
LINK TUJUAN: Link Tujuan / url pada anime info mu
Cara ini masih manual (cocok untuk blog yang santai) , tetapi mudah untuk diedit apabila diperlukan