the julianzs
Minggu, 20 Januari 2013
Sabtu, 19 Januari 2013
cara membuat Efek tulisan pada mouse
a. add gadget
b. html
<script language="javascript">
// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Ganti dengan Teks yang anda suka';
var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.
//********** NO NEED TO EDIT BELOW HERE **********\\
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>
// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='Ganti dengan Teks yang anda suka';
var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.
//********** NO NEED TO EDIT BELOW HERE **********\\
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>
c. save
cara membuat judul bergerak
- Masuk ke Design > Edit HTML. Anda bisa melihat gambar di samping.
- Cari kode </head> tekan Ctrl + F untuk mempercepat.
- Klo udah ketemu copy dan paste kode berikut ini di atas <head/>.
Copy kode berikut:
<script type='text/javascript'>
Akan Tampak sperti ini nantinya :
//<![CDATA[
msg = " --- the julianz ";
msg = " | Welcome to my blog --- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>
NOTE : 1. Ganti tulisan warna biru sesuai dengan keinginan anda masing2, Selamat Mencoba.
cara membuat animasi twitter
Di beberapa blog saya menemukan "Bagaimana Cara Membuat Burung Twitter
Melayang". Namun kali ini saya akan memberikan 6 Buah Ikon widget
twitter yang melayang khusus untuk kamu. Ada Edisi Songoku,
Transformers, Orang Terbang, Burung Twiiter dan lain-lain. Caranya Pun
Mudah, tinggal kamu lihat sja tutornya di bawah ini :
1. Masuk ke Blogger.com dengan akun kamu.
2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu
pilih salah satu kode HTML/Javascript yang kamu suka di bawah ini.
Jangan Lupa disalin dan di masukkan kedalam kotak HTML/Javascript
yaaaah.
a. Burung Twitter Melayang
<script type="text/javascript"
src="https://gj37765.googlecode.com/svn/bloggerwidget/Making
Different-tripleflap.js"></script><script
type="text/javascript">
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
b. Widget Transformers Melayang
<script type="text/javascript"
src="https://gj37765.googlecode.com/svn/bloggerwidget/Making Different
Arrow Plain.js"></script><script type="text/javascript">
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
c. Widget Naga Hitam Melayang
<script type="text/javascript"
src="https://gj37765.googlecode.com/svn/bloggerwidget/Making
Different-Black Howk.js"></script><script
type="text/javascript">
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
d. Widget Orang Berwarna Orange Melayang
<script type="text/javascript"
src="https://gj37765.googlecode.com/svn/bloggerwidget/Making
Different-Orange-man.js"></script><script
type="text/javascript">
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
e. Widget DragonBall (Songoku) Melayang
<script type="text/javascript"
src="https://gj37765.googlecode.com/svn/bloggerwidget/Making
Different-kama humaha.js"></script><script
type="text/javascript">
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
f. Widget Naga Merah Melayang
<script type="text/javascript"
src="https://gj37765.googlecode.com/svn/bloggerwidget/Making
Different-red howk.js"></script><script
type="text/javascript">
var twitterAccount = "Masukkan-UserName-Twitter-Kamu-Disini";
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
var tweetThisText = "Masukkan-Kata-yang-Kamu-Suka-Disini";
tripleflapInit();
</script><noscript><span style="font-size:11px;">Flying Twitter Bird Widget By <a href="http://www.hzndi.blogspot.com">Tutorial Blog dan SEO</a></span></noscript>
NOTE :
- Tinggal kamu ganti saja tulisan yang berwarna biru itu
Langganan:
Postingan (Atom)
Get this widget!