> Cara membuat pop up box

Senin, 04 Juli 2011

16

Cara membuat pop up box

Pop up box adalah salah satu elemen yang sangat berguna pada web ataupun blog. Berbeda dengan pop up windows, Pop up box muncul pada tab atau halaman yang sama, bukan terbuka pada tab windows baru. Pop up box berfungsi untuk menampilkan konten yang berisi seperti gambar, video, form email, form register, form berlangganan artikel, ataupun bisa kita gunakan untuk menampilkan apa saja sesuai kebutuhan web atau blog kita.

Silahkan LIHAT DEMO.

Nah.... bola anda berminat, silahkan anda ikuti langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :
Catatan :
Perlu diperhatikan, gadget ini menggunakan jQueri. Jadi bila gadget ini tidak bekerja dengan baik, biasanya terdapat kode javascript / jQueri yang sama pada template anda. Jadi solusinya hapus javascript / jQueri yang ada pada kode diatas pada bagian paling atas. 

Bentuknya seperti berikut, dan silahkan anda hapus :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

6. SIMPAN TEMPLATE
Langkah selanjutnya anda tinggal menambahkan kode HTML yang ada dibawah, pada saat menulis artikel. Jangan lupa, bila ingin memasang gadget ini pada posting anda, silahkan gunakan area Edit HTML, bila sudah selesai, langsung saja terbitkan jangan dibuka area compose. Sebab ada sebaris kode yaitu tag <a> yang otomatis akan berubah, bila dibuka diarea compose.

Tapi bila anda ingin menampilkan Gallery pada sidebar blog anda. Berrarti anda tinggal menambah gadget. Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget


3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript


4. Copy dan paste kode dibawah ini pada gadget tersebut :
<div id="button">
<input type="submit" value="TEKS YANG ADA PADA TOMBOL" /></div>
<div id="popupContact">
<a id="popupContactClose">X</a>
<h1>JUDUL KONTEN POP UP</h1>
<div id="contactArea"></div>

DISINI AREA KONTEN POP UP

</div>
<div id="backgroundPopup">
</div>
Catatan : Warna biru adalah tag <a> yang otomatis akan berubah, bila dibuka diarea compose.
5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.
Ping your blog, website, or RSS feed for Free



Informasi Artikel :
Judul : "Cara membuat pop up box"
Diulas Oleh : | Senin, 04 Juli 2011 | 23.22
Description : Pop up box adalah salah satu elemen yang sangat berguna pada web ataupun blog . Berbeda dengan p...

Rating : 6.4 Dari 10, Berdasarkan 1600+ Dari 16 000+ Pengunjung.



16 komentar:

  1. bro kalo buat web joomla gimana bro???

    BalasHapus
  2. medical..., mohon maaf sy kurang faham tentang joomla

    BalasHapus
  3. Tanya bro, lau pop upnya berupa gambar atau foto gimana?
    tutorial ini kan hanya untuk gadget, kalau untuk di postingan giman, bro?
    mohon bantuannya...........

    BalasHapus
    Balasan
    1. Tutor bukan hanya utk gadget, tapi didlam posting juga bisa.

      Cara lain yang lebih mudah ada, anda bisa baca pada artikel berikut:
      http://www.carabuatwebgratis.com/2011/04/cara-membuat-pop-up-window.html

      Hapus
  4. kalau muncul pop up nya otomatis saat website pertama kali dibuka gimana ya...?

    BalasHapus
    Balasan
    1. Anda bisa baca tutornya pada artikel berikut:
      http://www.carabuatwebgratis.com/2012/01/cara-membuat-bar-mengambang-atau.html

      Hapus
  5. mungkin saya rasa sudah cukup, kebetulan saya lagi nyari-nyari cara membuat pop up setelah googling saya mampir kesini !
    terima kasih informasinya gan !

    BalasHapus
  6. makasih gan,,saya rasa ini cukup tipsnya...lanjut lagi kang...

    BalasHapus
  7. sip terima kasih.. btw ini munculnya sekali saja di awal apa tiap kita klik link baru ya?

    BalasHapus
  8. Script ini di blokir ga ma mozilla?

    BalasHapus
  9. Tutorialnya sangat membantu mas, sebelum saya terapkan kira-kira nanti pengaruh pada loading saat dibuka apa tidak Mas?..

    BalasHapus
  10. tolong dijelasin Lg dong, ko engga sama kaya demo nya...

    BalasHapus

BLOGGER

TUTORIAL BLOGGER

TUTORIAL BLOGGER

REKOMENDASI

REKOMENDASI


Artikel Terbaru

POST POPULER

Entri Populer


DAFTAR ISI

DAFTAR ISI


BLOGGER

HTML

CSS

JAVASCRIPT


BACKLINK

INFO

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.
Salam sukses selalu buat kita semua..... Amiiin.

CEO,
www.carabuatwebgratis.com
Noer cholis
Plosokuning V, Minomartani,
Ngaglik, Sleman, Yogyakarta.

TUKAR LINK

TUKAR LINK






Baca artikel "Manfaat Tukar Link"

CHAT

CHAT



TESTIMONI

Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

RECENT COMMENT

Ada kesalahan di dalam gadget ini

top down