Switch CSS Mode Hacker Mode Blog use jQuery

Unik, lain dari yg lain dalam menulis artikel, gaya full stylish, keren bin macho memang tidak salah di blog ini tempatnya b-) Kembali Beben Koben si bloglang anu ganteng kalem tea akan berbagi trik cara membuat switch mode CSS template blog! Hohohoho pasti pada penasaran apa yg akan saya sampaikan ;)) Penemu tutorial switching the background-color to black and text color to green ialah master Nick Kwiatek. Beliau juga seorang Web & interaction designer + developer dari New York, NY. Tidak kalah gaya orang yang menemukan effect ASCII animation :-" Look here my bro http://nkwiatek.com/
Disana ada kalimat yang merupakan link tertuju ke Switch to hacker mode! Inilah yang akan Koben kupas bahas bagaimana trik cara membuat blog kita agar bisa berpenampilan seperti web/blog black theme with font greenlight looked :))

Karena menggunakan jQuery, jadi syarat mutlak sobat harus sudah mempunyai script tersebut di dalam template kalian<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Selanjutnya memasukan snippet script jQuery tepat diatas/sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
 ;(function() {
  var $body = $('body')
  $shm = $('#hackmode')
  $shm.mousedown(function(e) {
  $body.toggleClass('hackmode')
  })
 }())
})
//]]>
</script>

Kemudian cari kode ]]></b:skin> guna memasukan beberapa CSS inti untuk suksesnya trick ini :">

body.hackmode {
background: #000;
color: #FFF;
}
body.hackmode a {
color: #0F0;
}
body {
-webkit-transition: all 0.8s ease-in;
-moz-transition: all 0.8s ease-in;
-o-transition: all 0.8s ease-in;
transition: all 0.8s ease-in;
}

Selesai deh, SAVE. Kode default CSS switch to hacker mode diatas hanya inti agar template tampil dengan latar belakang (body) berwarna hitam, tulisan berwarna putih, dan link berwarna hijau terang!

Supaya macho penampilannya dengan apa² yg kita inginkan, maka sobat harus sedikit kreatif merangkai dengan kode² CSS yg ada pada template kalian masing² ;) Lihat screenshot berikut hasil praktek gue terapkan pada blog demo Embah Google.

Before	After

Perhatikan CSS coded baris pertama body.hackmode!!! Rangkai dengan kode CSS template kalian yg mengandung Unique-ID. Contoh penerapan pada blog embah google, Koben merangkai menjadi sedemikian rupa.body.hackmode,body.hackmode #header-wrapper,body.hackmode #content-wrapper,body.hackmode #footer,body.hackmode .sidebar h2,body.hackmode .post h1 {
background: #000;
color: #FFF;
}Rangkai unik id kode CSS template seperti contoh. Rangkai dengan membubuhkan terlebih dahulu body.hackmode diikuti unik id template.

Langkah terakhir buat syntax link pemanggil fungsi spt ini<a href="#" id="hackmode" title="">Switch Mode!</a>Jelas kode yg harus ditambahkan didalam link id="hackmode"? Simpan sesuai kebutuhan.

Good luck \m/