Bot WhatsApp canggih dari ICloudice.comCheck Now!
Bacakan

Cara Membuat menu navigasi profil keren diblogger

Hello sobat IcloudZer kali ini admin akan memberikan atau membagikan informasi seputar blogging dan perkembangan dunia blogging terbaru saat ini, namun kali ini admin akan membahas mengenai bagaiamana caranya membuat menu navigasi profil keren mode sticky atau melayang di blogger

Info: Oke bagi kamu yang sudah penasaran yuk langsung aja kita bahas bersama sama

Mode Sticky

Nantinya apabila kamu telah memasang navigasi profil header diblog kamu, maka tampilan dari menu navigasi profil ini akan ditampilkan secara sticky atau bisa disebut mengambang stabil pada blog kamu

Fungsi Menu profil

Fungsi dari menu profil ini sebenarnya untuk menampilkan berbagai informasi yang dikhususkan kepada admin atau pengelola blog, sehingga para pengunjung bisa lebih mengenal dan mengetahui mengenai si empunya blognya

Cara Pembuatan

Baiklah sekarang admin akan mulai membahas bagaiamana caranya membuat menu navigasi profil diblog dengan tampilan keren, ok simak dan pelajari hingga selesai setiap langkah langkah yang admin jabarkan

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian letakkan di atas kode ]]></b:skin> atau sebelum kode ]]></b:skin>

