For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

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

  1. Login keakun blogger kamu
  2. Pergi ke Template dan pilih edit HTML
  3. Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya
  4. <!-- 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}
  5. Selanjutnya cari kode </header> dan letakkan kode dibawah ini tepat diatasnya
  6. <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>
  7. Kemudian Cari kode seperti ini
  8. <!-- SEARCH FORM -->
    .search-icon {
    position: absolute;
    top: 11px;
    right: 0px;
    font-size: 19px;
    }
  9. Jika sudah jumpa, lalu ganti semua kode tersebut dengan kode dibawah ini
  10. <!-- SEARCH FORM -->
    .search-icon {
    position: absolute;
    top: 11px;
    right: 0px;
    font-size: 19px;
     z-index: 999;
    }
  11. Seterusnya cari kode berikut, kode nya seperti dibawah ini
  12. <!-- 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;

  13. 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

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.