Membuat Pop Up Overlay V2 (Aple Overlay)
Assalamualaikum
Pada postingan sebelumnya saya telah menerangkan cara membuat pop up overlay yang sederhana dan cara membuat buku tamu muncul dengan pop up overlay, kali ini saya akan menerangkan cara membuat pop-up overlay dengan efek berbeda, sekaligus menindak lanjuti komentar sobat nona chandra K pada tulisan saya sebelumnya membuat buku tamu muncul dengan pop up overlay, saya akan memberi alternatif membuat pop up overlay yang berbeda, yang satu ini juga sudah saya praktekin, contohnya bisa kamu lihat di sini.
Pertama kamu perlu meletakkan struktur CSS di bawah ini di atas atau sebelum kode ]]></b:skin>
/* the overlayed element */
.apple_overlay {
display:none;
/* growing background image */
background-image:url(http://i1191.photobucket.com/albums/z464/izoel1/transparentbackroundoverlay.png);
/*
width after the growing animation finishes
height is automatically calculated
*/
width:640px;
/* some padding to layout nested elements nicely */
padding:35px;
/* a little styling */
font-size:11px;
}
/* default close button positioned on upper right corner */
.apple_overlay .close {
background-image:url(http://i1191.photobucket.com/albums/z464/izoel1/close3.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}
<script src='http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js'/>. Kemudian kamu letakkan kode berikut di atas atau sebelum kode </body>
<link href='http://izoeljquerytools.googlecode.com/files/apple-overlay.css' rel='stylesheet' type='text/css'/>
<script>Kamu simpan pengaturan template kamu, keluar dari Edit HTML, dan masuk ke Page Elements (elemen halaman), pilih Add a Gadget, dan pilih menu HTML/JavaScript dan isikan kode HTML berikut
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
Kode Pop Up overlay di atas berisi daftar isi blog saya, silakan kamu ganti isinya sesuka kamu.<!-- trigger elements -->
<div id="triggers">
<img src="http://i1191.photobucket.com/albums/z464/izoel1/thnaks2.png" rel="#photo1"/>
</div>
<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
<img src="http://i1191.photobucket.com/albums/z464/izoel1/izoelsnoticescreens.png" />
<div class="details">
<h2>Izoel's notice</h2>
<p>
<div style="color: #0EFF00;"> <span style="font-size: 15px;"><div style="border: 2px inset #ff0000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://izoelsdaftarisiautomatic.googlecode.com/files/daftarisiauto.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://alexander-zulkarnain.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>
<div style="text-align: right;"><a href='http://alexander-zulkarnain.blogspot.com'>Alexander Zulkarnain</a>
</div></span></div></p></div></div>
<div style="color: black;">
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script src="http://izoellatoverlay.googlecode.com/files/latoverlay.js" " type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});</script>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
Selamat mencoba, semoga berhasil.
About Izoels notes
artikeL anda sangat menarik mas ..
ReplyDeletemenurut saya anda ini orang yang profesionaL ..
@ie-be terimakasih atas komentar dan kunjunganya masbro ... :)
ReplyDeleteThis comment has been removed by the author.
ReplyDelete