Sebuah web maupun blog pada hakekatnya tersusun dari sekumpulan layar-layar (kolom-kolom) yang tertata sedemikian rupa sehingga menghasilkan tampilan layout yang enak untuk dipandang. Biasanya blog/web tersebut awalnya disusun dengan layar-layar besar terlebih dahulu, setelah itu di dalam layar-layar besar tersebut dibuat lagi layar-layar yang lebih kecil dan demikian seterusnya.

Semakin beragam fasilitas dari sebuah web akan semakin banyak pula layar/kolom yang dibutuhkan, semakin banyak layar/kolom yang digunakan maka semakin kompleks dan rumit penataan web tersebut. Oleh karena itu biasanya para pembuat template web menata layar/kolom-kolom tersebut dengan style border atau bingkai untuk membedakan antara kolom/layar yang satu dengan yang lain. Setelah selesai, beberapa style border tersebut mungkin akan dihilangkan jika dianggap perlu.

Yang agak rumit dalam penataan layar/kolom-kolom web adalah jika membuat web dengan lebih dari satu sisi (sidebar), karena secara defaultnya layar/kolom-kolom tersusun berdasarkan pola Baris (Dari Atas ke Bawah) bukan dengan pola Kolom (dari kiri ke kanan).

Kolom-kolom pada web dibuat menggunakan bahasa standar web HTML atau bisa juga menggunakan software webbuilder WYSIWYG (What You See Is What You Get) yang banyak tersedia seperti Frontpage, DreamWeaver atau Joomla. Jika menggunakan bahasa web standar maka penulisan tag HTML sebuah kolom/layar adalah sebagai berikut : Dibuka dengan tag <div> dan ditutup dengan tag </div> . Sebagai Contoh

<div>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

Jika anda membuat layar baru lagi dibawahnya maka tampilan pada web akan disusun persis dibawahnya bukan disebelah kanannya atau disebelah kirinya.

Untuk membatasi sebuah layar biasanya kita menggunakan style CSS (cascading Style Sheet) border agar layar tersebut memiliki bingkai, caranya adalah sbb

<div style='border:1px solid #000000'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

border:1px artinya bingkai dengan tebal 1 pixel, solid artinya tipe bingkai adalah berupa garis tunggal dan #000000 bertarti warna bingkai, dalam hal ini berarti hitam.


Show Layer
Pada kesempatan ini, kami tidak akan menjabarkan bagaimana membuat sebuah layout halaman utama dengan layar tersebut tapi kami akan menjelaskan cara membuat Layar Popup (bukan Layar Utama).
Apa perbedaan Layar Utama dan Layar Popup?. Jika membuat layar baru pada layar utama akan mempengaruhi tata letak layar-layar yang lain pada Layout halaman utama. Tapi jika membuat Layar Popup tidak akan mempengaruhi posisi letak layar-layar yang terdapat pada halaman utama melainkan Layar Popup tadi ditumpuk diatas layar utama sehingga tampak overlapping satu sama lain dan tampak seperti lembaran-lembaran sebuah buku.

Apa kegunakan dari Layar Popup?

• Layar Popup biasa digunaka sebagai PreLoader sebelum halaman utama diload secara utuh, setelah halaman utama komplit, Layar popup akan secara otomatis ditutup
• Layar Popup juga sering digunakan sebagai layar layanan iklan saat halaman utama dibuka
• Layar Popup kadang juga digunakan sebagai zoom dari thumbnail image karena sifatnya yang tidak mengganggu layar-layar yang terdapat pada halaman utama.
• Layar Popup juga biasa digunakan sebagai Main Menu tersembunyi atau Hidden layer. Yang akan terbuka saat link menu diklik.
• Layar Popup kadang digunakan juga sebagai layar Tooltips pada beberapa text halaman utama yang memerlukan penjelasan. Biasanya dengan meletakkan cursor pada text yang dimaksud, layar popup pun terbuka
• Yang lagi ramai digunakan para blogger adalah menyimpan Shoutbox pada layar popup yang sengaja disembunyi pada sisi kiri atau kanan halaman web dan hanya muncul secara animasi saat tombol shoutbox di klik

Cara pembuatan layar Popup adalah sebagai berikut:

<div style='position:absolute;z-index:1;border:1px solid #000000'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

position:absolute berarti posisi layar adalah mutlak, karena itu maka secara defaulnya layar akan berada pada posisi x=0 dan y=0 atau pada posisi kiri atas halaman web.
z-index:1, berarti layar ini ditumpuk persis diatas layar utama, karena defaultnya layar utama z-indexnya adalah 0. Jika anda ingin membuat layar popup lain yang ditumpuk diatas layar popup sebelumnya gunakan z-index:2 begitu seterusnya.

