Membuat Genre Di sidebar dengan Scrollbar

Halo sobat blogger, kali ini saya akan membagikan tutorial baru yang hampir mirip dengan tutorial sebelumnya yaitu Menampilkan semua label/genre post dengan filter abjad atau sort abjad untuk blogger, namun ditutorial ini tidak auto index alias masih manual edit.



Artikel kali ini sudah dibuat simple, silahkan kalian ikuti petunjuk yang ada, untuk demo silahkan cek tombol dibawah ini!



Membuat Genre Di sidebar dengan Scrollbar

  1. Buka Blogger > Tema > Edit HTML
  2. Simpan CSS berikut ke <b:skin>...</b:skin> atau <style>...</style>
    /* genre scrollbar */
    #genres{clear:both;}
    #genres ul{list-style:none;padding:0;margin:auto;overflow:auto;max-height:300px;}
    #genres ul li{margin:auto;padding:1px;float:left;width:49%;}
    .genres ul li a{padding:5px;display:block;color:#fff;background:rgba(0,0,0,0.2);text-align:center;}
    #genres ul li a:hover{text-decoration:none;color:#fff;background-color:#111;}
    /* warna */
    .genres ul li a[title="Action"]{background-color:#357ae8;}
    .genres ul li a[title="Adventure"]{background-color: #4d90fe;}
    .genres ul li a[title="Cars"]{background-color: #3F51B5;}
    .genres ul li a[title="Comedy"]{background-color: #2196F3;}
    .genres ul li a[title="Dementia"]{background-color: #00BCD4;}
    .genres ul li a[title="Demons"]{background-color: #673AB7;}
    .genres ul li a[title="Drama"]{background-color: #9C27B0;}
    .genres ul li a[title="Ecchi"]{background-color: #E91E63;}
    .genres ul li a[title="Fantasy"]{background-color: #F44336;}
    .genres ul li a[title="Game"]{background-color: #009688;}
    .genres ul li a[title="Harem"]{background-color: #4CAF50;}
    .genres ul li a[title="Historical"]{background-color: #8BC34A;}
    .genres ul li a[title="Horror"]{background-color: #CDDC39;}
    .genres ul li a[title="Josei"]{background-color: #FFC107;}
    .genres ul li a[title="Kids"]{background-color: #FF9800;}
    .genres ul li a[title="Magic"]{background-color: #FF5722;}
    .genres ul li a[title="Martial Arts"]{background-color: #795548;}
    .genres ul li a[title="Mecha"]{background-color: #9E9E9E;}
    .genres ul li a[title="Military"]{background-color: #607D8B;}
    .genres ul li a[title="Music"]{background-color: #000080;}
    .genres ul li a[title="Mystery"]{background-color: #a52a2a;}
    .genres ul li a[title="Parody"]{background-color: #ed143d;}
    .genres ul li a[title="Police"]{background-color: #32cd32;}
    .genres ul li a[title="Psychological"]{background-color: #778899;}
    .genres ul li a[title="Romance"]{background-color: #8b008b;}
    .genres ul li a[title="Samurai"]{background-color: #2e8b57;}
    .genres ul li a[title="School"]{background-color: #191970;}
    .genres ul li a[title="Sci-Fi"]{background-color: #374f5a;}
    .genres ul li a[title="Seinen"]{background-color: #d2691e;}
    .genres ul li a[title="Shoujo"]{background-color: #b22222;}
    .genres ul li a[title="Shoujo Ai"]{background-color: #22a4c2;}
    .genres ul li a[title="Shounen"]{background-color: #a9c222;}
    .genres ul li a[title="Shounen Ai"]{background-color: #c2225d;}
    .genres ul li a[title="Slice of Life"]{background-color: #009651;}
    .genres ul li a[title="Space"]{background-color: #556b2f;}
    .genres ul li a[title="Sports"]{background-color: #4682b4;}
    .genres ul li a[title="Super Power"]{background-color: #da70d6;}
    .genres ul li a[title="Supernatural"]{background-color: #6b8e23;}
    .genres ul li a[title="Thriller"]{background-color: #008b8b;}
    .genres ul li a[title="Vampire"]{background-color: #708090;}
    .genres ul li a[title="Yaoi"]{background-color: red;}
    .genres ul li a[title="Yuri"]{background-color: #008000;}

  3. Jika sudah Save tema.
  4. Lalu, buka Tata letak > Add Widget > HTML/Javascript, dan
  5. Simpan HTML berikut kedalam widget tersebut
    <nav class="genres" id='genres'>
      <ul>
        <li><a href="/search/label/action" title="Action">Action</a></li>
        <li><a href="/search/label/adventure" title="Adventure">Adventure</a></li>
        <li><a href="/search/label/cars" title="Cars">Cars</a></li>
        <li><a href="/search/label/comedy" title="Comedy">Comedy</a></li>
        <li><a href="/search/label/dementia" title="Dementia">Dementia</a></li>
        <li><a href="/search/label/demons" title="Demons">Demons</a></li>
        <li><a href="/search/label/drama" title="Drama">Drama</a></li>
        <li><a href="/search/label/ecchi" title="Ecchi">Ecchi</a></li>
        <li><a href="/search/label/fantasy" title="Fantasy">Fantasy</a></li>
        <li><a href="/search/label/game" title="Game">Game</a></li>
        <li><a href="/search/label/harem" title="Harem">Harem</a></li>
        <li><a href="/search/label/historical" title="Historical">Historical</a></li>
        <li><a href="/search/label/horror" title="Horror">Horror</a></li>
        <li><a href="/search/label/josei" title="Josei">Josei</a></li>
        <li><a href="/search/label/kids" title="Kids">Kids</a></li>
        <li><a href="/search/label/magic" title="Magic">Magic</a></li>
        <li><a href="/search/label/martial-arts" title="Martial Arts">Martial Arts</a></li>
        <li><a href="/search/label/mecha" title="Mecha">Mecha</a></li>
        <li><a href="/search/label/military" title="Military">Military</a></li>
        <li><a href="/search/label/music" title="Music">Music</a></li>
        <li><a href="/search/label/mystery" title="Mystery">Mystery</a></li>
        <li><a href="/search/label/parody" title="Parody">Parody</a></li>
        <li><a href="/search/label/police" title="Police">Police</a></li>
        <li><a href="/search/label/psychological" title="Psychological">Psychological</a></li>
        <li><a href="/search/label/romance" title="Romance">Romance</a></li>
        <li><a href="/search/label/samurai" title="Samurai">Samurai</a></li>
        <li><a href="/search/label/school" title="School">School</a></li>
        <li><a href="/search/label/sci-fi" title="Sci-Fi">Sci-Fi</a></li>
        <li><a href="/search/label/seinen" title="Seinen">Seinen</a></li>
        <li><a href="/search/label/shoujo" title="Shoujo">Shoujo</a></li>
        <li><a href="/search/label/shoujo-ai" title="Shoujo Ai">Shoujo Ai</a></li>
        <li><a href="/search/label/shounen" title="Shounen">Shounen</a></li>
        <li><a href="/search/label/shounen-ai" title="Shounen Ai">Shounen Ai</a></li>
        <li><a href="/search/label/slice-of-life" title="Slice of Life">Slice of Life</a></li>
        <li><a href="/search/label/space" title="Space">Space</a></li>
        <li><a href="/search/label/sports" title="Sports">Sports</a></li>
        <li><a href="/search/label/super-power" title="Super Power">Super Power</a></li>
        <li><a href="/search/label/supernatural" title="Supernatural">Supernatural</a></li>
        <li><a href="/search/label/thriller" title="Thriller">Thriller</a></li>
        <li><a href="/search/label/vampire" title="Vampire">Vampire</a></li>
        <li><a href="/search/label/yaoi" title="Yaoi">Yaoi</a></li>
        <li><a href="/search/label/yuri" title="Yuri">Yuri</a></li>
      </ul>
    </nav>

  6. Jika Sudah Simpan Widget.
Tambahkan ?&max-results=6 untuk membatasi post dengan label
contoh : /search/label/yuri?&max-results=6
Related Posts