Pasang Popup Banner

Oct 06, 2011 by Ayah Jayvyn in Belajar Web | Tags: , , , , , , , ,

Hallo.. ketemu lagi..
Gw mau ajarin bikin PopUp banner..
itu tuh yang kali kita buka halaman web..
tau tau muncul jendela kecil.. isinya bisa banner iklan.. atau mungkin untuk keperluan promo

Buat bikinnya kita perlu sebuah plugin..

Sebentar.. setel lagu dulu ya..untuk menemani belajar.. boleh juga nyanyiin lirik Playboy 7 Icons hahaha..

7 Icons – Playboy
Maaf kalo selera lagunya ga level :D

…………..

Kembali ke materi…

Nama pluginnya WP Super Popup

Download dulu disini WP Super Popup

Lalu sebagai contoh bannernya… download juga  image banner dibawah ini..

Ok.. kita mulai bermain di WP

1. Silakan login ke wordpressnya masing2

2. Kita upload dulu image banner tadi, klik Add New di bagian Media

3. Pilih file banner_dinnad_300x250.jpg, klik Open

4. Selesai upload, copas File URL pindahkan ke notepad atau ms word

Selesai dengan image, kita beralih ke install plugin WP Super Popup

5. Pada bagian Dashboard disebelah kiri, cari Plugins, klik Add New

6. Klik Upload

7. Klik Browse

8. Cari file wp-super-popup.0.9.6 yang tadi sudah didownload.. pilih wp-super-popup.0.9.6, klik Open

9. Klik Install

10. Selesai proses upload.. klik Active Plugin

Pi el ei wai… bi o wai.. bi o wai…
Pi el ei wai… bi o wai.. bi o wai…

:D

Ok, sekarang kita sudah memiliki semua yang dibutuhkan dan pada bagian Dashboard akan muncul menu baru

11. Klik Dashboard untuk reload/refresh

12. Lihat kebagian bawah disebelah kiri, ada yang baru.. Super Popup.. klik saja

13. Pada Base Settings lakukan setting seperti contoh gambar dibawah ini (Kalo sudah ngerti cara settingnya, bisa disetting sesuai keinginan)

14.Pada bagian Popup Content… pilih Embed the following WYSIWYG content

Tampilah editornya hampir mirip dengan ms word atau editor ketika kita akan posting artikel di wp bukan? Jadi… sy kira kalian sudah terbiasa dengan fitur fiturnya.

Kalian bisa tuliskan apapun disitu, contoh:

  • 7 Tips rahasia bisnis online yang mengubah hidup anda
  • Format posisi: center
  • Fontnya standar
  • Ukuran font 5(18pt)

Lalu pada latihan ini, sy mau masukan image banner yg sudah diupload tadi dibawah tulisan

15. Klik insert/edit image itu yg gambar pohon

16. Lalu isi kotak2 yang kosongnya

  • Image URL : copas alamat URL kesini, tadi kita sudah punya URL nya kan di notepad atau msword
  • Image description : isi keterangan gambarnya
  • Title : isi judul gambarnya

17. Selesai diisi, klik tombol Update

18. Tampilan di editornya kira2 seperti ini jadinya

19. Selanjutnya.. gak gak.. ga level.. gak ga level.. hadeuuh.. :)

Kita akan bikin Link untuk gambar banner tersebut, klik dulu gambar/image banner nya lalu klik gambar rante (insert link)

20. Isi Link URL nya dengan alamat web tujuan, lalu Target : Open in new windows (_blank), klik tombol update

Popup Content selesai, selanjutnya kita utak atik Visual Effects Settings
Yang akan kita atur disini adalah ukuran dari jendela popup

21. Isikan ukurannya seperti contoh dibawah ini (note: anda bisa merubahnya kapanpun sesuai keinginan)

22. Beres…. jangan lupa klik tombol Save Changes

Sekarang tugasnya cek apakah Popup windownya muncul?



 




Alhamdulillah...
Semoga artikel ini dapat bermanfaat bagi Anda. Terima kasih atas keikhlasannya memberikan donasi berupa komentar melalui salah satu layanan berikut Facebook Like, Facebook Comment, Alexa Review atau Wordpress Comment. Jazakallahu Khair


Review myjayvyn.com on alexa.com

Gunakan Facebook untuk memberi komentar :

3 Komentar untuk “Pasang Popup Banner”
  1. caNdra dewi bilang:

    kewreen abiss….
    suhu-ku ini emg Te O Pe.. :-)
    tengyu Pak Agi..

  2. Dinar bilang:

    alhamdulillah sudah bisa muncul pak popup Bannernya
    Thank You Pak Agi…:)

  3. Ayah Jayvyn bilang:

    sama sama :)



Artikel yang mungkin berhubungan
Web berbayar ato gratisan?
Cara pasang banner di widget
Posting sederhana
Pasang plugin Animated Twitter Bird


Artikel terbaru

Beri komentar

CommentLuv badge



Locations of visitors to this page


Plugin from the creators of Brindes Personalizados :: More at Plulz Wordpress Plugins