Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Tutorial

Cara Membuat Anime List Seperti Kusonime di Blogger

Posting Komentar

Pada dasarnya, anime list ini biasa disebut dengan sitemap (daftar isi) dari suatu blog. Setiap blog memiliki beberapa macam tampilan sitemap yang berbeda, namun tetap memiliki fungsi yang sama.

Tutorial ini akan membahas Cara Membuat Anime List Seperti Kusonime. Cara membuatnya cukup mudah, kalian tinggal mengikuti langkah-langkah yang akan saya jelaskan dibawah. Langsung aja ke tutorialnya skuyy~

Cara Membuat Anime List Seperti Kusonime

  1. Silahkan Buka Blogger kamu > Halaman Baru, lalu tambahkan kode CSS berikut ini :
    2. <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}
</style>

  2. Kedua, tambahkan kode HTML berikut tepat dibawah CSS yang sudah dimasukkan sebelumnya.
    3. <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. Silahkan kalian edit text background color yang berwarna kuning.

Posting Komentar untuk "Cara Membuat Anime List Seperti Kusonime di Blogger"