Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat menu navigasi contact melayang di blogger
Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Menu Navigasi
Apa itu menu navigasi? Menu navigasi merupakan suatu tampilan di dalam website untuk menampilkan berbagai macam informasi entah itu artikel, tools, ataupun menu profile di dalam sebuah menu navigasi tersebut
Mode Melayang
Jenis tampilan menu navigasi contact kali ini memiliki gaya tampilan melayang ataupun bisa disebut popup alias mode sticky, nah jika kamu menerapkannya di dalam blog kamu bisa menggunakan menu navigasi tersebut sesuai keinginan kamu aja, dan kamu juga bisa menyesuaikan tampilan menu navigasi tersebut jika di perlukan
Menggunakan CSS
Tampilan menu navigasi contact di blogger tersebut dibuat menggunakan kode CSS saja tanpa ada penggunaan unsur kode CSS di dalamnya, sehingga membuat tampilan semakin cepat dan juga responsive tentunya
Contoh Tampilan
Sebagai pelengkapnya admin bakalan memberikan contoh tampilan dari menu navigasi contact di blogger tersebut, kamu bisa menggunakan tombol di bawah ini untuk melihatnya
Info: Bagaimana sobat dengan contoh tampilan dari menu navigasi contact melayang tersebut keren ya, kerenlah pasti hahaha
Cara pembuatan
Baiklah sekarang saatnya admin bakalan memberikan informasi mengenai bagaimana caranya membuat Tampilan menu navigasi contact bergaya Popup alias melayang responsive bagi pengguna blogger
Kode CSS
Langkah pertama yang bisa kamu lakukan untuk membuat tampilan menu navigasi di blogger kamu bisa menyalin kode CSS di bawah ini kemudian kamu bisa meletakkan nya diatas kode ]]></b:skin>
.rahnav-details{display:block;top:60px;right:10px;padding:10px 0;width:153px;background-color:#fefefe;font-size:13px;border-radius:4px;position:fixed;box-shadow:none;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;overflow:hidden;z-index:99;opacity:0;visibility:hidden}
.rahnav-details > *{display:block;padding:9px 15px;width:100%;cursor: pointer;}
.rahnav-details > *:before{content:attr(data-text)}
.rahnav-details span.active,.rahnav-details span:hover{background-color:#ebeced;color:#fefefe}.rahnav-detail:checked ~ .rahnav-details{visibility:visible;opacity:1}
.rahnav-detail:checked ~ .rahnav-details + .full-close{visibility:visible;opacity:1;z-index:98}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya kamu bisa menyalin lagi kode HTML di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>
<input class="rahnav-detail hidden" id="rahnav-clear" type="checkbox"/>
<div class="rahnav-details">
<span data-text="About" role="button" href='https://www.Icloudice.com/p/about.html'>
</span>
<span data-text="Contact" role="button" href='https://www.Icloudice.com/p/contact.html'>
</span>
<span data-text="Disclaimer" role="button" href="https://www.Icloudice.com/p/disclaimer.html">
</span>
<span data-text="Privacy" role="button" href='https://www.Icloudice.com/p/privacy.html'>
</span>
<span data-text="Sitemap" role="button" href='https://www.Icloudice.com/p/sitemap.html'>
</span>
</div>
<label class="full-close" for="rahnav-clear">
</label>Info: Fungsi kode HTML di atas adalah untuk menampilkan menu navigasi contact di blogger tersebut
Kode HTML 2
Langkah Selanjutnya kamu bisa menyalin lagi kode HTML yang kedua di bawah ini, kemudian kamu bisa meletakkan nya sesuai keinginan kamu
<label class='class_css' for='rahnav-clear'><svg viewbox="0 0 24 24">
<path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z">
</path>
</svg>
</label>Info: Fungsi dari kode HTML yang kedua tersebut adalah untuk menampilkan menu navigasi dari sebuah icon apabila di klik