Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

1 komentar:

  1. MAS.SAYA HERMAN.GIMANA CARANYA KALO MOSE DIDEKATKAN AKAN KELUAR KOTAK,SEPERTI KAYA BLOGNYA MAS.SAYA MOHON KALO MAS BERKENAN MAS BISA SMS KE NOMER SAYA INI:081225568361,MOHON BANTUANYA

    BalasHapus

 
GR | Edited by | gubhug reyot