Minggu, 07 Februari 2010

Cara Membuat komen "Selamat Datang" dengan Amazon Style Drop-in Content Box

Posted by Dennis Rvindo 08.11, under | 1 comment

Cara Membuat komen "Selamat Datang" dengan Amazon Style Drop-in Content Box
Amazon Style Drop-in Content Box (versi Dinamic Drive) ini sebenarnya kotak komen yang muncul saat halaman blog pertama kali dibuka, durasinya bisa diaturFasilitas ini bisa temen-temen modifikasi buat apa saja, tidak mesti untuk ucapan selamat bagaimana cara membuatnya.
:ngupil:
Ada dua kode yg harus post, yaitu CSS dan HTML, gelakgulingdua-duanya dipost ke halaman blog dengan menggunakan gadget javascript. Caranya:
1. Masuk Layout
2. Tambah Gadgetadacall
3. Pilih Gadget Javascript
4. Sisipkan kode CSS di bawah ini:

<style type="text/css">
#dropinboxv2cover{
width: 320px; /*change width to desired */
height: 220px; /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black; /*Customize box appearance*/
background-color: lightyellow;
padding: 4px;
position:absolute; /*Don't change below 3 rules */
left: 0;
top: 0;
}

</style>

<script type="text/javascript">

/***********************************************
* Amazon style Drop-in content box- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Go to http://www.dynamicdrive.com/ for full source code
***********************************************/

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"

///Don't edit beyond here///////////

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){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}

function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}

function truebody(){
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;
}

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>


5. SIMPAN
6. Letakan di kolom di atas kolom postingan aja.
7. IKUTI LANGKAH 1 S.D. 5, HANYA DISISIPKAN KODE (HTML) DI BAWAH INI:

<div id="dropinboxv2cover">
<div id="dropinboxv2">

ISI DENGAN KALIMAT YANG TEMEN-TEMEN INGINKAN<br>
<p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>

</div>
</div>

8. SIMPANpokpok
9. Letakan di mana saja
10. Lihat Blog

gigitjari

1 komentar:

salam ukhuwah....
totorial yg sangat bagus dan bermanfaat...
di tunggu tutorial selanjutnya tntang alert seperti punya sobat..
by bilaqalbuberbicara.blogspot.com

Terimakasih Atas Kunjungan Sobat

Posting Komentar

Setiap komentarmu akan sangat berarti sekali buat blog ini agar bisa menjadi lebih baik untuk kedepannya, trima kasih udh berkomentar di blog ini..

Tags

Music on

Blog Archive

Sponsor