Demo :
JavaScript Blogger
Ratusan tips dan trik mempercantik, menghias, atau memperindah tampilan Blogspot dengan JavaScript.
Cara membuatnya
Dari Dashboard >> Design >> Edit HTML.
Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>
#marqueecontainer{
position: relative;
width: 200px; /* lebar */
height: 200px; /* tinggi */
background: white;
color:black;
overflow: hidden;
border: 3px solid yellow;
padding: 2px;
padding-left: 4px;
}
Langkah kedua > Penempatan JavaScript
dibawah ]]></b:skin>
........
diatas </head>
<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Teks berjalan naik © Dynamic Drive
* http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm
***********************************************/
var delayb4scroll=2000 //Untuk menunda ketika ingin bergulir (2000=2 detik)
var marqueespeed=2 //Untuk Kecepatan, Isi dengan angka 1-10
var pauseit=1 //Jika kursor mouse diletakkan diatasnya (1=berhenti 0=tidak)
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}
function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}
if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
//]]>
</script>
Langkah ketiga > Penempatan kode HTML
dibawah <body>
........
diatas </body>
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<h4><a href='http://nanoyulianto.blogspot.com/2011/01/javascript-blogger.html'>JavaScript Blogger</a></h4>
<p>Ratusan tips dan trik mempercantik, menghias, atau memperindah tampilan Blogspot dengan JavaScript.</p>
</div>
</div>
Teks berwarna merah, ganti dengan konten anda. Bisa dimasukkan apa saja...
Credit : Dynamic Drive
Alhamdulillah
0 comments:
Posting Komentar