Cara Membuat Menu Navigasi Profil di Header Blog yang Keren dan Profesianal

Cara Membuat Menu Navigasi Profil di Header Blog

Cara membuat menu navigasi profil di header blog yang keren dan profesianal. Hallo sobat blogger dalam artikel kali ini Mas Tagul akan menjelaskan bagaimana cara memasang menu navigasi profil di blogger.

Sobat bisa lihat tampilanya di blog mastagul ini. Untuk membuatnya tidak terlalu sulit akan tetapi bisa membuat blog sobat tampil lebih keren.

Fungsi dari Menu Navigasi Profil

Sebenarnya menu nafigasi memiliki banyak fungsi. Di dalam menu navigasi biasnya terdapat komponen seperti About, Contact, Disclaimer, Privacy Policy, Sitemap.

komponen tersebut menjadi syarat yang penting jika sobat ingin mendaftarkan blog sobat ke google Dsense.

Jika komponen-komponen tersebut diatas tidak di pasang, sobat akan kesulitan untuk mendaftar blog milik sobat ke google adsense.

Jika sobat tertarik ingin memasang Menu Navigasi Profil di Header di blog sobat, sobat bisa ikuti langkah-langkah di bawah ini.

Cara Memasang Menu Navigasi Profil di Header

Langkah 1 : Masuk ke Tema dan Edite HTML

Silahkan sobat masuk ke Dashboard blogger, pilih Tema kemudian pilih Edite HTM.

Langkah 2 : Cari Kode CSS pada HTML Tema

