Popup Text Box

Fixed Popup Text Box pada prinsipnya adalah sama dengan CSS Popup Tooltip di posting sebelumnya. Perbedaan besarnya adalah pada posisi pemunculan text box. Text box akan terlihat tepat ditengah halaman ketika link di sorot (cursor di atas link). Beberapa hal penting mungkin saja ditampilkan dengan cara seperti ini, oleh karena itu silahkan ikuti panduan cara membuatnya.

D E M O : Dixed Popup Text Box

Kode CSS, xHTML dan Javascript :

<style type="text/css">
.popup{
        font-family:Arial; /* edit jenis font */ 
        font-size:18px; /*edit ukuran font */ 
        color:#033;  /* edit warna font */   
        background:#eee;  /*edit warna latar box - background */ 
        width:500px;  /* edit lebar box */  
        text-align:justify;  /* edit text-align */ 
        padding:10px 6px;
        font-weight:500;  /* edit tebal huruf */ 
        border:5px double #888;  /* edit border */ 
        border-radius:6px;
        text-shadow:2px 2px 2px #888;
}
#popuptextbox {
        position:fixed;
        top:25%;  /* edit posisi popup text box - vertical */ 
        left:25%;  /* edit posisi popup text box - horizontal */ 
        visibility:hidden;
        z-index:200;
}
</style>

<div id="popuptextbox"></div>

<script type="text/javascript">
//<![CDATA[
var old, skn, iex = (document.all);
var ns4 = document.layers
var ns6 = document.getElementById && !document.all
var ie4 = document.all
if (ns4) skn = document.popuptextbox
else if (ns6) skn = document.getElementById("popuptextbox").style
else if (ie4) skn = document.all.popuptextbox.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
            skn.visibility = "visible"
            skn.display = "none"
}
document.onmousemove = get_mouse;
function popup(msg) {
      var content = "<div class=popup>" + msg + "</div>";
      if (ns4) {
            skn.document.write(content);
            skn.document.close();
            skn.visibility = "visible"
      }
      if (ns6) {
            document.getElementById("popuptextbox").innerHTML = content;
            skn.display = ''
      }
      if (ie4) {
      document.all("popuptextbox").innerHTML = content;
      skn.display = ''
      }
}

function remove_popup() {
      if (ns4) {
            skn.visibility = "hidden";
      }
      else if (ns6 || ie4) skn.display = "none"
}
//]]>
</script>

Cara menyimpan Kode CSS, Javascript dan xHTML

1. Login ke Blogger.
2. Dasbor (Dasboard) » Klik "Rancangan (Design)".
3. Klik Add a Gadget.
4. Klik "HTML/Javascript".
5. Copy dan Paste-kan kode css, javascript dan xhtml ke dalam box html/javascript.
6. Klik "SIMPAN/SAVE"

Penulisan kode link:

xHTML ini digunakan di box posting atau bagian yang lain dari blog anda.

Contoh Kode Link:

<a href="http://gubhugreyot.blogspot.com" onMouseOver="popup('Popup text box akan selalu muncul pada posisi di tengah halaman sekalipun halaman blog digulung ke atas dan ke bawah. Posisi ini bisa diatur dengan melakukan perubahan pada kode css.')"; onMouseOut="remove_popup()">D E M O : Fixed Popup Text Box</a>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Seloso    LEGI, Maret, 13, 2012

» Happy Blogging - gubhugreyot «