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

Mengubah warna address bar sesuai warna mode dark

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai mengenai bagaimana cara membuat address bar sesuai mode dark pada website

Info: Oke sobat Icloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Mode Dark

Siapa sih di antara pemilik website yang tidak mengetahui mode dark, atau tidak menggunakan mode dark di dalam websitenya, pastinya seluruh pemilik website kebanyakan menggunakan mode dark sebagai salah satu fitur yang harus di miliki dan di tampilkan kepada pengunjung website tentunya

Address Bar

Sedangakan pada fitur mode dark sendiri telah banyak perkembangan, ya selain tampilan dan warna dari mode dark tersebut tetapi kebanyakan mode dark yang di gunakan oleh website website tersebut hanya berfungsi pada halaman body websitenya aja, tidak dengan Address barnya

Info: So disini admin bakalan membahas mengenai bagaimana caranya membuat tampilan warna Address bar mengikuti warna dari mode dark

Warna Address Bar

Bagi kamu nih yang belum mengetahui apa itu Address bar? Address bar jika di artikan berarti alamat bar yang letaknya di atas dan sebagai tempat untuk menampilkan dari alamat website, itulah yang disebut dengan Address bar

Seperti yang kita ketahui bahwa untuk mengetahui warna Address bar browser semisal pada crhome di dalam website kita, silahkan kamu meng nonaktifkan mode dark dari pengaturan browser kemudian lihat Address bar ketika kamu menjelajahi suatu website, jika polos maka website tersebut tidak menggunakan warna custom pada Address bar tersebut

Contoh Tampilan

Jika kamu penasaran dengan bagaimana kah hasil jika warna Address bar mengikuti mode dark website kita, silahkan klik tombol di bawah ini untuk memeriksa nya

Penting: Kamu harus menonaktifkan mode dark browser, kemudian aktifkan mode dark pada website dan lihat hasilnya, bagaimana sobat keren kan hehehe

Cara pembuatan

Baiklah sekarang saatnya admin bakalan menjelaskan mengenai bagaimana caranya membuat atau mengubah warna Address bar sesuai mode dark yang telah di pasang di dalam website ataupun blog, silahkan baca dan pelajari artikle ini hingga selesai ok

Kode Javascript

Silahkan salin kode javascript di bawah ini, kode javascript nya masih ori alias belum di enskripsi jadi kamu bisa mengedit kode javascript nya jika terjadi kesalahan, kemudian letakkan di atas kode </body>

<script>
 /*<![CDATA[*/ document.querySelector('.isDrk').addEventListener('click', rahBrDrk);document.querySelector('.rahDrkBt').addEventListener('click', rahBrDrk);function rahBrDrk() {var cekdk = document.querySelector("#mainCont");if (cekdk.classList.contains('drK')) {document.querySelector('meta[name="theme-color"]').setAttribute("content", "#1e1e1e");document.querySelector('meta[name="msapplication-navbutton-color"]').setAttribute("content", "#1e1e1e");document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]').setAttribute("content", "#1e1e1e");}else {document.querySelector('meta[name="theme-color"]').setAttribute("content", "#de3535");document.querySelector('meta[name="msapplication-navbutton-color"]').setAttribute("content", "#de3535");document.querySelector('meta[name="apple-mobile-web-app-status-bar-style"]').setAttribute("content", "#de3535");}}rahBrDrk(); /*]]>*/
</script>

Info: Jika sudah kemydian simpan template dan terus pelajari artikel ini karena belum selesai proses pemasangan nya

Sesuaikan class

Didalam kode javascript tersebut terdapat class CSS rahDrkBt yang berfungsi untuk mengaktifkan fitur mode dark pada bar Address bersamaan tombol untuk mengaktifkan mode darknya, perhatikan kode dibawah ini

<span data-text='Mode Malam' onclick='darkMode()'>
 <i class='check'>
 </i>
</span>

Info: Kode di atas adalah tombol untuk mengaktifkan mode dark namun belum di tambahakam class CSS rahDrkBt untuk mengaktifkan mode dark pada Address bar

Nah di bawah ini adalah contoh ketika tombol untuk mengaktifkan mode dark pada Address bar telah di tambahkan

<span class='rahDrkBt' data-text='Mode Malam' onclick='darkMode()'>
 <i class='check'>
 </i>
</span>

Info: So jadi intinya silahkan kamu tambahkan class rahDrkBt pada setiap tombol yang di gunakan untuk mengaktifkan mode dark

Penjelasan

Baiklah sobat icloudzer jika saat kamu memasang Script untuk membuat address bar support dark mode tersebut namun tidak berfungsi sebaiknya kamu periksa lagi kode javascript nya apakah sudah sesuai dengan setiap class di dalam template mu, karena setiap template terdapat class yang berbeda beda, misal kode #1e1e1e adalah warna mode dark, sedangkan #de3535 adalah warna Address bar ketika mode dark nonaktif untuk lebih lengkapnya silahkan lihat table di bawah ini

No Nama Fungsi
1 drK Fungsi dari kode drK adalah sebuah class untuk mengaktifkan fungsi mode dark
2 #mainCont Fungsi dari kode #mainCont adalah class yang biasanya diletakkan pada tag <body
3 rahBrDrk Adalah kode fungsi untuk menjalankan script
4 .rahDrkBt Adalah kode untuk mengaktifkan mode dark pada Address bar

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.