Mark
#1

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.

#ads
#2

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

Balas
#5

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.

Balas
#6

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

Balas
#8

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'>

Balas
#19

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'>

Balas
#31

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

Balas

Forum rules
You can use English or Indonesian


image quote pre code
Share: