Cara Membuat Anime List V1

Kali ini Ane mau berbagi trick cara membuat Anime List Versi yang pertama 

Keunggulan Anime List ini kalian tidak perlu 

mengatur-ngatur width/lebarnya karena ini sudah diset secara otomatis

DEMO

---

Goes To TKP Untuk Melihat Demonya

---

Pertama - tama Silahkan kalian letakan CSS dibawah ini diatas </b:skin> / </style>

/* CSS ANIME LIST BY IMOECHAN
---------------------------------------------*/

#animelist { float: left; width: 100%; padding-right: 9px; }
#animelist h2 {
font-family: 'Arial', Open Sans, Sans-serif;
font-weight: 400;
color: #3c3c3c;
font-size: 40px;
text-transform: uppercase;
margin-bottom: 4px;
border-bottom: 0;
padding: 0;
text-align: center;
}
.nav_apb {
padding-left: 80px;
text-align: center;
margin: 0 0 5px 0;
}
.nav_apb a {
display: block;
margin: 2px;
padding: 3px 0;
width: 19px;
float: left;
background-color:#95c6f8;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#70ade9',endColorstr='#95c6f8');background-image:-webkit-linear-gradient(top,#70ade9 0%,#70ade9 50%,#95c6f8 100%);background-image:-moz-linear-gradient(top,#70ade9 0%,#70ade9 50%,#95c6f8 100%);background-image:-ms-linear-gradient(top,#70ade9 0%,#70ade9 50%,#95c6f8 100%);background-image:-o-linear-gradient(top,#70ade9 0%,#70ade9 50%,#95c6f8 100%);background-image:linear-gradient(top,#70ade9 0%,#70ade9 50%,#95c6f8 100%);
font-weight: bold;
color: #FFFFFF;
}
.nav_apb a:hover {
background: #838383;
text-decoration: none;
}
.letter-group {
position: relative;
margin-bottom: 10px;
}

.letter-cell {
font-family: segoe ui;
font-weight: bold;
color: #95c6f8;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#70ade9',endColorstr='#95c6f8');
font-weight: bold;
color: #FFFFFF;
font-size: 13px;
border-bottom: 2px solid #95c6f8;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#70ade9',endColorstr='#95c6f8');
margin-bottom: 5px;
background: none;
padding: 5px;
text-transform: uppercase;
position: relative;
}
.letter-cell a {
color: #95c6f8;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#70ade9',endColorstr='#95c6f8');
}
.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: #000000;
}
.title-cell a:hover {color:#95c6f8;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#70ade9',endColorstr='#95c6f8');}

Lalu Copykan kode dibawah ini pada postingan kalian

<div id="animelist">
<div class="allgenres">
</div>
<!-- ANIME LIST MANUAL -->
<div class="nav_apb">
<a href="##">#</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 class="letter-group">
<div class="letter-cell"><a name="#">#</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/BD%20%28Blu-Ray%20Disc%29">#BD (Blu-Ray Disc)</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Movie">#Movie</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Ost.">#Ost (Original Soundtrack)</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/PV">#PV</a></div>
</div>
<div class="clear"></div></div><br/>
<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="http://filannime.blogspot.com/search/label/Aldnoah.Zero">Aldnoah.Zero</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Aniyome%20Wa%20Ijippari">Aniyome Wa Ijippari</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="B">B</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Boys%20Be...">Boys be...</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="C">C</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="D">D</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Daitoshokan%20no%20Hitsujikai">Daitoshokan no Hitsujikai</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="E">E</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="F">F</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="G">G</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Ghost%20Talker%27s%20Daydream">Ghost Talker's Daydream</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="H">H</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Hitozuma%20Kasumi-san">Hitozuma Kasumi-san</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Hungry%20Heart%3A%20Wild%20Striker">Hungry Heart: Wild Striker</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="I">I</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="J">J</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Juuou%20Mujin">Juuou Mujin no Fafnir</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="K">K</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Kill%20La%20Kill">Kill La Kill</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Kiseijuu">Kiseijuu: Sei no Kakuritsu</a></div>
</div>
  <div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Kiss%20X%20ssiS">Kiss X Sis BD</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="L">L</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Lets%20Fall%20In%20love%20Ero-manga">Let's Fall In Love Ero-Manga</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Log%20Horizon%20S2">Log Horizon II</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="M">M</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Madan%20no%20Ou%20to%20Vanadis">Madan no Ou to Vanadis BD</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Mitsudomoe">Mitsudomoe</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="N">N</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Naruto%20Shippuden">Naruto Shipuden</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="O">O</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/One%20Piece">One Piece</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="P">P</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Princess%20Lover%21">Princess Lovers! BD</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Puchimas">Puchimas!! Petit-Petit Idolmaster</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="Q">Q</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="R">R</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Rail%20Wars%21">Rail Wars!</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="S">S</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Saenai">Saenai Heroine no Sodatekata</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/2015/01/DLSeken.html">Seiken Tsukai no World Break</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Shinmai">Shinmai Mao no Testament</a></div>
</div>
  <div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Sengoku%20Basara">Sengoku Basara: Samurai Kings BD</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Soukan%20Yuugi">Soukan Yuugi</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Sword%20Art%20Online">Sword Art Online II</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="T">T</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Taboo%20Charming%20Mother">Taboo Charming Mother</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/2014/04/tamako-love-story.html">Tamako Love Story</a></div>
</div>
  <div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Tokyo%20Ghoul">Tokyo Ghoul BD</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Trinity%20Seven">Trinity Seven</a></div>
</div>
<div class="clear"></div></div><br/><br/>
<div class="letter-group">
<div class="letter-cell"><a name="U">U</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="V">V</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="http://filannime.blogspot.com/search/label/Vampire">Vampire</a></div>
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="W">W</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="X">X</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="Y">Y</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="Z">Z</a></div>
<div class="row-cells">
</div>
<div class="clear"></div></div><!-- end manual anime list -->
</div>