Cara Membuat Anime List Wardhanime

Anime List sangat membantu untuk meningkatkan Pengunjung. Karena, Perngunjung jadi mudah menemukan Anime yang ada di sebuah blog atau web. Jadi saya memiliki ide untuk membuat Tutorial yang sekarang akan kita bahas.Mungkin Tutorial Kali ini aga sulit untuk para pemukla seperti saya.

Postingan Terakhir hari ini. Minggu,26 Oktober 2014, bagi yang mau minta Tutorial lain bisa invite saya di FB http://www.facebook.com/ainghilmanfadillah sekaliansaya minta sarannya agar blog ini bisa berjalan dengan lancar.

SELAMAT TAHUN BARU ISLAM - 1 Muharram 1436H

Oke Kita langsung ke Tutorial. :(
Pertama masuk ke Blogger --> Template --> Edit HTML
Letakkan CSS berikut di bawah <b:skin> atau di atas </b:skin>

.nav_apb {
    padding: 1px 0px;
    text-align: center;
    margin: 0px 0px 5px;
}
.nav_apb a {
    display: block;
    padding: 5px 0px;
    width: 26.7px;
    float: left;
    background: none repeat scroll 0% 0% #424242;
    font-weight: 500;
    color: #FFF;
}

Sekarang Masukan HTML nya.

<div class="nav_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>

Sekarang kita lanjut dengan membuat Daftar Anime dari A sampai Z.

/* CSS Founded by Fansublogger */
.letter-group {
    position: relative;
    margin-bottom: 10px;
}
.letter-cell {
    font-family: segoe ui;
    font-weight: bold;
    color: #333;
    font-size: 13px;
    border-bottom: 2px solid #2977BE;
    margin-bottom: 5px;
    background: none repeat scroll 0% 0% transparent;
    padding: 5px;
    text-transform: uppercase;
    position: relative;
}
.letter-cell a {
    color: #6D6D6D;
}
.row-cells {
    float: left;
    line-height: 21px;
    width: 308px;
    color: #000;
    padding-left: 16px;
}
.title-cell {
    line-height: 21px;
    font-weight: 300;
    display: list-item;
}
.title-cell a {
    font-size: 12px;
    color: #2E2E2E;
    font-family: segoe ui;
}

Oke sekarang kita masukan HTMl nya.(Kalian tinggal Menambahkan sendiri. Jika ingin membuatnya sampai Z tinggal copy kan HTMl di bawah ini lalu ganti <a name="A">A</a> dengan <a name="B">B</a> dan sterusnya hingga Z).

<div class="letter-group">
<div class="letter-cell"><a name="A">A</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href='#'>Accel World EX</a></div>
</div> 
<div class="row-cells">
<div class="title-cell"><a href='#'>Ai Mai Mi</a></div></div> 
<div class="clear"></div></div>

Jika Tutorial saya kurang begitu bisa di pahami ataupun Sangat rumit :( Silahkan jangan sungkan-sungkan untuk Berkomentar!!
Demikian Tutorial Membuat Anime List ini semoga bermanfaat.!

HTMLnya sudah di perbaiki

See the Pen abAjr by hilmanfad (@hilmanfad) on CodePen.