Membuat Popup Teks Window

Pada bulan lalu saya pernah membahas tentang cara membuat sebuah lightbox untuk image atau gambar, setelah bingung tentang postingan berikutnya untuk hari ini maka saya berniat melengkapi tutorial lightbox yang kali ini saya khususkan untuk teks.

KLIK DISINI

Kurang lebih akan begitu tampilannya nanti, untuk fungsinya sendiri menurut saya pribadi cukup membantu untuk membuat setiap halaman artikel kamu yang panjang menjadi ringkas. Sekarang waktunya untuk menyimpan beberapa kode agar popup teks ini bisa diaplikasikan dalam blog kamu.

Buka Menu Rancangan dan pilih Edit HTML, cari kode ]]></b:skin> jika sudah ketemu copy kode dibawah ini dan simpan tepat diatasnya.

.grayBox{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.box_content {
    position: fixed;
    top: 25%;
    left: 30%;
    right: 30%;
    width: 40%;
    padding: 16px;
    z-index:1002;
    overflow: auto;
}

Tambahkan javascript dibawah ini tepat dibawah ]]></b:skin>

<script type="text/javascript" language="javascript">
/* Superior Web Systems */
function displayHideBox(boxNumber)
{
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
        document.getElementById("LightBox"+boxNumber).style.display="block";
        document.getElementById("grayBG").style.display="block";
    } else {
        document.getElementById("LightBox"+boxNumber).style.display="none";
        document.getElementById("grayBG").style.display="none";
    }
}
</script>

Save, masih ada beberapa langkah yang harus kamu lakukan supaya popup teksnya bisa keluar di setiap postingan yang kamu anggap penting untuk memakai gaya ini.
Tambahkan kode dibawah ini pada artikel atau postingan yang ingin diberi sebuah popup teks

<div id="grayBG" class="grayBox" style="display:none;"></div>
<div id="LightBox1" class="box_content" style="display:none;">
<table cellpadding="3" cellspacing="0" border="0">
<tr align="left">
<td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">X</div><blockquote>ISI POPUP TEKS KAMU DISINI</blockquote></p></td>
</tr>
</table>
</div>

<a href="#" onclick="displayHideBox('1'); return false;"><b>JUDUL TEKS</b></a>

Note: pada saat menambahkan kode diatas gunakan mode HTML, huruf yang dicetak tebal dan berwarna bisa dirubah sesuai kebutuhan kamu. Jika ada kesulitan kamu bisa isi di kolom komentar,Selamat berkarya...

Blogging Is Sharing...

Description: Membuat Popup Teks Rating: 4.5