25.11.14
35
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:

fixed message image content


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...

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Pesan Teks Melayang Saat Halaman Terbuka
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

35 komentar

  1. lagi-lagi saya dapet pertamax

    BalasHapus
    Balasan
    1. Untuk kali ini buat saya ya Mas Yan Pertamxnya..?

      Hapus
    2. dibagi dua saja mas, masalahnya mumpung premium lagi naik,

      Hapus
    3. Kayaknya nih harinya Mang Yanto...

      Hapus
    4. wuihhh..pancen ediaaan...mas yanto rajanya pertamax...

      Hapus
  2. wah saya dulu juga pasang pesan melayang dengan tombol close dan banyak mendapatkan kritik mbak.
    tp kalau ini dapat digunakan pada halaman tertentu kayaknya perlu dicoba nih.

    BalasHapus
    Balasan
    1. Habis nyoba jangan lupa Bayar. kasihan kan Mbak Devy nya Cape buat nya Mas?

      Hapus
    2. Jika ditampilkan pada saat halaman mana saja yang terbuka, maka dengan tampilnya widget seperti ini, pasti sangat menggangu pengunjung, tetapi disini scriptnya devy ubah sedikit agar bisa kita tempatkan pada halaman yang sesuai keinginan, begitu mas Yan

      Hapus
  3. mana nih orangnya?
    apa sudah pada tidur ya?
    kalau gitu saya balik aja deh

    BalasHapus
    Balasan
    1. Aku disini mas yanto.. tadi mbak Devi jam 12 masih ada.. mungkin dia lelah. :-)

      Hapus
    2. Mbak Dey sudah Bubu, sementara saya yang jaga sebagai Rondanya ada apa ya?

      Hapus
    3. pagi mas-mas.... saya sudah datang lagi ne...

      Hapus
    4. owh, ternyata?
      jadi semalam tuch yang jagain saya sewaktu bobo sama mbak ..... ?
      kang saud toh..... :p (c)

      Hapus
  4. Kalau saya, lebih suka cara mas fiu. Ada ga ya orang nya?. Model model melayang seperti itu harus benar-benar tidak menghalangi teks dan membuat perhatian pembaca tetap fokus diartikel. Bila membaca artikel tiba-tiba ada pesan gajelas.. :-b hehehee :-)

    BalasHapus
    Balasan
    1. Kalau saya suka yang Mana coba Mas Ary...? kasih tau gak yah....? :d

      Hapus
  5. Keren Mbak Devy kotak pesan melayang nya, bisa saya coba nih kapan kapan
    Makasih yah sudah berbagi ke kita kita. *salam Sahabat Blogger :)

    BalasHapus
  6. mbak devy punya saja ide tuk membuat script yang keren-keren gini... banyak belajar dari si mbak saya ne... :)

    BalasHapus
    Balasan
    1. hanya mengubah yang sudah ada menjadi sesuatu yang bagus dan enak untuk dikerjakan, mungkin itu yang devy lakukan, dan devy juga masih belajar kok, justru devy yang terimakasi, karena mas jai selalu ringan tangan dalam memberikan tips-tips seperti ini, hehe..

      Hapus
    2. saya yang seharusnya berterima kasih mbak... karena script-script disini tidak rumit mbak.. :) kagum saya lihatnya mbak...

      Hapus
    3. Ok dech mas jai, biarlah mereka yang menilai tentang semua tutorial devy pada blog ini, devy hanya mengajak sahabat semua untuk belajar bersama devy, bukan begitu mas,hehe..

      karena devy juga masih belajar,

      Hapus
    4. bener-bener, semuanya juga masih belajar kog mbak.. termasuk saya juga masih belajar mbak... :) hanya sedikit yang saya ketahui mbak...

      #mari_ ngeteh dulu (c)

      Hapus
  7. scrif nya tapi lumayan banyak juga ya mba

    BalasHapus
    Balasan
    1. kalau sedikit kagak kenyang ntar mbak, hehe..!!

      Hapus
  8. Unik banget widget ini..ijin nyoba mba devi..


    Jgn lupa mampir balik yah..

    BalasHapus
  9. Membuat teks melayang gini, apa gk berpengaruh ya sama loading blognya?

    BalasHapus
    Balasan
    1. $(window).bind("load", function() {

      // kotak pesan akan tampil saat halaman telah selesai dimuat
      $('#kotak-pesan').animate({top:"150px"}, 1000);


      Script diatas hanya memanggil widget jika diperintahkan, bukan pada area body, dan akan tampil hanya jika halaman blog selesai dimuat, jadi jika blog masih dalam proses muat halaman, widget ini tidak akan tampil.

      mungkin ngerti maksudnya.!

      Hapus
  10. wah harus dijajal nih..tapi mengganggu g ya ?

    BalasHapus
  11. DAFTAR GENERATOR PENULISAN SIMBOL HTML,
    10017;

    BalasHapus
  12. Postingan di blog ini sangat membantu, terima kasih

    BalasHapus
  13. salut buat mbak satu ini.....
    btw, gk ada emoticon yang megang jempol ya.... :(

    BalasHapus
  14. ane masih bingung buat naro scriptnya dimana ya mba? buat yang "Pesan Teks Dengan Tombol Perintah"
    Script pertama dan yg kedua ditaro dimana?

    BalasHapus
    Balasan
    1. Area dimana saat Anda membuat postingan (menulis Artikel), maka letakkan semua kode itu disana, misalnya pada paragraf pertama, setelah paragraf pertama atau diakhir tulisan Anda, sesuka hati sesuai keinginan.

      http://4.bp.blogspot.com/-4ag16FuxYQ4/VSc9OxdhVfI/AAAAAAAAB1s/wZubtnINDts/s1600/formulir%2BHTML.jpg

      Pesan Teks Dengan Tombol Perintah
      kode lengkapnya seperti ini:

      <style type="text/css">
      #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'>
      $(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>

      Hapus
  15. saya langsung comot aja dev..buat dipasang di blog jualan saya...kayaknya bagus untuk info barang. ok makasih ya sista...

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK