Cara Membuat Anime List AWSubs

Cara Membuat Anime List AWSubs

December 30, 2017
Hallo guys Tutorial kaliini Berasal Dari WEB Terkenal Untuk Tutorial Anime hehehe
ArlethDesign. Jadi ga Mungkin ga Work :v 
oke langsung aje.............



Anime List - Fitur ini biasa disebut sitemap atau daftar isi dari suatu blog, setiap blog memiliki 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 mudah kalian tinggal mengikuti langkah-langkah yang akan saya jelaskan dibawah. Kalian bisa lihat contoh yang sudah jadinya dibawah ini. 



Cara Membuat Anime List Awsubs

  1. Silahkan Buka Blogger kamu > Halaman Baru, lalu tambahkan 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 HTML berikut 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. Silahakan kalian edit yang sudah saya beri Tandai, Selesai.

Artikel Terkait

Latest
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.
Disqus
Tambahkan komentar Anda

No comments

Subscribe to: Post Comments (Atom)