Seperti biasa mohon izin dulu kepada [i]modz[/i] klo tread ini ga berguna atau menuh²in page silahkan di close [b]Credit 2 :[/b] [url=http://www.dynamicdrive.com]Dynamicdrive[/url] [url=http://profiles.friendster.com/anoer]Noel[/url] [b]Bang Kher untuk Cbox antiposernya[/b] Sekarang ada 2 versi [color=blue]Versi 1 : Animasi Floating Cbox[/color] [color=blue]Versi 2 : Animasi Glider Cbox[/color] [quote] [color=#FF0000]Chat box bisa di close[/color] [color=#FF0000]dan bisa di munculkan kembali[/color] [img]http://i36.photobucket.com/albums/e11/anoer/chatbox.jpg[/img][/quote] Copas script di bawah ini ke dalam JS kalian bagian [b]C[/b] edit bagian yang di [b]BOLD[/b] dan sesuaikan dengan layout kalian. [color=blue]Versi 1 : Animasi Floating Cbox[/color] [url=http://h1.ripway.com/noellagi/floatcbox.html]PREPIU[/url] [spoiler] /////////////FLOATING CBOX KIRI///////////// var Noelfti; try {Noelfti = document.createElement("div"); } catch (e) {Noelfti = document.createElement("<div>"); } Noelfti.setAttribute("style","text-align:center;padding-top: 5px"); Noelfti.innerHTML = "<br><div align=\"center\"><center><input type=\"button\" value=\"[b]Chat Yuk!![/b]\" class=\"pencet\" onClick=\"javascript:staticbar()\"></center></div>"; document.getElementById("[color=blue]controlPanelButtons[/color]").parentNode.appendChild(Noelfti); cboxane="<div id='topbar' style='position:absolute; visibility: hidden;z-index: 100; border: 2px solid black; padding: 2px; background-color:[b]lavender[/b];width: 180px;'><div id='topbar' align='right'><a onClick='closebar(); return false'><img src='http://i36.photobucket.com/albums/e11/anoer/close.gif' border='0' /></a></div><div align='center' id='topbar' style='width:100%;' ><font size='1'><font color='[b]#000000[/b]'>Click Button .:: Chat Yuk!!! ::. Di bawah CP!!!</font><div style='border: 0px solid [b]#000000[/b]';><iframe frameborder='0' width='180' height='200' src='[b]URL MAIN CBOX[/b]' scrolling='auto' allowtransparency='yes' name='tembak' id='tembak'></iframe><br></div><form name='chat' target='tembak' action='[b]MAIN GANTI SUBMIT[/b]' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' name='eml' value='http://profiles.friendster.com/"+pageViewerID+"'><br><textarea style='color: #[b]000000[/b]; border: 1px solid #[b]808080[/b]; background-color: #[b]F4F6FA[/b]; padding: 4px; overflow:hidden' class='cboxMsgArea' cols='25' rows='3' name='pst'></textarea><br \><input type='submit' class='tombol' value='Submit' name='submit'><input class='tombol' type='reset' value='Clear' maxlength='23' onClick='reset()'><input type='button' class='tombol' value='Refresh' name='tembak' onClick='window.tembak.location.href=document.getElementById('tembak').src'><br><div id='show' style='display: inline'><a href='javascript:showForm()'><font color='#[b]ff6666[/b]'>[= show smilies =] </font></a></div><div id='close' style='display: none'><a href='javascript:showForm()'><font color='#[b]ff6666[/b]'>[= hide smilies =]</font></a></div><div id='hide' style='display: none'><div width='100%' style='border:0px solid #[b]000000[/b]; background:transparent;padding:4px' align='center'><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a></div></div></form></div></td></div></tr></table></form></div>"; flow=document.getElementById('flo_wrapper'); river=document.createElement("div"); river.innerHTML=cboxane; flow.parentNode.insertBefore(river,flow); var persistclose=0 var startX = 30 var startY = 60 var verticalpos="fromtop" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("topbar"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar //smilies cbox function showForm() { var div = document.getElementById("hide"); var show = document.getElementById("show"); var close = document.getElementById("close"); if(div.style.display!="none") { hideForm(); } else { div.style.display = "block"; show.style.display = "none"; close.style.display = "block"; } } function hideForm() { var div = document.getElementById("hide"); var show = document.getElementById("show"); var close = document.getElementById("close"); div.style.display = "none"; show.style.display = "block"; close.style.display = "none"; } function x(){ return; } function DoSmilie(addSmilie, messageDef){ var addSmilie, messageDef, revisedMessage; var currentMessage = document.chat.pst.value; if(currentMessage==messageDef){currentMessage='';} revisedMessage = currentMessage+addSmilie; document.chat.pst.value=revisedMessage; document.chat.pst.focus(); return; } [/spoiler] [quote]untuk menambah smile cukup tambahkan code ini <a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a>[/quote] [quote]Button "[b]Chat Yuk!!![/b] di control [color=blue]controlPanelButtons[/color] bisa kalian atur posisnya di [color=blue]mainnav[/color] [color=blue]subnav[/color] [color=blue]logo[/color] [color=blue]navlang[/color][/quote] Kemudian Copas code di bawah ini ke dalam [b]CSS[/b] kalian [spoiler] .pencet{ color:#dddddd; font-family:'trebuchet ms',helvetica,sans-serif; font-size:100%; font-weight:bold; border-top: 1px #888888 solid; border-left: 1px #666666 solid; border-right: 1px #222222 solid; border-bottom: 1px #000000 solid; background-color: #4d4d4d; margin: 3px; padding: 0px 3px;} .pencet:hover{ background-color: #000000; } [/spoiler] ========================================================== [b]Floating cbox posisi kanan[/b] [spoiler] /////////////FLOATING CBOX KANAN///////////// var Noelfti; try {Noelfti = document.createElement("div"); } catch (e) {Noelfti = document.createElement("<div>"); } Noelfti.setAttribute("style","text-align:center;padding-top: 5px"); Noelfti.innerHTML = "<br><div align=\"center\"><center><input type=\"button\" value=\"[b]Chat Yuk!![/b]\" class=\"pencet\" onClick=\"javascript:staticbar()\"></center></div>"; document.getElementById("[color=blue]controlPanelButtons[/color]").parentNode.appendChild(Noelfti); cboxane="<div id='topbar' style='position:absolute; visibility: hidden;z-index: 100; border: 2px solid black; padding: 2px; background-color:[b]lavender[/b];width: 180px;'><div id='topbar' align='right'><a onClick='closebar(); return false'><img src='http://i36.photobucket.com/albums/e11/anoer/close.gif' border='0' /></a></div><div align='center' id='topbar' style='width:100%;' ><font size='1'><font color='[b]#000000[/b]'>Click Button .:: Chat Yuk!!! ::. Di bawah CP!!!</font><div style='border: 0px solid [b]#000000[/b]';><iframe frameborder='0' width='180' height='200' src='[b]URL MAIN CBOX[/b]' scrolling='auto' allowtransparency='yes' name='tembak' id='tembak'></iframe><br></div><form name='chat' target='tembak' action='[b]MAIN GANTI SUBMIT[/b]' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' name='eml' value='http://profiles.friendster.com/"+pageViewerID+"'><br><textarea style='color: #[b]000000[/b]; border: 1px solid #[b]808080[/b]; background-color: #[b]F4F6FA[/b]; padding: 4px; overflow:hidden' class='cboxMsgArea' cols='25' rows='3' name='pst'></textarea><br \><input type='submit' class='tombol' value='Submit' name='submit'><input class='tombol' type='reset' value='Clear' maxlength='23' onClick='reset()'><input type='button' class='tombol' value='Refresh' name='tembak' onClick='window.tembak.location.href=document.getElementById('tembak').src'><br><div id='show' style='display: inline'><a href='javascript:showForm()'><font color='#[b]ff6666[/b]'>[= show smilies =] </font></a></div><div id='close' style='display: none'><a href='javascript:showForm()'><font color='#[b]ff6666[/b]'>[= hide smilies =]</font></a></div><div id='hide' style='display: none'><div width='100%' style='border:0px solid #[b]000000[/b]; background:transparent;padding:4px' align='center'><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a></div></div></form></div></td></div></tr></table></form></div>"; flow=document.getElementById('flo_wrapper'); river=document.createElement("div"); river.innerHTML=cboxane; flow.parentNode.insertBefore(river,flow); var persistclose=0 var startX = 30 var startY = 65 var verticalpos="fromtop" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("topbar").style.visibility="hidden" } function staticbar(){ barheight=document.getElementById("topbar").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopright=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopright()", 10); } ftlObj = ml("topbar"); stayTopright(); } if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar [/spoiler] =========================================================== [quote][i]*edited Script di atas conflict kalau di gabungkan dengan [b]floatimage[/b] untuk alternativnya gunakan [b]Yang versi 2 (Animasi Glider Cbox)[/b] di bawah ini[/i][/quote] [color=blue]Versi 2 : Animasi Glidder Cbox[/color] Special Tengs [b]Bro Indomie[/b] 4 The Idea... :idea::idea: [url=http://h1.ripway.com/noellagi/gridle.html]PREPIU[/url] [quote][img]http://i36.photobucket.com/albums/e11/anoer/pengumuman.jpg[/img][/quote] Edit code di bawah ini kemudian Copas di bagian [b]C[/b] [spoiler] ////////////GLIDER CBOX////////////// var div = document.createElement("div"); div.innerHTML = "<div id=\"tombolPencet\">"+ "<a onClick=\"moveOnTombol();moveOffSelector()\">"+ "<img src=\"[b]http://i36.photobucket.com/albums/e11/anoer/chatnyok.gif[/b]\" width=\"180\" height=\"40\" border=\"0\"></a>"+ "</div>"+ "<div id=\"tombolNongol\">"+ "<a onClick=\"moveOffTombol();moveOnSelector()\">"+ "<img src=\"[b]http://i36.photobucket.com/albums/e11/anoer/chatnyok.gif[/b]\" width=\"180\" height=\"40\" border=\"0\"></a>"+ "<br>"+ "<br>"+ "<div align='center' id='topbar' style='width:180px;' height:100%;'><iframe frameborder='0' width='180' height='200' src='[b]URL MAIN CBOX[/b]' scrolling='auto' allowtransparency='yes' name='tembak' id='tembak'></iframe><br></div><form name='chat' target='tembak' action='[b]MAIN GANTI SUBMIT[/b]' method='post'><input type='hidden' name='nme' value='"+pageViewerFName+"'><input type='hidden' name='eml' value='http://profiles.friendster.com/"+pageViewerID+"'><br><textarea style='color: #[b]000000[/b]; border: 1px solid #[b]808080[/b]; background-color: #[b]F4F6FA[/b]; padding: 4px; overflow:hidden' class='cboxMsgArea' cols='25' rows='3' name='pst'></textarea><br \><input type='submit' class='tombol' value='Submit' name='submit'><input class='tombol' type='reset' value='Clear' maxlength='23' onClick='reset()'><input type='button' class='tombol' value='Refresh' name='tembak' onClick='window.tembak.location.href=document.getElementById('tembak').src'><br><div id='show' style='display: inline'><a href='javascript:showForm()'><font color='#[b]ff6666[/b]'>[= show smilies =] </font></a></div><div id='close' style='display: none'><a href='javascript:showForm()'><font color='#[b]ff6666[/b]'>[= hide smilies =]</font></a></div><div id='hide' style='display: none'><div width='100%' style='border:0px solid #[b]000000[/b]; background:transparent;padding:4px' align='center'><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a><a href=\"javascript:DoSmilie(' :[b]code smile[/b]: ')\"><img src='[b]URL SMILEY[/b]'></a></div></div></form></div></td></div></tr></table></form></div>"; Show ="no"; // var OffX = -270; var PosX = 70; var PosY = 100; var speed = 1; var increment = 5; var incrementNS4 = 5; // NS4 Slower untuk browsers // Gak perlu Edit // =========================== var is_NS = navigator.appName=="Netscape"; var is_Ver = parseInt(navigator.appVersion); var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5; var is_NS5up = is_NS&&is_Ver>=5; var TombolX=OffX; var SelX=PosX; var sPosX=PosX; var sOffX=OffX; if (Show=="yes"){ sPosX=OffX; sOffX=PosX; TombolX=sOffX; SelX=sPosX; } if (is_NS4){ increment=incrementNS4; Lq="document.layers."; Sq=""; eval(Lq+'tombolPencet'+Sq+'.left=sPosX'); eval(Lq+'tombolNongol'+Sq+'.left=sOffX'); eval(Lq+'tombolPencet'+Sq+'.top=PosY'); eval(Lq+'tombolNongol'+Sq+'.top=PosY'); }else{ Lq="document.all."; Sq=".style"; document.getElementById('tombolPencet').style.left=sPosX+"px"; document.getElementById('tombolNongol').style.left=sOffX+"px"; document.getElementById('tombolPencet').style.top=PosY+"px"; document.getElementById('tombolNongol').style.top=PosY+"px"; } function moveOnTombol(){ if (TombolX<PosX){ TombolX=TombolX+increment; if (is_NS5up){ document.getElementById('tombolNongol').style.left=TombolX+"px"; }else{ eval(Lq+'tombolNongol'+Sq+'.left=TombolX'); } setTimeout('moveOnTombol()',speed); } } function moveOffTombol(){ if (TombolX>OffX){ TombolX=TombolX-increment; if (is_NS5up){ document.getElementById('tombolNongol').style.left=TombolX+"px"; }else{ eval(Lq+'tombolNongol'+Sq+'.left=TombolX'); } setTimeout('moveOffTombol()',speed); } } function moveOffSelector(){ if (SelX>OffX){ SelX=SelX-increment; if (is_NS5up){ document.getElementById('tombolPencet').style.left=SelX+"px"; }else{ eval(Lq+'tombolPencet'+Sq+'.left=SelX'); } setTimeout('moveOffSelector()',speed); } } function moveOnSelector(){ if (SelX<PosX){ SelX=SelX+increment; if (is_NS5up){ document.getElementById('tombolPencet').style.left=SelX+"px"; }else{ eval(Lq+'tombolPencet'+Sq+'.left=SelX'); } setTimeout('moveOnSelector()',speed); } } //smilies cbox function showForm() { var div = document.getElementById("hide"); var show = document.getElementById("show"); var close = document.getElementById("close"); if(div.style.display!="none") { hideForm(); } else { div.style.display = "block"; show.style.display = "none"; close.style.display = "block"; } } function hideForm() { var div = document.getElementById("hide"); var show = document.getElementById("show"); var close = document.getElementById("close"); div.style.display = "none"; show.style.display = "block"; close.style.display = "none"; } function x(){ return; } function DoSmilie(addSmilie, messageDef){ var addSmilie, messageDef, revisedMessage; var currentMessage = document.chat.pst.value; if(currentMessage==messageDef){currentMessage='';} revisedMessage = currentMessage+addSmilie; document.chat.pst.value=revisedMessage; document.chat.pst.focus(); return; } [/spoiler] Kemudian tambahkan code di bawah ini di [b]CSS[/b] kalian [spoiler] #tombolNongol{ cursor: hand; cursor: pointer; border: 1px solid #2D4063; background-color: #F4F6FA; position: absolute; width: auto; height: auto; } #tombolPencet{ cursor: hand; cursor: pointer; border: 1px solid #2D4063; background-color: #F4F6FA; position: absolute; width: auto; height: auto; } [/spoiler] [i]Selamat mencoba n gudlak[/i]

Last edited by anoer (2008-06-30 21:46:20)