Membuat Menu Genre Dibawah Header

 

Membuat Menu Genre Dibawah Header

Cara Membuat Menu Genre Dibawah Header ini diambil dari Template Oploverz, cara membuatnya masih manual menggunakan HTML namun tidak terlalu susah untuk dibuat.


Membuat Menu Genre Dibawah Header

Tutorial kali belum saya buat responsive jika kalian ingin membuatnya menjadi responsive silahkan baca tutorialnya disini. Untuk demo yang sudah jadinya silahkan Cek tombol dibawah ini.



Membuat Menu Genre Dibawah Header Seperti Oploverz

  1. Buka Blogger > Tema > Edit HTML
  2. Salin CSS berikut dan simpan diatas </style>
    3. ._genre {
    max-width: 1080px;
    margin: 0 auto;
    background: #fff;
    padding: 10px 0 5px 5px;
    margin-bottom: 12px;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}
._genre a{
    font-family: MyriadPro;
    font-size: 14px;
    color: #5b5b5b;
    font-weight: 500;
    text-transform: capitalize;
    background-color: #fff;
    border: 1px solid #e3e9ff;
    border-radius: 10px;
    padding: 4px 10px;
    margin-right: 5px;
    display: inline-block;
    overflow:hidden;
}
._genre a:hover {
    background-color: #3c9ccd!important;
    color: #fff!important;
    text-decoration: none;
}

  3. Kemudian cari html yang mirip id='content-wrapper' atau id='outer-wrapper'
  4. Jika sudah ketemu, salin dan letakkan HTML berikut dibawahnya
    5. <div class="_genre">
  <a href="/search/label/LABEL POST">Action</a>
  <a href="/search/label/LABEL POST">Adventure</a>
  <a href="/search/label/LABEL POST">Comedy</a>
  <a href="/search/label/LABEL POST">Demons</a>
  <a href="/search/label/LABEL POST">Drama</a>
  <a href="/search/label/LABEL POST">Ecchi</a>
  <a href="/search/label/LABEL POST">Fantasy</a>
  <a href="/search/label/LABEL POST">Game</a>
  <a href="/search/label/LABEL POST">Harem</a>
  <a href="/search/label/LABEL POST">Historical</a>
  <a href="/search/label/LABEL POST">Horror</a>
  <a href="/search/label/LABEL POST">Magic</a>
  <a href="/search/label/LABEL POST">Martial Arts</a>
  <a href="LINK POST">Genre Lainnya >></a>
</div>

  5. Save Tema & Jangan lupa edit bagian yang sudah ditandai.

Comments

Post a Comment

Popular posts from this blog

Recent Post Blogger By Label Filter Abjad

Image
  Recent Post Blogger By Label Filter Abjad Recent Post Blogger By Label Filter Abjad  - Recent post label dengan fitur mengurutkan judul/huruf depan dari postingan blog, Mulai dari Nomor, lalu ke huruf A sampai Z. Recent Post ini lebih mengutamakan Filter huruf depan dari sebuah judul post blog bukan mengurutkannya dengan tanggal di rilisnya postingan tersebut. Fitur ini berbeda dari recent post sebelumnya yaitu  Simple Recent Post By Label  yang mengandalkan tanggal rilis postnya dan jika dilihat mungkin acak-acakan judul postnya jadi bikin pusing atau tidak nyaman dipandang mata, maka dari itu Recent Post Label Filter Abjad jadi alternatifnya agar lebih minimalist dan rapih jika dilihat Recent Post Blogger By Label Filter Abjad Silahkan buka  Blogger > Tema > Edit HTML , lalu tambahkan CSS diatas  </style> /* Recent Post Label Filter Abjad - Arlethdesign ======================================= */ ul.grup-listanime{max-height:200px;overflow:...
Read more

Cara Mudah Membuat Template Blog Responsive & Mobile Friendly

Image
  Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Halo, tutorial Kali ini saya akan membagikan  Cara Mudah Membuat Template Blog Responsive , artikel kali ini cukup mudah dan simpel untuk kalian praktekkan secara langsung, yuk langsung cek artikel dibawah ini. Apa itu Responsive & Mobile Friendly?, Responsive memiliki arti merespon, dan Mobile Friendly memiliki arti adaptive. Arti Lebih tepatnya tampilan blog akan merespon & menyesuaikan ukuran layar dimana blog itu dibuka baik itu handphone atau komputer. Kelebihan dari Responsive & Mobile Friendly yaitu memiliki fungsi untuk Meningkatkan SEO, Memudahkan Pengguna Smartphone, dan Disukai Pengunjung. Cara Mudah Membuat Template Blog Responsive & Mobile Friendly Buka  Blogger > Tema > Edit HTML Simpan HTML berikut dibawah  <head> , jika sudah ada tidak perlu ditambah. <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'...
Read more

Popular Post Samehada untuk Blogger

Image
  Popular Post Samehada untuk Blogger Tutorial kali ini yaitu Cara membuat Popular Post seperti Samehada untuk Blogger, diartikel ini saya akan membagikannya dengan singkat dan jelas, dan sangat mudah dipahami untuk pemula sekalipun. Untuk pratinjau atau preview tampilannya kalian bisa dipostingan sebelumnya yaitu  Bt-Samehada Clone 2020 Template Blogger . Popular Post Samehada untuk Blogger Pertama Buka Blogger > Tata letak > Add Widget Popular Post  (Jika sudah ada tidak perlu). Kemudian, Buka Tema > Edit HTML Simpan CSS berikut kedalam  <style> ... </style>  atau  <b:skin> ... </b:skin> /* Popular post blogger new style - arlethdesign */ #PopularPosts1 .widget-content.popular-posts{margin:auto} #PopularPosts1 ul li:nth-child(1n+2) .item-meta{font-size:11px;padding:6px 0 0;opacity:.7} #PopularPosts1 ul{padding:0;list-style:none;margin:auto;overflow:hidden} #PopularPosts1 ul li{margin:auto;padding:10px 0} #PopularPosts1 ul ...
Read more