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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQFCuFpjnDju2TIRYh0ZmqWnNVrHiFysef9GD0s4JhdC3glSrUbqhLLCjKxN4DNuOlwhAMdT7g_R3zdokU7vQHBYHLWGQaA6JUp1yI3gxHdxhi-H7L6u1C3tXUW6l9iG3YJUie3Jij6Y/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
Rah ~ social media
Info: Bagaiamana dengan contoh tampilan nya keren bukan, hehehehe