Cara Membuat Anime List Wardhanime

Cara Membuat Anime List Wardhanime

Kali ini admin akan memberikan tutorial bagi pecinta blog Anime mungkin Tips ini sudah ada di blog tetangga jadi kita lang sung saja ketopik utamanya .

Pertama kita masuk ke Blogger->Template->Edit HTML
Letakan 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.

.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>

Semoga Bermanfaat untuk kita semuanya