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 {"REPLACE", "BEFORE_DESCRIPTION"}' name='image'/>
<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}' 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 == "BEHIND"' 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: ".header-widget" }' 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 : ""' 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='"tabs"' 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 ▼</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.