Cara membuat menu navigasi titik tiga (In header) diblogger

Hello sobat IcloudZer semuanya kali ini admin bakalan berbagai informasi seputar blogging serta tips tips terbaru mengenai per-bloggingan, yakni dalam membahas bagiamana caranya membuat Menu titik tiga disudut kanan atas seperti aplikasi atau web lainnya yang menggunakan tampilan seperti itu

Info: Baiklah jika kamunya sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita mulai membahanya bersama sama

Fungsi

Seperti judulnya cara membuat menu titik tiga disudut kanan atas blog adalah suatu tampilan menu dari berbagai informasi seperti informasi kebijakan website atau hal lainnya, hanya saja dikemas dalam tampilan yang berbeda

Sebagai Informasi: Dan nantinya didalam menu informasi tersebut bisa kamu ubah sesuai keperluan kamu aja okay, kamu bisa mengubahnya didalam kode HTML

Tampil di Header

Nah sangat disarankan untuk anda apabila ingin menampilkan menu navigasi titik tiganya pada menu header blog sehingga para pengunjung lebih mudah untuk menggunakan dengan mudah

Cara pembuatan

Sekarang saatnya admin akan mulai menjabarkan bagaiamana sih caranya membuat menu dengan icon titik tiga disudut kanan atas pada blog di blogger

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkan nya diatas kode ]]></b:skin>

.__rah-dropdown-list-more{position:relative}.__rah-dropdown-toggle{padding:10px;border-radius:50%;}
.__rah-dropdown-toggle.is-open{
background:rgba(26,115,232,.04)!important;}.__rah-dropdown-toggle.is-open svg{fill:#1a73e8!important;}.__rah-dropdown-toggle:hover, .__rah-dropdown-toggle:focus{background:rgba(60,64,67,.08);}.__rah-dropdown-list-more svg {width:24px;height:24px;fill:#5f6368;}
.__rah-dropdown-list-more svg.circular {position:absolute;top:0;left:0;background:#fff;padding:10px;border-radius:50%;z-index1;}.__rah-dropdown-list-more-menu{position:absolute;top:50px;right:0;width:200px;background:#fff;border-radius:8px;box-shadow:0px 1px 2px 0px rgb(60 64 67 / 30%), 0px 2px 6px 2px rgb(60 64 67 / 15%);z-index:99;opacity:0;visibility:hidden;transform:scale(.8) translateZ(0);transform-origin:100% 0;transition:all .2s ease;}.__rah-dropdown-list-more-menu.is-open {opacity:1;visibility:visible;transform:scale(1) translateZ(0);}
.__rah-dropdown-list-more-menu h2{display:none;}.__rah-dropdown-list-more-menu ul {margin:0;padding:10px 0;display:block;}.__rah-dropdown-list-more-menu ul li {margin:0;list-style:none;}
.__rah-dropdown-list-more-menu ul li a {display:block;padding:10px 20px;font-size:14px;color:#5f6368;}.__rah-dropdown-list-more-menu ul li a:hover, .__rah-dropdown-list-more-menu ul li a.selected{background:rgba(60,64,67,.08);}.__rah-dropdown-list-more-menu ul li a.selected{font-weight:600;}
.dark-mode .__rah-dropdown-list-more button:hover, .dark-mode .__rah-dropdown-list-morebutton:focus{background:rgba(232,234,237,0.08);}.dark-mode .__rah-dropdown-list-more svg{fill:#e8eaed;}
.dark-mode .__rah-dropdown-toggle.is-open{background:rgb(138 180 248 / 4%)!important;}.dark-mode .__rah-dropdown-toggle.is-open svg{fill:#8ab4f8!important;
}.dark-mode .__rah-dropdown-list-more-menu{background:#303134;box-shadow:0 -1px 2px 0 rgb(0 0 0 / 30%), 0 -2px 6px 2px rgb(0 0 0 / 15%);}.dark-mode .__rah-dropdown-list-more-menu ul li a {
color:#e8eaed}.dark-mode .__rah-dropdown-list-more-menu ul li a:hover, .dark-mode .__rah-dropdown-list-more-menu ul li a.selected{background:rgba(232,234,237,0.08);}.js-ripple .ripple {pointer-events:none;color:transparent !important;position: absolute;left:0;overflow:hidden;border-radius: inherit;-webkit-transform: perspective(0);transform: perspective(0);top: 0;right: 0;bottom: 0;}.js-ripple .ripple span {position: absolute;background-color:#0000001a;border-radius: 50%;-webkit-transition: opacity 640ms ease 0s, -webkit-transform 640ms ease 0s;transition: opacity 640ms ease 0s, -webkit-transform 640ms ease 0s;
-o-transition: opacity 640ms ease 0s, transform 640ms ease 0s;transition: opacity 640ms ease 0s, transform 640ms ease 0s;transition: opacity 640ms ease 0s, transform 640ms ease 0s,-webkit-transform 640ms ease 0s;}

Info: Sobat juga bisa menggunakan tag <style> untuk menyimpan kode CSS diatas

Kode HTML

Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML dibawah ini kemudian kamu bisa meletakkannya diatas kode </header>

<div class="__rah-dropdown-list-more">
     <svg class="circular loadS" viewbox="25 25 50 50">
      <circle class="path" cx="50" cy="50" fill="none" r="20" stroke-miterlimit="10" stroke-width="5">
      </circle>
     </svg>
     <button aria-controls="dropdownList" aria-expanded="false" aria-haspopup="listbox" aria-label="Dropdown Toggle" class="__rah-dropdown-toggle js-ripple" data-toggle-class="is-open" data-toggle-escape="" data-toggle-outside="" data-toggle-target-next="" role="button" type="button">
      <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>
     </button>
     <div aria-labelledby="dropdown-list-more-menu" class="__rah-dropdown-list-more-menu">
      <div class="__rah-dropdown-list-more-wg section" id="dropdown-list-more-wg">
         <h2 class="title">
          Dropdown List More
         </h2>
        </div>
         <ul>
          <li>
           <a class="js-ripple" href="p/tentang.html">
            Tentang
           </a>
          </li>
          <li>
           <a class="js-ripple" href="p/hubungi-saya-contact-me.html">
            Hubungi
           </a>
          </li>
          <li>
           <a class="js-ripple" href="p/disclaimer-for-www.html">
            Ketentuan
           </a>
          </li>
          <li>
           <a class="js-ripple" href="p/policy-privacy-terms-of-service-for.html">
            Kebijakan Privasi
           </a>
          </li>
         </ul>
        </div>
       </div>

Info: Kamu bisa mengubah berbagai informasi menu didalam kode HTML diatas okay

Penjelasan Kode

Kode CSS diatas berfungsi untuk membuat dan merancang desain menu navigasi titik tiga tersebut, sedangkan untuk kode HTML nya kamu berfungsi untuk menampilkan menu navigasi titik tiganya