Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog
Kreasi | Informasi | Selamat siang sobat,...Cara membuat tulisan bergerak mengikuti arah cursor di blog atau cara agar tulisan bisa mengikuti cursor di blog atau cara menjadikan tulisan mengikuti pergerakan cursor pada blog adalah posting saya hari ini.
Hallo sobat semua.. Apa kabar kalian hari ini? Saya harap kalian sehat dan baik-baik saja :)
Baiklah, pada kesempatan yang baik ini, Gede Sitdown Blog akan memposting artikel mengenai cara membuat tulisan agar mengikuti kursor di blog. Menurut saya, tujuan dari pembuatan ini hanyalah sebagai kreasi untuk mempercantik tampilan blog dan sebagai informasi bagi sobat blogger lain yang ingin membuatnya agar terlihat berbeda dari tampilan blog yang lain seperti yang terlihat pada blog ini. Baiklah, bagi yang tertarik dan ingin membuatnya, berikut ini langkah-langkah cara membuat teks/tulisan mengikuti gerakan cursor di blog:
1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Copy code berikut ke dalam box HTML/Java Script
<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #ff840a;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING)
var msg = "TULISAN YANG INGIN DITAMPILKAN";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 25;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.2;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
Penting : Ganti tulisan yang berwarna merah dengan tulisan/teks yang sobat inginkan.
4. Simpan dan lihat hasilnya.
Bagaimana? Mudah sekali bukan? :)
Demikianlah postingan mengenai cara membuat tulisan mengikuti kursor di blog kali ini. Semoga bermanfaat buat semua.
Langganan:
Posting Komentar (Atom)
Sample Text
//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=’WELLCOME MY BLOG ALIFKA‘.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=””;
if (ie)
window.pageYOffset=0
// writes the message
if (ns){
for (i=0; i < n; i++)
document.write(‘
}
else if (ie||dom){
document.write(‘
’);
for (i=0; i < n; i++)
document.write(‘
document.write(‘
for (i=0; i < n; i++)
document.write(‘
’+props+msg[i]+’
’);document.write(‘
}
(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();
Text Widget
Pengunjung
Blogger templates
Blog Archive
-
2015
(25)
- Mei(7)
-
April(18)
- membuat sinyal wifi kuat pada laptop anda ...
- Cara Memperkuat Sinyal/Signal Wifi (Wireless) Ampu...
- Kumpulan Kode HTML Widget Jam Analog Keren Untuk Blog
- Cara Menambahkan ( Membuat ) Jam dan Kalender Di /...
- KUMPULAN TEMPLATE TERBARU
- Cara HACK Jaringan Wifi.id Terbaru 2015
- Cara Mengganti Bentuk Cursor Panah Mouse Pada Blog
- Cara Mendaftar Goole Drive
- CARA MENGHITUNG IP ADDRESS, SUBNET MASK DAN NET ID
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- Penyebab, Cara Mengatasi Laptop/Komputer Lemot
- CARA MERAKIT KOMPUTER
- CARA MEMBUAT TULISAN BERGERAK MENGIKUTI KURSOR DI ...
Pages
Diberdayakan oleh Blogger.
Blog Archive
-
▼
2015
(
25
)
-
▼
April
(
18
)
- membuat sinyal wifi kuat pada laptop anda ...
- Cara Memperkuat Sinyal/Signal Wifi (Wireless) Ampu...
- Kumpulan Kode HTML Widget Jam Analog Keren Untuk Blog
- Cara Menambahkan ( Membuat ) Jam dan Kalender Di /...
- KUMPULAN TEMPLATE TERBARU
- Cara HACK Jaringan Wifi.id Terbaru 2015
- Cara Mengganti Bentuk Cursor Panah Mouse Pada Blog
- Cara Mendaftar Goole Drive
- CARA MENGHITUNG IP ADDRESS, SUBNET MASK DAN NET ID
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- Penyebab, Cara Mengatasi Laptop/Komputer Lemot
- CARA MERAKIT KOMPUTER
- CARA MEMBUAT TULISAN BERGERAK MENGIKUTI KURSOR DI ...
-
▼
April
(
18
)
Arsip Blog
-
▼
2015
(25)
-
▼
April
(18)
- membuat sinyal wifi kuat pada laptop anda ...
- Cara Memperkuat Sinyal/Signal Wifi (Wireless) Ampu...
- Kumpulan Kode HTML Widget Jam Analog Keren Untuk Blog
- Cara Menambahkan ( Membuat ) Jam dan Kalender Di /...
- KUMPULAN TEMPLATE TERBARU
- Cara HACK Jaringan Wifi.id Terbaru 2015
- Cara Mengganti Bentuk Cursor Panah Mouse Pada Blog
- Cara Mendaftar Goole Drive
- CARA MENGHITUNG IP ADDRESS, SUBNET MASK DAN NET ID
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- Penyebab, Cara Mengatasi Laptop/Komputer Lemot
- CARA MERAKIT KOMPUTER
- CARA MEMBUAT TULISAN BERGERAK MENGIKUTI KURSOR DI ...
-
▼
April
(18)
About Me
- Unknown
Popular Posts
-
Home > Internet & Teknologi > Mengatasi Koneksi WiFi Limited di Windows 8.1 Mengatasi Koneksi WiFi Limited di ...
-
Home » Tampilan Blog » Tips Trik Blog » Kumpulan Kode HTML Widget Jam Analog Keren Untuk Blog Ambya Nurkholik Friday,...
-
Cara Membuat Tulisan Bergerak Mengikuti Kursor di Blog Kreasi | Informasi | Selamat siang sobat,...Cara membuat tulisan bergerak mengikuti ...
-
CARA MENGHITUNG IP ADDRESS, SUBNET MASK DAN NET ID April 18, 2014 Konsep Subnetting Subnetting adalah termasuk materi yang banyak keluar di ...
-
Cara Menghilangkan Bitlocker Encryption Baiklah, pada kesempatan kali ini, saya akan posting tentang "cara menghilangkan bit lock...
-
IP Address adalah alamat yang diberikan ke jaringan dan peralatan jaringan yang menggunakan protocol TCP/IP. IP Address terdiri dari 32 bi...
-
Mengendalikan Komputer Dengan Suara (Vista, 7, dan 8) Cara Memerintah Komputer Dengan Suara (Vista, 7, dan 8) Hari ini, Windowsk...
Blogger templates
Archive
-
▼
2015
(25)
-
▼
April
(18)
- membuat sinyal wifi kuat pada laptop anda ...
- Cara Memperkuat Sinyal/Signal Wifi (Wireless) Ampu...
- Kumpulan Kode HTML Widget Jam Analog Keren Untuk Blog
- Cara Menambahkan ( Membuat ) Jam dan Kalender Di /...
- KUMPULAN TEMPLATE TERBARU
- Cara HACK Jaringan Wifi.id Terbaru 2015
- Cara Mengganti Bentuk Cursor Panah Mouse Pada Blog
- Cara Mendaftar Goole Drive
- CARA MENGHITUNG IP ADDRESS, SUBNET MASK DAN NET ID
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- IP ADDRESS DAN SUBNETTING
- Penyebab, Cara Mengatasi Laptop/Komputer Lemot
- CARA MERAKIT KOMPUTER
- CARA MEMBUAT TULISAN BERGERAK MENGIKUTI KURSOR DI ...
-
▼
April
(18)
0 komentar:
Posting Komentar