Cara Membuat Anime List Seperti Meongs

Cara Membuat Anime List Seperti Meongs - Anime list atau daftar anime biasanya digunakan oleh fansub atau fanshare agar pengunjungnya tidak kesulitan mencari anime yang diinginkannya. Ini juga membuat website mereka tampil bagus, rapih, dan juga seperti fansub atau fanshare yang profesional. Tetapi terkadang ada juga fansub atau fanshare yang belum tahu Cara Membuat Anime List.

Karena sudah lama sekali saya tidak memposting cara membuat anime list, dan ini saatnya saya memposting pembuatan anime list dari fansub dan sekaligus juga fanshare yaitu meongs. Sebelumnya saya memposting tentang pembuatan download box, yaitu Cara Membuat Cara Membuat Download Box Seperti Meongs, dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Anime List Seperti Meongs. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

Pertama, Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>

/* Anime List Meongs - Aka321 */
.alm321 .alm-info{width: 100%;text-align: center}
.alm321 .alm-info ul{margin: 0}
.alm321 .alm-info ul li{border: 1px solid #ddd;margin: 0 0 10px;list-style: none;padding: 8px;display: inline-block;text-align: center}
.alm321 .alm-apb{text-align: center;font-weight: bold;margin: 10px 0;font-size: 13px}
.alm321 .alm-apb a{line-height: 30px;width: 30px;color: #FFFFFF;border-radius: 25%;background: #00A3A3;margin: 2px;transition: all 0.25s;display: inline-block}
.alm321 .alm-apb a:hover{color: #FFFFFF;background: #000000}
.alm321 .alm-list{display: block;position: relative;overflow: hidden}
.alm321 .alm-list .alm-wrap{width: 33.333%;float: left}
.alm321 .alm-list .alm-item ul{margin: 0 !important;padding: 0 6px !important}
.alm321 .alm-list .alm-item ul .alm-head{font-size: 125%;font-weight:bold}
.alm321 .alm-list .alm-item ul .alm-head a{color:#000000}
.alm321 .alm-list .alm-item ul li{list-style: none;font-size:14px}
.alm321 .alm-list .alm-item ul li a{color:#00A3A3}
@media only screen and (max-width: 768px){.alm321 .alm-info ul li{width:100%;margin:0 0 2px !important}.alm321 .alm-list .alm-wrap{width:100%}}

Jika Sudah, Silahkan Simpan Template.
Kemudian, Saat Kamu membuat postingan baru terapkan Kode Anime List Meongs di bawah ini pada Tab HTML (Bukan Compose).

<div class='alm321'>
 <div class='alm-info'>
  <ul>
   <li>List Info</li>
   <li>List Info</li>
   <li>List Info</li>
   <li>List Info</li>
   <li>List Info</li>
   <li>List Info</li>
  </ul>
 </div>
 <div class='alm-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='alm-listn'>
  <div class='alm-wrap'>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='#'>#</a></li>
     
     <!-- KODE UNTUK ANIME "#" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='A'>A</a></li>  

     <!-- KODE UNTUK ANIME "A" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='B'>B</a></li>  

     <!-- KODE UNTUK ANIME "B" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='C'>C</a></li>   
     
     <!-- KODE UNTUK ANIME "C" DISINI -->
     
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='D'>D</a></li> 

     <!-- KODE UNTUK ANIME "D" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='E'>E</a></li>
     
     <!-- KODE UNTUK ANIME "E" DISINI -->
     
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='F'>F</a></li>  

     <!-- KODE UNTUK ANIME "F" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='G'>G</a></li>  

     <!-- KODE UNTUK ANIME "G" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='H'>H</a></li> 

     <!-- KODE UNTUK ANIME "H" DISINI -->
    
    </ul>
   </div>
  </div>
  <div class='alm-wrap'>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='I'>I</a></li>  

     <!-- KODE UNTUK ANIME "I" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='J'>J</a></li> 

     <!-- KODE UNTUK ANIME "J" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='K'>K</a></li>
     
     <!-- KODE UNTUK ANIME "K" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='L'>L</a></li>  

     <!-- KODE UNTUK ANIME "L" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='M'>M</a></li> 

     <!-- KODE UNTUK ANIME "M" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='N'>N</a></li> 

     <!-- KODE UNTUK ANIME "N" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='O'>O</a></li> 

     <!-- KODE UNTUK ANIME "O" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='P'>P</a></li>  

     <!-- KODE UNTUK ANIME "P" DISINI -->
    
    </ul>
   </div>
  </div>
  <div class='alm-wrap'>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='Q'>Q</a></li>  

     <!-- KODE UNTUK ANIME "Q" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='R'>R</a></li>  

     <!-- KODE UNTUK ANIME "R" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='S'>S</a></li>  

     <!-- KODE UNTUK ANIME "S" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='T'>T</a></li>  

     <!-- KODE UNTUK ANIME "T" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='U'>U</a></li>  

     <!-- KODE UNTUK ANIME "U" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='V'>V</a></li>  

     <!-- KODE UNTUK ANIME "V" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='W'>W</a></li> 

     <!-- KODE UNTUK ANIME "W" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='X'>X</a></li> 

     <!-- KODE UNTUK ANIME "X" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='Y'>Y</a></li> 

     <!-- KODE UNTUK ANIME "Y" DISINI -->
    
    </ul>
   </div>
   <div class='alm-item'>
    <ul>
     <li class='alm-head'><a name='Z'>Z</a></li>  

     <!-- KODE UNTUK ANIME "Z" DISINI -->
    
    </ul>
   </div>
  </div>
 </div>
</div>

Setelah itu, dibawah ini merupakan kode untuk menambah anime di anime list meongs. Untuk menambahkan anime, silahkan salin dan terapkan kode dibawah ini di bawah kode yang sudah ditandai.

     <li><a href='#' target='_blank'>Nama Anime</a></li>
     <li><a href='#' target='_blank'>Nama Anime</a></li>
     <li><a href='#' target='_blank'>Nama Anime</a></li>
     <li><a href='#' target='_blank'>Nama Anime</a></li>
     <li><a href='#' target='_blank'>Nama Anime</a></li>
     <li><a href='#' target='_blank'>Nama Anime</a></li>

Jika sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu, dan silahkan di publikasikan lalu lihat bagaimana hasilnya.

Kode	Pengaturan
List Info	Ganti dengan informasi anime tersebut.
<!-- KODE UNTUK ANIME "#" DISINI -->	Ganti dengan kode untuk menambah anime.
#	Ganti dengan URL atau Link yang akan dituju.
Nama Anime	Ganti dengan Nama Anime tersebut.

Sekian postingan kali ini semoga bermanfaat untuk kalian, jangan lupa di bagikan ke teman-teman, dan jika ada yang ingin ditanyakan silahkan bertanya di kolom komentar. Sampai jumpa di tutorial berikutnya Terima kasih.

Arlina Theme

Arlina Design merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger dan template khusus blogger.

Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.