CSS Input Text dan Textarea

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 rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }

textarea { ... }

Nah, untuk kode yang terakhir itu digunakan untuk membuat tampilan warna textarea dan input text menjadi berubah ketika kursor sedang aktif di dalamnya.

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

CSS Textarea Focus

Pemahaman Dasar CSS Input Button dan Tag Button

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 dan active pada tombol-tombol tersebut agar tampak lebih agresif dan bikin nafsu para pengunjung untuk memencet. CSS lanjutannya adalah seperti ini:

/* warna background saat pointer di atasnya */ 
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover { 
  background-color:#A52A2A; 
} 

/* warna background saat tombol ditekan */ 
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active { 
  background-color:#000; 
}

Jika kedua event tersebut telah diterapkan, maka hasilnya akan tampak seperti ini:

Saat HOVER

Saat ACTIVE

Kita ketahui dari kode ini bahwa terdapat lima properti yang umum digunakan, yaitu:

• font: (mode tampilan (bold normal atau italic), ukuran font dan jenis font)
  
• background: (warna latar belakang)
  
• padding: (jarak antara batas terluar sebuah area dengan kontennya)
  
• color: (warna teks) dan
• border: ukuran garis tepi, tipe garis tepi dan warna garis tepi).
  

Dan ini adalah contoh kerangkanya:

<input value="Button" type="button"/> 
<input value="Submit" type="submit"/> 
<input value="Reset" type="reset"/> 
<button>Tag Button</button>

Tentu saja, itu semua hanya sebagian kecil dari penerapan CSS dalam tombol. Suatu saat mungkin kamu menginginkan tampilan-tampilan tombol yang lebih dahsyat seperti ini, ini, ini atau ini:





Tapi bagaimana?? (Klik di sini!)

Membuat Tampilan List/Daftar dengan Warna Berselingan secara Otomatis

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 nama li.kampret (maksudnya elemen <li> yang memiliki class "kampret") dan buat deklarasi pewarnaan yang berbeda (misalnya hijau tua):

ul.kuda-zebra  {font-weight:bold;}
.kuda-zebra li {color:darkRed;}
li.kampret     {color:darkGreen;}

Nah, sekarang, elemen listmu akan berubah warna menjadi seperti ini:

Menarik bukan? (Jawab: tidak juga)

Ada dua hal penting yang mempengaruhi perubahan warna ini, yaitu pada CSS li.kampret{ ... } dan dari JQuery itu sendiri.
Perhatikan kode ini: $('ul.kuda-zebra li:even').addClass('kampret');
Kode tersebut dibaca: Elemen <li> bernilai genap yang berada dalam elemen <ul> dengan class "kuda-zebra" akan mendapatkan jatah class "kampret" satu-satu secara otomatis.
Nah, karena kita sudah menentukan bahwa elemen <li> dengan class "kampret" akan mendapatkan tampilan berwarna hijau tua (li.kampret{color:darkGreen;}), maka berubahlah tampilan setiap elemen <li> bernilai genap secara otomatis.

:even artinya genap, :odd artinya ganjil

Sebenarnya, meskipun tidak memakai JQuery, kita juga bisa menerapkan sistem ini dengan menuliskannya secara manual seperti ini:

<ul class='kuda-zebra'>
     <li>Ganjil</li>
     <li class='kampret'>Genap</li>
     <li>Ganjil</li>
     <li class='kampret'>Genap</li>
     <li>Ganjil</li>
</ul>

Tapi bukankah itu adalah pekerjaan yang melelahkan? (Jawab:Hmmm...)
Asal tahu saja, penerapan sistem ini juga digunakan dalam Accordion TOC buatan Abu Farhan, juga pada menu navigasi JQuery yang warnanya cokelat itu.

Membuat Menu Navigasi dengan Efek Hover Menggulung

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 templatemu 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); 
    }); 
    $("#topnav li").hover(function() { 
        $(this).find("span").stop().animate({ 
            marginTop: "-40"}, 250);}, 
    function() { 
        $(this).find("span").stop().animate({ 
            marginTop: "0"}, 250); 
    }); 
});
//]]>
</script>

Jika sudah, sekarang kita masuk ke tahap pemodelan. Salin kode CSS ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

ul#topnav { 
  margin:30px; 
  padding:0; 
  list-style-type:none; 
  float:left; 
  font-size:1em; 
} 

ul#topnav li { 
  margin:0; 
  padding:0; 
  overflow:hidden; 
  float:left; 
  height:40px; 
} 

ul#topnav a, ul#topnav span { 
  padding:10px 20px; 
  float:left; 
  text-decoration:none; 
  color:#fff; 
  background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x; 
  text-transform:uppercase; 
  clear:both; 
  width:100%; 
  height:20px; 
  line-height:20px; 
} 

ul#topnav a { 
  color:#555; 
  background-position:left bottom; 
} 

ul#topnav span { 
  background-position:left top; 
}

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode di bawah ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul id='topnav'> 
    <li><a href='#'>Beranda</a></li> 
    <li><a href='#'>Profil</a></li> 
    <li><a href='#'>Portfolio</a></li> 
    <li><a href='#'>Komentar</a></li> 
    <li><a href='#'>Kontak</a></li> 
    <li><a href='#'>Bantuan</a></li> 
</ul>

Pelajari tentang beberapa alternatif peletakkan menu navigasi di sini »
Simpan templatemu.

Sumber: hatetepe://wewewe.sohtanaka.com

Menonaktifkan Klik-Kanan Mouse dengan Alert

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);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Ganti teks yang berwarna merah dengan kata-kata dahsyatmu.

