Fullscreen mode
Normal mode

Cara Membuat Menu Navigasi Profil Header Blog

Faronesia.com - Menu navigasi pada umumnya sangatlah penting kedudukannya selain itu menu navigasi juga menambah nilai plus bagi pengunjung terlebih jika dikelola dan di desain dengan baik. Pada kesempatan kali ini saya akan memberikan tutorial Membuat Menu Navigasi Profil Header Blog yang keren dan dinamis. Tutorial ini terinspirasi dari salah satu blog milik Mbak Igniel. Meskipun tidak terlalu mirip namun cukup keren loh.

Dalam tahap percobaan saya menggunakan template Viomagz sebagai bahan template dasar. Perlu di ingat, jika anda sudah memasang menu halaman About, Privacy Policy, Disclaimer dan Contact Us pada bagian menu navigasi footer Viomagz maka hapuslah terlebih dahulu karena nantinya menu About, Privacy Policy, Disclaimer dan Contact Us sudah ada di menu navigasi profil header dan anda cukup memasang linknya saja. Kode CSS dan HTML Menu navigasi footer Viomagz harus dihapus secara keseluruhan dan maksimal agar tidak meninggalkan kode yang tidak terpakai nantinya. Tidak tahu cara menghapusnya? silahkan baca pada artikel sebelumnya yaitu Cara Menghapus Menu Navigasi Footer Pada Template Viomagz.

CATATAN: Sebenarnya langkah penghapusan diatas BOLEH tidak dilakukan jika anda berniat mengubah menu navigasi footer Viomagz dengan fungsi lain maupun menu lainnya.

Sebelum masuk ke tutorial Membuat Menu Navigasi Profil Header Blog, saya ingatkan anda untuk membackup template kesayangan anda yang akan anda modifikasi. Hal ini sangat penting sekali untuk berjaga-jaga apabila dalam tahap modifikasi terjadi kesalahan penempatan kode dan hal lainnya yang mengakibatkan kerusakan template.

Cara Membuat Menu Navigasi Profil Header Blog
  • Masuk dashboard blog anda
  • Lalu masuk ke menu tema
  • Cari kode ]]></b:skin>
  • Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin>
