Cara Membuat Menu Navigasi Profil Seperti Igniel di VioMagz
Menu Navigasi memang sangat penting untuk blog agar pengunjung bisa menjelajahi isi blog kita dengan mudah. Seperti yang kita tahu di template VioMagz bahwa menu Navigasi ini ada yang berada pada bagian header dan juga footer. Pada bagian header biasanya digunakan untuk menyematkan kategori artikel sedangkan bagian footer digunakan untuk menyematkan halaman seperti About, Contact, Disclaimer, dan juga Sitemap.
Halaman-halaman tadi benar-benar sangat penting untuk disematkan atau ditaruh di menu navigasi agar kita bisa memenuhi persyaratan untuk mendaftar adsense. Tapi bukan hanya untuk itu saja, Halaman-halaman tadi penting juga agar pengunjung bisa melihat ketentuan yang ada pada blog tersebut.
Oke paham bukan? cuma memasang halaman-halaman ini pada menu navigasi footer juga memiliki kelemahan karena pengunjung jarang sekali mau mengecek apa yang ada pada footer blog kita. Jadi, solusinya kita bisa memasang halaman-halaman ini pada header blog dengan Cara Membuat Menu Navigasi Profil Seperti Igniel di VioMagz.
Selain berada di header, tampilannya juga cukup menarik dengan disertainya nama dan foto profil kalian. Tertarik? mari kita langsung ke langkah-langkahnya.
1. Pergi ke Blogger > Tema > Edit HTML.
2. Letakkan kode di bawah ini tepat di atas kode ]]></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:#4285F4;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:#4285F4;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/AVvXsEgSMPt1StX0_pnyxG6kXDUEyMsStNOOQKFCyqoGCQm-1vwMaoI5tnY0G8G8iclKm1W_VHGnj18zgFVBPpRztcQtQY9cGszTrT3yNenSBr42YLwUkkUAFGIH6JLbF-Pf8NoglKe7Q0fr1BMg/s1600/20191227_110101.jpg);background-size:cover}Silahkan ganti dengan link foto kalian pada block yang saya tandai
3. Selanjutnya kalian cari kode </header> dan letakkan kode ini tepat di atasnya.
<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='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' viewBox='0 0 24 24'><path 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><meta content='https://www.faishalkc.eu.org/' itemprop='url'/><meta content='Home' itemprop='name'/><li class='head'><div alt='Author' class='fotomu' id='ftprof' title='Faishal Hady'/><svg 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'/></svg><ul><li class='name'>Faishal Hady</li><li class='follow'><a href='https://www.blogger.com/follow.g?view=FOLLOW&blogID=5692190745384219169' rel='nofollow noopener' target='_blank' title='Follow'>FOLLOW</a></li></ul></li><li><a href='#' itemprop='url' title='About Me'><svg 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'/></svg><span itemprop='name'>About Me</span></a></li><li><a href='#' itemprop='url' title='Contact'><svg 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'/></svg><span itemprop='name'>Contact</span></a></li><li><a href='#' itemprop='url' title='Disclaimer'><svg 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'/></svg><span itemprop='name'>Disclaimer</span></a></li><li><a href='#' itemprop='url' title='Privacy Policy'><svg 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'/></svg><span itemprop='name'>Privacy Policy</span></a></li><li><a href='#' itemprop='url' title='Sitemap'><svg 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'/></svg><span itemprop='name'>Sitemap</span></a></li><li><a href='#' itemprop='url' title='partner'><svg viewBox='0 0 24 24'><path d='M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z'/></svg><span itemprop='name'>Partner</span></a></li></ul></nav></div>4. Kemudian kalian cari kode /* SEARCH FORM */ seperti ini.
/* SEARCH FORM */.search-icon {position: absolute;top: 11px;right: 0px;font-size: 19px;}ubah right: 0px; menjadi right: 50px; dan tambahkan kode z-index: 999; supaya tidak tertimpa logo header
5. Selanjutnya kalian cari kode /* MEDIA QUERY */ seperti ini.
/* MEDIA QUERY */@media only screen and (max-width:1080px){....search-icon {right: 30px;}}@media only screen and (max-width:800px){....search-icon {right: 20px;}}@media only screen and (max-width:640px){....search-icon {right: 15px;}}Pada Media Query 1080px, 800px, 640px ubah semuanya menjadi right: 50px;
6. Simpan templatenya dan kalian sudah berhasil memasangnya.
Penutup
Baiklah begitu saja tutorial tentang Cara Membuat Menu Navigasi Profil Seperti Igniel di VioMagz. Semoga bermanfaat buat semuanya dan jangan lupa untuk share ke teman-teman kalian. Jika ada hal yang ingin ditanyakan silakan berkomentar saja di bawah.