Saturday, 2 November 2013

1 Membuat Pop-up Window di Browser dengan JavaScript




Posting kali ini saya akan membahas tentang cara Membuat Pop-up Window di Browser dengan JavaScript. Pop-up window atau jendela Pop-up merupakan jendela yang muncul secara otomatis di browser dan biasanya ukuran jendela Pop-up bervariasi, namun biasanya tidak menutupi keseluruhan layar. Script Pop-up bisa diletakkan di dalam tombol dan sebuah link, berikut ini langkah-langkah pembuatannya :

  • Buat sebuah file html ataupun php, lalu masukkan Script berikut ini (Klik view plain agar lebih mudah menyalin scriptnya) :
<!-- Tombol Pop-up -->
<input type="button" name="popup" value="Ini Contoh Tombol Pop-up" onclick="Javascript:window.open('http://serandal.blogspot.com/', 
'Contoh Window','status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,width=270,height=235');" />

<!-- Link Pop-up -->
<a href="#" onclick="javascript:void window.open('http://serandal.blogspot.com','Contoh Window',
'width=270px,height=235px,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0');
return false;">Ini Contoh Link Pop-up</a>
  • Simpan.

  • Lihat hasilnya di browser
  • Klik tombol atau link yang ada, lalu lihat hasilnya
  • Live Demo
  • Sekian


Description: Membuat Pop-up Window di Browser dengan JavaScript Rating: 4.5 Reviewer: Cyserz Rouly - ItemReviewed: Membuat Pop-up Window di Browser dengan JavaScript

Thursday, 24 October 2013

0 Menghitung jumlah karakter dengan JavaScript




Posting serandal kali ini akan membahas tentang cara menghitung jumlah karakter menggunakan javascript. Output yang dihasilkan nantinya adalah jumlah dari karakter yang kita inputkan ke dalam textfield.
Berikut adalah langkah-langkah pembuatannya :
  • Buka text editor seperti notepad, notepad++ atau dreamweaver.
  • Copy lalu paste kode berikut ini ke dalam text editor : 
<html>
<head>
<title>Belajar Javascript | Serandal</title>
<script language='javascript'>
function HitungText(){
var Teks = document.forminput.textinput.value.length;
var total = document.getElementById('hasil');
total.innerHTML = Teks + ' Karakter';
}

</script>
</head>
<body>
<center>
<form name='forminput'>
<input type='text' size='30' name='textinput' onKeyUp='HitungText()'><span align='center' id='hasil'>
0 karakter
</span>
</form>
</center>
</body>
</html>
  • Simpan dengan nama counter.html
  • Hasilnya kurang lebih seperti di bawah ini, silahkan ketik apapun di dalam textfield yang ada di bawah ini :
0 karakter
  • Sekian, silahkan tinggalkan komentar jika ada yang ingin ditanyakan.


Description: Menghitung jumlah karakter dengan JavaScript Rating: 4.5 Reviewer: Cyserz Rouly - ItemReviewed: Menghitung jumlah karakter dengan JavaScript

Saturday, 20 July 2013

0 Memodifikasi Tombol dengan CSS




Postingan kali ini akan membahas tentang cara merubah atau memodifikasi tombol dengan CSS. Button atau tombol untuk website bisa kita atur sesuai selera hanya dengan menggunakan CSS. Mulai dari backround tombol, font pada tombol, border pada tombol dan lain sebagainya yang bisa kita format melalui CSS.

Contoh tombol yang standar : 

Dengan CSS kita bisa merubah tombol di atas menjadi seperti di bawah ini :


Berikut ini adalah scriptnya :
<html>
<head>
<title>Modifikasi Tombol</title>
</head>
<body>
<input type="submit" name="submit" value="Kirim !!!" style="width:150px; height:30px; background-color:#000000; color:#00FF00; border:2px solid #00ff00;" />
</body>
</html>

atau bisa juga seperti di bawah ini :
<html>
<head>
<title>Modifikasi Tombol</title>
<style type="text/css">
.tombol{
 width:150px; 
 height:30px; 
 background-color:#000000; 
 color:#00FF00; 
 border:2px solid #00ff00;
}
</style>
</head>
<body>
<input type="submit" name="submit" value="Kirim !!!" class="tombol"/>
</body>
</html>
Silahkan dikembangkan lagi sesuai dengan kreativitas Anda masing-masing agar hasilnya sesuai dengan yang Anda inginkan. Semoga bermanfaat.



Description: Memodifikasi Tombol dengan CSS Rating: 4.5 Reviewer: Cyserz Rouly - ItemReviewed: Memodifikasi Tombol dengan CSS
×