/*Nav Profil faronesia.com*/
.faronesiaNav{display:inline-block;float:right;margin-top:3px;position:absolute;right:0;top:0}.faronesiaNav svg{width:24px;height:24px}.faronesiaNav svg path{fill:#fff}.faronesiaNav .check:checked~.NavMenu{opacity:1;visibility:visible;top:46px;min-width:200px;transition:all .3s ease;z-index:2}.faronesiaNav .icon:hover{color:#009688;animation:rubberBand 1s}.faronesiaNav .icon .open{display:block}.faronesiaNav .icon .close{display:none}.faronesiaNav .check:checked ~ .icon .open{display:none}.faronesiaNav .check:checked ~ .icon .close{display:block}.faronesiaNav .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}.faronesiaNav .NavMenu:before, .faronesiaNav .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}.faronesiaNav .NavMenu:before{border-bottom-color:rgba(0,0,0,.25)}.faronesiaNav .NavMenu #ftprof{max-width:50px;max-height:50px;border-radius:100px;border:1px solid #fff;margin:0px;height:50px;width:50px}.faronesiaNav .NavMenu ul{margin:0px;padding:0px}.faronesiaNav .NavMenu ul li{list-style-type:none;transition:all .3s ease}.faronesiaNav .NavMenu ul li:hover{background:#e6e6e6}.faronesiaNav .NavMenu ul li a{color:#3c4043;display:block;padding:10px 16px}.faronesiaNav .NavMenu ul li svg{width:22px;height:22px;vertical-align:-7px;margin-right:10px}.faronesiaNav .NavMenu ul li svg path{fill:#3c4043}.faronesiaNav .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}.faronesiaNav .NavMenu ul li.head svg{width:16px;height:16px;position:relative;left:-7px;margin-right:0px}.faronesiaNav .NavMenu ul li.head svg path{fill:#4285F4;stroke:#fff;stroke-width:3px;paint-order:stroke}.faronesiaNav .NavMenu ul li.head ul{line-height:24px;margin-left:3px}.faronesiaNav .NavMenu ul li.head ul li{padding:0px;font-size:17px;line-height:normal;white-space:nowrap}.faronesiaNav .NavMenu ul li.head ul li.name{font-weight:700;font-size:17px;margin-bottom:5px}.faronesiaNav .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}.faronesiaNav .NavMenu ul li.head ul li.follow a:hover{background-color:#ff9800}.faronesiaNav .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}.faronesiaNav .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}.faronesiaNav .NavMenu ul li.social button{margin:0px;font-size:unset}.faronesiaNav .NavMenu ul li.social a{padding:15px 7px;z-index:1;position:relative}.faronesiaNav .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}.faronesiaNav .NavMenu ul li.social svg{margin:0px;width:22px;height:22px}.faronesiaNav .NavMenu ul li.social .facebook svg{fill:#3a579a}.faronesiaNav .NavMenu ul li.social .twitter svg{fill:#00abf0}.faronesiaNav .NavMenu ul li.social .instagram svg path{fill:#9c27b0}.faronesiaNav .NavMenu ul li.social .pinterest svg path{fill:#e73e36}.faronesiaNav .NavMenu ul li.social .ytube svg path{fill:#f00}.faronesiaNav .NavMenu ul li.social a:hover svg, .faronesiaNav .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://1.bp.blogspot.com/-mzODugTrfcU/XUut4o_B9vI/AAAAAAAAAE4/J3pVbMP-Zm0dgolh90VFIfxWIWK9V81QwCLcBGAs/s45/logo%2Bfaronesia%2Bterbaru.png);background-size:cover}
  • Yang ditandai dengan warna hijau adalah link gambar profile, silahkan ubah sesuai selera
  • Selanjutnya, copy kode HTML di bawah ini dan letakan di atas kode </header>
<div class='faronesiaNav'><input class='check' id='faronesiaNav' type='checkbox'/>
<label class='icon' for='faronesiaNav'>
<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.faronesia.com/' itemprop='url'/><meta content='Home' itemprop='name'/>
<li class='head'>
<div alt='Author' class='rap' id='ftprof' title='prabuazza'/>
<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'>Faronesia</li>
<li class='follow'><a href='https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=9181714313239666031' rel='nofollow noopener' target='_blank' title='Follow'>FOLLOW</a></li>
</ul>
</li>
<li>
<a href='/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='/p/blog-page_31.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='/p/blog-page_61.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='/p/blog-page_25.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='/p/blog-page_2.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>
KETERANGAN:
  • Ganti yang berwarna kuning dengan BlogID anda
  • Ganti yang berwarna merah dengan link halaman anda

Sampai tahap ini sudah hampir selesai, namun menu tersebut saling timpa dengan icon search. sekarang anda cukup menggeser icon Searchnya. Simak langkah berikut ini:
  • Cari kode CSS yang mirip dengan kode dibawah ini
/* SEARCH FORM */
.search-icon {
   position: absolute;
   top: 11px;
   right: 0px;
   font-size: 19px;
}
  • Lalu ganti dengan kode dibawah ini
/* SEARCH FORM */
.search-icon {
   position: absolute;
   top: 12px;
   right: 50px;
   font-size: 19px;
   z-index: 99;
}
  • belum selesai sampai disini, anda harus menghapus beberapa kode dibawah ini
.search-icon {
   right: 30px;
}
.search-icon {
   right: 20px;
}
.search-icon {
   right: 15px;
}
  • Jika masih ada lagi, hapus kode dibawah ini
.search-icon {
   right: 12px;
}
  • Terakhir, simpan template dan lihat hasilnya.

Jika anda merasa kebingungan dalam menerapkan tutorial ini silahkan beri komentar di kolom yang tersedia dibawah atau hubungi kontak yang tersedia jika tidak sibuk

Demikianlah mengenai Cara Membuat Menu Navigasi Profil Header Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

0 Response to "Cara Membuat Menu Navigasi Profil Header Blog"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel