Posted by : Yasep Atmaja Jumat, 06 Januari 2012

Ini sebenernya adalah popup overlay yang biasanya dipake buat slide foto, akhirnya gua terinspirasi buat otak-atik dikit buat dijadiin chat box (penyalahgunaan).

Ok langusng ke tutorialnya.

Seperti biasa login blogger - templete - Edit HTML
Pertama Sobat 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;
}
Selanjutnya Sobat letakkan kode berikut setelah atau di bawah kode <head>
<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'/> 
Kemudian Sobat letakkan kode berikut di atas atau sebelum kode </body>
<script>
$(function() {
$("#triggers img[rel]").overlay({effect: 'apple'});
});</script>
Sobat simpan pengaturan template Sobat, 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

<!-- trigger elements -->
<div id="triggers">
<center><span style=" cursor:pointer; position:fixed;  z-index:+10000; top:50px; right:0px; "><img  src="http://3.bp.blogspot.com/--vbWxeDIMEk/TvuKgkiHphI/AAAAAAAAAPs/VuBTUMJ3Ir4/s1600/chat2.png" cursor="pointer" rel="#photo1"/>
</span></center></div>
<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
<div class="details">
   <p>
(Code CBOX nya taruh disini sob)

<script>
document.write(unescape('%4F%72%69%67%69%6E%61%6C%20%77%69%64%67%65%74%20%66%72%6F%6D%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%72%69%66%61%6C%64%68%69%61%77%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%3E%3C%62%3E%72%69%66%61%6C%64%68%69%61%77%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%3C%2F%62%3E%3C%2F%61%3E'));
</script>
</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() {
    $(&quot;#triggers img[rel]&quot;).overlay({effect: &#39;apple&#39;});
});</script>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
    $("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>


Save dan lihat hasilnya sob.

Yang warna IJO gambar chatbox yang nemplok dipinggir itu, itu link gambar gua.
 
For Sumber  : Rifaldhiaw

{ 1 komentar... read them below or add one }

  1. Waduh, kyk gini aja saya gak bisa... tak minum Susu Kambing dulu, biar tambah paham...
    Terimakasih manfaat banget artikelnya

    BalasHapus

Welcome to My Blog

Statistik

Banner

Free counters!


- Copyright © Adzroo Zata -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -