Loading ... ... Please wait!

Senin, 12 Januari 2009

Hidden Layer

Begitu banyak fasilitas widget yang ditawarkan para penyedia layanan baik yang free maupun bayar. Dan begitu senangnya kita melihat blog kita begitu ramai dengan berbagai fasilitas tersebut. Tapi seiring dengan itu muncul juga beberapa masalah.

Memilih mana diantara widget tersebut yang paling jitu di tempatkan pada bagian atas, dan mana yang tidak masalah jika ditempatkan pada bagian bawah halaman blog kita.

Masalah tersebut mungkin bisa diatasi dengan memanfaatkan hidden layer. Membuat satu layar yang sudah ditentukan posisinya secara absolute, kemudian disembunyikan. Setelah itu dibuatkan satu link atau tombol/button yang jika diklik, layar tersebut muncul sebagai layar tersendiri.

Jika tertarik scriptnya seperti ini

Langkah pertama adalah membuat Layar terlebih dahulu

<div style="position:absolute;top:20px;left:20px;width:400px;height:300px;z-index:100;border:1px solid #000000;background-color:#ffffff" id="layar"> Buat/pasang tulisan atau script disini</div>

Setelah itu, layar tersebut dihilangkan/disembunyikan,
kode scriptnya adalah display:none, pasang tag script ini pada posisi style sehingga menjadi seperti ini

<div style="position:absolute;top:20px;left:20px;width:400px;height:300px;z-index:100;border:1px solid #000000;background-color:#ffffff;display:none" id="layar"> Buat/pasang tulisan atau script disini</div>

Langkah berikutnya adalah membuat link agar layar tersebut muncul saat link di klik
scriptnya adalah

<script>
function bukalayar()
{ document.getElementById("layar").style.display="block"; }
</script>

<a href="#" onclick="bukalayar()">BUKA LAYAR</a>


Agar Setelah dibuka layar tersebut bisa ditutup kembali, buat satu link lagi yang berfungsi menutup layar yaitu

<script>
function tutuplayar()
{ document.getElementById("layar").style.display="none"; }
</script>

<a href="#" onclick="tutuplayar()">TUTUP LAYAR</a>

Link tutup layar bisa disisipkan pada hidden layar tadi

sehingga menjadi seperti ini

<div style="position:absolute;top:20px;left:20px;width:400px;height:300px;z-index:100;border:1px solid #000000;background-color:#ffffff;display:none" id="layar">
<a href="#" onclick="tutuplayar()">TUTUP LAYAR</a>

Buat/pasang tulisan atau script disini
</div>

Kemudian buka EDIT HTML dan tempatkan di bawah
<body>

atau buka TAMBAH GADGET > HTML/JAVASCRIPT > Copy Paste script berwarna merah. Script link Buka layar anda bisa sandingkan dengan menu yang lain.

Contoh HIDDEN LAYER, KLIK di bawah ini
OPEN LAYER

Related Posts by Categories



15 comments:

suryaden mengatakan...
bagus sekali, keren dan menambah variasi dalam berblog ria...
makasih fren, teruslah berkarya
Didiet mengatakan...
Mantab nech patut di coba... nice trick
Didiet mengatakan...
Cara pasangnya gmn mas...??? Saya tidak ngerti cara pasangnya... mohon bisa diperjelas cara pasangnya mas...
The Green Planet mengatakan...
Thanks for tips, and for your visit :)
Photoshop tutor mengatakan...
Waah keren tuh mas, bisa dicoba...!!!
Ngumpet mengatakan...
Mmmm... tehnik yg keren tuh, baru kali ini nemu yang ngupas mslh hidden layer ini. Dicoba ahh...
inspiration mengatakan...
setelah baca2 ko aq masih bngung ya?? apa aku yg bego kali ya?? btw makasih byk infonya mas, nambah ilmu nih
IHSAN mengatakan...
wah ilmu baru nih bagiku
thanks ya sharingnya
Leo mengatakan...
mantap!!!.. thank's atas sharing ilmunya ^^^
iFant mengatakan...
Susah banget mempelajari yang ini sampai baru sekarang bisa terwujud, memang penjelasannya rinci banget, tapi bagi yang awan kayak saya bikin pusing...!!!
Hot Page mengatakan...
Banyak Info menarik di sini tapi sayang buat pemula pasti kebingunggan contohnya saya. Jika berkenan berikan tutorialnya secara step by step sehingga mudah dimengerti.Banyak yang saya coba praktekin tapi ngak ada yang berhasil. Mungkin ini diperuntukkan buat blogger yang udah mahir. Walaupun begitu saya sangat salut buat pak dokter yang udah banyak menghabiskan waktu duduk di komputer menulis artikel artikel yang bermanfaat buat orang banyak. Semoga tidak henti-hentinya artikel yang lebih menarik di posting pada blog ini.
ebenk789 mengatakan...
Thanks mas buat Ilmunya :D
Pak gendut mengatakan...
terima kasih kembali tulisan anda saya lihat gress dan original dibanding yg lain banyak yg suka latah tiru2. bisa jadi perbendaharaan belajar saya selain kan rohman dan oom
kungkung awam mengatakan...
wuihh kerennn kereenn .. tapi bingung diriku.. wekekek..
pelan2 ah.. Ctrl+ D dolo.. wakakak
ghopal mengatakan...
nice post

Posting Komentar

 
 
 
 
 
 


CLOSE
MAIN MENU
REFRESH