Hai Minna-san, Ane Kasi Tutorial Baru. yaitu Cara Membuat Anime List v3 Gak pala Ribet kok Ngebuat nya :) Sebelum itu, Silahkan Cek Demo ya dibawah ini :)
Langsung saja ikuti Tutorialnya Dibawah ya :)
Pertama Silahkan Masukkan CSS ya diatas </style> / </b:skin>
/* CSS ANIME LIST BY IMOECHAN
---------------------------------------------*/
#main-wrapper{width:1020px;}
#sidebar-wrapper{display: none;}
.a-content a{
text-decoration: none;
color: #000;
}
.a-content a:hover{
display: block;
padding: 5px 0;
width: auto;
background: #424242;
text-decoration: none;
color: #fff;
}
.a-list {padding-left: 130px;}
.a-list a{
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
display: block;
padding: 5px 0;
width: 26.7px;
float: left;
background: #424242;
font-weight: 500;
color: #FFFFFF;
}
.a-list a:hover {
background: rgba(0,0,0,0);
text-decoration: none;
color: #000;
}
.list{
margin-bottom: 10px;
}
.bg-list{
background: #f9f9f9;
padding-bottom: 20px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #e5e5e5;
}
.list .judul{
font-size:16px;
color:#2f2f2f;
margin-bottom: 10px;
padding: 7px;
}
.list .judul span{
font-weight: bold;
}
.list-judul a{
border: 1px solid #5b5b5b;
border-radius: 3px;
line-height: 33px;
padding: 5px;
padding-left:25px;
padding-right:25px;
margin: 5px;
color: #000;
text-decoration:none;
}
.list-judul a:hover{
background: #424242;
color: #fff;
text-decoration:none;
border: 1px solid #424242;
}
#list-anime{
margin-left:10px;
}
#list-judul .ongoing{
padding: 5px;
font-size:10px;
border: 0px solid black;
border-radius: 3px;
background-color: green;
color: white;
font-weight: bold;
}
Lalu Copykan kode dibawah ini pada postingan kalian
<div class="a-list">
<div style="text-align: center; margin-left: 50px;">
<b><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></b></div>
</div>
<div class="list-anime">
<div style="float: left; width: 49%;">
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> A</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="A"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/ai-mai-mi/">Ai Mai Mi</a></span>
<span class="list-judul"><a href="/anime/ai-mai-mi-mousou-catastrophe/">Ai Mai Mi: Mousou Catastrophe</a></span>
<span class="list-judul"><a href="/anime/akame-ga-kill/">Akame ga Kill</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> B</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="B"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/bakumatsu-rock/">Bakumatsu Rock</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> C</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="C"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Chuunibyo-Demo/">Chuunibyo Demo</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> D</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="D"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/danna-ga-nani-wo-itteiru-ka-wakaranai-ken/">Danna ga Nani wo Itteiru ka Wakaranai Ken</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> E</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="E"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Evangalion/">Evangaliom</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> F</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="F"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/fastening-days/">Fastening Days</a></span>
<span class="list-judul"><a href="/anime/fatestay-night-unlimited-blade-works-2/">Fate/Stay Night – Unlimited Blade Works</a></span>
<span class="list-judul"><a href="/anime/francesca/">Francesca</a></span>
<span class="list-judul"><a href="/anime/free-eternal-summer/">Free! Eternal Summer</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> G</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="G"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/girl-friend-kari/">Girl Friend Kari</a></span>
<span class="list-judul"><a href="/anime/gokukoku-no-brynhildr/">Gokukoku no Brynhildr</a></span>
<span class="list-judul"><a href="/anime/grisaia-no-kajitsu/">Grisaia no Kajitsu</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> H</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="H"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Haikyuu/">Haikyuu!!!</a></span>
<span class="list-judul"><a href="/anime/Hentai/">Hentai</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> I</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="I"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/inou-battle-wa-nichijou-kei-no-naka-de/">Inou Battle wa Nichijou-kei no Naka de</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> J</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="J"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/juuou-mujin-no-fafnir/">Juuou Mujin no Fafnir</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> K</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="K"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Kaichou-wa-maid-sama/">Kaichou wa Maid Sama</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> L</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="L"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Luppin/">Luppin</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> M</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="M"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/madan-no-ou-to-vanadis/">Madan no Ou to Vanadis</a></span></div>
</div>
<div style="float: right; width: 49%;">
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> N</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="N"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/naruto-shipuden/">Naruto Shipuden</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> O</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="O"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/one-piece/">One Piece</a></span>
<span class="list-judul"><a href="/anime/ore-twintails-ni-narimasu/">Ore, Twintails ni Narimasu</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> Q</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="Q"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/qiura/">Qiura</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> R</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="O"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Rolling-girls/">Rolling Girls</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> S</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="S"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/sora-no-method/">Sora no Method</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> T</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="T"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/trinity-seven-7-nin-no-mahoutsukai/">Trinity Seven : 7 nin no Mahoutsukai</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> U</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="U"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Urushihara-san/" >Urushihara-san</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> V</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="V"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/vlorent/">Vlorent</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> W</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="W"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Wild-Striker/">Wild Striker</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> X</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="X"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/x-calibur/">X-Calibur</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> Y</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="Y"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/Yuno-gasai/">Yuno Gaasai</a></span></div>
<div class="bg-list">
<span class="list"><span class="judul"><span class="icon-arrow-right"><span style="font-family: 'Segoe UI';"> Z</span></span></span><span style="float: right; padding-right: 5px;"><a href="#top" name="Z"><img src="http://anifansia.net/wp-content/uploads/2014/11/images.jpg" height="16px" /></a></span></span>
<span class="list-judul"><a href="/anime/trinity-seven-7-nin-no-mahoutsukai/">Zancoeck</a></span></div>
</div>
Sumber : Imoechansz
0 Komentar untuk "Cara Membuat Anime List v3"
Dilarang Spam
Berkomentar Sesuai Konten