Pesan melayang di blog atau website - Widget pesan teks melayang dalam sebuah blog sangatlah penting sesuai kebutuhan sebuah bog apakah pesan tersebut bisa membantu pengunjung atau bisa juga mengganggu pengunjung yang ingin membaca salah satu posting blog,pesan tersebut bisa di tampilkan hanya di HOME atau halaman depan saja,di bawah ini ada dua pilihan pesan silahkan anda memilih mana yang baik untuk blog anda.
1. Pesan Teks Pop-Up (Melayang)
Silahkan anda Salin kode berikut, lalu letakkan pada formulir postingan mode HTML, perhatikan teks yang saya beri warna Merah, disana Anda bebas membuat hal apa saja yang ingin Anda tampilkan sebagai pesan teks Anda dengan penerapan script seperti ini:
 |
| pesan melayang |
BACA JUGA
Dowload gratis Kaspersky Cleaner Untuk Windows
BACA JUGA
Cara buat tombol share bouncing fixed shadow
BACA JUGA
Tips menyimpan kapasitas baterai di smartphone untuk waktu yang lamaSilahkan anda Salin kode berikut, lalu letakkan pada formulir postingan mode HTML, perhatikan teks yang saya beri warna Merah, disana Anda bebas membuat hal apa saja yang ingin Anda tampilkan sebagai pesan teks Anda dengan penerapan script seperti ini:
<style>
#kotak-pesan {position:fixed !important;position:absolute;top:-1000px;left:50%;margin:0 auto;width:600px;
background:#333;padding:16px;border:2px solid #fff;color:#fff;font:normal 1em Cambria,Georgia,Serif;box-shadow:0px 1px 3px rgba(0,0,0,0.4);}#kotak-pesan a.close:hover {background:red;color:#fff;}#kotak-pesan a.close {position:absolute;top:5px;right:5px;background:#fff;font:bold 13px Arial,Sans-Serif;line-height:15px;width:15px;text-align:center;color:red;border:2px solid #fff;box-shadow:0px 1px 2px rgba(0,0,0,0.4);border-radius:15px;cursor:pointer;}</style><script type='text/javascript'>$(window).bind("load", function() {// kotak pesan akan tampil saat halaman telah selesai dimuat$('#kotak-pesan').animate({top:"150px"}, 1000);// menghilangkan kotak pesan saat tombol (x) diklik$('a.close').click(function() {$(this).parent().fadeOut();return false;});});</script>
<div id='kotak-pesan'><div id='kotak-pesan'><div id='kotak-pesan'>Tulis Pesan Anda Disini...<a class='close' href='#'>×</a></div>
2. Pesan Teks Dengan Tombol Perintah
Anda harus Menyimpan elemen pesan teks yang jauh diluar halaman, lalu dihubungkan dengan perintah JavaScript open-button untuk memanggil fungsi elemen-data dengan Tombol KLIK seperti ini:
<button class="open">Buka Teks Pesan</button>
Jadi pesan teks Anda hanya akan tampil jika tombol tersebut di KLIK saja, sedangkan untuk memberikan tampilan yang berbeda, saya menggunakan efek transisi slide-top, fade-out saat tombol CLOSE ( X ) di klik, kodenya seperti ini:
<script type='text/javascript'>$(function() {$('button.open').click(function() {$('#kotak-pesan').animate({top:"200px"}, 1000);return false;});$('a.close').click(function() {$(this).parent().animate({top:"-600px"}, 1000);return false;});});</script><div id='kotak-pesan'>Tulis Pesan Anda Disini....<a class='close' href='#' title='Close'>×</a></div><button class="open">Buka Teks Pesan</button>
Semoga bermanfaat