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