Dropdown Navigasi Sederhana dengan JQuery

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 skrip yang kurang lebih tampak seperti 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();
    });
    $('ul.menu_awak li a').mouseover(function() {
        $(this).animate({
            fontSize: "14px",
            paddingLeft: "20px"
        }, 50);
    });
    $('ul.menu_awak li a').mouseout(function() {
        $(this).animate({
            fontSize: "12px",
            paddingLeft: "10px"
        }, 50);
    });
});
</script>

Lalu letakkan kode CSS ini di atas kode ]]></b:skin> atau </style>:

.menu_ndhas {
  display:block;
  border:1px solid #998675;
  margin:0;
  padding:0;
}
.menu_awak {
  width:184px;
  border-right:1px solid #998675;
  border-bottom:1px solid #998675;
  border-left:1px solid #998675;
  margin:0;
  padding:0;
  display:none;
}
.menu_awak li {background-color:#493e3b}
.menu_awak li.alt {background-color:#362f2d}
.menu_awak li a {
  display:block;
  color:white;
  text-decoration:none;
  padding:10px;
}
.menu_awak li a:hover {
  padding:15px 10px;
  font-weight:bold;
}

Nah, sekarang tinggal menempatkan kerangkanya saja di tempat yang kamu inginkan:

<img class="menu_ndhas" width="184" height="32" src="http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png"/>
<ul class="menu_awak">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
</ul>

Klik Simpan Template dan lihat hasilnya.

Prinsip dasar Pembuatan Slide Panel dengan JQuery

Sederhananya, beginilah tampilan awal sebuah slide panel (lihat demo) JQuery. Untuk membuatnya kita hanya membutuhkan empat langkah sederhana:
Pertama, carilah script yang kurang lebih tampak seperti ini dalam baris kode HTML templatemu:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Jika template blogmu ternyata sudah disertai dengan script ini, kamu tidak perlu menambahkannya dan bisa langsung mengarah ke langkah berikutnya. Tapi jika belum ada, salinlah dulu script di atas, kemudian letakkan di atas kode </head>.

Ke dua, salinlah script pengaturan efek, kecepatan efek dan objek-objek yang diseleksi ini tepat di bawah kode tadi:

<script type='text/javascript'>
$(document).ready(function() {
    $('.btn-slide').click(function() {
        $('#panel').slideToggle('slow');
    });
});
</script>

Ke tiga, salinlah kode pemodel ini, kemudian letakkan di atas kode </style> atau ]]></b:skin>

#panel {
  background:#754c24;
  max-height:200px;
  padding:10px;
  color:#ddd;
  overflow:auto;
  display:none;
}

.slide {
  margin:0;
  padding:0;
  border-top:4px solid #422410;
}

.btn-slide {
  cursor:pointer;
  text-align:center;
  padding:10px;
  margin:0 auto;
  display:block;
  font:bold 120%/100% Arial,Helvetica,sans-serif;
  color:#fff;
  background-color:#FF8C00;
}

Terakhir, kamu tinggal meletakkan kerangka objeknya saja di tempat yang kamu inginkan:

<div id='panel'>
    KONTEN SLIDE PANEL DI SINI
</div>
<div class='slide'><span class='btn-slide'>Tombol Slide Panel di Sini</span></div>

Sebagai contoh, letakkan kode tersebut di bawah <div id='sidebar-wrapper'> maka kamu akan menemukan panel tersebut di sidebar.
Klik Simpan Template dan lihat hasilnya.

Namun tentu saja, hasilnya tidak akan sama persis dengan gambar di atas, karena di sini Saya lebih menekankan kepada cara kerja objek ini, bukan pada bentuknya:

Lihat Demo

Untuk memahami cara kerjanya kita masuki tahap pemahaman lebih lanjut.

Pemahaman Lebih Lanjut:

Perhatikan kode ini:

<script type='text/javascript'>
$(document).ready(function() {
    $('.btn-slide').click(function(){
        $('#panel').slideToggle('slow');
    });
});
</script>

Fokuslah pada kode $('.btn-slide') dan $('#panel').
Kode $('.btn-slide') menunjukkan bahwa fungsi ini diterapkan untuk sebuah elemen objek yang memiliki class "btn-slide" (dalam hal ini adalah elemen <span class="btn-slide">Tombol Slide Panel di Sini</span>).
.click adalah event mouse yang diterapkan pada objek ".btn-slide".

#panel bisa dibilang adalah elemen yang akan dikenai efek JQuery berdasarkan event yang diberikan pada objek <span class="btn-slide">Tombol Slide Panel di Sini</span>.
Dalam hal ini, elemen yang dimaksud adalah:

<div id="panel">
    KONTEN SLIDE PANEL DI SINI
</div>

Intinya, .btn-slide adalah tombolnya dan #panel adalah pintunya. Ketika .btn-slide ditekan, maka #panel akan bereaksi sesuai dengan jenis aksinya (dalam hal ini adalah .slideToggle).

Satu lagi, cobalah untuk sekali-kali mengganti nilai slow dengan normal atau fast dalam kode .slideToggle('slow'); dan lihat perbedaan kecepatan pembukaan panelnya. ^_^



Begitulah kira-kira cara kerjanya. Sedangkan untuk pembuatan model-model objek atau yang lainnya bisa kamu sesuaikan dengan mengutak-atik CSSnya agar tampilannya bisa sesuai dengan template blogmu seperti ini:

Semuanya tergantung dari kreativitas kalian.