Cara Membuat Pesan Pembuka dan Kotak Dialog

Minggu, 23 Oktober 2011
Anda dapat menampilkan kotak pesan peringatan untuk memberikan pengumuman khusus, memberikan informasi, atau memperingatkan pembaca sebelum mereka melihat isi penuh dari situs Anda. kotak pop-up akan berisi pesan dan memiliki tombol "OK" untuk pengunjung yang ingin melanjutkan, atau membatalkan dengan "Cancel" lalu pengunjung akan pergi ke situs lain yang kita tentukan. Kita dapat lebih lanjut menyesuaikan Blog kita dengan menanyakan nama pembaca dan memasukkan dialog secara otomatis ke dalam pesan. Contoh selamat datang. Tutorial ini akan menunjukkan Anda bagaimana kotak dialog dapat disisipkan ke dalam Blog Anda.

Perlu diingat pada saat halaman dibuka, admin melakukan ini untuk langah-langkah keamanan dari hacker ataupun defacer, dan juga mengatur browser mereka untuk menonaktifkan JavaScripts. Selain itu, terlalu banyak dari script ini dapat membuat halaman Anda lambat untuk memuat. Masukkan ini hanya jika Anda pikir itu tepat atau berguna. Karena ini adalah sistem jendela dialog, mereka mungkin terlihat berbeda di berbagai browser dan sistem operasi.

Berikut tutorial caranya yang kodenya saya ambil dari tips for blogger.

Kotak Pesan dengan Tombol OK

Klik mi

Alert Message and Dialog Box

Untuk membuat kotak dialog dengan tombol OK seperti di atas, ikuti langkah berikut ini:
1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:

 <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 kata pembuka yang Anda tampilkan ketika pengunjung datang ke halaman blog sobat.
- Kata-kata yang warna hijau adalah teks alternatif yang akan ditampilkan jika pengguna telah menonaktifkan mereka fungsi JavaScript.

Kotak Pesan dengan Tombol konfirmasi
Sebagai penulis Blog, kita harus peka terhadap etika dan moralitas keprihatinan pengunjung. Jika Blog berisi konten yang eksplisit atau tidak cocok untuk kelompok memilih orang, sobat dapat memberikan pesan pembuka dengan 2 pilihan ketika halaman dibuka. 2 pilihan tsb adalah - "OK" dan "Cancel" - yang pengunjung sendiri dapat memilih dari 2 pilihan tsb. Jika pilihan mereka adalah "Cancel", maka mereka akan diarahkan ke situs yang lain. Untuk contoh ini, kita telah menggunakan situs Google sebagai halaman pengalihan situsnya.

Klik mi

Alert Message and Dialog Box


Untuk membuat kotak dialog dengan tombol OK seperti di atas, ikuti langkah berikut ini:
1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:
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://daw-xp.blogspot.com/";
}
else {
window.location = "http://www.google.com/";
}
</script>

- Ganti kata yang berwarna merah dengan pesan pembuka sobat.
- Ganti kata yang berwarna biru dengan URL link blog sobat.
- Ganti kata yang berwarna orange dengan URL re-direct pengunjung yang jika mereka meng'klik "batal".

Kotak Pesan dengan Prompt Field
Kotak Dialog ini biasa disebut para programmer dengan "Prompt" untuk JavaScript. Kotak dialog ini hanya berfungsi sebagai pemanis blog semata. Kamu dapat memasukkan Kalimat pertanyaan yang bisa berinteraksi langsung dengan calon pengunjung blog.

Untuk membuat kotak dialog dengan tombol OK seperti di atas, ikuti langkah berikut ini:
1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:

 <script type="text/javascript">
var yourName = prompt("How can we address you?", "Reader");
</script>

Pertanyaannya dapat diubah. Setelah Anda mengisikan kolomnya Anda dapat klik "OK" atau "Batal".

Klik mi




Semoga Bermanfaat ^_^

Cara Menampilkan Kode HTML di Dalam Postingan Blog

Jika Anda mendaftar di Blogger.com untuk saat ini dan membuat blog blogspot sekarang, mungkin tutorial ini tidak berguna karena sekarang blog di blogger/blogspot sudah bisa mendukung kode HTML di dalam postingan blog. Jadi Anda tidak perlu menggunakan cara ini.

Cara ini saya tujukan bagi Anda yang sudah mempunyai blog di blogspot sejak dulu/keluaran dulu sekitar di bawah tahun 2011, di mana untuk menampilkan kode HTML di dalam postingan tidak bisa di lakukan. Maksudnya adalah jika Anda ingin menulis kode HTML di dalam postingan blog maka ketika sudah di save nanti kode HTMLnya tidak muncul. Hal ini seperti yang sudah saya alami di blog saya ini, karena blog saya ini terdaftar di blogger sejak tahun 2009. Jadi jika saya memposting tentang Tutorial Blogger yang ada kode HTML nya, nanti kodenya tidak bisa muncul. Misalnya saya mau menulis tentang kode , nanti setelah klik terbitkan entri, hasilnya kode tersebut tidak bisa muncul.

Nah itulah yang saya maksud dan saya bahas di sini. Untuk menampilkan kode HTML dalam postingan blog sebenarnya caranya mudah. Anda tinggal menambahkan beberapa karakter pada bagian kode tersebut. Contohnya seperti berikut ini:

Kode < Ganti dengan <
Kode > Ganti dengan >
Kode " Ganti dengan "

Tapi jika dilakukan dengan cara manual tentu sangat melelahkan apalagi jika kode HTML nya sangat banyak, jadi untuk mempercepat pekerjaan anda bisa melakukan Parse menggunakan tools Convert text to HTML entities and vice versa.

Untuk menggunakan tools tersebut carannya ialah cukup copy Kode HTML yang akan ditampilkan kedalam posting blog, pada contoh tutorial ini ialah kode Table diatas. Kemudian pastekan ke halaman tools Convert text to HTML entities and vice versa. Setelah itu tekan tombol Encode.

Klik mi




 





Ambil kode yang telah di Parse Tool tersebut kemudia copy kembali ke halaman Posting Blog anda, setelah itu klik Terbitkan Entri/Publish Post dan hasilnya nanti kode HTML akan bisa muncul dalam postingan.

Cara Membuat Spoiler di Blog

Spoiler ?
Sudah tahukan ?

Kalau kita singgah di Kaskus.us, maka disitu akan banyak kita jumpai term Spoiler. Para Kaskuser menggunakan Spoiler untuk menyembunyikan sebagian atau seluruh konten, baik itu berupa teks, gambar, animasi ataupun video.

Lalu bagamana cara menerapkannya di blog ??
Sedikit akan saiia uraikan fungsi dari spoiler ini. Bisa dikatakan bahwa fungsi dari spoiler yaitu menghemat tempat [space], mengurangi waktu load konten pada blog [karena konten yang berat seperti gambar dan video tidak diaktifkan sebelum menekan tombol show], memberikan pilihan pada pengunjung blog untuk membuka atau tidak isi spoiler.
Berikut ini kode yang digunakan untuk membuat spoiler pada blog atau postingan:


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tulis saja semauta' </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
isi tulisan spoiler...

</div></div></div></div>

Hasilnya seperti dibawah ini:











Tulis saja semauta'



isi tulisan spoiler...









Silahkan ganti beberapa teks seperlunya.
Kalau sobat blogger sudah terbiasa mengotak-atik kode HTML,pasti bisa modif sendiri.