07 April 2017

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.

Cara Membuat Anime List Seperti Meongs, Tutorial Membuat Anime List Seperti Meongs, Widget Anime List Meongs, Cara Membuat Anime List Fansub, Tutorial Membuat Anime List Fansub, Cara Membuat Daftar Anime Fansub, Anime List Fansub, Anime List Fanshare, Anime List Website Anime, How To Make Anime List Fansub, Anime List Fansub Site, Cara Membuat Fansub, Cara Membuat Widget Fansub, Tutorial Fansub, Website Fansub, Aka321, Aka321.blogspot.com

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.

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

  2. /* 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%}}

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

  5. <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>

  6. 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.

  7.      <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>

  8. 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.

Artikel Terkait

9 komentar

Kalo WP copy terus paste CSSnya ke style.css, terus simpan. setelah itu copy terus paste HTMLnya di tempat agan mau posting anime list-nya

supaya bisa jadi di samping gimana ? kalo kebawah semua makan tempat ? tolong bimbingannya ^ ^

cara menyesuaikan lebar sama postingan blog gimana kak?

Memangnya belum sesuai gan?, bisa dilihat contohnya gak?

Mau kesamping gimana gan? mungkin bisa memberi contoh?

gan itu css diletakkan di posisi mna di style.css kok gk berhasil. mohon infonya gan. klw bsa buat lngkah khusus buat wordpress biar paham. thanks sblumnya gan.

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon