Cara Membuat Anime List Awsubs

 

Cara Membuat Anime List Awsubs

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.

Cara Membuat Anime List Awsubs

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.

Comments

Post a Comment

Popular posts from this blog

Cara Membuat Safelink Di Blogger [Video]

Image
  Cara Membuat Safelink Di Blogger [Video] Cara Membuat Safelink Di Blogger [Video]  - Tutorial Cara Membuat Safelink blogger ini saya sudah menyiapkan video bagi yang kurang mengerti jadi silahkan didownload juga. Tutorial sebelumnya saya sudah membagikan Template gratis yaitu  Edna Template Blogger v2  dan tutorial  Cara membuat tombol back to top dengan gambar , untuk hari ini saya akan membagikan tutorial yang sedikit berbeda dari sebelumnya, ok kita mulai saja tutorial kali ini. Cara Membuat Safelink Di Blogger Buka Blogger > Buat Blog Baru Untuk Safelink Jika Sudah, Buat  Halaman  diblog baru tersebut Kemudian Tambahkan Script berikut kedalam page tersebut & beri judul  GO <script src=" LINK-JAVASCRIPT " type="text/javascript"></script> Kemudian buka Notepad, lalu simpan menjadi javascript berikut kebentuk file  Safelink.Js , Dan jangan lupa ganti  http://link-tujuan.blogspot.com/p/go.html  dengan Url Blog s...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more