Caranya sangat mudah...
Silahkan download terlebih dahulu script yang dibutuhkan:
1. Framework javascript Jquery
2. Jquery fancybox
Sudah download? Oke langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Masukan kode script dibawah diantara
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">Keterangan script diatas:
</script>
<script src="/js/fancybox-1.3.4/jquery.easing-1.3.pack.js" type="text/javascript">
</script>
<script src="/js/fancybox-1.3.4/jquery.mousewheel-3.0.4.pack.js" type="text/javascript">
</script>
<script src="/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js" type="text/javascript">
</script>
<link href="/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css"></link>
// Fancybox for URL
$("#namelink").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'overlayOpacity' : 0.9,
'overlayColor' : '#fff',
});
#namelink adalah id link yang ingin dibuka secara popup
scrolling adalah ketika popup apakah box tersebut bisa di scroll kebawah atau fix (tetap ditempat)
titleShow adalah judul dari link yang ingin ditampilkan apakah mau ditampilkan di popup atau tidak
overlayOpacity adalah background opacity dari box tersebut overlayColor adalah warna dasar dari box tersebut
2. Beri tanda id pada link yang ingin dipopup
<a href="http://www.blogger.com/blogger.g?blogID=8104006414729830100#openpopup" id="namelink" title="New topic">Create new topic</a>keterangan script diatas:
<br />
<div style="display: none;">
<div id="openpopup">
Isi konten anda yang ingin dipopup disini</div>
</div>
id harus sama dengan trigger link pada header yaitu namelink (terserah mau pake nama apa)
title adalah judul dari link
href harus sama dengan id pada box yang ingin dibuka yaitu openpopup (terserah harus pake nama apa)
Oke setelah itu di save kemudian dicoba...
Berikut adalah contoh gambar untuk popup yang sudah saya buat:
URL yang ingin diklik
Ketika di klik maka akan keluar popup sebagai berikut:
Untuk contoh nyata silahakan klik link ini terus coba anda klik link create new topic... Bagi yang belum mengerti silahakan komentar nanti akan saya coba beberkan pada postingan ini..