Cara Membuat Drop-in Box

Sesusai petanyaan mas beben, tentang gimana caranya buat drop-in box ini, saya akan share ajah di sini .

Drop-in box . Yuph sebenernya banyak banget kegunaan dari trik ini cuy.. kalo buat saya, saya gunaan untuk menyampaikan pesan selamat hari raya idul fitri . Seperti kata bang andri-sofda, mungkin trik ini lebih cocok digunakan untuk nampilin iklan yg mungkin temen2 kebingungan dimana menempatkan iklan kalo blog udah terasa penuh .

Langsung ajah caranya cuy..

1.Masukan css ini..

<style type="text/css">

#dropinboxv2cover{
width: 450px; /*ganti width sesuai kebutuhan cuy */
position:absolute;
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 450px;
border: 2px black;
background-color: white;
padding: 4px;
position:absolute;
left: 0;
top: 0;
}

</style>

2. ini javascriptnya..

<script type="text/javascript">

var dropboxleft=200 //set left position of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)

//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.

var displaymode="always"


if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById

function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}

function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){ top="scroll_top+dropboxtop+" top="parseInt(crossbox.style.top)+dropspeed+" top="0" visibility="hidden" search =" Name" returnvalue = ""> 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;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}

</script>

wah banyak juga yaa..

3. terakhir sob ini pemanggilannya masukin dimana ajah..

<div id="dropinboxv2cover">
<div id="dropinboxv2">
ini isi dari drop-in boxnya<br/>
<p align="left"><a href="#" onclick="dismissboxv2();return false"><img src="http://i27.tinypic.com/2rmrv39.jpg"/></a></p>

</div>
</div>

NB:

--isi ganti sesuai keinginan

--http://i27.tinypic.com/2rmrv39.jpg ini adalah gambar dari close yg saya pakai bisa diganti dengan gambar lain atau lebih sederhananya pakai tulisan close aja tanpa gambar .

nah selesai.. gampang kan sob..