DUNIA ELEXTRONICA : Membuat Pop Up Effect Loading Page

Membuat Pop Up Effect Loading Page

16.01 • Blogger • 0 komentar Share on Facebook

Assalam...
Hufh, Dapat juga akhirnya...
Setelah capek muter muter dunia maya ternyata hari ini tidak begitu mengecewakan..
Mulai dari Sabang sampai Sakkareppe bahkan ke jabaldut sudah Ane ubek ubek,tapi gak nemu yang pas(saking O'onnya X y)....
Setalah hampir putus semangat,ndilalah secara nggak sengaja Ane nyampir juga di sebuah forum yang Ane gak ngerti bahasane,dan hanya dengan modal tahu "Yes And No" Ane baca baca, dannnnn...
Aha..Ini dia yang ane cari...
Tanpa menunggu lama, langsung aja dech Ane embat codenya..
Sobat blogger, Newbie seperti Ane khususnya mau Tahu nggak..??
Key, ini dia kode-nya,yang bikin saat kita mau masuk blog ada sedikit variasi atau kata orang di sebut "Pop Up Effect loading page"..bener gak ya ? hehe.
Caranya Mudah. seperti biasa,
*Login
*Template
*Edit Html

Selanjutnya,Taruh kode berikut ini dibawah kode "<head>"

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Lalu Taruh Kode ini di atas kode "</head>"

<script type="text/javascript">
$(document).ready(function() {	

		var id = '#dialog';
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 	
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});		
	
});

</script><br />
<br />
<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}
</style>

Dan yang terakhir,letakkan kode ini di bawah tag "<body>" Atau di atas "</body>

<div id="boxes">
<div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
TEXT DI SINI <br />
<a href="#" class="close">Tutup</a><br />
</div>
<div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask">
</div>
</div>

Simpan dan lihat hasilnya..
Semoga manfa'at
Wassalam

Di Publikasikan Oleh : ADMIN .

Anda sedang membaca artikel tentang Membuat Pop Up Effect Loading Page . Silahkan copy paste atau menyebar-luaskan artikel ini, Terserah Anda meletakkan link dibawah ini atau tidak sebagai sumbernya ↓

                                    <a href="
                                    https://jatealorz.blogspot.com/2013/08/membuat-effect-loading-page.html
                                    " target="_blank">
                                    Membuat Pop Up Effect Loading Page
                                    </a>

( 0 ) Comments

Posting Komentar

Post by Jatealorz Community .

Membuat Pop Up Effect Loading Page

Di Publikasikan Oleh : ADMIN .

( 0 ) Comments

Posting Komentar

Gue

Advertisement

Label

Label

Bisnis On line

LIke ^_^

Info bisnis Online