How to Make Anime List "Ala fansub" and Responsive Blog

Hello sobat shana chanz, pada sore ini saya ingin berbagi tutorial Bagaimana Cara Membuat Anime List Fansub dan Responsive di Blog ?

Tau gak sih Anime List itu Apa ? biasanya buat kita yang suka download atau nongkrong di website-website Anime Fansub atau Fanshare seperti Animeindo, Wardhanime, Nekonime, Oploverz, Kurogaze pasti pernah ke halaman page Anime List nya, guna dari Anime List itu sendiri untuk kita yg ingin mencari-cari daftar anime list yang akan kita streaming maupun download.

Buat yang masih penasaran bagaimana demo nya langsung saya kita lihat di bawah ini.

DEMO

Dan langsung saja cara penerapannya!

Cara Pemasangan Anime List di Blog :

1. Pertama Masuk ke Editor Blogger Kalian.
2. Jika sudah, lalu cari kode ]]><b:skin> atau </style> dan tambahankan CSS di bawah ini tepat di atasnya.

<style>
/* Anime List - CSS */
.shanachanz-al{text-align:center;margin:0 0 5px;padding:1px 0}
.shanachanz-al a{display:block;width:26.7px;float:left;background:#424242;font-weight:500;color:#FFF;padding:5px 0}
.shanachanz-al a:hover{background:#2977BE;text-decoration:none}
.shanachanz-list{position:relative;margin-bottom:10px}
.shanachanz-start{font-family:segoe ui;font-weight:700;color:#333;font-size:13px;border-bottom:2px solid #2977BE;margin-bottom:5px;text-transform:uppercase;position:relative;padding:5px}
.shanachanz-start a{color:#6D6D6D}
.animerow{float:left;line-height:21px;width:308px;color:#000;padding-left:16px}
.shanachanz-judul{line-height:21px;font-weight:300;display:list-item}
.shanachanz-judul a{font-size:12px;color:#2E2E2E;font-family:segoe ui}
</style>

3. Selanjutnya, langsung saja sobat buat baru Pages/Laman Baru

4. Buat Judul halaman, Lalu Ambil Kode di bawah ini dan pastekan di HTML HALAMAN.

<div id="shanachanz">
    <div class="shanachanz-al">
        <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 id="shanachanz">
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="#">#</a>
            </div>

   <!-- START ANIME LIST "#" HERE -->
            <div class="animerow">
                <div class="shanachanz-judul">
                    <a href="LINK POST ANIME">5 Sentimeter Perdetik</a>
                </div>
            </div>
            
            <div class="animerow">
                <div class="shanachanz-judul">
                    <a href="LINK POST ANIME">009 Re Saibers</a>
                </div>
            </div>
    
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="A">A</a>
            </div>
   
   <!-- ANIME LIST "A" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="B">B</a>
            </div>
           
   <!-- ANIME LIST "B" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="C">C</a>
            </div>
           
   <!-- ANIME LIST "C" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="D">D</a>
            </div>
               
   <!-- ANIME LIST "D" HERE -->

            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="E">E</a>
            </div>
           
   <!-- ANIME LIST "E" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="F">F</a>
            </div>
           
   <!-- ANIME LIST "F" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="G">G</a>
            </div>
           
   <!-- ANIME LIST "G" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="H">H</a>
            </div>
           
   <!-- ANIME LIST "H" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="I">I</a>
            </div>
           
   <!-- ANIME LIST "I" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="J">J</a>
            </div>
           
   <!-- ANIME LIST "J" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="K">K</a>
            </div>
           
   <!-- ANIME LIST "K" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="L">L</a>
            </div>
           
   <!-- ANIME LIST "L" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="M">M</a>
            </div>
           
   <!-- ANIME LIST "M" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="N">N</a>
            </div>
           
   <!-- ANIME LIST "N" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="O">O</a>
            </div>
           
   <!-- ANIME LIST "O" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="P">P</a>
            </div>
           
   <!-- ANIME LIST "P" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="Q">Q</a>
            </div>
           
   <!-- ANIME LIST "Q" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="R">R</a>
            </div>
           
   <!-- ANIME LIST "R" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="S">S</a>
            </div>
           
   <!-- ANIME LIST "S" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="T">T</a>
            </div>
           
   <!-- ANIME LIST "T" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="U">U</a>
            </div>
           
   <!-- ANIME LIST "U" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="V">V</a>
            </div>
           
   <!-- ANIME LIST "V" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="W">W</a>
            </div>
           
   <!-- ANIME LIST "W" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="X">X</a>
            </div>
           
   <!-- ANIME LIST "X" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="Y">Y</a>
            </div>
           
   <!-- ANIME LIST "Y" HERE -->
   
            <div class="clear"></div>
        </div>
        <div class="shanachanz-list">
            <div class="shanachanz-start">
                <a name="Z">Z</a>
            </div>
           
   <!-- ANIME LIST "Z" HERE -->
   
            <div class="clear"></div>
        </div>
    </div>
</div>

5. Jika sudah semua, lalu save dan lihat hasilnya!

Sekian tutorial saya hari ini Cara Membuat Anime List Ala Fansub di Blog dan Responsive semoga tutorial yang saya berikan dapat bermanfaat bagi kalian semua yang ingin belajar, dan nantikan artikel selanjutnya..

Terima Kasih..