Cara membuat menu navigasi profile di blogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat menu navigasi peofile melayang di sudut samping header blog dengan tampilan keren

Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Navigasi Profile

Menu navigasi profile adalah suatu menu navigasi yang muncul ketika pengguna megklik icon profile di dalam sebuah blog, yang mana di dalam menu navigasi profile berisi informasi mengenai admin yang mengelola situs blognya, seperti About, contact dan layanan atau platform sosial media yang kita punya untuk memberikan informasi pribadi yang kita punyai kepada penggemar anda

Mode Melayang

Menu navigasi profil melayang di blogger tersebut bergaya mengambang alias sticky, stabil mengambang di bawah header blog dan pembuatan nya hanya di buat menggunakan kode CSS saja tanpa ada penggunaan unsur kode Javascript di dalamnya

Cara penerapan

Jika anda tertarik dan ingin memasang menu navigasi profil pada situs blog anda, maka anda bisa mengikuti setiap langkah langkah berikut ini

Login keakun blogger kamu
Pergi ke Template dan pilih edit HTML
Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya

<!-- menu navigasi profil Icloudice.com -->
.rahnav-n{display:inline-block;float:right;margin-top:3px;position:absolute;right:0;top:0}.rahnav-n svg{width:24px;height:24px}.rahnav-n svg path{fill:#fff}.rahnav-n .check:checked~.rahnav-m{opacity:1;visibility:visible;top:56px;min-width:200px;transition:all .3s ease;z-index:2}.rahnav-n .icon:hover{color:#009688;animation:rubberBand 1s}.rahnav-n .icon .open{display:block}.rahnav-n .icon .close{display:none}.rahnav-n .check:checked ~ .icon .open{display:none}.rahnav-n .check:checked ~ .icon .close{display:block}.rahnav-n .rahnav-m{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}.rahnav-n .rahnav-m:before, .rahnav-n .rahnav-m: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}.rahnav-n .rahnav-m:before{border-bottom-color:rgba(0,0,0,.25)}.rahnav-n .rahnav-m #ftprof{max-width:50px;max-height:50px;border-radius:100px;border:1px solid #fff;margin:0px;height:50px;width:50px}.rahnav-n .rahnav-m ul{margin:0px;padding:0px;margin-top:-8px;}.rahnav-n .rahnav-m ul li{list-style-type:none;transition:all .3s ease;margin:0px;}.rahnav-n .rahnav-m ul li:hover{background:#e6e6e6}.rahnav-n .rahnav-m ul li a{color:#3c4043;display:block;padding:10px 16px}.rahnav-n .rahnav-m ul li svg{width:22px;height:22px;vertical-align:-7px;margin-right:10px}.rahnav-n .rahnav-m ul li svg path{fill:#3c4043}.rahnav-n .rahnav-m 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}.rahnav-n .rahnav-m ul li.head svg{width:16px;height:16px;position:relative;left:-7px;margin-right:0px}.rahnav-n .rahnav-m ul li.head svg path{fill:#4285F4;stroke:#fff;stroke-width:3px;paint-order:stroke}.rahnav-n .rahnav-m ul li.head ul{line-height:24px;margin-left:3px}.rahnav-n .rahnav-m ul li.head ul li{padding:0px;font-size:17px;line-height:normal;white-space:nowrap}.rahnav-n .rahnav-m ul li.head ul li.name{font-weight:700;font-size:17px;margin-bottom:5px}.rahnav-n .rahnav-m ul li.head ul li.follow a{background-color:#4285F4;color:#fff;font-size:10px;padding:3px 7px;border-radius:25px;display:inline-block}.rahnav-n .rahnav-m ul li.head ul li.follow a:hover{background-color:#ff9800}.rahnav-n .rahnav-m 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}.rahnav-n .rahnav-m 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}.rahnav-n .rahnav-m ul li.social button{margin:0px;font-size:unset}.rahnav-n .rahnav-m ul li.social a{padding:15px 7px;z-index:1;position:relative}.rahnav-n .rahnav-m ul li.sociala: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}.rahnav-n .rahnav-m ul li.socialsvg{margin:0px;width:22px;height:22px}.rahnav-n .rahnav-m ul li.social .facebook svg{fill:#3a579a}.rahnav-n .rahnav-m ul li.social .twitter svg{fill:#00abf0}.rahnav-n .rahnav-m ul li.social .instagram svg path{fill:#9c27b0}.rahnav-n .rahnav-m ul li.social .pinterest svg path{fill:#e73e36}.rahnav-n .rahnav-m ul li.social .ytube svg path{fill:#f00}.rahnav-n .rahnav-m ul li.social a:hover svg, .rahnav-n .rahnav-m 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://Masukkan_url_photo_kamu_disini);background-size:cover}

Selanjutnya cari kode </header> dan letakkan kode dibawah ini tepat diatasnya

<div class='rahnav-n'><input class='check' id='rahnav-n' type='checkbox'/>
<label class='icon' for='rahnav-n'>
<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='rahnav-m' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<ul>
<meta content='https://www.icloudice.com/' itemprop='url'/><meta content='Home' itemprop='name'/>
<li class='head'>
<div alt='Author' class='fotomu' id='ftprof' title='Anonymous'/>
<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'>Anonymous</li>
<li class='follow'><a href='/' 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'>PrivacyPolicy</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.1818.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>

Kemudian Cari kode seperti ini

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

Jika sudah jumpa, lalu ganti semua kode tersebut dengan kode dibawah ini

<!-- SEARCH FORM -->
.search-icon {
position: absolute;
top: 11px;
right: 0px;
font-size: 19px;
 z-index: 999;
}

Seterusnya cari kode berikut, kode nya seperti dibawah 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;
}
}

Info: Lihat pada kode diatas yaitu right: 30, 20, 15px; di bawah .search-icon { dan terdapat tiga buah right seperti yang sudah saya jabarkan ganti semua right menjadi 50px;

Simpan Template dan lihat bagaimana hasilnya

Contoh Tampilan

Jika kamu penasaran bagaimana kah contoh tampilan dari menu navigasi profil yang mucnul saat di klik tersebut periksa contoh tampilan nya menggunakan tombol di bawah ini

Periksa

Info: Bagaimana sobat icloudZer keren kan contoh tampilan dari menu navigasi profile di sudut samping header blog

Bagaimana jika anda menemukan kesalahan pada setiap kode yang saya berikan anda bisa memberitahukan kepada saya melalui form komentar, terimakasih

ICloudice.com

Auto Theme Changer

Auto Themer

Read Mode