Membuat Pesan Teks Melayang Saat Halaman Terbuka

Membuat Pesan Teks Melayang Saat Halaman Terbuka - Sebuah informasi, pesan teks atau tampilan widget sosial yang ditampilkan secara pop-up (melayang) seperti ini sudah sering kita temui pada beberapa situs atau web blog. Dimana saat halaman tersebut terbuka, maka ada sekilas pesan teks yang tampil secara melayang (fixed-position), baik itu saat membuka halaman beranda/home ataupun saat membuka halaman postingan. Isi dari tampilan widget tersebut juga beragam variasi, ada yang menampilkan jumlah fans google plus blog tersebut beserta gambar follower, ada yang hanya sekedar ucapan Selamat Datang dan ada juga yang membuat beberapa link aktif yang mengarah pada sebuah halaman yang berbeda untuk dituju.

Banyak sahabat blogger yang berpendapat bahwa membuat dan menampilkan widget berupa pesan teks melayang seperti ini amatlah mengganggu pengunjung, dengan alasan widget tersebut menutupi beberapa tulisan pada postingan saat halaman selesai dimuat. Dengan alasan itu banyak juga diantara mereka memutuskan untuk enggan berkunjung kembali, karena mereka menilai harus melihat dan membaca pesan teks tersebut terlebih dahulu sebelum akhirnya menutupnya dengan meng-Klik tombol ( X ) seperti tampilan gambar berikut:

Baca juga - Membuat Pesan Informasi Dengan Blockquote


Saya juga pernah membuat pesan teks melayang seperti ini sebelumnya, karena banyak sahabat yang mengkritik tampilan widget tersebut, akhirnya widgetnya saya lepas kembali untuk dimusnahkan hehe..!!, Pertemuan kali ini, saya kembali memberikan tutorial yang sama tentang Cara Membuat Pesan Teks Melayang Saat Halaman Terbuka, namun saya hadirkan dengan versi yang berbeda.

Widget pesan teks melayang kali ini sudah saya rancang dengan menganalisa berdasarkan alasan pengunjung yang terganggu karena tampilnya widget ini pada halaman. Jadi, widget ini hanya akan tampil pada halaman yang Anda tentukan saja, misalnya Anda ingin hanya akan ditampilkan pada beberapa postingan saja, atau hanya tampil saat pengunjung membuka halaman HOME saja, semuanya terserah Anda akan ditampilkan dihalaman yang mana (Up To You My Friend), tetapi ingat, jangan ditampilkan gambar Devy ya hehe..!!

Buat sahabat semua pecinta SAHABAT BLOGGER 77, Cara Membuat Pesan Teks Melayang Saat Halaman Terbuka seperti ini, saya akan berikan dalam 2 versi tampil:

1. Pesan Teks Pop-Up (Melayang)
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'>

Tulis Pesan Anda Disini...

<a class='close' href='#'>&times;</a>
</div>

Hasilnya:



DEMO SHOW



2. Pesan Teks Dengan Tombol Perintah
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'>&times;</a>
</div>

<button class="open">Buka Teks Pesan</button>

Hasilnya:


DEMO SHOW


Bagaimana terlihat lebih menarik bukan dari pada widget-widget yang sejenis seperti ini.!. Jadi Anda yang memilih, apakah pesan teks ini akan Anda tampilkan pada postingan Anda berikutnya, atau untuk halaman beranda saja. Pilihan ada ditangan Anda guys..!!? sampai jumpa...