Praktikum PC

Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya. Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered list ataupun unordered list ): <ul class='kuda-zebra'> <li>Andai Saja</li> <li>Engkau Tahu</li> <li>Betapa Aku</li> <li>Kebelet Pipis</li> <li>Maukah...</li> </ul> Di sini kita memakai <ul> atau unordered list . Sekarang kita buat kode pemodel sederhana untuk bahan praktek tersebut seperti ini: ul.kuda-zebra {font-weight:bold;} .kuda-zebra li {color:darkRed;} Maka nantinya hasilnya akan tampak seperti ini: Sekarang kita terapkan sistem JQuery sederhana seperti ini: $(document).ready(function() { $('ul.kuda-zebra li:even').addClass('kampret'); }); Lalu tambahkan sebuah pemodel baru dengan

Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak bisa menyesuaikan diri dengan tampilan blogmu seperti ini: Tanpa CSS Masalahnya, mungkin kalian belum tahu seperti apa format CSS untuk tampilan button ini. Nah, di sini Saya akan menjelaskan tentang teknik dasar dalam mengubah tampilan button di blogmu. Ini adalah contoh CSS sebuah input button dan tag button dasar (di sini Saya menyamakan tampilan antara button , submit dan reset agar lebih efisien): input[type="button"], input[type="submit"], input[type="reset"], button { font:normal 0.9em Arial,Sans-Serif; background-color:#4169E1; border:1px solid #B7B7B7; padding:2px 7px; color:#fff; } Letakkan saja CSS tersebut di atas kode </style> atau ]]></b:skin> , maka tampilan tombol-tombol di blogmu akan berubah seperti ini: Dengan CSS Namun itu saja sepertinya masih kurang. Kita juga perlu menerapkan event hover

Satu lagi penerapan CSS dalam elemen-elemen input . Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea . Ini adalah contoh tampilan input text dan textarea biasa: Tanpa CSS Dan ini adalah CSS untuk mengubah tampilannya: input[type="text"] { font:normal 12px Verdana,Sans-Serif; border:1px solid #dcdcdc; background-color:#fafafa; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; padding:2px; } textarea { font:bold 12px Verdana,Sans-Serif; border:5px solid #dcdcdc; background-color:#fafafa; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; padding:2px; } input[type="text"]:focus, textarea:focus { background-color:#FFE4B5; } Letakkan kode tersebut di atas </style> atau ]]></b:skin> maka tampilannya akan berubah seperti ini: Dengan CSS Dari penampilan kode ini Saya

Sebelum membuat menu ini, Saya beri gambarannya terlebih dahulu: Lihat Demo Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML . Lalu cari script yang tampak seperti ini: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> Jika template mu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head> Setelah itu salin script ini, lalu letakkan tepat di bawah script tadi: <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("#topnav li").prepend("<span></span>"); $("#topnav li").each(function() { var linkText = $(this).find("a").html(); $(this).find("span").show().html(linkText); }); $(&

Itu adalah pesan yang akan muncul jika kamu melakukan klik-kanan pada halaman yang telah dilengkapi script ini. Fungsinya tentu saja, untuk membuat seorang pengunjung menjadi sedikit kerepotan ketika hendak menyalin sesuatu di blog kita. Dan secara otomatis, jendela peringatan ini akan mencegah para pengunjung untuk menyalin sesuatu di halamanmu. Meskipun sebenarnya kita juga bisa menggunakan perintah Edit » Copy atau cukup menekan tombol CTRL+C di papan kunci, tapi paling tidak cara ini bisa sedikit memberi peringatan bahwa di sini ada monster berbahaya (???) Salin kode ini kemudian letakkan dalam sebuah elemen halaman HTML/JavaScript , kemudian simpan: <script type="text/Javascript"> // Sumber: http://dynamicdrive.com var message=" Hayooo...!!!!! "; function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message

Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini ). Di sini kita lebih memfokuskan kepada penerapan <ul> sebagai objek terpicu, sementara <img> sebagai pemicunya ( lihat demo ). Untuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki salah satu dari script ini: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> Jika sudah ketemu, kita langsung masuk ke langkah dua (jika tidak ketemu, salinlah kode tersebut dan letakkan di atas </head> ). Berikutnya salin kode ini, kemudian letakkan di bawah kode tadi: <script type="text/javascript"> $(document).ready(function() { $('ul.menu_awak li:even').addClass("alt"); $('.menu_ndhas').click(function () { $('ul.menu_awak').slideToggle('normal'); }); $('ul.menu_awak li a').mouseover(fu