Cara Memasang Tiga Menu Header di Template Viomagz
Salah satu hal yang sering saya sebut ketika membuat artikel tentang template viomagz adalah kelebihan templatenya yang fleksibel sehingga mudah untuk dimodifikasi.
Salah satu modifikasi yang berhasil saya lakukan pada template viomagz adalah menambah jumlah menu pada bagian kanan header template ini sejumlah dua buah. Karena pada awalnya template viomagz ini hanya memiliki satu menu saja dibagian header sebelah kanan, yaitu menu search.
Pada artikel kali ini, saya akan memberikan tutorial cara memasang tiga menu header yang berhasil saya terapkan pada blog ini, yaitu menu dark mode, dan menu pembelian subscriber.
Berikut ini adalah langkah-langkahnya.
Cara Memasang Tiga Menu Header di Viomagz
- Buka Dashboard Blogger
- Pilih Menu Teman
- Pilih Edit HTML
Cari dan letakan kode CSS Dark Mode dibawah ini sebelum kode ]]></b:skin>
/* Button Dark Mode */
.modedark{display:inline-block;float:right;margin-top:3px;position:absolute;right:40px;top:0;z-index:999}
.modedark svg{width:24px;height:24px;vertical-align:-5px;background-repeat:no-repeat!important;content:''}
.modedark svg path{fill:#fff}
.modedark .check:checked ~ .NavMenu{opacity:1;visibility:visible;top:80px;min-width:200px;transition:all .3s ease;z-index:2}
.iconmode{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear}
.iconmode:hover{border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%}
.check{display:none}
.modedark .iconmode .openmode{display:block}
.modedark .iconmode .closemode{display:none}
.modedark .check:checked ~ .iconmode .openmode{display:none}
.modedark .check:checked ~ .iconmode .closemode{display:block}
/* Warna Dark Mode */
/* Warna Night Mode */
.Night #wrapper{background:#292e38}
.Night #HTML3{background:#1d2129}
.Night #header-container{background:#1d2129}
.Night #footer-widget-container{background:#1d2129}
.Night .share-this-pleaseeeee{background:#292e38}
.Night .related-post h4{background:#292e38}
.Night #label-info-th{background:#1d2129}
.Night body{background:#1d2129}
.Night .post-body{color:#cccccc}
.Night #baca-juga h2{color:#cccccc;background:#1d2129}
.Night .label-info-th a{color:#cccccc;background:#3d4658}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan{color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content{color:#cccccc;background:#1d2129}
.Night .post-info{color:#cccccc}
.Night{background:#1d2129}
.Night h2.post-title a{color:#9e9e9e}
.Night h2.post-title a:hover{color:#f17f43}
.Night .post-title{color:#fff}
.Night ul.nav-social{color:#1d2129}
.Night .post-snippet{color:#cccccc}
.Night #ignielNewsletter{background:#292e38}
.Night #Label1{background:#292e38}
.Night .post{background:#292e38;border-bottom-color:#252a33}
.Night .PopularPosts ul li a:hover{color:#f17f43!important}
.Night .PopularPosts1 h2{background:#343944}
.Night .PopularPosts ul li a{color:#9e9e9e!important}
.Night .PopularPosts ul li:nth-child(1){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(2){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(3){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(4){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(5){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(6){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(7){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(8){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(9){background-color:#292e38}
.Night .PopularPosts ul li:nth-child(10){background-color:#292e38}
.Night .PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
.Night .latest-post-title h2{background:#292e38;border-bottom-color:#313640}
.Night .newspaptext{color:#9e9e9e}
.Night .list-label-widget-content ul li{border-bottom-color:#313640}
.Night .img-thumbnail img{background:#252931 linear-gradient(to right,rgba(255,255,255,0) 5%,rgb(49,54,64) 20%,rgba(255,255,255,0) 30%);background-size:800px 104px}
.Night #ignielNewsletter .medsos__{border-top-color:#313640}
.Night #footer-container{background:#12161f}
.Night #footer-navmenu{background:#171b25}
.Night .sidebar h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .sidebar-sticky h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .latest-post-title h2{color:#b7b7b7;border-bottom-color:#313640}
.Night .above-post-widget h2{color:#b7b7b7;border-bottom-color:#313640}
.Night #back-to-top{background:#454952}
.Night .comments h3{color:#b7b7b7;border-bottom-color:#313640}
.Night .breadcrumbs{color:#b7b7b7;border-bottom-color:#313640}
.Night .btnsocialshare{background:#383c44}
.Night .label-line::before{background:#1d2129}
.Night .label-line-c::before{background:#333740}
.Night a.showcontent:hover{background:#373a42}
.Night a.showcontent{background:#292e38}
.Night #ignielNewsletter input{background:#272b33;border-color:#2b303a}
.Night .comments .comments-content .comment-content{color:#ffffff}
.Night div#Label1 h2{border-bottom:1px solid #272b33;background:#343944}
.Night .related-post-style-3 .related-post-item-title{color:#bbb}
.Night #baca-juga ul{border:2px solid #333740}
.Night #baca-juga h2{border:2px solid #292e38}
.Night #comments a.hiddencontent{background:#424854}
.Night .comments .comments-content .comment-thread ol{background:#292e38}
.Night .comments .comments-content .inline-thread{background:#292e38}
Kode yang saya tandai dengan warna kuning adalah poin pengaturan posisi jarak icon menu dark mode dengan sisi header template viomagz, baik dalam versi desktp ataupun versi mobile.
Untuk menyeseuaikan dengan template viomagz yang anda gunakan, maka silahkan edit kembali kode yang ditandai warna kuning tersebut.
Selanjutnya silahkan cari kode dibawah ini!
<div class='clear'/>
Setelah ditemukan, simpan kode dibawah ini setelah kode diatas.
<div class='modedark' title='Mode Malam'>
<input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<svg class='openmode' viewBox='0 0 24 24'>
<path d='M12,18C11.11,18 10.26,17.8 9.5,17.45C11.56,16.5 13,14.42 13,12C13,9.58 11.56,7.5 9.5,6.55C10.26,6.2 11.11,6 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31L23.31,12L20,8.69Z'/>
</svg>
<svg class='closemode' viewBox='0 0 24 24'>
<path d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5z'/>
</svg>
</label>
</div>
Selanjutnya adalah memasang script untuk mengaktifkan menu dark modenya dengan cara menyimpan kode dibawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
/* Dark Mode */
$(document).ready(function(){$("body").toggleClass(localStorage.toggled),$("#modedark").on("click",function(){"Night"!=localStorage.toggled?($("body").toggleClass("Night",!0),localStorage.toggled="Night",$(".section-center").css("display","block")):($("body").toggleClass("Night",!1),localStorage.toggled="",$(".section-center").css("display",""))}),$("body").hasClass("Night")?$("#modedark").prop("checked",!0):$("#modedark").prop("checked",!1)});
//]]>
</script>
Klik simpan dan lihat hasilnya.
Sebenarnya saya sudah pernah membuat artikel tentang cara membuat dark mode ini. Oleh karena itu apabila anda ingin melihat tutorial secara khusus silahkan klik artikelnya dibawah ini.
Baca: Cara Memasang Fitur Dark Mode di Viomagz
Setelah selesai melakukan pemasangan menu dark mode, selanjutnya kita akan membuat menu beli subscriber seperti pada blog ini. Namun perlu anda ketahui bahwa sebenarnya menu beli subscriber ini adalah menu yang saya modifikasi dari menu profile di template ignilplex.
Berikut ini adalah langkah-langkah yang harus dilakukan dalam pemasang menu profil di template viomagz.
Langkah pertama:
- Buka Dashboard Blogger
- Pilih Menu Tema/Template
- Pilih Edit HTML
Cari dan letakan kode CSS dibawah ini sebelum ]]></b:skin>
/* Navigasi Profil Igniplex */
.igniplexNavigation{display:inline-block;float:right;margin-top:3px;position:absolute;right:0;top:0}.igniplexNavigation svg{width:24px;height:24px}.igniplexNavigation svg path{fill:#fff}.igniplexNavigation .check:checked~.NavMenu{opacity:1;visibility:visible;top:56px;min-width:200px;transition:all .3s ease;z-index:2}.igniplexNavigation .icon:hover{color:#009688;animation:rubberBand 1s}.igniplexNavigation .icon .open{display:block}.igniplexNavigation .icon .close{display:none}.igniplexNavigation .check:checked ~ .icon .open{display:none}.igniplexNavigation .check:checked ~ .icon .close{display:block}.igniplexNavigation .NavMenu{opacity:0;visibility:hidden;position:absolute;right:0px;top:0px;background-color:#fff;color:#3c4043;box-shadow:0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.4);transition:all .3s ease}.igniplexNavigation .NavMenu:before, .igniplexNavigation .NavMenu:after{content:'';top:-8px;right:11px;border-color:transparent;border-bottom-color:#e6e6e6;border-style:dashed dashed solid;border-width:0 8.5px 8.5px;position:absolute;z-index:1;height:0;width:0}.igniplexNavigation .NavMenu:before{border-bottom-color:rgba(0,0,0,.25)}.igniplexNavigation .NavMenu #ftprof{max-width:50px;max-height:50px;border-radius:100px;border:1px solid #fff;margin:0px;height:50px;width:50px}.igniplexNavigation .NavMenu ul{margin:0px;padding:0px;margin-top:-8px;}.igniplexNavigation .NavMenu ul li{list-style-type:none;transition:all .3s ease;margin:0px;}.igniplexNavigation .NavMenu ul li:hover{background:#e6e6e6}.igniplexNavigation .NavMenu ul li a{color:#3c4043;display:block;padding:10px 16px}.igniplexNavigation .NavMenu ul li svg{width:22px;height:22px;vertical-align:-7px;margin-right:10px}.igniplexNavigation .NavMenu ul li svg path{fill:#3c4043}.igniplexNavigation .NavMenu ul li.head{background-color:#e6e6e6;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;padding:10px 16px;border-bottom:1px solid #fff}.igniplexNavigation .NavMenu ul li.head svg{width:16px;height:16px;position:relative;left:-7px;margin-right:0px}.igniplexNavigation .NavMenu ul li.head svg path{fill:#147e6e;stroke:#fff;stroke-width:3px;paint-order:stroke}.igniplexNavigation .NavMenu ul li.head ul{line-height:24px;margin-left:3px}.igniplexNavigation .NavMenu ul li.head ul li{padding:0px;font-size:17px;line-height:normal;white-space:nowrap}.igniplexNavigation .NavMenu ul li.head ul li.name{font-weight:700;font-size:17px;margin-bottom:5px}.igniplexNavigation .NavMenu ul li.head ul li.follow a{background-color:#147e6e;color:#fff;font-size:10px;padding:3px 7px;border-radius:25px;display:inline-block}.igniplexNavigation .NavMenu ul li.head ul li.follow a:hover{background-color:#ff9800}.igniplexNavigation .NavMenu ul li.head ul li.follow a:before{content:'';display:inline-block;width:15px;height:15px;margin-right:3px;margin-left:-3px;vertical-align:-4px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat}.igniplexNavigation .NavMenu ul li.social{background-color:#e6e6e6;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;justify-content:space-between;padding:0px 15px;border-top:1px solid #fff}.igniplexNavigation .NavMenu ul li.social button{margin:0px;font-size:unset}.igniplexNavigation .NavMenu ul li.social a{padding:15px 7px;z-index:1;position:relative}.igniplexNavigation .NavMenu ul li.social a:hover:before{content:'';position:absolute;z-index:-1;margin:auto;background:rgba(0,0,0,.1);border-radius:100px;width:36px;height:36px;top:0px;bottom:0px;left:0px;right:0px;transition:opacity .3s linear}.igniplexNavigation .NavMenu ul li.social svg{margin:0px;width:22px;height:22px}.igniplexNavigation .NavMenu ul li.social .facebook svg{fill:#3a579a}.igniplexNavigation .NavMenu ul li.social .twitter svg{fill:#00abf0}.igniplexNavigation .NavMenu ul li.social .instagram svg path{fill:#9c27b0}.igniplexNavigation .NavMenu ul li.social .pinterest svg path{fill:#e73e36}.igniplexNavigation .NavMenu ul li.social .ytube svg path{fill:#f00}.igniplexNavigation .NavMenu ul li.social a:hover svg, .igniplexNavigation .NavMenu ul li.social a:hover svg path{fill:#333}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}.check{display:none}#header-wrapper label{cursor:pointer;display:block;padding:8px;background-position:center;transition:all .5s linear}#header-wrapper label:hover{border-radius:100px;background:rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%}#header-wrapper label:active, #header-wrapper label:active{border-radius:100px;background-color:rgba(0,0,0,.1);background-size:100%;transition:background 0s}
.fotomu{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhicSntDWB-PBxEkq1GtgSeOhURHzxXnxneXMxy81ag2F96Vdv2mZONjCB7g9aw0Zy9d1Z9rTZfhOdlqukbKQhk6BxIrBymKLquE8QX4_7QAsMAE_-RWAWg5plZ0MgHGtCkw8AAeaKQ2RpunOV0HqwWUIKq2rLIPOqmhAkguQ2cyfT-tqDu3ERZTg/s1600/toko%20max%20ikhsan.png);background-size:cover}
Selanjutnya simpan kode dibawah ini setelah kode javascript mode malam.
<!--profil ignilplex-->
<div class='igniplexNavigation'><input class='check' id='igniplexNavigation' type='checkbox'/>
<label class='icon' for='igniplexNavigation'>
<svg class='open' viewBox='0 0 24 24'><path d='M23.495 6.205c-0.29-1.015-1.073-1.798-2.067-2.083l-0.021-0.005c-1.87-0.501-9.396-0.501-9.396-0.501s-7.507-0.010-9.396 0.501c-1.015 0.29-1.798 1.073-2.083 2.067l-0.005 0.021c-0.332 1.71-0.522 3.677-0.522 5.689 0 0.041 0 0.082 0 0.122l-0-0.006c-0 0.028-0 0.061-0 0.095 0 2.011 0.19 3.978 0.553 5.884l-0.031-0.195c0.29 1.015 1.073 1.798 2.067 2.083l0.021 0.005c1.868 0.502 9.396 0.502 9.396 0.502s7.506 0 9.396-0.502c1.015-0.29 1.798-1.073 2.083-2.067l0.005-0.021c0.319-1.675 0.501-3.602 0.501-5.571 0-0.074-0-0.149-0.001-0.223l0 0.011c0.001-0.069 0.001-0.151 0.001-0.233 0-1.97-0.182-3.897-0.531-5.766l0.030 0.193zM9.609 15.601v-7.193l6.264 3.602z' fill='#ffffff' style='fill: var(--color1, #ffffff)'/></svg>
<svg class='close' viewBox='0 0 24 24'><path d='M23.495 6.205c-0.29-1.015-1.073-1.798-2.067-2.083l-0.021-0.005c-1.87-0.501-9.396-0.501-9.396-0.501s-7.507-0.010-9.396 0.501c-1.015 0.29-1.798 1.073-2.083 2.067l-0.005 0.021c-0.332 1.71-0.522 3.677-0.522 5.689 0 0.041 0 0.082 0 0.122l-0-0.006c-0 0.028-0 0.061-0 0.095 0 2.011 0.19 3.978 0.553 5.884l-0.031-0.195c0.29 1.015 1.073 1.798 2.067 2.083l0.021 0.005c1.868 0.502 9.396 0.502 9.396 0.502s7.506 0 9.396-0.502c1.015-0.29 1.798-1.073 2.083-2.067l0.005-0.021c0.319-1.675 0.501-3.602 0.501-5.571 0-0.074-0-0.149-0.001-0.223l0 0.011c0.001-0.069 0.001-0.151 0.001-0.233 0-1.97-0.182-3.897-0.531-5.766l0.030 0.193zM9.609 15.601v-7.193l6.264 3.602z' fill='#ffffff' style='fill: var(--color1, #ffffff)'/></svg>
</label>
<nav class='NavMenu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<meta content='https://www.maxikhsan.my.id/' itemprop='url'/><meta content='Home' itemprop='name'/>
<li class='head'>
<div alt='Author' class='fotomu' id='ftprof' title=''/>
<ul>
<li class='name'><b>Subscriber Murah Permanen! </b></li>
<li class='follow'><a href='https://www.maxikhsan.my.id/p/beli-subscribe-youtube-murah-berkualitas.html' rel='nofollow noopener' target='_blank'>Checkout</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Klik simpan dan lihat hasilnya.
Selanjutnya agar tiga menu yang dipasang di header template viomagz tidak tabrakan. Maka anda wajib mengganti kode CSS dan kode search box bawaannya.
Berikut ini langkahnya!
Pertama buka dashboard blogger, lalu pilih menu tema, kemudian pilih edit HTML.
Cari dan letakan kode dibawah ini sebelum ]]></b:skin>
/* Igniplex Search Box kuberi.com */ .teknsearch .search .input { z-index: 10; } .check{display:none} .teknsearch{ position:absolute; right:0px; top:-2px; bottom:0px; } .teknsearch svg{ width:24px; height:27px; } .teknsearch svg path{ fill:#fff; /* Warna icon search */ } .teknsearch .search .input { background-color:#fff; color:#4b4f56; padding:0px; width:0px; height:30px; border-radius:25px; vertical-align:bottom; top:-10px; right:35px; position:relative; transition:all .3s ease; outline: none; border:none; z-index: 90; } .teknsearch .search .icon{ position:absolute; top:7px; right:75px; border-radius:25px; padding: 4px; transition:all .5s ease; cursor: pointer; z-index: 100; } .teknsearch .search .icon .open{ display:block; } .teknsearch .search .icon .close{ display:none; } .teknsearch .search .check:checked ~ .input, .teknsearch .search .input:focus{ padding:0px 22px 0px 20px; width:calc(440px - 125px); } .teknsearch .search .check:checked ~ .icon .open{ display:none; } .teknsearch .search .check:checked ~ .icon .close{ display:block; position:relative; right:2px; } .teknsearch .search .check:checked ~ label:hover{ background-color:transparent !important; } .teknsearch .search .check:checked ~ .icon > svg path{ fill:#ccc; /* Warna icon close */ } @media screen and (max-width: 600px) { .teknsearch .search .check:checked ~ .input, .teknsearch .search .input:focus { width: calc(100vw - 115px)!important; z-index: 2;}}
Selanjutnya cari kode kurang lebih seperti dibawah ini dibawah ini!
<div class='search-icon'>
<a href='#searchfs' title='Cari'><i class='fa fa-search'></i></a>
</div>
<div id='searchfs'>
<button class='close' type='button'>×</button>
<form action='/search' id='search-form' method='get'>
<label><span>Cari</span><input name='q' placeholder='Cari disini' type='search' value=''/></label>
<label><span>Cari</span><input name='max-results' type='hidden' value='8'/></label>
</form>
</div>
Setelah ditemukan, ganti kode tersebut dengan kode dibawah ini.
<div class='teknsearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='teknsearch' type='checkbox'/>
<input class='input' name='q' placeholder='Cari artikel...' type='text'/>
<label class='icon' for='teknsearch'>
<svg class='open' viewBox='0 0 24 24'><path d='M19.38 17.019l-4.737-4.029c-0.49-0.441-1.013-0.643-1.437-0.624 1.118-1.31 1.794-3.009 1.794-4.867 0-4.142-3.358-7.5-7.5-7.5s-7.5 3.358-7.5 7.5 3.358 7.5 7.5 7.5c1.857 0 3.557-0.676 4.867-1.794-0.020 0.423 0.183 0.947 0.624 1.437l4.029 4.737c0.69 0.767 1.817 0.831 2.504 0.144s0.623-1.814-0.144-2.504zM7.5 12.5c-2.761 0-5-2.239-5-5s2.239-5 5-5 5 2.239 5 5-2.239 5-5 5z'/></svg>
<svg class='close' viewBox='0 0 24 24'><path d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/></svg>
</label>
</form>
</div>
Klik simpan dan lihat hasilnya.
Sebenarnya saya juga sudah membuat tutorial cara mengganti search box di template viomagz. Oleh karena itu bila anda ingin melihat tutorilanya secara khusus maka silahkan baca artikel nya dibawah ini.
Baca: Cara Mengganti Search Box di template Viomagz
CSS search box yang saya bagikan disini sudah disetting agar posisinya paling kiri atau sebelum tombol dark mode dan profile. Apabila anda ingin merubahnya silahkan edit pada bagian yang saya tandai dengan warna hijau.
Catatan:
Tutorial ini saya buat berdasarkan hasil implementasi tiga menu ada pada blog ini. Oleh karena itu mungkin saat anda memasangnya pada template viomagz di blog anda, bisa saja tampilannya sedikit berbeda.
Namun anda tidak perlu khawatir karena dalam artikel ini saya sudah lengkapi dengan cara menggeser tombol dari setiap menu agar tidak tumpang tindih.
Nah itulah tutorial blogger cara memasang tiga menu pada header viomagz.
Semoga bermanfaat.
Posting Komentar