Cara Termudah Membuat Pesan Fading Scroller ( Fading Scroller )
Banyak sekali tampilan-tampilan yang keren dan unik untuk mempercantik blog agar para pengunjung semakin berbetah ria di blog yang mereka kunjungi. karena semakin lama mereka larut dalam berselancar di blog maka, otomatis akan sedikit mendongkrak SEO blog kita ( eh.... malah ngelantur kemana-mana. )
Kali ini saya akan sedikit memberikan tutorial singkat cara membuat pesan/ berita dengan cara Fading ( muncul dengan cara blur atau perubahan warna text ) yang mana nantinya fitur dari widget ini adalah menampilkan pesan, berita dan lain-lain dengan cara muncul dengan awal yang blur atau perubahan warna baik pada text link ataupun textnya.
Langkah cara membuatnya adalah sebagai berikut :
Kode HTML :
<script type="text/javascript">
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var delay = 2000; //atur delay antara pesan ( dalam mili detik )
var maxsteps=30; // untuk mengatur perubahan warna dari awal hingga akhir
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // warna mulai (merah,hijaudan biru)
var endcolor=new Array(0,0,0); // warna akhir (merah hijau dan biru)
var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //mengatur text pembuka
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='url pesan/berita'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";
closetag='</div>';
var fwidth='150px'; //atur lebar kotak scroller
var fheight='150px'; //atur tinggi scroller
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///Jangan di edit HTML di bawah ini/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
Keterangan Kode :
- Warna biru : untuk menampilkan pesan atau berita
- URL anda ( Warna merah ) : ganti dengan URL yang dimaksud untuk dikunjungi.
LANGKAHNYA :
- Login ke Blogger
- Pilih Elemen Rancangan
- Pilih Tata Letak >> Pilih Add Gadget >> Pilih Java Script/ HTML
- Copy kode di atas ( Kode HTML ) dan paste-kan
- Simpan Gadget
- Lihat Hasilnya
- Selesai.
Demikianlah, cara membuat fading scroller di blog ini, semoga menjadi ada manfaatnya.
.: h72 :.
0 komentar:
Post a Comment
No spam...