Skip to main content

Cara memasang tombol Toggle "dark mode" khusus ke navigasi template blogger

gradasi warna
Trik ini adalah untuk membuat blog menjadi memiliki opsi "Dark Mode".

Baiklah mari kita mulai memasangnya:
Temukan kode deklarasi pembuatan navigasi menu template sobat terlebih dahulu, misalnya pada template buatan editblogtema kode navigasinya adalah sebagai berikut:
<style>
#editblogmenu{width:100%;margin:0 auto;height:50px;position: fixed; z-index:99; background:#3366FF;}
#editblogmenu ul,#editblogmenu li{margin:0;padding:0;list-style:none;}
#editblogmenu ul{height:45px}
#editblogmenu li{float:left;display:inline;position:relative;font-family:&#39;trebuchet MS&#39;;font-size:16px;
...dst...dst...</style>
Perhatikan kode yang saya sorot warna kuning itu akan kita jadikan sebagai penghubung ke tombol pengalih (toggle) yang akan kita buat dan tentu saja setiap template memiliki kode, sintaks dan deklarasi kode kode yang berbeda dalam pembuatan menu navigasinya, sobat tinggal menemukannya saja nanti.

Jadi masuk kepengaturan blog:
1. PASANG CSS STYLE
  1. Pilih tema
  2. Pilih edit HTML
  3. Pada kotak editor HTML blogger yang telah terbuka cari kode </head> dan letakan kode berikut dibawahnya:
<style>.dark-mode{width:66px}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:&#39;&#39;}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
#editblogmenu {background-color:#1E90FF;color:#222;} /* ini kode default */
.dark #editblogmenu{background:-webkit-linear-gradient(right,#FF1493 30%,#1E90FF 65%);/color:#000;}
</style>
Perhatikan kode #editblogtema sedangkan kode didalam kurung {background:-webkit-linear-gradient(right,#FF1493 30%,#1E90FF 65%);/color:#000;} adalah kode warna gradient yang saya buat untuk mengalihkan warna bar navigasi diatas header blog agar menjadi berwana gradient. Semua untaian kode diatas hanyalah CSS style pembentuk.

