Cara Membuat Anime List di Blogger

Cara Membuat Anime List di Blogger - Dari artikel sebelumnya saya sudah berbagi Cara membuat Download Box anime, dan pada kesempatan kali ini saya akan memberikan tutorial bagaimana Membuat Anime List di blogger.

CARA MEMASANG ANIME LIST DI BLOGGER

Pertama, kalian login ke Blogger > klik menu Tema > lalu tambahkan CSS di bawah ini diatas kode </style> atau ]]></b:skin>

/* Anime List */
.wortellist{float:left;border:1px solid #e5e5e5;border-radius:5px;}
.wortelku{width:360px;padding:10px;}
.wortelku ul{list-style:none;margin:10px 10px;padding:0;}
.wortelku p.laman{text-align:center;background:#e5e5e5;color:#999;font-size:1.0em;font-weight:bold;border-radius:5px;padding:6px 0 6px 0;margin:13px 0px;}
.laman:hover{transform:translateY(4px);-webkit-transition:all 0.3s;}
.wortelku li{font-size:14px;padding:5px;margin:0 auto;}
.wortelku ul li a{color:#7a7a7a;}

Kemudian Simpan Tema. Lalu, buat postingan baru di laman statis dan tambahkan HTML dibawah ini, dan pilih HTML (bukan Compose).

<div class="wortellist">
 <div class="wortelku">
   <ul>
      <p class="laman">A</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">B</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">C</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">D</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">E</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">F</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">G</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">H</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">I</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">J</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">K</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">L</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">M</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
   </ul>
 </div>
  <div class="wortelku">
   <ul>
       <p class="laman">N</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">O</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">P</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">Q</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">R</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">S</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">T</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">U</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">V</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">W</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">X</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">Y</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
       <p class="laman">Z</p>
     <ul>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
      <li><a href="#">Nama Judul Anime</a></li>
     </ul>
   </ul>
 </div>
</div>

Klik Publikasi dan lihat bagaimana hasilnya.

Result

Demikian tutorial Cara membuat Anime List, semoga artikel yang diatas bermanfaat.