Cara Membuat Menu Navigasi Blog Keren Viomagz Rasa Igniplex
Cara Membuat Menu Navigasi Blog Keren Viomagz Rasa Igniplex
Navigasi Menu yang digunakan pada template Igniplex buatan igniel bisa juga diterapkan pada template yang anda gunakan. Cara ini saya buat terkhusus untuk pengguna template Viomagz.
Menu Navigasi pada template Viomagz sendiri sebenarnya sudah tersedia di bagian footer blog. Jika ingin membuat menu navigasi ala template igniplex pada template viomagz berarti menu navigasi pada footer harus di hapus biar tidak terjadi bentrok.
Penerapan tutorial ini tidak serta merta hanya untuk template viomagz saja, melainkan bisa untuk semua jenis template baik AMP maupun Non-AMP. Contoh yang saya berikan kali ini untuk Non-AMP.
Cara Membuat Menu Navigasi Ala Igniplex
Berikut ini langkah-langkah yang harus anda lakukan untuk memindahkan menu navigasi dari footer ke header pada Template Viomagz.
1. Hapus Navigasi Footer Bawaan Template Viomagz
karena pada template Viomagz sudah tersedia menu navigasi pada footer, maka anda harus menghapusnya terlebih dahulu.
Silahkan masuk ke Dashboard Blog » Edit HTML. Di dalam mode Edit HTML ini, cari dan hapus code berikut ini.
<!-- footer nav menu -->
<div id='footer-navmenu'>
<nav id='footer-navmenu-container'>
<!-- menu navigasi footer start -->
<ul>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<!-- menu navigasi footer end -->
</nav>
</div>
<!-- footer nav menu end -->Selanjutnya cari dan hapus CSS Code berikut ini.
/* FOOTER NAV MENU */
#footer-navmenu {
background: $(navmenufooter.bg);
padding: 25px 0px;
font: $(navmenufooter.font);
color: $(navmenufooter.color);
}
#footer-navmenu-container {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
#footer-navmenu ul {
list-style: none;
margin: 0;
}
#footer-navmenu ul li {
display: inline-block;
margin: 6px 0;
}
#footer-navmenu ul li::after {
content:"/";
}
#footer-navmenu ul li:last-child::after {
content:"";
}
#footer-navmenu ul li a {
color: $(navmenufooter.color);
margin: 0 15px;
}
#footer-navmenu ul li a:hover {
color: $(navmenufooter.hover.color);
border-bottom: 2px solid $(navmenufooter.hover.color);
}Sebenarnya masih ada kode #footer-navmenu lain yang harusnya di hapus agar bersih dengan tuntas. Tapi karena kode tersebut tersebar kemana-mana jadinya tidak jadi masalah juga kalau tidak di hapus tuntas.
Bagi yang mengerti sedikit tentang koding, sebaiknya hapus semua kode navigasi bawaan Template Viomagz.
2. Pasang Code Navigasi Template Igniplex
Masih pada menu Edit HTML. Cari kode </header>. Tepat di atas kode </header> terdapat kode <div class='clear'/>. Nah simpan kode berikut ini tepat di atas kode tersebut.
<!-- NavHeader by idnxmus.com -->
<div class='idnxmusNavigation'>
<input class='check' id='idnxmusNavigation' type='checkbox'/>
<label class='icon' for='idnxmusNavigation'>
<svg class='open' style='width: 24px;height: 24px;transition: all .3s ease;' viewBox='0 0 24 24'>
<path fill='#fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z'/>
</svg>
<svg class='close' style='width: 24px;height: 24px;transition: all .3s ease;' viewBox='0 0 24 24'>
<path fill='#fff' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/>
</svg>
</label>
<nav class='NavMenu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<li class='xprofil'>
<img alt='Author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgx4SSfofAj7pMGzQwQ3QzoLloTQ33Z_Lmqpceh6W8Zayg2f-g1bhktR0Q2fg1f03XXXBYureq0akSMrL7OszCKx53WwE3DG7trQYry3AxbYGjm9UJYs7rpsQFEZaB8Qb_d6DoDxEIUJOh/s75/idnxmus-partner.png' title='Author'/>
<svg style='width: 16px;height: 16px;position: relative;left: -7px;margin-right: 0px;' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z' fill=' #4285F4' paint-order='stroke' stroke='#fff' stroke-width='3px'/></svg>
<ul>
<li class='name'>Your Name</li>
<li class='follow'><a href='https://www.blogger.com/follow-blog.g?blogID=7798524383418195483' rel='nofollow noopener' target='_blank' title='Follow'>FOLLOW</a></li>
</ul>
</li>
<li>
<a href='/p/about.html' itemprop='url' title='About Me'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z' fill='#3c4043'/></svg>
<span itemprop='name'>About Me</span></a>
</li>
<li>
<a href='/p/contact.html' itemprop='url' title='Contact'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z' fill='#3c4043'/></svg>
<span itemprop='name'>Contact</span></a>
</li>
<li>
<a href='/p/disclaimer.html' itemprop='url' title='Disclaimer'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z' fill='#3c4043'/></svg>
<span itemprop='name'>Disclaimer</span></a>
</li>
<li>
<a href='/p/privacy-policy.html' itemprop='url' title='Privacy Policy'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z' fill='#3c4043'/></svg>
<span itemprop='name'>Privacy Policy</span></a>
</li>
<li>
<a href='/p/sitemap.html' itemprop='url' title='Sitemap'>
<svg style='width: 22px;height: 22px;vertical-align: -5px;margin-right: 10px;transition: all .3s ease;' viewBox='0 0 24 24'><path d='M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z' fill='#3c4043'/></svg>
<span itemprop='name'>Sitemap</span></a>
</li>
<li class='social'>
<a href='https://www.facebook.com/fb_username' rel='nofollow noopener' target='_blank' title='Facebook'><svg style='width: 12px;height: 12px;background: #3a579a;border-radius: 4px;padding: 5px;vertical-align: -9px;' viewBox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z' fill='#ffffff'/></svg></a>
<a href='https://twitter.com/twit_username' rel='nofollow noopener' target='_blank' title='Twitter'><svg style='width: 12px;height: 12px;background: #00abf0;border-radius: 4px;padding: 5px;vertical-align: -9px;' viewBox='0 0 24 24'><path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='#ffffff'/></svg></a>
<a href='https://www.instagram.com/insta_username' rel='nofollow noopener' target='_blank' title='Instagram'><svg style='width: 12px;height: 12px;background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);border-radius: 4px;padding: 5px;vertical-align: -9px;' viewBox='0 0 24 24'><path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z' fill='#ffffff'/></svg></a>
<a href='https://www.blogger.com/profil/blogger_id' rel='nofollow noopener' target='_blank' title='Blogger'><svg style='width: 12px;height: 12px;background: #ff5722;border-radius: 4px;padding: 5px;vertical-align: -9px;' viewBox='0 0 24 24'><path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z' fill='#ffffff'/></svg></a>
<a href='https://www.youtube.com/c/yutub_id' rel='nofollow noopener' target='_blank' title='Youtube'><svg style='width: 12px;height: 12px;background: #ff0000;border-radius: 4px;padding: 5px;vertical-align: -9px;' viewBox='0 0 24 24'><path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z' fill='#ffffff'/></svg></a>
</li>
</ul>
</nav>
</div>Perhatikan untuk link url seperti Author, Your Name, About Me dll . Silahkan sesuaikan dengan nama dan url anda.
Dan untuk kode fill='#fff' merupakan warna icon yang di klik untuk memunculkan navigasi. Jika header yang anda gunakan pada template adalah warna putih. Cukup ganti kode warna #fff dengan kode warna lain yang anda butuhkan.
Selanjutnya tempatkan kode CSS berikut ini tepat di atas tulisan /* SEARCH FORM */.
/*--- idnxmus navheader ---*/
.check {
display:none;
}
.idnxmusNavigation label {
cursor:pointer;
display:block;
padding:8px;
background-position:center;
transition:all .5s linear;
}
.idnxmusNavigation .check:checked ~ .NavMenu {
opacity:1;
visibility:visible;
top:45px;
min-width:200px;
transition:all .3s ease;
z-index:2;
}
.idnxmusNavigation .NavMenu {
opacity:0;
visibility:hidden;
position:absolute;
right:0;
top:0;
background-color:#fff;
color:#3c4043;
box-shadow:0 5px 8px 0 rgba(0,0,0,.06);
transition:all .3s ease;
}
.idnxmusNavigation .check:checked ~ .icon .open {
display:none;
}
.idnxmusNavigation .icon .open {
display:block;
}
.idnxmusNavigation {
position:absolute;
right:0;
top:3px;
}
.idnxmusNavigation .icon .close {
display:none;
}
.idnxmusNavigation .check:checked ~ .icon .close {
display:block;
}
.idnxmusNavigation .NavMenu ul {
margin:0;
padding:0;
}
.idnxmusNavigation .NavMenu:before,.idnxmusNavigation .NavMenu:after {
content:'';
top:-5px;
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;
}
.idnxmusNavigation .NavMenu:before {
border-bottom-color:rgba(0,0,0,.25);
}
.idnxmusNavigation .NavMenu ul li.xprofil {
background-color:#e6e6e6;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
margin:0;
align-items:center;
padding:10px 16px;
border-bottom:1px solid #fff;
}
.idnxmusNavigation .NavMenu ul li {
list-style-type:none;
transition:all .3s ease;
margin:0;
}
.idnxmusNavigation .NavMenu img {
max-width:50px;
max-height:50px;
border-radius:100px;
border:1px solid #fff;
margin:0;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul {
line-height:24px;
margin-left:3px;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.name {
font-weight:700;
font-size:17px;
margin-bottom:5px;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li {
padding:0;
font-size:17px;
line-height:normal;
white-space:nowrap;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a {
background-color:#4285F4;
color:#fff;
font-size:10px;
padding:3px 7px;
border-radius:25px;
display:inline-block;
}
.idnxmusNavigation .NavMenu ul li a {
color:#3c4043;
display:block;
padding:10px 16px;
margin:0;
}
.idnxmusNavigation .NavMenu ul li a span {
font-size:14px;
}
.idnxmusNavigation .NavMenu ul li.xprofil 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;
}
.idnxmusNavigation .NavMenu ul li:hover {
background:#e6e6e6;
}
.idnxmusNavigation .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:0 15px;
border-top:1px solid #fff;
}
.idnxmusNavigation .NavMenu ul li.social a {
padding:15px 7px;
z-index:1;
position:relative;
}
.idnxmusNavigation .NavMenu ul li.social button {
margin:0;
font-size:unset;
}
.idnxmusNavigation label:hover {
border-radius:100px;
background:rgba(0,0,0,.2) radial-gradient(circle,transparent 2%,rgba(0,0,0,.2) 2%) center/15000%;
}
.idnxmusNavigation label:active {
border-radius:100px;
background-color:rgba(0,0,0,.1);
background-size:100%;
transition:background 0s;
}
.idnxmusNavigation .NavMenu ul li.xprofil ul li.follow a:hover {
background-color:#ff9800;
}
.idnxmusNavigation .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:0;
bottom:0;
left:0;
right:0;
transition:opacity .3s linear;
}
@media only screen and (max-width:480px) {
.idnxmusNavigation .NavMenu ul li a, .idnxmusNavigation .NavMenu ul li.xprofil {
padding: 8px 13px;
}
}Selanjutnya, cari kode berikut ini.
/* SEARCH FORM */
.search-icon {
position: absolute;
top: 11px;
right: 0px;
font-size: 19px;
}Dan ganti dengan kode berikut ini.
/* SEARCH FORM */
.search-icon {
position: absolute;
top: 12px;
right: 50px;
font-size: 19px;
z-index: 99;
}Terakhir, cari dan hapus kode-kode berikut ini.
.search-icon {
right: 30px;
}
.search-icon {
right: 20px;
}
.search-icon {
right: 15px;
}Sekarang proses Edit HTML sudah rampung, selanjutnya simpan perubahan tema dengan mengklik tombol Simpan Tema. Coba cek perubahannya, apakah sudah sesuai dengan demo berikut ini? Anda bisa cek demonya pada tombol demo berikut ini.
Bagaimana menurut anda? apa tutorial cara membuat navigasi menu template viomagz bermanfaat. Jangan lupa share artikel ini jika dirasa bermanfaat, dan budayakan untuk berkomentar setelah membaca. Terimakasih.
Posting Komentar untuk "Cara Membuat Menu Navigasi Blog Keren Viomagz Rasa Igniplex"
Posting Komentar