I made this widget at MyFlashFetish.com.

Rabu, 06 April 2011

Membuat Alert Massage Box pada Blogger

Posted by viia-adadisini |
      Message box merupakan aksi pesan sebuah peringatan yang di lakukan ketika kita melakukan aksi tertentu di dalam sebuah blog atau website. aksi yang di maksud bisa berupa berbagai macam hal seperti di antaranya onLoad (ketika pengunjung me load halaman), onClick (ketika pengunjung mengklik sesuatu), onChange (ketika user merubah sesuatu pada sebuah inputan).
      Disini saya akan mempraktekan di blog tester saya di blogspot, karena di blogspot kita lebih leluasa untuk memasukan script-script yang bagus .
      Ok, yang pertama harus anda lakukan tentu saja login ke blog, atau klo mau coba di website tinggal otak atik script sourcenya aja.



1

setelah itu masuk ke menu “Rancangan” lalu pilih menu “edit HTML

2

Setelah masuk “edit HTML” di bagian “Edit Template” anda akan menemukan script yang anda gunakan di blog anda, jangan dibikin pusing dulu jika melihat script itu, anda cukup mencari bagian tag </head> aja.


3
4

di bagian atas (sebelum) tag </head> itulah kita akan taruh scriptnya nanti
setelah ketemu, yuk kita pelajari sedikit script javascript yang akan di gunakan untuk membuat alert.
<script type='text/javascript'> 
  //aksi script
</script>

script di atas adalah script awal untuk menginisialisasikan script yang akan kita gunakan adalah tipe script javascript. Script di awali dan di akhiri dengan  <script>…</script>. Nantinya kita bisa melakukan aksi script javascript di dalam script ini.  sekarang kita tambahkan alert sederhana di bagian aksi script tersebut, maka jadi akan seperti ini :
<script type='text/javascript'>
  alert("Selamat datang di blog saya…!") </script>

script tersebut akan menampilkan alert dengan tulisan “Selamat Datang di blog saya” seperti ini :

image

setelah itu kita tambahkan lagi sedikit script untuk alert inputan field, misalnya nama anda adit, sbb.
<script type='text/javascript'>
  alert("Selamat datang di blog saya…!");

  var yourName = prompt("Nama saya adit, Siapa nama anda ", ""); </script>
ok di dalam script tersebut kita buat variable “yourName” untuk menampung inputan nama user, di mana variable tersebut dapat kita gunakan suatu saat. script ini akan menampilkan tambahan alert ketika user mengklik ok di alert yang pertama seperti ini.

image

setelah itu kita gunakan variable “yourName” dari inputan user untuk kita panggil namanya, agar blog atau website kita lebih keliahatan interaktif
<script type=’text/javascript’>
  alert("Selamat datang di blog saya…!")

  var yourName = prompt("Nama saya adit, Siapa nama anda ?…", "");
  alert("Selamat Datang "+yourName+", Senang Berkenalan dengan anda"); </script>

nah, disini kita tampilkan alert lagi seperti alert yang pertama, dimana alert ini menggunakan variable “yourName” yang telah ada sebelumnya. Hasilnya akan seperti ini :

image

nama user yang telah diinputkan sebelumnya kita panggil dengan variable yang sudah ada. hasil akhir script akan seperti ini :

5

setelah selesai simpan template, dan cobalah…

http://adityudhna.wordpress.com/

0 komentar:

Posting Komentar

Rabu, 06 April 2011

Membuat Alert Massage Box pada Blogger

      Message box merupakan aksi pesan sebuah peringatan yang di lakukan ketika kita melakukan aksi tertentu di dalam sebuah blog atau website. aksi yang di maksud bisa berupa berbagai macam hal seperti di antaranya onLoad (ketika pengunjung me load halaman), onClick (ketika pengunjung mengklik sesuatu), onChange (ketika user merubah sesuatu pada sebuah inputan).
      Disini saya akan mempraktekan di blog tester saya di blogspot, karena di blogspot kita lebih leluasa untuk memasukan script-script yang bagus .
      Ok, yang pertama harus anda lakukan tentu saja login ke blog, atau klo mau coba di website tinggal otak atik script sourcenya aja.



1

setelah itu masuk ke menu “Rancangan” lalu pilih menu “edit HTML

2

Setelah masuk “edit HTML” di bagian “Edit Template” anda akan menemukan script yang anda gunakan di blog anda, jangan dibikin pusing dulu jika melihat script itu, anda cukup mencari bagian tag </head> aja.


3
4

di bagian atas (sebelum) tag </head> itulah kita akan taruh scriptnya nanti
setelah ketemu, yuk kita pelajari sedikit script javascript yang akan di gunakan untuk membuat alert.
<script type='text/javascript'> 
  //aksi script
</script>

script di atas adalah script awal untuk menginisialisasikan script yang akan kita gunakan adalah tipe script javascript. Script di awali dan di akhiri dengan  <script>…</script>. Nantinya kita bisa melakukan aksi script javascript di dalam script ini.  sekarang kita tambahkan alert sederhana di bagian aksi script tersebut, maka jadi akan seperti ini :
<script type='text/javascript'>
  alert("Selamat datang di blog saya…!") </script>

script tersebut akan menampilkan alert dengan tulisan “Selamat Datang di blog saya” seperti ini :

image

setelah itu kita tambahkan lagi sedikit script untuk alert inputan field, misalnya nama anda adit, sbb.
<script type='text/javascript'>
  alert("Selamat datang di blog saya…!");

  var yourName = prompt("Nama saya adit, Siapa nama anda ", ""); </script>
ok di dalam script tersebut kita buat variable “yourName” untuk menampung inputan nama user, di mana variable tersebut dapat kita gunakan suatu saat. script ini akan menampilkan tambahan alert ketika user mengklik ok di alert yang pertama seperti ini.

image

setelah itu kita gunakan variable “yourName” dari inputan user untuk kita panggil namanya, agar blog atau website kita lebih keliahatan interaktif
<script type=’text/javascript’>
  alert("Selamat datang di blog saya…!")

  var yourName = prompt("Nama saya adit, Siapa nama anda ?…", "");
  alert("Selamat Datang "+yourName+", Senang Berkenalan dengan anda"); </script>

nah, disini kita tampilkan alert lagi seperti alert yang pertama, dimana alert ini menggunakan variable “yourName” yang telah ada sebelumnya. Hasilnya akan seperti ini :

image

nama user yang telah diinputkan sebelumnya kita panggil dengan variable yang sudah ada. hasil akhir script akan seperti ini :

5

setelah selesai simpan template, dan cobalah…

http://adityudhna.wordpress.com/

Tidak ada komentar:

Posting Komentar

 

Designed by Miss Rinda | Inspirated by Cebong Ipiet | Image by DragonArtz | Author by YOUR NAME :)