Efek Bolong Tag DIV Html Dengan Tombol Show Hide

Efek Bolong Tag DIV Html Dengan Tombol Show Hide
(Efek Bolong Tag DIV Html Dengan Tombol Show Hide)
Membuat efek bolong Tag DIV merupakan cara yang dapat digunakan dengan mudah oleh para pengembang website untuk memandu para pengunjung dalam menggunakan website miliknya. Selain itu efek ini juga dapat digunakan untuk hal lain dalam mempercantik tampilan. Pada artikel ini akan dibahas mengenai pembuatan Efek Bolong (Hole) menggunakan Css dan javascript lengkap dengan tombol show dan hide. Sebelum melanjutkan membaca silahkan klik tombol dibawah untuk preview efek bolong yang dimaksud.

Preview
(Klik Kemudian Scroll)

Efek bolong seperti ini sebenarnya sudah dibahas pada artikel sebelumnya namun kali ini memiliki sedikit perbedaan yakni pada segi fitur. Pada artikel sebelumnya pembuatan efek bolong hanya menggunakan css murni sedangkan pada artikel ini kita tambahkan javascript sebagai tombol show dan hide nya. Untuk membaca artikel sebelumnya silahkan klik pada link dibawah.

Baca : Efek Lubang Tag Elemen DIV Html Menggunakan Css

Langkah-Langkah:

Cara berikut dapat diterapkan ke dalam website atau blog yang ente punya. Jangan khawatir! jika ente belum punya website atau blog karena pada artikel ini sudah ane siapkan halaman html sebagai penggantinya.

Persiapan Awal

Siapkan website atau blog yang ente punya. Jika belum memiliki website atau blog maka gunakan html yang sudah ane siapkan dibawah ini untuk prakteknya. Kode Html dibawah ini adalah html mentah yang belum diberikan efek bolong. Silahkan salin kedalam notepad kemudian simpan dengan nama latihan.html

Baca : Belajar HTML5 - Elemen Dasar Untuk Pemula 


Sebagai Preview silahkan klik tombol dibawah ini.

Tambahkan Tag DIV

Langkah berikutnya silahkan tambahkan kode berikut tepat di bawah tag <body>



Cara penempatan kodenya adalah sebagai berikut:
*) kode lainnya...
<body>
<div id="preview" onclick="hide_lobang()">
   <div id="lobang"></div>
</div>
*) kode lainnya...
</body>
*) kode lainnya...
Kode yang barusan kita tambahkan adalah kode div yang nanti akan kita manipulasi menjadi bolong.

Manipulasi dengan Css

Berikut adalah penambahan css untuk memberikan efek bolong pada tag div yang telah kita tambahkan sebelumnya. Silahkan salin kode ini dan letakan tepat diatas tag </head>.


Untuk lebih jelasnya silahkan perhatikan penempatan kode css nya seperti berikut.
      *) kode lainya...
<head>
      *) kode lainya...
      Letakan Kode Css Lubang disini...
</head>
      *) kode lainya...


Tambahkan Tombol

Setelah menambahkan Efek, langkah selanjutnya yaitu menempatkan tombol untuk Show Hide pada HTML kita. Silahkan salin kode tombol ini dan letakan di didalam kode html yang ente inginkan. Dalam penempatannya terserah ente dimana tapi harus berada diantara tag <body> dan </body>. Berikut kode tombolnya :




Aktifkan Tombol

Ini merupakan langkah terakhir. Aktifkan tombol yang sudah kita tambahkan pada file html kita dengan menambahkan javascript. Letakan kode javascript berikut tepat diatas tag </body>



Untuk lebih jelasnya silahkan perhatikan penempatan kodenya seperti dibawah ini.

            *) kode lainya...
            <script>
                  function show_lobang(){
                        document.getElementById("preview").style.display="block";
                  }
                  function hide_lobang(){
                        document.getElementById("preview").style.display="none";
                  }
            </script>
      </body>
</html>

Selesai

Sampai ke langkah ini file ente sudah siap untuk di jalankan dibrowser. Silahkan simpan dan coba untuk menjalankannya di browser.

Jika tidak sesuai harapan!
Silahkan gunakan full kode html yang telah ane tambahkan efek bolong beserta tombolnya pada kolom kode berikut. Silahkan salin ke lembar kerja baru pada notepad, kemudian simpan dengan format latihanku.html dan coba buka kembali file yang sudah tersimpan tersebut.



Tambahan

Dalam penambahan kode javascript untuk mengaktifkan tombol sebenarnya dapat menggunakan framework jquery. Penggunaan Jquery bertujuan agar lebih ringkas dan simple saja. Jadi kita akan mudah memahami kode javascript-nya.

Jika ingin menggunakan Jquery, silahkan ganti javascript yang sudah ente tambahkan sebelumnya pada langkah diatas dengan kode berikut ini.



Oke ane rasa cukup untuk tutorial membuat Efek Bolong Tag DIV Html Dengan Tombol Show Hide. Sekian dulu, kita lanjut pada tutorial berikutnya. Semoga berguna untuk website atau blog ente :D dan jangan lupa. Jika ada pertanyaan bisa langsung berkomentar atau hubungi admin langsung di menu kontak. Terima kasih.

0 komentar :