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

Membuat menu navigasi contact melayang di blogger

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>

&lt;input class=&quot;rahnav-detail hidden&quot; id=&quot;rahnav-clear&quot; type=&quot;checkbox&quot;/&gt;
 &lt;div class=&quot;rahnav-details&quot;&gt;
&lt;span data-text=&quot;About&quot; role=&quot;button&quot; href=&#039;https://www.Icloudice.com/p/about.html&#039;&gt;
&lt;/span&gt;
&lt;span data-text=&quot;Contact&quot; role=&quot;button&quot; href=&#039;https://www.Icloudice.com/p/contact.html&#039;&gt;
&lt;/span&gt;
&lt;span data-text=&quot;Disclaimer&quot; role=&quot;button&quot; href=&quot;https://www.Icloudice.com/p/disclaimer.html&quot;&gt;
&lt;/span&gt;
&lt;span data-text=&quot;Privacy&quot; role=&quot;button&quot; href=&#039;https://www.Icloudice.com/p/privacy.html&#039;&gt;
&lt;/span&gt;
&lt;span data-text=&quot;Sitemap&quot; role=&quot;button&quot; href=&#039;https://www.Icloudice.com/p/sitemap.html&#039;&gt;
&lt;/span&gt;
 &lt;/div&gt;
 &lt;label class=&quot;full-close&quot; for=&quot;rahnav-clear&quot;&gt;
 &lt;/label&gt;

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

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.