Cara Menciptakan Anime List Awsubs

Anime List - Fitur ini biasa disebut sitemap atau daftar isi dari suatu blog, setiap blog mempunyai beberapa macam design sitemap/ daftar isi yang berbeda namun tetap satu fungsi.

Tutorial ini akan membahas Cara Membuat Anime List Seperti Fansub Awsubs, cara membuatnya cukup gampang kalian tinggal mengikuti langkah-langkah yang akan aku jelaskan dibawah. Kalian dapat lihat teladan yang sudah alhasil dibawah ini.

Demo

Cara Membuat Anime List Awsubs

1. Silahkan Buka Blogger kau > Halaman Baru, kemudian tambahkan css berikut 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} </style>




2. Kedua, tambahkan HTML berikut dibawah 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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div></div> <div class="filter-column"><div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">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="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div> <div class="filter-column"> <div class="judul-anim"> <a class="series" href="LINK TUJUAN" title="Cara Membuat Anime List Awsubs">NAMA ANIME</a> </div> </div>  <div class="clear"></div></div></div></div>



3. Silahakan kalian edit yang sudah aku beri Tandai, Selesai.

Bagikan Artikel ini