Cara Membuat Kolom Interaktif

Cara Membuat Kolom Interaktif

7 Comments

kolom interaktif
Kolom ini sebenarnya hanya kolom pemberitahuan atau publikasi yang dapat diakses pengunjung untuk mengetahui beberapa info tentang blog anda atau tulisan yang anda hubungkan pada link lain dari situs anda. Saya hanya share kolom yang sederhana dengan alasan biar gak ribet ketika digunakan. Silahkan ikuti langkah berikut.
Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Masukkan kode berikut ke dalamnya
<div style="background-color:#FFFFDD;width:100%"><center><a href="javascript:movedown()">Up</a>  <a href="javascript:moveup()">Down</a>
<a href="javascript:stopscroll()">Stop</a>  <a href="javascript:movetop()">Top</a></center>
</div>

<script language="JavaScript1.2">

//specify speed of scroll (greater=faster)
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers

if (iens6){
document.write('<div id="container" style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">')
document.write('<div id="content" style="position:absolute;width:155px;left:0px;top:0px">')
}
</script>

<ilayer name="nscontainer" width=155 height=160 clip="0,0,155,160">
<layer name="nscontent" width=155 height=160 visibility=hidden>

<!--MASUKKAN TEKS DAN LINK ANDA DI SINI-->
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML adalah kombinasi HTML, JavaScript, dan CSS</font></p>
<p><font size="2" face="Arial">- DOM adalah singkatan dari Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML memungkinkan
konten pada halaman untuk mengubah dengan cepat, tanpa reload halaman
</font></p>
<p><font size="2" face="Arial">- CSS memungkinkan untuk pemisahan antara konten
definisi dan format
</font></p>
<p><font size="2" face="Arial">- CSS singkatan dari Cascading style sheet</font></p>
<p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://blogonol.blogspot.com" target="_blank">blogonol</a> keep spirits and do the best</font></p>
<!--END CONTENT-->


</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
Silahkan ganti tulisan merah dengan teks anda sendiri.
Selanjutnya klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu


"keep spirits and do the best"
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.