Cara Membuat Anime List Animeindo.tv

Kali ini saya akan membuat Tutorial Cara Membuat Anime List mirip dengan Animeindo.tv.
Pertama masuklah ke Blogger -> Template -> HTML
lalu letakkan CSS ini di bawah <b:skin> atau di atas </b:skin>

.nav_apb {
    padding: 10px 0px;
    text-align: center;
}
.nav_apb a {
    display: inline-block;
    margin: 0px 1px;
    padding: 5px;
    background: none repeat scroll 0% 0% #003A59;
    font-weight: bold;
}
.grp_apb {
    margin: 0px 0px 15px;
}
.grp_apb {
    border-bottom: 2px solid #323232;
    color: #CFCFC6;
    font-size: 14px;
    font-weight: bold;
    padding: 0px 0px 5px;
    margin: 0px 0px 5px;
}
ul.col2 {
    width: 100% !important;
}
ul.col2 li {
    line-height: 19px;
    background: url("http://animeindo.tv/wp-content/themes/au-anime/img/bul-crc.png") no-repeat scroll 0px 8px transparent;
    padding: 0px 0px 0px 10px;
    float:left;
    width:300px; 
}
ul.col2 li:a {
    color:#658E8B
}

Lalu masukkan HTML nya. Bebas mau di Postingan atau di Halaman (Page)


<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>
<div class="grp_apb">
<h3>#</h3>
<ul class="col2">
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
</ul>
<div class="clear">
</div>
</div>
<div class="grp_apb">
<h3>A</h3>
<ul class="col2">
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
</ul>
<div class="clear">
</div>
</div>
<div class="grp_apb">
<h3>B</h3>
<ul class="col2">
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
</ul>
<div class="clear">
</div>
</div> <div class="grp_apb">
<h3>C</h3>
<ul class="col2">
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
<li><a href="#">Judul Anime</a></li>
</ul>
<div class="clear">
</div>
</div>