Tutorial Trik Bloger kali ini akan membahas tentang bagai mana cara membuat onblur onfocus. Sebelumnya kita harus tahu dulu tentang "Onblur Onfocus" pengertianya adalah sebuah teks atau kalimat yang berada didalam kotak search atau sejenisnya yang akan menghilang jika kita hendak mengisi kotak tersebut.
Contoh Onfocus Onblur pada kotak search
Gambar diatas adalah contoh cara kerja onblur onfocus tentunya versi Trik Bloger. Teks atau kalimat didalamnya dapat kamu ganti dengan kata - kata sesukamu.
Apakah sampai disini kamu sudah mengetahui apakah onblur onfocus dan cara kerjanya.? Jika sudah, mari kita lanjutkan kembali, bagaimana cara membuat onblur onfocus di kotak search atau sejenisnya.
Langkahnya yaitu sangat mudah, kita hanya menyisipkan script onblur onfocus di dalam scrip kolom search tadi.
Contoh Menyisipkan kode :
<form action="http://maniaktrik.blogspot.com/search" id="searchform" method="get" name="searchform"><div class="search"><input onfocus="if(this.value =='cari artikel..'){this.value ='';}" value="cari artikel.." name="q" onblur="if(this.value ==''){this.value ='cari artikel..';}" type="text"/><br/><input type="submit" name="submit" value="search..."></div></form>kode diatas hasilnya adalah seperti berikut :
Keterangan Warna :
Untuk template anda yang sudah memiliki kotak search bawaan, anda tinggal menyisipkan kode berwarna biru dan hijau letak menyisipkannya anda cari sendiri di template blog anda. Jika bingung silahkan tanyakan pada kolom komentar dibawah postingan. Warna hijau bisa anda rubah sesuai keinginan anda, yang penting ketiganya haruslah sama.
Dan untuk template yang belum mempunyai kotak search, silahkan copy semua kode script diatas, dan letakkan dimana anda ingin meletakannya. warna merah ganti saja dengan url blog kamu.
Sekali lagi, jika ada masalah atau pertanyaan tentang posting diatas, silahkan hubungi admin lewat kolom komentar di bawah postingan ini.
1. Klik select profile --> pilih Name/URL
2. Isi nama kamu dan Kosongkan URL atau isi dengan alamat fb kamu
3. Klik Lanjutkan
4. Ketik komentar kmau
5. Masukan kode yang muncul dan Klik Publish
Posting Komentar