Cara Membuat Anime List di Blogger
Kali ini saya akan membuat tutorial Cara Membuat Anime List di Blogger mirip dengan Anime List AnimeIndo, Wardhanime, Nekonime, dan lainnya.
Yuk langsung saja tutorialnya, Pertama Buat Laman/Pages baru untuk nempatin Anime List nya.
Copy-kan Kode di bawah ini :
<style>
/* === ANIME LIST === */
.nav_apb{padding:0;text-align:center;margin:0;}
.nav_apb a{display:block;font-weight:700;border:none;background:none;width:21px;font-size:13px;float:left;margin:1px;background:#3C3B36;color:#DDDDDC;padding:2px 0px}
.nav_apb a:hover{background:#222;text-decoration:none}
#mcTagMap .tagindex h4, #sc_mcTagMap .tagindex h4 {border-bottom: 2px solid #2977BE;padding: 0 0 4px 0;margin: 2px 0 4px 0;}
#mcTagMap .tagindex ul li, #sc_mcTagMap .tagindex ul li {list-style: outside none disc;padding: 2px 0;margin: 0;font-size: 13px;width: 50%;float: left;}
#mcTagMap .tagindex ul, #sc_mcTagMap .tagindex ul {list-style: outside none disc;padding: 1px 0;margin: 0px 15px 25px;width: 100%;float: left;}
#mcTagMap .tagindex ul li a {color: #333;}
#mcTagMap .tagindex ul li a:before {content: "f108";margin:0 3px; font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;}
#mcTagMap .tagindex ul li a:hover{text-decoration:underline;}</style>
<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>
<br />
<div id="mcTagMap" class=" toggleNo">
<div class='holdleft' style="width: 100%;">
<div class="tagindex">
<h4 id="A">A</h4>
<ul class="links">
<li><a title="Absolute Duo" href="#">Absolute Duo</a></li>
<li><a title="Accel World" href="#">Accel World</a></li>
<li><a title="Accel World" href="#">Accel World</a></li></ul></div>
<div class="tagindex">
<h4 id="B">B</h4>
<ul class="links">
<li><a title="Baby Princess 3D Paradise [Love]" href="#">Baby Princess 3D Paradise [Love]</a></li>
<li><a title="Baby Steps S2" href="#">Baby Steps S2</a></li></ul></div>
<div class="tagindex">
<h4 id="C">C</h4>
<ul class="links">
<li><a title="Campione!" href="#">Campione!</a></li>
<li><a title="Chuunibyou Demo Koi ga Shitai!" href="#">Chuunibyou Demo Koi ga Shitai!</a></li></div>
<div class="tagindex">
<h4 id="D">D</h4>
<ul class="links">
<li><a title="D-Frag!" href="#">D-Frag!</a></li>
<li><a title="Daitoshokan no Hitsujikai" href="#">Daitoshokan no Hitsujikai</a></li></ul></div>
<div class="tagindex">
<h4 id="E">E</h4>
<ul class="links">
<li><a title="ef: A Tale of Memories" href="#">ef: A Tale of Memories</a></li>
<li><a title="Elfen Lied" href="#">Elfen Lied</a></li></ul></div>
<div class="tagindex">
<h4 id="F">F</h4>
<ul class="links">
<li><a title="Fairy Tail" href="#">Fairy Tail</a></li>
<li><a title="Fate/Stay Night: Unlimited Blade Works" href="#">Fate/Stay Night: Unlimited Blade Works</a></li></ul></div>
<div class="tagindex">
<h4 id="G">G</h4>
<ul class="links">
<li><a title="Gekkan Shoujo Nozaki-kun" href="#">Gekkan Shoujo Nozaki-kun</a></li>
<li><a title="Gintama (2015)" href="#">Gintama (2015)</a></li></ul></div>
<div class="tagindex">
<h4 id="H">H</h4>
<ul class="links">
<li><a title="Hagure Yuusha no Estetica" href="#">Hagure Yuusha no Estetica</a></li>
<li><a title="Haikyuu!!" href="#">Haikyuu!!</a></li></ul></div>
<div class="tagindex">
<h4 id="I">I</h4>
<ul class="links">
<li><a title="Inari Konkon Koi Iroha" href="#">Inari Konkon Koi Iroha</a></li>
<li><a title="Infinite Stratos" href="#">Infinite Stratos</a></li></ul></div>
<div class="tagindex">
<h4 id="J">J</h4>
<ul class="links">
<li><a title="Jinsei" href="#">Jinsei</a></li>
<li><a title="Jormungand" href="#">Jormungand</a></li></ul></div>
</div>
<div class='holdleft noMargin' style="width: 100%;">
<div class="tagindex">
<h4 id="K">K</h4>
<ul class="links">
<li><a title="K-ON!" href="#">K-ON!</a></li>
<li><a title="K-ON!!" href="#">K-ON!!</a></li></ul></div>
<div class="tagindex">
<h4 id="L">L</h4>
<ul class="links">
<li><a title="Log Horizon" href="#">Log Horizon</a></li>
<li><a title="Log Horizon S2" href="#">Log Horizon S2</a></li></ul></div>
<div class="tagindex">
<h4 id="M">M</h4>
<ul class="links">
<li><a title="Madan no Ou to Vanadis" href="#">Madan no Ou to Vanadis</a></li>
<li><a title="Magi: The Labyrinth of Magic" href="#">Magi: The Labyrinth of Magic</a></li></ul></div>
<div class="tagindex">
<h4 id="N">N</h4>
<ul class="links">
<li><a title="Nagato Yuki-chan no Shoushitsu" href="#">Nagato Yuki-chan no Shoushitsu</a></li>
<li><a title="Nagi no Asukara" href="#">Nagi no Asukara</a></li></ul></div>
<div class="tagindex">
<h4 id="O">O</h4>
<ul class="links">
<li><a title="Ookami Shoujo to Kuro Ouji" href="#">Ookami Shoujo to Kuro Ouji</a></li>
<li><a title="Ookami to Koushinryou" href="#">Ookami to Koushinryou</a></li></ul></div>
<div class="tagindex">
<h4 id="P">P</h4>
<ul class="links">
<li><a title="Plastic Memories" href="#">Plastic Memories</a></li>
<li><a title="Psycho-Pass" href="#">Psycho-Pass</a></li></ul></div>
<div class="tagindex">
<h4 id="Q">Q</h4>
<ul class="links">
<li><a title="Quotes" href="#">Quotes</a></li>
<li><a title="Quroyaki" href="#">Quroyaki</a></ul></li>
<div class="tagindex">
<h4 id="R">R</h4>
<ul class="links">
<li><a title="Ragnarok" href="#">Ragnarok</a></li>
<li><a title="Rail Wars!" href="#">Rail Wars!</a></li></ul></div>
<div class="tagindex">
<h4 id="S">S</h4>
<ul class="links">
<li><a title="Saenai Heroine no Sodatekata" href="#">Saenai Heroine no Sodatekata</a></li>
<li><a title="Sakurasou no Pet na Kanojo" href="#">Sakurasou no Pet na Kanojo</a></li></ul></div>
<div class="tagindex">
<h4 id="T">T</h4>
<ul class="links">
<li><a title="Tamako Market" href="#">Tamako Market</a></li>
<li><a title="Tantei Opera Milky Holmes" href="#">Tantei Opera Milky Holmes</a></li></ul></div>
<div class="tagindex">
<h4 id="U">U</h4>
<ul class="links">
<li><a title="Ushinawareta Mirai o Motomete" href="#">Ushinawareta Mirai o Motomete</a></li>
<li><a title="Ushio" href="#">Ushio</a></li></ul></div>
<div class="tagindex">
<h4 id="V">V</h4>
<ul class="links">
<li><a title="Vampire Knight" href="#">Vampire Knight</a></li>
<li><a title="Vampire Knight Guilty" href="#">Vampire Knight Guilty</a></li></ul></div>
<div class="tagindex">
<h4 id="W">W</h4>
<ul class="links">
<li><a title="Wake Up Girls!" href="#">Wake Up Girls!</a></li>
<li><a title="Walkure Romanze" href="#">Walkure Romanze</a></li></ul></div>
<div class="tagindex">
<h4 id="Y">Y</h4>
<ul class="links">
<li><a title="Yahari Ore no Seishun Love Comedy wa Machigatteiru. Zoku" href="#">Yahari Ore no Seishun Love Comedy wa Machigatteiru. Zoku</a></li>
<li><a title="Yahari Ore no Seishun Love Come wa Machigatteiru" href="#">Yahari Ore no Seishun Love Come wa Machigatteiru</a></li></ul></div>
<div class="tagindex">
<h4 id="Z">Z</h4>
<ul class="links">
<li><a title="Zankyou no Terror" href="#">Zankyou no Terror</a></li>
<li><a title="ZETMAN" href="#">ZETMAN</a></li></ul></div>
Pastekan di Laman/Page yang di buat tadi, lalu simpan.
Wahh akhirnya selesai juga. Mudah yaa..?
Sekian dari tutorial saya yaitu, Cara Membuat Anime List di Blogger, Jika ada masalah jangan sungkan ajukan permasalahanmu di bawah.
Terima Kasih.
