Menu kali ini saya clone dari sakuranovel.id

Blog yang memiliki menu yang sama seperti sayur tanpa garam. Oleh karena itu, saya membuat menu baru yg bisa kalian pasang di template anime blogger.

Ada banyak cara membuat menu bar di blog. Tapi, kalau kami membuat tutorialnya, 4 jam terasa belum cukup. Cukup gunakan yg sudah jadi, jangan buang2 waktu kalian.

Cara memasang menu sakuranovel

Template > Edit HTML.

Copy CSS berikut

@import url(https://fonts.googleapis.com/css?family=Nunito:400,600,700,900&display=swap);html{scroll-behavior:smooth}a{text-decoration:none;color:inherit;transition:.2s}:focus{outline:0}.container{margin:0 auto;max-width:1080px;margin:0 auto;}
.header{width:100%;display:inline-block;position:relative;background:#fff;box-shadow:0 5px 4px rgba(0,0,0,.1);z-index:100;}
.header .container{max-width:1200px;}
.header-logo h1{margin:0;}
.header-logo{color:#444;font-weight:900;float:left;align-items:center;padding:12px;transition:.2s;}
.header-logo .icon-svg{color:#6e6dfb;}
.header-logo:hover{color:#6e6dfb;}
.header-logo img{height:38px;}
.header-navigation{list-style:none;padding:0;margin:0;display:inline-block;}
.header-navigation .menu-item{position:relative;display:inline-flex;}
.header-navigation .menu-item a{align-items:center;display:inline-flex;padding:20px 15px;font-weight:600;transition:.2s;}
.header-navigation .current-menu-item,.header-navigation .menu-item a:hover{box-shadow:inset 0 -5px 0 #6e6dfb;color:#111;}
.header-right{float:right;display:flex;align-items:center;padding:10px;gap:10px;}
.header-searchbar form{margin:0;position:relative;overflow:hidden;}
.header-searchbar form button{display:contents;cursor:pointer;}
.header-searchbar #search{background:#f7fafc;color:#777;font-family:inherit;width:180px;padding:12px;border:none;border-radius:5px;transition:ease-in-out,width .35s ease-in-out;}
.header-searchbar #search:focus{width:230px;}
.header-searchbar .icon-svg{position:absolute;right:10px;top:10px;font-size:20px;color:#72759e;padding-left:8px;border-left:solid 2px #72759e;}
.header-menu input[type=checkbox]{display:none;}
.showmenu{display:none;float:left;padding:15px;font-size:31px;color:#444;background:#f7fafc;}
.showsearch{display:none;float:right;padding:15px;font-size:31px;color:#444;background:#f7fafc;}
.content{overflow:hidden;}
#datafetch{position:absolute;width:250px;background:#fff;box-shadow:0 5px 4px rgba(0,0,0,.1);}
@-webkit-keyframes loopingbackg{to{background-position:0 -3000px;}}
@keyframes loopingbackg{to{background-position:0 -3000px;}}
@media (max-width:768px){#navigation{display:block;position:absolute;left:-1000px;margin-top:58px;width:100%;background:#fff;border-top:solid 4px #6e6dfb;z-index:4;transition:.2s;}.header-navigation .menu-item,.header-navigation .menu-item a{display:block;}.header-right{float:none;width:100%;padding:0;position:absolute;background:#fff;border-top:solid 4px #6e6dfb;margin-top:58px;left:-1000px;transition:.2s;}.header-searchbar{margin:10px;width:100%;}.header-searchbar #search{width:100%;border-radius:0;}.header-searchbar #search:focus{width:100%;}.header-navigation .current-menu-item,.header-navigation .menu-item a:hover{box-shadow:inset 5px 0 0 0 #6e6dfb;}.showmenu{display:inline-block;}.showsearch{display:inline-block;}.header-menu #showmenu:checked~#navigation{box-shadow:0 5px 20px rgba(0,0,0,.5);left:0;}.header-menu #showsearch:checked~.header-right{box-shadow:0 5px 20px rgba(0,0,0,.5);left:0;}#datafetch{width:100%;left:0;}}
#Header1,#PageList1{display:block;}
@media (min-width:768px){.header-navigation .menu-item .sub-menu{position:absolute;top:55px;min-width:120px;background:#fff;border-radius:3px;font-size:13px;list-style:none;padding:0;line-height:30px;margin:0;left:0;z-index:3;transition:cubic-bezier(.4,0,.2,1) .26s transform,cubic-bezier(.4,0,.2,1) .26s opacity;}.header-navigation .menu-item .sub-menu .menu-item{padding:0;width:100%;box-shadow:none;border-radius:3px;display:block;transition:.2s;}.header-navigation .menu-item .sub-menu li a{display:block;margin:5px;padding:0 10px;background:#f1f1f1;color:#444;}}
@media (max-width:768px){.header-navigation .menu-item .sub-menu{padding:5px;background:#f2f2f2;}#dropdown:checked ~ .sub-menu{max-height:500px;}.header-navigation .menu-item .sub-menu{max-height:0;transition:max-height 0.2s ease-out;}}
.header-navigation .menu-item .sub-menu{transform:translateY(0);opacity:0;user-select:none;pointer-events:none;}
#dropdown:checked ~ .sub-menu{opacity:1;transform:translateY(10px);user-select:auto;z-index:1;pointer-events:auto;}
.themeswitch{padding:4px;background:#f00;color:white;border-radius:4px;display:flex;align-items:center;}
.sunny,.dark-mode .moon{display:none;}
.dark-mode .sunny{display:block;}
.themeswitch svg:hover{rotate:-45deg;transition:.3s;}
.themeswitch svg{transition:.2s;}

Paste di atas ]]></b:skin>

Terakhir cari <header hapus code dari pembuka sampai penutup. Setelah itu paste code xml berikut:

<header class='header'>
<div class='container'>
  <b:section class='header-menu' growth='vertical' id='head' maxwidgets='2' showaddelement='true'>
    <b:widget id='Header1' locked='false' title='Nyaa (Header)' type='Header' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='displayUrl'>https://sakuranovel.id/wp-content/uploads/2020/08/Untitled-5.png</b:widget-setting>
        <b:widget-setting name='displayHeight'>190</b:widget-setting>
        <b:widget-setting name='sectionWidth'>1069</b:widget-setting>
        <b:widget-setting name='useImage'>true</b:widget-setting>
        <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
        <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
        <b:widget-setting name='displayWidth'>940</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main' var='this'>
        <div class='header-widget'>
          <label class='showmenu' for='showmenu'>
            <svg aria-hidden='true' height='1em' preserveAspectRatio='xMidYMid meet' role='img' viewBox='0 0 20 20' width='1em' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M3 11h14V9H3v2zm0 5h14v-2H3v2zM3 4v2h14V4H3z' fill='currentColor'/></svg></label>
          <div class='header-logo'>
            <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
            <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
          </div>
          <label class='showsearch' for='showsearch'><svg aria-hidden='true' height='1em' preserveAspectRatio='xMidYMid meet' role='img' viewBox='0 0 24 24' width='1em' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8a7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6a6 6 0 0 1-6-6z' fill='currentColor'/></svg></label>
        </div>
        <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle'/>
  </b:includable>
      <b:includable id='behindImageStyle'>
    <b:if cond='data:sourceUrl'>
      <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
      <style type='text/css'>
        .header-widget {
          background-position: <data:blog.locale.languageAlignment/>;
          background-repeat: no-repeat;
          background-size: cover;
        }
      </style>
    </b:if>
  </b:includable>
      <b:includable id='description'>
    <p>
      <data:this.description/>
    </p>
  </b:includable>
      <b:includable id='image'>        
            <a class='header-image-wrapper' expr:href='data:blog.homepageUrl' expr:title='data:title' rel='home'>
              <noscript>
                <img alt='Sakuranovel' rel='home' src='https://sakuranovel.id/wp-content/uploads/2020/08/Untitled-5.png' title='Sakuranovel'/>
              </noscript>
              <img alt='Sakuranovel' class=' ls-is-cached lazyloaded' data-src='https://sakuranovel.id/wp-content/uploads/2020/08/Untitled-5.png' rel='home' src='https://sakuranovel.id/wp-content/uploads/2020/08/Untitled-5.png' title='Sakuranovel'/>
            </a>
  </b:includable>
      <b:includable id='title'>
    <h1>
      <b:tag cond='data:view.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
        <data:title/>
      </b:tag>
    </h1>
  </b:includable>
    </b:widget>
    <b:widget id='PageList1' locked='false' title='Halaman' type='PageList' version='2' visible='true'>
      <b:widget-settings>
        <b:widget-setting name='pageListJson'><![CDATA[{"link1":{"href":"#","position":1,"title":"Daftar Novel"},"link0":{"href":"http://zeistmanga-bt.blogspot.com/","position":0,"title":"Beranda"},"link5":{"href":"#","position":5,"title":"Bookmark"},"link4":{"href":"#","position":4,"title":"Tags"},"link3":{"href":"#","position":3,"title":"Genre"},"link2":{"href":"#","position":2,"title":"Tamat"}}]]></b:widget-setting>
        <b:widget-setting name='homeTitle'>Beranda</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:include name='content'/>
</b:includable>
      <b:includable id='content'>
  <div class='widget-content'>
    <input id='showmenu' role='button' type='checkbox'/>
    <b:include name='pageList'/>
    <input id='showsearch' role='button' type='checkbox'/>
    <div class='header-right'>
      <div class='header-searchbar'>
        <form expr:action='data:blog.searchUrl'>
          <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
          <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' id='search' name='q'/>
          
          <button type='submit' value='Submit'><svg aria-hidden='true' class='icon-svg ion-md-search' height='1em' preserveAspectRatio='xMidYMid meet' role='img' viewBox='0 0 24 24' width='1em' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><path d='M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8a7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6a6 6 0 0 1-6-6z' fill='currentColor'/></svg></button>
        </form>
      </div>
      <label class='themeswitch'>
              <input class='check flex' onclick='darkMode()' type='checkbox'/>
          <svg aria-hidden='true' class='moon' height='1em' preserveAspectRatio='xMidYMid meet' role='img' viewBox='0 0 16 16' width='1em' xmlns='http://www.w3.org/2000/svg'><g fill='currentColor'><path d='M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z'/><path d='M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z'/></g></svg>
          <svg aria-hidden='true' class='sunny' height='1em' preserveAspectRatio='xMidYMid meet' role='img' viewBox='0 0 16 16' width='1em' xmlns='http://www.w3.org/2000/svg'><path d='M8 10.5a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5zM8 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0zm0 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13zM2.343 2.343a.75.75 0 0 1 1.061 0l1.06 1.061a.75.75 0 0 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06zm9.193 9.193a.75.75 0 0 1 1.06 0l1.061 1.06a.75.75 0 0 1-1.06 1.061l-1.061-1.06a.75.75 0 0 1 0-1.061zM16 8a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 16 8zM3 8a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h1.5A.75.75 0 0 1 3 8zm10.657-5.657a.75.75 0 0 1 0 1.061l-1.061 1.06a.75.75 0 1 1-1.06-1.06l1.06-1.06a.75.75 0 0 1 1.06 0zm-9.193 9.193a.75.75 0 0 1 0 1.06l-1.06 1.061a.75.75 0 1 1-1.061-1.06l1.06-1.061a.75.75 0 0 1 1.061 0z' fill='currentColor' fill-rule='evenodd'/></svg>
            </label>
    </div>
        </div>
</b:includable>
      <b:includable id='overflowButton'>
  <b:include name='verticalMoreIcon'/>
</b:includable>
      <b:includable id='overflowablePageList'>
  <div class='overflowable-container'>
    <div class='overflowable-contents'>
      <div class='container'>
        <b:with value='true' var='overflow'>
        <b:with value='&quot;tabs&quot;' var='pageListClass'>
          <b:include name='pageList'/>
        </b:with>
        </b:with>
      </div>
    </div>
    <div class='overflow-button hidden'>
      <b:include name='overflowButton'/>
    </div>
  </div>
</b:includable>
      <b:includable id='pageLink'>
  <li class='menu-item menu-item-type-custom menu-item-object-custom current_page_item menu-item-home menu-item-30' id='menu-item-30'>
    <b:class cond='data:overflow' name='overflowable-item'/>
    <b:class cond='data:link.isCurrentPage' name='current-menu-item'/>
    <a expr:href='data:link.href'><data:link.title/></a>
    
  </li>
</b:includable>
      <b:includable id='pageList'>
        <ul class='header-navigation' id='navigation'>
          <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
          <b:loop values='data:links' var='link'>
            <b:include name='pageLink'/>
          </b:loop>
          <li class='menu-item menu-item-type-custom menu-item-object-custom current_page_item menu-item-home menu-item-30' id='menu-item-30'>
            <label for='dropdown'><a>Informasi &#9660;</a></label>
            <input id='dropdown' type='checkbox'/>
            <ul class='sub-menu'>
              <li class='menu-item'>
                <a href='#'>Pusat Bantuan</a>
              </li>
              <li class='menu-item'>
                <a href='#'>Lapor Masalah</a>
              </li>
              <li class='menu-item'>
                <a href='#'>Request</a></li>
              <li class='menu-item'>
                <a href='#'>Privacy Policy</a>
              </li>
              <li class='menu-item'>
                <a href='#'>Disclaimers</a></li>
              <li class='menu-item'>
                <a href='#'>DMCA</a>
              </li>
            </ul>
          </li>
  </ul>
</b:includable>
    </b:widget>
  </b:section>
  
</div>
</header>

Silahkan request menu favorit kalian di kolom komentar, kalau bagus/enak dipandang, akan saya buatkan.

min bisa gak kalau ditambahin mode gelap/terang disebelah search juga nanti diresponsive nya juga masih disebelah nya search sama logo maksudnya kalau di mobile/handphone mode gelap/terang berada diantara logo dengan search

sama search live nya kalau digabung kan bisa gak

min menu itu juga mempengaruhi text postingan menjadi hitam juga min saya coba di zeistmanga tadi nya blueviolet jadi hitam

Untuk dark/light mode tunggu update berikutnya, sebenarnya susah juga memasang dark light, karna setiap tema berbeda2 scriptnya.
Kalau icon dark/light switch itu gampang.
Gw gk yakin memasang live search, kecuali ada script yg bagus.

Minta halaman yg bermasalah dan screenshot.

min cara nyembunyiin postingan gimana min yang diblog1 kan sudah ada 1 yang nyembunyiin chapter aja kalau mau disembunyiin 2 gimana min mau disembunyiin nya chapter sama episode kalau mau nyembunyiin episode nya gimana min nyembunyiin 2 label

ternyata bagian css ini yang ngubah kalau orang lain ngubah warna nama dibagian ini misal sudah diwarna nama postingan nya kalau masih utuh hitam gak perlu dihapus
hapus bagian ini:color:inherit

Cari widget blog1
Geser ke bawah sedikit, di bawah <b:if cond='data:view.isHomepage'> ada code, kalaupun tidak ada, pokoknya yg mirip<b:with value='data:posts filter (p =&gt; p.labels none (l =&gt; l.name == &quot;Chapter&quot;))' var='posts'>Ganti dengan <b:with value='data:posts filter (p =&gt; p.labels none (l =&gt; l.name in [&quot;Chapter&quot;,&quot;Episode&quot;]))' var='posts'>

mantap bro ini yang di cari cari
semangan sehat selalu
dan selalu berbagi ilmu

bang bikin tema film atau anime stream dengan desain seperti ini
https://project-tema.blogspot.com/

Udah gk sempat, proyekku masih banyak yg belum kelar.

min bisa gak buat dropdown untuk menu ini

Bisa , tapi belum sempat.
Apa ada situs yg temanya sama dengan sakuranovel tapi ada dropdownnya?

belum ada

https://waifuplay.me/ ini temanya sama kayak sakuranovel tapi ini versi streamingnya

Gk ada dropdownnya.
Thanks anyway

ada min yang di anime list dropdown nya tapi ada masalah nya kalau dianime list jangan diklik diarah kan aja ke anime list kalau diklik nanti masuk ke animelist nya tapi kalau tidak diklik nanti muncul genre list sama season list

min bisa gak kalau di zeistmanga yang R2 ditata letak yang diatas main dulu yang feed dibawahnya bisa gak min

Bisa, cut code berikut sampai penutup<b:section class='grid gg-15' cond='data:view.isHomepage' id='feed' showaddelement='true'>
.
.
.
</b:section>Cari code <section class='bc-fff r2 oh s1 mb-15'>Paste di atas<b:if cond='data:view.isHomepage'>

min dizeistmanga kalau di postingan terbaru mau diganti nama Anime gimana min

Cari:<div class='flex aic jcsb bb-1pxsf y9x19p yb10m'>Ganti:<data:messages.latestPosts/>

Izin untuk menggunakan ini ya kk Wernayasa

Silahkan,
gw bikin ini supaya memudahkan dev membuat tema.
Gk perlu cpek2 bikin navbar.
Tinggal modif doang sesuai keperluan.

Forum Bot said:

This comment has been removed by the author.

Forum Bot said:

This comment has been removed by the author.

Forum Bot said:

This comment has been removed by the author.

Min saya tambahin tombol dark mode kok error

Sudah ku update install sekali lagi:- penambahkan darkmode button
- dropdown menuCek demo disini

jadi bagus min menu nya

min kalau mau dibuat dua gimana min dropdown nya

copy code sampai penutp:<li class='menu-item menu-item-type-custom menu-item-object-custom current_page_item menu-item-home menu-item-30' id='menu-item-30'>
.
.
.
</li>Paste dibawah </li>
Editfor='dropdown' menjadi for='dropdown2'
id='dropdown' menjadi id='dropdown2'Selanjutnya ganti CSS:#dropdown:checked ~ .sub-menu
menjadi
#dropdown:checked ~ .sub-menu,#dropdown2:checked ~ .sub-menuSimpan

min kalau mau nambahin bookmark nya gimana min

Copy sampai penutupclass=<span class='buka-tutup'>paste di atas <label class='themeswitch'>

Ralat:
Copy code ini sampai penutup<span class='buka-tutup'>

Kenapa gak di clone aja sekaligus templatenya

Tema dasar / tema acuan belum jadi.
Rencananya mau jadiin template premium All in One, join proyek sama KumaTheme.
Aku nya yang belum sempat.

min, kalo buat header dan menu yang ada gambar kaya kusonime bisa gak?

Udah gk sempat,
walau terlihat simple, sebenarnya susah juga bikinnya.