Baiklah sobat mungkin saja tutorial ini sudah tidak asing lagi bagi kamu, yaitu cara membuat Night Mode dan Light Mode di Blogspot. Cara membuatnya sebenarnya mudah saja, asalkan sobat tahu bagian-bagian template sobat. Ini hampir sama dengan tombol after dan before yang pernah dibagikan waktu lalu, apa yang terjadi sebelum klik dan sesudah klik. Disini, fungsi jQuery yang sangat berperan dalam tombol widget night mode ini, nah berikut adalah contoh cara membuatnya.

membuat Night Mode dan Light Mode di Blogger Blogspot


Langkah-langkah membuat efek Night Mode dan Light Mode

Letakan kode external jquery di bawah ini,diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Kemudian lanjutkan dengan meletakan kode jQuery diatas kode </body> atau kode  </head>
<script>
//<![CDATA[
$('.darklight').toggle(function() {
    $(this).text('LIGHT MODE !');
 $("body").toggleClass('darkstyle');
}, function() {
    $(this).text(' DARK MODE! ');
 $("body").toggleClass('darkstyle');
});
//]]>
</script>
Selanjutnya adalah css yang akan kamu pakai dan edit bagian-bagian mana saja yang akan berubah jika tobol Dark/light mode di klik. Kode dibawah ini bisa kamu letakan diatas ]]></b:skin> atau </style> ( asalkan kode <style> dan </style dibawah ini dihapus)
<style>
/* CSS Night Mode ketika tombol di Klik */
.darkstyle { background:#444; color:#ccc;}
/* Contoh CSS yang di tambahan untuk Elemen lain */
.darkstyle #outer-wrapper { background-color:#333;}
</style>
Kamu dapat menambahkan kode css bagian mana saja yang akan berubah saat tombol Dark/Light Mode di klik. Contoh di atas, background pada elemen #outer-wrapper akan berubah saat tombol ini di klik. Kamu dapat tambahkan elemen lain di atas kode </style> pada kode diatas tadi.
Untuk tombolnya sobat dapat mencoba tombol dibawah ini ( bisa diletakan di postingan, di navigasi atau dimana saja keinginan kamu):
<button class="darklight">DARK MODE</button>
Nah sekian tutorial dasar membuat Night Mode dan Light Mode di Blogspot Blog semoga artikel ini bermanfaat untuk kamu.
0 Komentar untuk "Cara Membuat Night Mode dan Light Mode di Blog"