Membuat Pop Up Overlay Di Posting

Assalamualaikum.

---

  Posting kali ini saya akan membahas bagaimana caranya membuat pop up overlay di dalam posting tanpa memasang script css di template blog, sebenarnya tidak hanya di dalam posting tapi bisa juga di pasang dari kolom teta letak (elemen halaman blog).

Sebelumnya saya sudah membuat posting mengenai apa itu pop up overlay dan bagaimana cara membuat pop up overlay Cara Membuat PopUp Overlay dan di posting yang Membuat Pop Up Overlay V2 (Aple Overlay). Posting ini juga penerapan dari artikel saya yang berjudul Cara Memasang Widget Dengan CSS, JavaScript & HTML Di Dalam Posting.

Disini kita akan membuat overlay di artikel saya yang berjudul Membuat Pop Up Overlay V2 (Aple Overlay) tapi saya terapkan tanpa memasang script di HTML editor blog, semua struktur kodenya saya letakkan di posting ini.

Klik gambar di bawah untuk melihat contoh pop up overlay, di dalamnya terdapat kode untuk membuat pop up seperti itu, silakan copy paste saja kodenya. Kamu hanya perlu mengganti tulisan yang berwarna Hijau

Izoel's notice

Salin saja kode di bawah ini untuk membuat pop up overlay kamu, dan jangan lupa ganti tulisan yang berwarna hijau. Selamat mencoba :)

<div id="triggers">
<img rel="#photo1" src="GAMBAR TOMBOL POP UP OVERLAY" />
</div>
<div class="apple_overlay black" id="photo1">
<img src="GAMBAR DI DALAM POP UP OVERLAY" />
<br />
<div class="details">
<h2>
<span class="Apple-style-span" style="color: #f1c232;">Izoel's notice</span></h2>
<span class="Apple-style-span" style="color: #f1c232;">ini adalah latiah membuat pop up overlay, tutorial po pup overlay bisa di lihat disini <a href="http://alexander-zulkarnain.blogspot.com/2011/03/membuat-pop-up-overlay-v2-aple-overlay.html">http://alexander-zulkarnain.blogspot.com/2011/03/membuat-pop-up-overlay-v2-aple-overlay.html</a></span>
<br />
ISI DENGAN ISI POP UP OVERLAY KAMU
<span style="font-size: 15px;">
</span><br />
<div style="text-align: right;">
<span style="font-size: 15px;"><a href="http://alexander-zulkarnain.blogspot.com/">Alexander Zulkarnain</a>
</span></div>
<span style="font-size: 15px;">
</span></div>
</div>
</div>
<div style="color: black;">
</div>
<script "="" src="http://izoellatoverlay.googlecode.com/files/latoverlay.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
$(&quot;#triggers img[rel]&quot;).overlay({effect: &#39;apple&#39;});
});
</script>
<script>
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>
<style type="text/css">
/* 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;
}
</style>
<script src="http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js">
<link href='http://izoeljquerytools.googlecode.com/files/apple-overlay.css' rel='stylesheet' type='text/css'/>
<script>
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>

Alexander Zulkarnain

Silakan sedot :)

---

Semoga berhasil.

Assalamualaikum