Kita bisa mengatur posisi penempatan layar Popup tadi sesuai keinginan kita dengan mengatur posisi kiri dan posisi atas layar sebagai berikut:


<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

top:20px berarti posisi layar dari atas adalah 20 pixel, left:20px artinya posisi layar dari kiri adalah 20 pixel, kita juga bisa mengganti top dengan bottom atau left denga right jika ingin mengambil posisi dari bawah dan dari kanan.

Lebar dan Tinggi Layar Popup secara defaultnya mengikuti luasnya tempat yang dipakai oleh tulisan yang ditulis pada layar selebar halaman browser. Bagaimana mengatur lebar dan tinggi layar sesuai keinginan kita, caranya adalah sbb

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;'>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

width:500px artinya lebar layar adalah 500 pixel, height:300px artinya tinggi layar adalah 300 pixel. Tinggi layar ini bersifat tidak mutlak, artinya jika luasnya tempat yang dipakai oleh tulisan dalam layar melebihi tinggi yang diinginkan (dalam hal ini 300px) maka tinggi layar mengikuti tinggi luas yang dipakai oleh tulisan dalam layar, jika kurang maka tinggi layar menjadi sesuai patokan tadi yaitu 300px.

Ingat bahwa layar popup yang dibangun ini masih bersifat transparan, artinya karena ia ditumpuk diatas layar utama maka tulisan yang terdapat pada halaman utama dibelakang layar popup akan tampak pada layar popup sehingga tulisan tersebut akan tampak overlapping dengan tulisan yang terdapat pada layar popup, untuk menghindari hal tersebut gunakan style background pada layar popup, sbb

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc'>
 Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

background:#cccccc artinya layar popup diberi latar belakang warna #cccccc atau abu-abu

Hidden Layer
Hidden Layer artinya menyembunyikan layar, dalam hal ini tentunya layar yang akan disembunyikan adalah layar popup tadi. Idealnya Layar Popup yang sudah dibentuk tadi sebaiknya disembunyikan karena posisinya yang menumpuk diatas Layar Utama sehingga dapat menutupi tulisan yang terdapat pada layar utama. Oleh karena itu sebuah layar popup biasanya kalau bukan ditampilkan terlebih dahulu kemudian disembunyikan, pasti sebaliknya disembunyikan terlebih dahulu baru kemudian ditampakkan. Jika layar popup ingin dijadikan preloader, maka biasanya layar popup tersebut ditampilkan terlebih dahulu baru kemudian disembunyikan secara otomatis, Jika layar popup tersebut ingin dijadikan menu popup, maka yang terjadi sebaliknya yaitu disembunyikan terlebih dahulu baru kemudian disiapkan menu link untuk menampilkannya.

Bagaimana menyembunyikan layar popup yang sudah dibentuk,

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc;display:none'>
 Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

display:none adalah atribut yang harus ditambahkan pada layar popup untuk menyembunyikan layar tersebut.

Bagaimana cara menampilkan kembali layar popup yang sudah disembunyikan.
Pertama adalah berikan terlebih dahulu ID pada layar popup yang dibuat diatas. Id bisa anda tulis apa saja asal tidak mengandung spasi kosong.

<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc;display:none' id='layar'>
 Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

id='layar' adalah identitas dari layar popup yang dibuat diatas tadi, dalam hal ini idnya adalah 'layar', silahkan menggunakan kata lain jika anda ingin mengubahnya.

Kedua, buatlah Text Link yang merupakan representasi dari layar popup tersebut.

<a href='javascript:document.getElementById("layar").style.display="block"'>Layar</a>;

javascript:document.getElementById("layar").style.display="block" , merupakan script javascript yang digunakan untuk memerintahkan membuka layar popup yang idnya adalah 'layar' jika link tersebut di klik.

Setelah layar popup dibuka, sekarang bagaimana menutupnya kembali. Pada script layar popup diatas tambahkan Link Tutup, sbb


<div style='position:absolute;top:20px;left:20px;z-index:1;border:1px solid #000000;width:500px;height:300px;background:#cccccc;display:none' id='layar'>
<div align='right'><a href='javascript:document.getElementById("layar").style.display="none"'>Tutup</a>;</div>
Silahkan buat text anda disini hanya sebagai contoh saja dalam pembuatan layer
</div>

javascript:document.getElementById("layar").style.display="none", merupakan script javascript yang digunakan untuk memerintahkan menyembunyikan kembali layar popup yang idnya adalah 'layar' jika link 'tutup' tersebut di klik. Selamat mencoba