Membuat Layar Pop-up (Cara Menyembunyikan Widget, Teks, Gambar Bagian 3)

D ulu pernah saya membahas tentang hal ini. Untuk menghemat tempat di blog kita dan meringankan saat loading, kita harus membuat cara agar widget-widget kita tetap ada dan loading halaman blog tidak terlalu berat. Pada dasarnya itu yang kita semua inginkan, betul kang…?

Lalu bagaimana cara membuat siasatnya? Wuaduh… kaya perang aja. Memang ini merupakan strategi para blogger untuk membuat blognya sekomplit mungkin dan seprofesional mungkin. Sebenarnya bisa saja kita menaruh widget-widget kita terang-terangan di sekitar blog hinga membuat blog kita seperti sampah yang berserakan, bahkan ditambah dengan iklan, wah jadi seperti nonton konser yang super padat. Siasat kita seperti yang sudah saya bahas pada postingan yang lalu mengenai cara menyembunyikan widget, text, dan gambar sudah saya bahas lengkap dalam 2 tahap. Bagi yang belum tahu silahkan klik DI SINI untuk cara pertama, dan DI SINI untuk cara kedua.

Kali ini saya hanya ingin menambahkan dan menyempurnakan cara pertama. Kalau anda baca pada tutorial pertama saya, mungkin bagi anda yang sudah mahir di bidang ini akan mentertawakan saya. Mungkin diantara anda ada yang berfikir pemilik blog ini goblok atau tidak pintar. Kalau ada yang terlintas seperti itu, saya akan jawab “Belum pintar”. Waktu itu pengetahuan saya hanya sebatas itu. Coba saja anda baca, dulu saya mengatakan bahwa cara yang pertama ini kelemahannya hanya bisa menyembunyikan satu widget, text, atau gambar saja. Kenyataannya bisa kok untuk lebih dari satu. Bahkan kita bisa menyembunyikan semua widget kita berapapun jumlahnya dan membuatnya tampil melayang di atas blog kita saat tombol link pembuka layar pop-up nya dibuka. Dan tentunya bisa ditutup kembali dengan menyertakan tombol “TUTUP/CLOSE” pada widget yang disembunyikan. Saya ambil contoh menyembunyikan widget/text/gambar dengan id='guest'. Perhatikan script berikut:

<div style="position:absolute;top:20px;left:20px;width:300px; height:300px;z-index:1;border:1px solid #cccccc;background-color:#ccff99;display:none" id="guest"><a href="http://www.azzahid.co.cc" onclick="tutupguest()">TUTUP</a>Text, script, atau link gambar disini </div>

Ganti warna merah sesuai dengan link dan id widget anda. Atur lebar dan tinggi widget anda pada script tersebut. Sesuaikan agar layarnya tidak oper dosis. Logikanya, perhatikan saja tubuh kita. Inti dari tubuh kita adalah kulit, tulang, otot dsb. Tapi orang lain bahkan kita sendiri tidak akan melihat bentuk tubuh asli kita ini jika tubuh kita dibungkus pakaian. Dan kita bisa saja memakai lebih dari satu lapis pakaian. Pakaian pertama kita akan tertutup dengan pakaian lapis kedua, pakaian lapis kedua akan tertutup dengan lapis ketiga dan seterusnya. Sama halnya dengan halaman web/blog. Tubuh halaman blog kita terdiri dari halaman posting, sidebar, header, dan footer. Jika dibahasakan pada HTML defaultnya adalah z-index:0; jika kita ingin membuat layar pop-up yang berisi widget, text, atau gambar, maka kita harus menambah z-index:1;. Untuk layar pop-up selanjutnya, berarti ditumpuk di atasnya, oleh karena itu kita tambahkan lagi z-index:2;. Begitulah seterusnya untuk menumpuk widget yang lain tinggal tambahkan saja z-index nya.

Untuk membuka widget yang disembunyikan tersebut diperlukan script pembukanya yang bisa anda letakkan dimana saja sebagai 'link'. Berikut script link pembuka widget:

<script> function bukaguest() { document.getElementById ("guest").style.display="block"; } </script> <a href="#" onclick="bukaguest()"> GUESTBOOK</a>

Jangan lupa ganti tulisan yang berwarna merah sesuai dengan nama id yang ingin anda buat. Silahkan mencobanya dengan mengklik menu-menu di sebelah kiri blog ini. Selamat mencoba.