News Update :

Kotak Dialog & Pesan Peringatan

Sunday, February 13, 2011

Anda bisa menampilkan kotak pesan peringatan untuk memberikan pengumuman, informasi/memperingati pembaca sebelum mereka melihat konten pada situs Anda. Kotak pop up ini akan berisi pesan Anda & ada tombol "OK" bagi pengunjung untuk melanjutkan/menanyakan/tombol batal untuk me-redirect pembaca ke situs lain. Kita bisa mengkostumisasi blog kita dengan menanyakan nama pembaca & memasukkan input ini secara otomatis ke dalam pesan welcome. Tutorial ini akan menunjukkan Anda cara membuat kotak dialog & pesan peringatan dengan menggunakan kode JavaScript yang bisa dimasukkan ke dalam blog.


Harap diperhatikan bahwa karena Javascript berjalan saat halaman web di-load, kebanyakan user mungkin, untuk alasan keamanan, mereka men-setting browser untuk menonaktifkan Javascripts. Dengan banyaknya Javascript, ini bisa membuat halaman blog Anda menjadi lambat untuk di-load. Masukkan fasilitas ini jika Anda pikir bahwa fasilitas ini dapat berguna. Karena fasilitas ini merupakan sistem dialog Windows, kotak ini mungkin akan kelihatan berbeda di berbagai browser & sistem operasi.


Kotak peringatan dengan tombol OK

Anda bisa memiliki sebuah pesan serius untuk situs dengan konten dewasa dengan kalimat �Warning! This site contains material that is not suitable for person under 18 years old�. Atau Anda dapat memberikan pesan peringatan yang ringan, seperti memberi peringatan pada situs Anda yang berisi humor, dengan kata-kata �Anda telah tepat memasuki situs ini, dijamin Anda akan tertawa terbahak-bahak�.


Untuk membuat kotak pesan peringatan, login ke akun Blogger Anda, pergi ke Template > Add a Gadget di sebelah kiri sidebar Anda/pada area post body & pilih HTML/JavaScript. Copy paste kode di bawah ini:


<script type="text/javascript">

alert('You are about to enter an extremely funny site. People who are prone to laughing fits ... Beware!')

</script>
<noscript>Enable javascript in your browser to view an important

message.</noscript>


Ganti kata yang berwarna merah dengan pesan yang ingin ditampilkan ketika user mengunjungi blog Anda. Kata-kata yang berwarna hijau adalah teks alternatif yang akan ditampilkan jika user mematikan fungsi JavaScript.


Kotak peringatan dengan tombol konfirmasi

Meskipun bebas berekspresi (dalam artikel ini bebas berekspresi dalam berbicara) yang saat ini diperbolehkan khususnya bagi negera yang bersistem liberal, sebagai penulis blog, kita harus sensitif terhadap keprihatinan etika & moral masyarakat di seluruh dunia. Jika blog mengandung konten yang eksplisit/tidak sesuai bagi suatu kelompok orang tertentu, berikan pembaca sebuah pilihan untuk tidak melanjutkan membaca blog Anda. JavaScript untuk kotak peringatan ini menampilkan 2 tombol "OK" & "Cancel" yang bisa pembaca pilih. Jika pilihan mereka adalah "Cancel", mereka akan diarahkan/di-redirect ke situs yang aman. Untuk contoh ini, kita menggunakan situs Google sebagai halaman hasil redirect yang aman.


Untuk memasukkan kotak dialog peringatan, login ke akun Anda, pergi ke Template > Page Elements > Add a Gadget di sebelah kiri sidebar Anda/ pada area post body & pilih HTML/JavaScript. Copy paste kode di bawah ini:


<script type="text/javascript">

confirm('This site contains explicit contents. Are you sure you want to continue?');

if (confirm('This site contains explicit contents. Are you sure you want to continue?')) {

window.location = "http:// tips-blogging4u.blogspot.com/";

}
else {

window.location = "http://www.google.com/";

}
</script>

Pesan Anda akan muncul pada bagian yang berwarna merah. Ganti teks biru dengan URL blog Anda. Di sinilah pengunjung Anda akan pergi jika mereka mengklik "OK". Pada bagian teks yang berwarna oren, masukkan URL sebagai tempat untuk me-redirect pengunjung Anda jika memilih tombol "Cancel".


Kotak peringatan dengan meminta

Tipe lain dari kotak dialog adalah kotak yang meminta user untuk memasukkan beberapa informasi. Misalnya, kotak ini dapat menanyakan pembaca mengenai namanya & untuk menggunakannya kita perlu mengkostumisasi halaman web. Ingat bahwa banyak browser yang dikonfigurasi untuk menonaktifkan skrip untuk meminta informasi. Misalnya, jika Anda punya postingan yang terus menyebutkan/meminta nama pembaca, maka akan muncul �null�.


Pada Template > Page Elements > Add a Gadget, pilih HTML/JavaScript & masukkan kode berikut ini:


<script type="text/javascript">

var yourName = prompt("How can we address you?", "Reader");

</script>

Pertanyaan dapat Anda ubah sendiri (yang berwarna merah). User akan diminta untuk memasukkan sesuatu pada kotak dialog. Tentunya, user bisa saja tidak mengisinya & menekan "OK"/mengklik "Cancel".


JavaScript di bawah ini, pada main body Anda, tambahkan page element HTML/JavaScript yang lainnya. Kali ini, Anda dapat mengetikkan kode di bawah ini:


Welcome back <script type="text/javascript">document.write(yourName)</script>! Feel free to look around. If you like what you read, mention us in your post or link to this site. Hope to see you again

<script type="text/javascript">document.write(yourName)</script>


Ubah kata-katanya yang cocok sesuai selera Anda & letakkan kode di atas dimanapun Anda ingin menyebutkan nama pembaca Anda, tambahkan script (yang ditampilkan dalam warna merah). Sebuah kotak dialog ini akan menambah sentuhan pribadi pada blog Anda.
Share this Article on :
 

© Copyright Alexbucely 2010 -2011 | Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com.