2. PASANG JavaScript:
Langkah selanjutnya adalah masih dalam pengaturan editor HTML, cari kode </body> dan letakan kode JavaScript berikut tepat diatasnya:
<script>
//<![CDATA[
function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('43085dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('43085dark','false')}}function dark(){localStorage.getItem('43085dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('43085auto')=='true'){auto()}else{localStorage.getItem('43085dark')==null?auto():dark()}function toggle(){localStorage.setItem('43085auto',localStorage.getItem('43085auto')=='true'?'false':'true');localStorage.getItem('43085auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('43085auto');localStorage.setItem('43085dark',localStorage.getItem('43085dark')=='true'?'false':'true');dark()}
//]]>
</script>
3. PASANG HTML
Setelah kode JavaScript terpasang, kini tinggal memasang kode HTML pembentuk tombol Togglenya, cari kode </header> tepat diatasnya akan terlihat kode berikut:
       <nav role='navigation'>
</nav>
</div>
</div>
</header>
Letakan kode berikut tepat dibawah kode <nav role='navigation'>
<div class='dark-mode'>
Klik:
<button class='mode' onclick='mode()' type='button'/>
</div>
Jadi akan terlihat seperti berikut:
 <nav role='navigation'>
<div class='dark-mode'>
Klik:
<button class='mode' onclick='mode()' type='button'/>
</div>
Klik:<button class='mode' onclick='mode()' type='button'/></div></nav>
</div>
</div>
</header>
Lalu Save template.





www.editblogtema.net

Comments

  1. I am so dumb about computer.
    but it's very interesting, thank you :)

    ReplyDelete
    Replies
    1. Sy tadinya juga demikian, seiring waktu then I am falling in love to program languages and everything about it.

      Start to understand every single word it said to me

      Delete
    2. loh kok koment mas campur pakai bahasa indo juga, ngerti ngak yah di bule-nya,hahaha.

      Delete
  2. Bisa juga tips seperti itu. Jadi bisa nih ngakali mode malamnya..

    ReplyDelete
    Replies
    1. desain seharusnya memiliki opsi tidak terbatas

      Delete
  3. salut saya dng Mas ini krn pandai tentang kode, ohy mas utk template blog saya, gimana caranya agar ada halaman kontak,dll di bagian footer ? Mohon pencerahannya mas.🙏🙏🙏

    ReplyDelete
    Replies
    1. Template asikpedia masih menggunakan layout versi ke 2 blogger, jadi cocok menggunakan footer feedburner, saya tulis di blog ini dengan Judul:
      CARA MEMBUAT WIDGET FOOTER PADA BLOG LAYOUT VERSI 2

      Delete
  4. Makasih ilmunya om, jadi tau soal mengubah toggle instan secara mudah

    ReplyDelete
  5. Aku udah coba tombol diatas untuk coba demonya, tapi kok belum bisa ya? atau browser ku yang bermasalah mungkin.

    ReplyDelete
    Replies
    1. Delonif Vanesta: Jika pada browser tombol blog bekerja pada blog ini, itu artinya blog Delonif Vanesta memiliki struktur desain berbeda, dan juga harus teliti ID widget mana yang dipilih untuk "digelapkan"

      Butuh kesabaran dan ketelitian memang jika bermain dengan HTML-CSS

      Delete
  6. Pengin banget punya dark mode buat bloh ...tapi keder ngerjain kodenya.
    Sedih 😓

    ReplyDelete

Post a Comment

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

CARA MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah katika terdapat problem yang muncul setelah template telah di kustom dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki. 

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list…

GOOGLE PAGERANK vs ALEXA

GOOGLE PAGERANK
Kalau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google.
Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya.

Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar!

MASIH PENTINGKAH GOOGLE PAGERANK ITU?

Ada yang berpendapat Google pagerank masih penting, tetapi tidak sedikit pak…

DOWNLOAD TEMPLATE BLOGGER CONTEMPO ORIGINAL STYLISH

Ada permintaan yang harus saya penuhi, yakni bagaimana jika saya membuat template sederhana yang tidak perlu edit HTML pada saat merubah menu navigasinya? Dan template itu harus contempo. Saya pikir itu mudah, basisnya contempo, yang tidak di inginkan oleh pengguna adalah tampilannya tetap sama dengan contempo asli.
Ya mengapa tidak? Kita dapat memanfaatkan halaman statis atau widget page, atau mengatur perintah CSS untuk memanipulasi widget link blogger menjadi widget menu navigasi. Akan tetapi saya pikir pikir widget halaman atau page lebih mudah di bentuk karena dalam setiap template terbaru ID-nya adalah sama: Pagelist. Dan saya tidak perlu menulis kode CSS untuk widget link Blogger.
Hasilnya adalah kalian tidak perlu mengedit menu navigasi blog melalui cara edit HTML lagi. Cukup melalui dasbor blogger dengan memilih tataletak. Lalu menghapus dan menambahkan judul menu berikut link yang menyertainya berdasarkan label postingan kalian.
CARA MENGEDIT MENU NAVIGASI CONTEMPO ORIGINAL ST…

MARI MENYULAP TEMPLATE BLOGSPOT BAWAAN EMPORIO

4 varianTemplate terbaru milik blogspot blogger memiliki banyak sekali kelebihan: Kemudahan mengedit dan memkustomisasi template, kaya dengan style dan warna. Cobalah! Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lai…

MENGENAL KODE WARNA CSS

Sering di sebut juga dengan kode warna HTML itu terjadi karena orang menafsirkan kode warna tersebut pada saat di terapkan ke dalam HTML.
 Padahal sejatinya kode warna CSS dan HTML sama saja hanya berbeda dalam penerapannya dan sebenarnya pewarnaan CSS mengikuti matode matode berikut:
Kode Warna Hex  (Hexadecimal)Kode Warna RGBKode Warna RGBAKode Warna HSLKode Warna HSLA Dll Contoh cara penerapannya:
<style>
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;} Contoh kode warna dengan hanya menuliskannya dengan sintaks biasa:
#p6 {background-color:indigo;}  Dan cara penulisan kode warna RGB:
#p7 {background-color:rgb(249, 0, 255);}
</style> Kode diatas jika di tuliskan ke dalam blogger dengan opsi HTML (bukan compose) Secara visual akan terlihat sebagai berikut: Warna dengan kode HEX:
Red Green Blue Yellow Cerise Indigo Fuchsia
Dengan terus belajar kalian akan memaham…

CARA MUDAH MEMBUAT TOMBOL WIDGET CHATTING WHATSAPP DI BLOGGER

Ada dua cara yang yang ingin kami bagikan dan sangat mudah dilakukan untuk memasang tombol chat WA di blog. Matode pemasangannya juga sama: Masuk ke pengaturan atau dasbor blog>Tataletak>Tambahkan widget>pilih tambahkan HTML/Javascript.
Pemasangan kode ini memerlukan link awsome untuk menampilkan ikon Whatsapp tanpa link awsome maka link whatsapp tidak bisa menampilkan ikon atau image daripada ikon whatsapp tersebut.

Cara pertama: Masuk ke pengaturan/dasbor blogger pilih Tema>dan pilih editHTML cari kode </head> (untuk mempermudah pencarian tekan ctrl+f pada keyboard) lalu kopi-paste kode dibawah ini dan letakan sebelum atau diatas kode </head> tadi:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Cara kedua: sertakan saja langsung link awsome diatas kedalam kotak dialog widget HTM/javascript pada saat pemasangan kodenya, contoh:

1. Layout > Add a Gadget
2. Pilih HTML/JavaSc…

KABAR BURUK BAGI PENJIPLAK KONTEN EFEKNYA SANGAT BURUK BAGI DIRI SENDIRI

Pada site adedansasa.com ada sebuah artikel yang mendapatkan pengunjung luarbiasa, jumlahnya telah menembus lebih seratus ribuan pengunjung. Namun artikel tersebut telah di jiplak habis habisan oleh blog blog lain yang sebenarnya berpotensi jadi blog hebat asalkan mau bekerja keras.
Artika tersebut berjudul: Tahukah kamu bedanya iPhone bekas Jepang...
Benar benar di jiplak habis dan posisi artikel jiplakannya sudah menempati posisi kedua pada mesin telusur, saya ikuti terus sampai akhirnya situs itu sudah tidak bisa dibuka lagi alias di banned padahal samasekali tidak saya laporkan, lho. Lihat posisinya:

Ya artikel itu berada di posisi kedua setelah adedansasa.com. Sebenarnya saya bersikap ora op opo saja. Namun ternyata tidak dapat bertahan lama karena algoritma Google mulai bekerja dengan baik. Yang anehnya posisi itu tetap disana walau halamannya sudah tidak bisa di akses lagi.
HATI HATI MENYALIN DAN MENJIPLAK TULISAN ORANG LAIN
Bukan hanya perkara cara Google menghukum, akan tetapi leb…
2018 - © The EditblogTema