Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat menu navigasi titik tiga (In header) diblogger

views

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

Contoh Tampilan

Baiklah admin akan memberikan sebuah contoh tampilan dari menu titik tiga ini, kamu bisa melihat contoh tampilannya seperti berikut ini

Info: Bagaiamana sobat IcloudZer dengan contoh tampilan diatas menarik serta keren bukan

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
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.