Cara Membuat Anime List Tonansub

Anime List sangat membantu untuk meningkatkan Pengunjung. Karena, Perngunjung jadi mudah menemukan Anime yang ada di sebuah blog atau web. Jadi saya memiliki ide untuk membuat Tutorial yang sekarang akan kita bahas.Mungkin Tutorial Kali ini aga sulit untuk para pemula seperti saya.

Seperti biasa masuk ke Blogger --> Template --> Edit HTML
Lalu letakkan CSS ini di bawah <b:skin> atau di atas </b:skin>

.strip {
    width: 45%;
    float:left;
}
.list-group {
    padding-left: 10px;
    margin-bottom: 20px;
}
a.list-group-item.active, a.list-group-item.active:hover, a.list-group-item.active:focus {
    z-index: 2;
    color: #FFF;
    background-color: #428BCA;
    border-color: #428BCA;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #FFF;
    border: 1px solid #DDD;
}
.list-group-item > .badge {
    float: right;
}
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999;
    border-radius: 10px;
}

Terakhir kita masukin HTML nya

<div class="area">
   
                <div class="row clearfix">
    <div class="strip">
     <div class="list-group">
       <a href="#" class="list-group-item active">A</a>
                               <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="akame-ga-kill!">Akame ga Kill!</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="akatsuki-no-yona">Akatsuki no Yona</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="amagi-brilliant-park">Amagi Brilliant Park</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="ao-haru-ride">Ao Haru Ride</a>
      </div>
                               <a class="list-group-item active">C</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="cross-ange-tenshi-to-ryuu-no-rondo">Cross Ange Tenshi to Ryuu no Rondo</a>
      </div>
                                                <a href="#" class="list-group-item active">E</a>
             <a class="list-group-item active">G</a>
                                                  <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="gekkan-shoujo-nozaki-kun">Gekkan Shoujo Nozaki kun</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="glasslip">Glasslip</a>
      </div>
                        <a href="#" class="list-group-item active">I</a>
                               <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="inou-battle-wa-nichijou-kei-no-naka-de">Inou Battle wa Nichijou kei no Naka de</a>
      </div>
                               <a class="list-group-item active">K</a>
                         <a href="#" class="list-group-item active">M</a>
                               <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="madan-no-ou-to-vanadis">Madan no Ou to Vanadis</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="magic-kaito-1412">Magic Kaito 1412</a>
      </div>
                               <a class="list-group-item active">O</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="ookami-shoujo-to-kuro-ouji">Ookami Shoujo to Kuro Ouji</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="ore-twintail-ni-narimasu">Ore Twintail ni Narimasu</a>
      </div>
                        <a href="#" class="list-group-item active">Q</a>
             <a class="list-group-item active">S</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="seirei-tsukai-no-blade-dance">Seirei Tsukai no Blade Dance</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="selector-spread-wixoss">Selector Spread WIXOSS</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="shirobako">Shirobako</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="sora-no-method">Sora no Method</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="sword-art-online-season-2">Sword ART online season 2</a>
      </div>
                        <a href="#" class="list-group-item active">U</a>
             <a class="list-group-item active">W</a>
                                                 <a class="list-group-item active">Y</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="yuuki-yuuna-wa-yuusha-de-aru">Yuuki Yuuna wa Yuusha de Aru</a>
      </div>
                             </div>
    </div>
    <div class="strip">
     <div class="list-group">
       
                         <a class="list-group-item active">B</a>
                                                  <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="baby-steps">Baby Steps</a>
      </div>
                                                 <a class="list-group-item active">D</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="daitoshokan-no-hitsujikai">Daitoshokan no Hitsujikai</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="denki-gai-no-honya-san">Denki gai no Honya san</a>
      </div>
                                                 <a class="list-group-item active">F</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="fate-stay-night--unlimited-blade-works">Fate Stay Night  Unlimited Blade Works</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="free!-eternal-summer">Free! Eternal Summer</a>
      </div>
                                                 <a class="list-group-item active">H</a>
                                                  <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="haikyuu!!">Haikyuu!!</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="hitsugi-no-chaika-avenging-battle">Hitsugi no Chaika Avenging Battle</a>
      </div>
                                                 <a class="list-group-item active">J</a>
                                                 
                         <a class="list-group-item active">L</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="log-horizon-2nd-season">Log Horizon 2nd Season</a>
      </div>
                                                 <a class="list-group-item active">N</a>
                                                  <a class="list-group-item active">P</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="pengumuman-penambahan-fitur-streaming-video-online">Pengumuman Penambahan Fitur Streaming Video Online</a>
      </div>
                                                 <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="persona-4-the-golden-animation">Persona 4 The Golden Animation</a>
      </div>
                                                 <a class="list-group-item active">R</a>
                                                  <div class="list-group-item">
       <span class="badge">complete</span>
       <a href="rokujouma-no-shinryakusha">Rokujouma no Shinryakusha</a>
      </div>
                                                 <a class="list-group-item active">T</a>
                                                  <div class="list-group-item">
       <span class="badge">on-going</span>
       <a href="trinity-seven-7-nin-no-mahoutsukai">Trinity Seven 7 nin no Mahoutsukai</a>
      </div>
                                                 <a class="list-group-item active">V</a>
                                                  <a class="list-group-item active">X</a>
                                                  <a class="list-group-item active">Z</a>
                                                  
     </div>
                
   </div>
            </div>