Sabtu, 16 Juni 2012

Make Opening Popup use JavaScript for...

Pasti dari kalian semua pernah melihat saat mengunjungi sebuah blog/web, kemudian tidak lama muncul kotak like box facebook! (((toweweewew)))
Kebanyakan karya hack tersebut memakai script jQuery/jQuery-ui. Add gadget mengenai jQuery Pop-up For Facebook Like Box V2 For Blogger Sekarang bagaimana ceritanya bila pada blog kita tidak terpasang jQuery script! Otomatis keinginan memiliki pop up like-box sedikit sulit untuk terealisasikan :p Masih ada JavaScript bos ;)) Koben akan berbagi cara membuat hal serupa Facebook LikeBox Popup using JavaScript ;)
Jauh berbeda dengan versi jQuery popup, simpel dan tidak banyak variasi tapi mempunyai fungsi yang sama yakni menampilkan konten bla-bla-bla...close!Seperti itu sobat, konten ditampilkan seolah-olah menghalangi blog. Lalu klik di area kosong guna menghilangkannya ;)
Cari kode </b:skin> tepat sebelum/diatas kode itu masukan kode CSS berikut.#load_blur {
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
width: 100%;
height: 100%;
cursor: help;
position: absolute;
text-align: center;
background: rgba(251, 251, 251, 0.3);
}
Kemudian cari tag </body> sisipkan ramuan JavaScript brkt
<script type='text/javascript'>
//<![CDATA[
function loaded_blur( mode ) {

blur_div = 'load_blur';
var elem = document.getElementById( blur_div );
elem.style.display = ( elem.style.display == "none" ) ? "" : "none";

}
//]]>
</script>
Masih di dalam tag <body> guna penanaman markup HTML. Mau di bawah code <body> atau di atas </body> bisa juga Add a Gadget ► HTML/Javascript :d

HTML Configure

<div id='load_blur' onclick='loaded_blur();' title='click anywhere to enter'>

-------------- ADD YOUR CONTENT HERE --------------

</div>
Content dapat di isikan terserah mau bla-bla-bla apaan sesuai keperluan.
DONE.
Masukkan bumbu di bawah ini pada kotak add a gadget guna langsung meng-add ke blog kalian!
<style>
#load_blur {
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
width: 100%;
height: 100%;
cursor: help;
position: absolute;
text-align: center;
background: rgba(251, 251, 251, 0.3);
}
</style>

<script type='text/javascript'>
//<![CDATA[
function loaded_blur( mode ) {

blur_div = 'load_blur';
var elem = document.getElementById( blur_div );
elem.style.display = ( elem.style.display == "none" ) ? "" : "none";

}
//]]>
</script>

<div id='load_blur' onclick='loaded_blur();' title='click anywhere to enter'><img src="http://2.bp.blogspot.com/-ARQWNRaSuEY/T7SDNxjE_xI/AAAAAAAACYM/VktFcPggwjs/s1600/cw.jpg" alt="beben-koben" /></div>

Happy popup \m/

Tidak ada komentar:

Posting Komentar