/* Profil Melayang ~ by Icloudice (don't remove ok) */
#rah-iconprofile{position:absolute;top:10px;right:8px;z-index:10px;font-size:25px;}
.rah-inner-profile{z-index: 7;position:fixed;left:0;top:0;width: 100%;height:100%;background-color:rgba(0, 0, 0, 0.5);opacity:0;    visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s,transform 0.25s;}
.rah-card-profile{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:.5rem}.rah-close-button{z-index:8;position:absolute;top:10px;right:10px;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:50%;background-color:rgba(255,255,255,.36)}.close-button:hover{background-color:rgba(255,255,255,.81)}.show-rah-profile{z-index:7;opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s,opacity .25s 0s,transform .25s}.rah-innerr-profil:checked + .rah-inner-profile{visibility:visible; opacity:1}
@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
.__rah-inner-profile{border-radius:6px;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);box-shadow:0 0 10px rgba(0,0,0,.4);overflow:hidden;position:relative;width:300px;height:500px}
.__rah-inner-profile > .image img{position:absolute;z-index:1;opacity:.3;height:200px;width:300px}
.__rah-inner-profile > .image:after {height:100px;content:'';top:100px;position:absolute;width:100%;z-index:1;background:-webkit-gradient(linear,left top,left bottom,from(rgba(221,65,127,0)),to#ff0000));background:#ff0000)}
.__rah-inner-profile > .wave-animation {position:absolute;height:735px;width:750px;opacity:.6;left:0;top:0;margin-left:-70%;margin-top:-170%;border-radius:40%;background:radial-gradient(#ff0000,#ff0000);-webkit-animation:spin 3s infinite linear;animation:spin 3s infinite linear}
.__rah-inner-profile > .wave-animation:nth-child(2) {top: 0;-webkit-animation: spin 4000ms infinite linear;animation: spin 4000ms infinite linear;}
.__rah-inner-profile > .wave-animation:nth-child(3) {top: 0;-webkit-animation: spin 5000ms infinite linear;animation: spin 5000ms infinite linear;}
.__rah-inner-profile > .admin-info{position:absolute;bottom:170px;left:0;padding:13px;padding-bottom:0;text-align:center}.__rah-inner-profile > .admin-info > .about{font-size:10px;font-family:Poppins,sans-serif;font-weight:normal;font-style:italic;color:#e6e6e6}
.__rah-inner-profile > .info-link {position:absolute;bottom:75px;left:0;right:0;padding:13px;padding-bottom:5px;text-align:center}
.__rah-inner-profile > .info-link > .title {font-size:15px;font-family:Poppins,sans-serif;font-weight:normal;font-style:italic;color:#000;padding-top:5px;border-top:thin solid #dadce0}
.__rah-inner-profile > .admin-info > .artist {font-family:Poppins,sans-serif;color:#000;font-size:15px;letter-spacing:.08em;text-transform:Capitalize;padding-bottom:2.5px;border-bottom:thin solid #dadce0}
.admin-info p{margin:0.5em 0;color: #393939; font-size: 12px; font-family: Poppins,sans-serif;}
.admin-info span a{margin:0 10px;}
.info-link span a:hover{color:#ff69b4}
.info-link span a svg path{fill:#fff}
.info-link span a svg {display:inline-block}
@media screen and (max-width:840px) { #rah-iconprofile{position:absolute}}
.info-link ul{margin:0}
a .notif-icon{display:block;font-size:16px;background:#FFF900;position:absolute;top:0;right:0;width:8px;height:8px;border-radius:10px;animation:notif-icon 1s ease infinite;border: 1px solid rgb(0,0,0,.1);}
@media screen and (max-width:768px){a .notif-icon{top:8px;right:7px}}
@keyframes notif-icon{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.info-link li a.instagram{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)}.info-link li a.facebook{background-color:#3b5999;}
.info-link li a.whatsapp{background-color:#3fbb50;}
.info-link li a.codepen{background-color:#413965;}
.info-link li a.github{background-color:#24292e;}
.info-link svg path{fill:#fff}
.info-link svg {width: 24px; height: 24px; vertical-align: 4px;}
.social-link li{float: left;width: 20%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 2px 5px; padding-bottom:10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 10px 0 0; border-bottom:thin solid #dadce0; }
.social-link li a{display: block; height: 35px; font-size: 22px; color: #fff; text-align: center; line-height: 50px; border-radius: 4px; width: 35px; -webkit-transition: opacity .17s; -o-transition: opacity .17s; transition: opacity .17s; }
.info-link h2{margin:0}
.navigasi h2{margin:0}
.__rah-inner-profile > .navigasi { position: absolute; bottom: 0; left: 0; right: 0; padding: 13px; text-align: center; }
.__rah-inner-profile > .navigasi > .title { font-size: 15px; font-family: Poppins,sans-serif; font-weight: normal; font-style: italic; color: #000; }
.navigasi li{float: left; width: 20%; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin:0; }
.navigasi li a{display: block; height: 35px; font-size: 22px; color: #fff; text-align: center; line-height: 50px; border-radius: 4px; width: 35px; -webkit-transition: opacity .17s; -o-transition: opacity .17s; transition: opacity .17s; }
.navigasi ul{margin:0}
.navigasi svg path{fill:#3c4043}
.navigasi svg {width: 18px; height: 18px; vertical-align: 4px;}
svg.ffacebook{width:18px;height:18px;vertical-align:6px;}

Kode HTML

Kemudian langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML berikut ini kemudian kamu bisa meletakkan sesuai keinginan kamu aja, berikut kode HTML nya

/* Menu nav Profil ~ by Icloudice com */
<label for='rah-rahinner-profile' id="rah-iconprofile">
     <svg style="width:24px;height:24px" 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.57.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">
      </path>
     </svg>
     <span class="notif-icon">
     </span>
    </label><input class='rah-innerr-profil hidden' id='rah-rahinner-profile' type='checkbox'/>
    <div class="rah-inner-profile">
     <div class="rah-card-profile"><label for='rah-rahinner-profile' id="rah-iconprofile">
      <span class="rah-close-button">
       ×
      </span></label>
      <div class="__rah-inner-profile">
       <div class="image">
        <img itemprop="image" src="https://1.bp.blogspot.com/-Cb3p2mf3qmE/YTUUvvtF-QI/AAAAAAAAKYw/AJsGwdbWuPUkngsg-FMNZDHL6JpHq1U3gCNcBGAsYHQ/s0/4_20210906_020205_0003.png"/>
       </div>
       <div class="wave-animation">
       </div>
       <div class="wave-animation">
       </div>
       <div class="wave-animation">
       </div>
       <div class="admin-info">
        <h2 class="about">
         Author / Admin / Editor
        </h2>
        <author class="artist">
         Icloudice.com
        </author>
        <p>
         Rah ~ Mempelajari Teknologi dan mengembangkannya adalah kegemaran saya
        </p>
       </div>
       <!-- Social Link -->
       <div class="info-link">
        <h2 class="title">
         Rah social media 
        </h2>
        <ul class="social-link">
         <li>
          <a href="#" rel="nofollow noopener" target="_blank" title="Facebook">
           <svg style="width: 25px;height: 25px;background: #3a579a;border-radius: 5px;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">
            </path>
           </svg>
          </a>
         </li>
         <li>
          <a class="github" href="#" target="_blank">
           <svg viewbox="0 0 24 24">
            <path d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.614.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z">
            </path>
           </svg>
          </a>
         </li>
         <li>
          <a class="instagram" href="#" target="_blank">
           <svg viewbox="0 0 24 24">
            <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg>
          </a>
         </li>
         <li>
          <a class="codepen" href="#" target="_blank">
           <svg viewbox="0 0 24 24">
            <path d="M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z">
            </path>
           </svg>
          </a>
         </li>
         <li>
          <a href="#" rel="nofollow noopener" target="_blank" title="whatsapp">
           <svg style="width: 25px;height: 25px;background: #25d366;border-radius: 5px;padding: 5px;vertical-align: 9px;" viewbox="0 0 24 24">
            <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z" fill="#ffffff">            </path>
           </svg>
          </a>
         </li>
        </ul>
       </div>
       <!-- NAVIGASI BLOG -->
       <div class="navigasi">
        <h2 class="title">
       Menu Navigasi 
        </h2>
        <ul class="navigasi">
         <li>
          <a href="/p/about.html" target="_blank">
           <svg 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">
            </path>
           </svg>
          </a>
         </li>
         <li>
          <a href="/p/contact.html" target="_blank">
           <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">
            </path>
           </svg>
          </a>
         </li>
         <li>
          <a href="/p/disclaimer.html" target="_blank">
           <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">
            </path>
           </svg>
          </a>
         </li>
         <li>
          <a href="/p/privacy.html" target="_blank">
           <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"></path>
           </svg>
          </a>
         </li>
         <li>
          <a href="/p/patner.html" target="_blank">
           <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.18 18.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.2819.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z">
            </path>
           </svg>
          </a>
         </li>
        </ul>
       </div>
      </div>
     </div>
    </div>

Peletakkan kode

Jika kamunya masih bingung aja, dengan peletakkan kodennya dimana, sebagai mana yang telah saya sampaikan untuk kode CSS nya kamu bisa meletakkan nya diatas kode ]]></b:skin>, kemudian untuk kode HTML nya sebagai rekomendasi dan saran kamu bisa meletakkannya diatas kode </header>

Contoh Tampilan

Sebagai pelengkap untuk kamu biar lebih detail mengenai pembahasan kita kali, admin akan memberikan contoh tampilan atau contoh demo mengenai menu navigasi profil sticky diblogger, berikut ini contoh tampilan nya

Desainer web / Desainer UI / Desainer Apps / Desainer UX / Creator Icloudice.com

Rah ~ Mempelajari Teknologi dan mengembangkannya adalah kegemaran saya

Info: Bagaiamana dengan contoh tampilan nya keren bukan, hehehehe

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

2 komentar

  1. Casino.com Archives - ScoopGo
    Casino.com Archives https://aprcasino.com/pluscasino/ - 출장마사지 ScoopGo.com's collection febcasino.com of gri-go.com online casino and sporting100 sports betting tips, casino games, video slots, live dealer games and more!
  2. Code ga bisa di salin☹
Mengahasilkan uang melalui referral 1$
Menghasilkan uang melalui survei berbayar
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.