Cara Membuat Navigasi Profil Seperti Blog Igniel di template Viomagz

Adanya menu navigasi pada sebuah blog/website memiliki fungsi yang sangat penting supaya pengunjung dapat menjelajahi isi blog tersebut dengan mudah. Seperti yang kita ketahui bersama di template VioMagz bahwa menu navigasi ini berada di bagian header dan juga footer.

Untuk dibagian header biasanya untuk menyematkan label/kategori artikel sedangkan pada bagian footer biasanya untuk halaman seperti About me, Contact, Privacy Police, Disclamer dan juga Sitemap.

Navigasi Menu yang digunakan pada template Igniplex buatan mbak igniel pemilik igniel.com bisa juga diterapkan pada template yang anda gunakan. Cara ini saya buat khusus untuk pengguna template Viomagz buatan mas sugeng.

Baca juga : Pengertian Blogroll dan Cara Membuatnya

Tertarik untuk membuatnya ? Yuk simak langkah-langkahnya.

Langkah-langkah Membuat Navigasi Profil Keren Seperti Blog Igniel di Viomagz

Kalian perlu menghapus Navigasi footer pada template VioMagz.
Karena menu navigasi pada bagian footer sudah tersedia pada template Viomagz, maka anda harus menghapusnya terlebih dahulu.

Pada dashbord blogger anda klik Tema > Edit HTML cari dan hapus kode dibawah 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 -->

Selanjutnya cari dan hapus kode css berikut

 /* FOOTER NAV MENU */
#footer-navmenu {
 background: $(navmenufooter.bg);
 padding: 15px 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);
}

Pasang kode navigasi template igniplex
Letakan kode dibawah ini tepat diatas kode
div class='clear'/>.

<!-- NavHeader by rutami-88.blogspot.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 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' fill='#fff'/>
    </svg>
    <svg class='close' style='width: 24px;height: 24px;transition: all .3s ease;' 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' fill='#fff'/>
    </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/AVvXsEjyDP8Y9wsgGdV_-Lbk5LLhDWK5HRZuS1jlvyTzmp9ZBb8d97uCAh2nEx1DetpNUij8lEht7LpYbujoPlwCokcb4EBWKzhdsgkVxpSLIKKxMnm_vvpQNMVzzChOw3NKyzdr5r2WBvyCZ3t1/s1600/48358542_2295172777183143_5383991124740276224_o.jpg' 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=2746679567154790375' rel='nofollow noopener' target='_blank' title='Follow'>FOLLOW</a></li>
        </ul>
      </li>
      <li>
      <a href='#' 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='#' 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='#' 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='#' 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='#' 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/xxxxxxxxxxx' 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://www.blogger.com/profil/blogID=xxxxxxxxxxx' 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/xxxxxxxxxx' 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 yang saya beri tanda warna kuning silahkan sesuaikan sendiri. Sedangkan yang saya beri tanda warna merah silahkan anda sesuaikan dengan nama dan url Photo profil yang ingin dipasang

Selanjutnya letakan kode css berikut ini tepat diatas *SEARCH FROM*

/*--- rutami-88 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 css berikut

/* SEARCH FORM */
.search-icon {
   position: absolute;
   top: 11px;
   right: 0px;
   font-size: 19px;
} 

Dan ganti dengan kode css dibawah ini

/* SEARCH FORM */
.search-icon {
   position: absolute;
   top: 12px;
   right: 50px;
   font-size: 19px;
   z-index: 99;
}

Terakhir silahkan cari dan hapus kode css berikut ini

.search-icon {
   right: 30px;
}

.search-icon {
   right: 20px;
}

.search-icon {
   right: 15px;
}

Nah sekarang pekerjaan Edit HTML sudah selesai, simpan perubahan tema dengan mengklik tombol Simpan Tema. Dan silahkan anda cek apakah sudah sesuai dengan demo berikut ini, untuk melihat demo nya silahkan klik link dibawah ini.

DEMO

Bagaimana menurut anda apakah toturial ini bermanfaat? Saya rasa cukup begitu saja Cara Membuat Navigasi Profil Seperti Blog Igniel di template Viomagz, Budayakan berkomentar setelah membaca. Terimakasih

Baca juga artikel lainnya

Share this post