Cara Membuat Anime List di Blogger

Cara Membuat Anime List di Blogger

RENDIANSYAH - Cara Membuat Anime List di Blogger - Pasti bagi para pecinta anime sudah biasakan melihat download box yang menyedian link untuk menonton anime. Tapi apakah Anda memikirkannya bagaimana cara membuatnya? Jika memang Anda tidak bisa membuat mungkin artikel kali ini sangat pas sekali dengan apa yang Anda inginkan.

Untuk caranya seperti berikut, jadi simak artikel berikut dengan cermat dan teliti agar tidak terjadi kesalahan kode atau pemasangan.

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>

Terakhir, klik Publikasi dan lihat bagaimana hasilnya. Untuk demo saya sudah menyediakan tombol dibawah ini.


Demikian tutorial mengenai Cara membuat anime list di blogger. Semoga artikel cara membuat anime list di blogger dapat membantu apa yang Anda cari. Sekian dan terimakasih 🙏

Post a Comment

Previous Post Next Post