Selanjutnya copy kode CSS di bawah ini, kemudain letakkan diatas kode ]]></b:skin> atau kode </style>.

 
<!-- Awal Menu Navigasi Profil mastagul.com -->
.mastagul{display:inline-block;float:right;margin-top:3px;position:absolute;right:0;top:0}.mastagul svg{width:24px;height:24px}.mastagul svg path{fill:#fff}.mastagul .check:checked~.NavMenu{opacity:1;visibility:visible;top:46px;min-width:200px;transition:all .3s ease;z-index:2}.mastagul .icon:hover{color:#009688;animation:rubberBand 1s}.mastagul .icon .open{display:block}.mastagul .icon .close{display:none}.mastagul .check:checked ~ .icon .open{display:none}.mastagul .check:checked ~ .icon .close{display:block}.mastagul .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}.mastagul .NavMenu:before, .mastagul .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}.mastagul .NavMenu:before{border-bottom-color:rgba(0,0,0,.25)}.mastagul .NavMenu #ftprof{max-width:50px;max-height:50px;border-radius:100px;border:1px solid #fff;margin:0px;height:50px;width:50px}.mastagul .NavMenu ul{margin:0px;padding:0px}.mastagul .NavMenu ul li{list-style-type:none;transition:all .3s ease}.mastagul .NavMenu ul li:hover{background:#e6e6e6}.mastagul .NavMenu ul li a{color:#3c4043;display:block;padding:10px 16px}.mastagul .NavMenu ul li svg{width:22px;height:22px;vertical-align:-7px;margin-right:10px}.mastagul .NavMenu ul li svg path{fill:#3c4043}.mastagul .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}.mastagul .NavMenu ul li.head svg{width:16px;height:16px;position:relative;left:-7px;margin-right:0px}.mastagul .NavMenu ul li.head svg path{fill:#4285F4;stroke:#fff;stroke-width:3px;paint-order:stroke}.mastagul .NavMenu ul li.head ul{line-height:24px;margin-left:3px}.mastagul .NavMenu ul li.head ul li{padding:0px;font-size:17px;line-height:normal;white-space:nowrap}.mastagul .NavMenu ul li.head ul li.name{font-weight:700;font-size:17px;margin-bottom:5px}.mastagul .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}.mastagul .NavMenu ul li.head ul li.follow a:hover{background-color:#ff9800}.mastagul .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}.mastagul .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}.mastagul .NavMenu ul li.social button{margin:0px;font-size:unset}.mastagul .NavMenu ul li.social a{padding:15px 7px;z-index:1;position:relative}.mastagul .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}.mastagul .NavMenu ul li.social svg{margin:0px;width:22px;height:22px}.mastagul .NavMenu ul li.social .facebook svg{fill:#3a579a}.mastagul .NavMenu ul li.social .twitter svg{fill:#00abf0}.mastagul .NavMenu ul li.social .instagram svg path{fill:#9c27b0}.mastagul .NavMenu ul li.social .pinterest svg path{fill:#e73e36}.mastagul .NavMenu ul li.social .ytube svg path{fill:#f00}.mastagul .NavMenu ul li.social a:hover svg, .mastagul .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}.rap{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqdp6fAA_OaJbS-OYnyGVPVj-WeWITNkX9RJ2UkBjYUQNxtsMtgnBi88cUGt3Kg9_WBA9qHs62f6ekwMVz-9NU-FVAmS6ssQ4XQykQLvoOVYb9Bw-dnw9-TzjO0QAjs81NfpHDtJ8cck/s99/LOGO.png);background-size:cover}
<!-- Akhir Menu Navigasi Profil mastagul.com -->

Langkah 3: Masukkan Script HTML

Setelah langkah 2 selesai silahkan ambil kode HTML dibawah ini dan letakkan diatas kode </header>.

 
<!-- Awal Menu Navigasi Profil mastagul.com -->
.mastagul{display:inline-block;float:<pre style="background: rgb(0, 0, 139); border: 2px dashed rgb(0, 0, 139); height: auto; line-height: 10px; overflow: auto; padding: 5px; text-align: left; width: 99%;"><span style="color: yellow; font-family: &quot;arial&quot;;"> </span><code style="overflow-wrap: normal;"><span style="color: white; font-family: &quot;arial&quot;;">
</span><span style="color: white;"><!-- Awal Menu Navigasi Profil mastagul.com -->
<div class='mastagul'><input class='check' id='mastagul' type='checkbox'/>
<label class='icon' for='mastagul'>
<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.mastagul.com/' itemprop='url'/><meta content='Home' itemprop='name'/>
<li class='head'>
<div alt='Author' class='rap' id='ftprof' title='mastagul'/>
<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'>Mas Tagul</li>
<li class='follow'><a href='https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=5926654367159826952' rel='nofollow noopener' target='_blank' title='Follow'>FOLLOW</a></li>
</ul>
</li>
<li>
<a href='https://www.mastagul.com/p/about.html' 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='https://www.mastagul.com/p/contact.html' 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='https://www.mastagul.com/p/disclamer.html' 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='https://www.mastagul.com/p/privacy-policy.html' 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='https://www.mastagul.com/p/sitemap.html' 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>
</ul>
</nav>
</div>
<!-- Akhir Menu Navigasi Profil mastagul.com --><span style="font-family: &quot;arial&quot;;">
</span></span></code><span style="color: yellow; font-family: &quot;arial&quot;;">
</span></pre>right;margin-top:3px;position:absolute;right:0;top:0}.mastagul svg{width:24px;height:24px}.mastagul svg path{fill:#fff}.mastagul .check:checked~.NavMenu{opacity:1;visibility:visible;top:46px;min-width:200px;transition:all .3s ease;z-index:2}.mastagul .icon:hover{color:#009688;animation:rubberBand 1s}.mastagul .icon .open{display:block}.mastagul .icon .close{display:none}.mastagul .check:checked ~ .icon .open{display:none}.mastagul .check:checked ~ .icon .close{display:block}.mastagul .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}.mastagul .NavMenu:before, .mastagul .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}.mastagul .NavMenu:before{border-bottom-color:rgba(0,0,0,.25)}.mastagul .NavMenu #ftprof{max-width:50px;max-height:50px;border-radius:100px;border:1px solid #fff;margin:0px;height:50px;width:50px}.mastagul .NavMenu ul{margin:0px;padding:0px}.mastagul .NavMenu ul li{list-style-type:none;transition:all .3s ease}.mastagul .NavMenu ul li:hover{background:#e6e6e6}.mastagul .NavMenu ul li a{color:#3c4043;display:block;padding:10px 16px}.mastagul .NavMenu ul li svg{width:22px;height:22px;vertical-align:-7px;margin-right:10px}.mastagul .NavMenu ul li svg path{fill:#3c4043}.mastagul .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}.mastagul .NavMenu ul li.head svg{width:16px;height:16px;position:relative;left:-7px;margin-right:0px}.mastagul .NavMenu ul li.head svg path{fill:#4285F4;stroke:#fff;stroke-width:3px;paint-order:stroke}.mastagul .NavMenu ul li.head ul{line-height:24px;margin-left:3px}.mastagul .NavMenu ul li.head ul li{padding:0px;font-size:17px;line-height:normal;white-space:nowrap}.mastagul .NavMenu ul li.head ul li.name{font-weight:700;font-size:17px;margin-bottom:5px}.mastagul .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}.mastagul .NavMenu ul li.head ul li.follow a:hover{background-color:#ff9800}.mastagul .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}.mastagul .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}.mastagul .NavMenu ul li.social button{margin:0px;font-size:unset}.mastagul .NavMenu ul li.social a{padding:15px 7px;z-index:1;position:relative}.mastagul .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}.mastagul .NavMenu ul li.social svg{margin:0px;width:22px;height:22px}.mastagul .NavMenu ul li.social .facebook svg{fill:#3a579a}.mastagul .NavMenu ul li.social .twitter svg{fill:#00abf0}.mastagul .NavMenu ul li.social .instagram svg path{fill:#9c27b0}.mastagul .NavMenu ul li.social .pinterest svg path{fill:#e73e36}.mastagul .NavMenu ul li.social .ytube svg path{fill:#f00}.mastagul .NavMenu ul li.social a:hover svg, .mastagul .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}.rap{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqdp6fAA_OaJbS-OYnyGVPVj-WeWITNkX9RJ2UkBjYUQNxtsMtgnBi88cUGt3Kg9_WBA9qHs62f6ekwMVz-9NU-FVAmS6ssQ4XQykQLvoOVYb9Bw-dnw9-TzjO0QAjs81NfpHDtJ8cck/s99/LOGO.png);background-size:cover}
<!-- Akhir Menu Navigasi Profil mastagul.com -->

Langkah 4: Cari Script /SEARCH FORM/

Kemudian cari kode .search-icon { nanti akan menemukan kode seperti di bawah ini.

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

Langkah 5: Masukkan Script HTML

Setelah menemukan kode seperti diatas, silahkan ganti kode di atas menggunakan kode dibawah ini

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

Langkah 6: Hapus Script HTML

kemudian cari kode-kode seperti di bawah ini, kemudian di hapus

 
.search-icon {
   right: 30px;
}
.search-icon {
   right: 20px;
}
.search-icon {
   right: 15px;
}

Setelah semua terasa benar silahkan simpan tema, dan kemudian lihat hasilnya.

NB:
Untuk mengganti gambar profil silahkan sobat cari kode .rap{background-image di CSS pada langkah 2, kemudian ganti url yang berwarna merah dengan url gambar milik sobat. Sebagai contoh seperti dibawah
.rap{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqdp6fAA_OaJbS-OYnyGVPVj-WeWITNkX9RJ2UkBjYUQNxtsMtgnBi88cUGt3Kg9_WBA9qHs62f6ekwMVz-9NU-FVAmS6ssQ4XQykQLvoOVYb9Bw-dnw9-TzjO0QAjs81NfpHDtJ8cck/s99/LOGO.png);background-size:cover}
Ganti juga url About, Contact, Privacy Policy, Disclaimer dan Sitemap dengan url milik sobat.
Silahkan sobat kreasikan sesuai dengan keinginan dan selera sobat.

Jika sobat masih binggung atau ada kendala dalam membuat Menu Navigasi Profil di Header Blog, silahkan sobat tinggalkan catatan di komentar. Silahkan di share jika artikel ini bisa bermanfaat.

Cek Berita dan Artikel yang lain di Google News.