0

Membuat Animasi Cursor Diikuti dengn Text

Kali ini sya pengen bebagi Tips & trik, bagaimana cara membuat Animasi Cursor agar s'lalu d'ikuti Text yg kta inginkn. Cara ini saya temukn dari Blog-blognya para snior, d'blog trsbut d'jelaskan cara membuat animasi cursornya dngn cra Mengedit HTML. k'btulan sya bingung dngn cara trsbut, akhirnya sya m'makai cra sya sndiri yaitu dngn cra menmbhkn Gadget HTML/Javasript bukan dngn cra mengedit HTML. bgini cranya :

1. Login ke Akun Blogger Anda
2. Kilk Tata Letak
3. Kilk Elemen Halaman
4. Klik Tambah Gadget
5. Pilih HTML/JavaScript

Kemudian Copas Script dibaeah ini :



<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Ridwancreative'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>


6. Ganti Tulisan yg brwarna Merah (Ridwancreative) dngn Tulisan Anda...
7. Klik Simpan


Slesai dcccc,......

Skrang..... !! cba Anda lihat sendiri hasilnya, Text anda sudah melayang-layang.... kekek kya layang-layang az trbang.... hehehe

SELAMAT BERKREASI
3

Bikin Label Cloud Animasi Flash di Blogger

Udacc lama....... Hypnotized !!! cari informasi tntang cara bikin label animasi cloud / tag cloud animasi flash di blogger,....... kamarin saya jg bingung cara bikinx. tp skrng udac g' lg tu . . .
anda bsa lihat sndiri contoh label animasi cloudx di smping "kanan" di nlog saya.

naccc . . bgini cra bikinx :

1. Login ke blogger account anda.

2. Klik Edit HTML, "ingat jangnTut tut mncntang Expand Template Widget" tp kalau mau di cntng jg g' pa2.

3. Lalu cari kode HTML di bawh ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>


untk mmprmudh mncarix, anda bsa mnggunkn shortcut Ctrl+F kmudian copy pastekn kodex.

4. Copy pastekn lg kode di bawh ini tepat di bawh kode yg kita cari td.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "200", "240", "7", "#D68202");
// uncomment next line to enable transparency



"CATATAN" kode di atas belum lengkap, anda bsa mndaptkn kodex yg lengkp dngan mngklik disini.

Label Cloudx pun bsa kta ubac sesuai kinginan kita .......
  • Untk menggubah panjng Label Cloud (warna biru) untuk lebar (warna ungu).& untk mnggnti warna biground ganti kode (warna merah), sesuai keinginn anda.
"tagcloud", "200", "240", "7", "#D68202");

  • Untk ukuran font/huruf ganti angka yg (warna hijau) dngn ukurn font/huruf mnurut selera anda.
<a expr:href='data:label.url' style='10'><data:label.name/>


kalau udcc, jgn lupa di simpn di HTML anda.

SELAMAT MENCOBA
Ada kesalahan di dalam gadget ini
 
Copyright © .