Home Profile Sitemap Contact Us
Join KS Page Follow KS Page Read KS RSS Mobile Version
Home » Blog » Web Design » Membuat Style Web Bergonta Ganti Sesuai Pilihan

Membuat Style Web Bergonta Ganti Sesuai Pilihan

Update: Senin, 10 Oktober 2011 - 20:55:03 WIB - In: Web Design - Dilihat: 1.358 kali

tidak ada bintang comment 0 suka 87 tidak suka 87increase font decrease font share via addthis
Membuat Style Web Bergonta Ganti Sesuai Pilihan

Bagi anda yang mengunjungi web kiwilstudio.com anda akan menemukan panel khusus yang berada di sebelah kiri atas ( 5 kotak yang berwarna ) yang apabila diklik salah satu kotak, maka tampilan web akan berubah.

Oke sekarang atas request dari sateparakank yang ditulis di shoutbox kiwilstudio.com maka pada kesempatan kali ini kiwilstudio.com akan berbagi bagimana cara membuatnya dalam versi yang sederhana sehingga bisa diketahui bagaimana logikanya dan scriptnya.

Tanpa panjang kata lagi berikut adalah langkah-langkahnya yaitu :

  1. Ketik script dibawah ini kemudian simpan dengan nama style.css :
    body{background:#777}
  2. Ketik script dibawah ini kemudian simpan dengan nama style2.css :
    body{background:#999}
  3. Download file jquery dengan mengklik kanan link berkut kemudian klik Save Link As....., kemudian simpan dengan nama jquery.js
  4. Ketik kode dibawah ini kemudian dimpan dengan nama cookies_style.js :
    jQuery.cookie = function(name, value, options) {
        if (typeof value != &undefined&) { // name and value given, set cookie
            options = options || {};
            if (value === null) {
                value = &&;
                options.expires = -1;
            }
            var expires = &&;
            if (options.expires  (typeof options.expires == &number& || options.expires.toUTCString)) {
                var date;
                if (typeof options.expires == &number&) {
                    date = new Date();
                    date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1));
                } else {
                    date = options.expires;
                }
                expires = &; expires=& + date.toUTCString(); // use expires attribute, max-age is not supported by IE
            }
            // CAUTION: Needed to parenthesize options.path and options.domain
            // in the following expressions, otherwise they evaluate to undefined
            // in the packed version for some reason...
            var path = options.path ? &; path=& + (options.path) : &&;
            var domain = options.domain ? &; domain=& + (options.domain) : &&;
            var secure = options.secure ? &; secure& : &&;
            document.cookie = [name, &=&, encodeURIComponent(value), expires, path, domain, secure].join(&&);
        } else { // only name given, get cookie
            var cookieValue = null;
            if (document.cookie  document.cookie != &&) {
                var cookies = document.cookie.split(&;&);
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + &=&)) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    };
  5. Ketik script dibawah ini kemudian simpan dengan nama index.html :

    < html>
    < head>
    < title>Test ganti style
    < link href=style.css rel=stylesheet media=screen, print, handheld type=text/css/>
    < script type=text/javascript language=javascript src=jquery.js>
    < script language=javascript type=text/javascript>
    if($.cookie(css)) {
     $(link).attr(href,$.cookie(css));
    }
    $(document).ready(function() {
     $(#nav a).click(function() {
     $(link).attr(href,$(this).attr(&rel&));
     $.cookie(css,$(this).attr(&rel&), {expires: 365, path: &/&});
     return false;
     });
    });
    < /script>
    
    < /head>
    < body>
    < div id=&nav& style=&width:90%;padding:5px;&>
    < a href=&#& alt=&777& rel=&style.css&/>Style 1 
    < a href=&#& alt=&999& rel=&style2.css&/>Style 2
    < /div>
    < /body>
    < /html>
    

Sekarang jalankan script index.html, Jika berhasil maka akan tampil 2 link text yaitu Style 1 dan Style 2 jika link tersebut diklik maka warna background akan berubah sesuai dengan link yang diklik.

NB : Script ini tidak support dengan browser IE6 kebawah, maka script index.html saya kasih tanda

< ![if !IE]> 

sehingga pada saat dijalankan di browser IE 2 link text yaitu Style 1 dan Style 2 tidak muncul.

Selamat mencoba :)

Baca Juga
Komentar

Jadilah orang pertama yang menulis komentar dengan mengisi form dibawah ini

Nama
Website
Email
Rating 1 2 3 4 5
Komentar
Key Codekode captcha
Kode
 
Costumer Service
CS KS 1
Chat yahoo messenger with CS KS 1
Wilda Satya Perdana (Owner)
Phone: +62 898-1390-966
E-Mail: Ke Email
FB: Klik Disini
Chat yahoo messenger with Wilda Satya Perdana (Owner)
We Accept
BANK MANDIRI CAB BATU - MALANG
BANK MANDIRI CAB BATU - MALANG
Rek: 1440011320709
a/n: WILDA SATYA PERDANA
Pesan Domain
Silahkan masukkan nama domain yang anda pesan pada form diatas untuk di cek statusnya ada (Available) atau sudah diambil (Taken)

Belum Punya Hosting ? Atau Mau Cari Hosting? [Cek disini]