Teman-teman banyak cara menghias blog, sehingga membuat blog itu menjadi menarik dan serasa hidup. Semua animasinya bisa bergerak. Salah satu caranya adalah dengan menambahkan teks berjalan, yang mengikuti cursor kita. Klik selengkapnya untuk CARANYA!!!
Caranya:
Masukkan script di bawah ini pada Java Script!!!!<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #00ff00;
/* End Optional */
/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "M4sukses Online;;
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// 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.4;
// 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;
////////////////////// Stop Editing //////////////////////
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>
Pada tulisan yang berkedip, teman-teman bisa menggantinya dengan tulisan yang diinginkan.
Dijamin, blog teman-teman menjadi lebih bagus! Menjadikan blog teman-teman serasa hidup!
Selamat mencoba!!!
Menambah Teks Yang Mengikuti Cursor
Share this
Related Articles :
Subscribe to:
Post Comments (Atom)
Paling Dilihat
- Cara Mudah Mendapatkan URL dan HTML Gambar dan atau Video
- Kerja Freelance Online : Data Entry Job (Gratis)
- PLAY GAMES FREE
- Cara Mudah Membuat Iklan Baris Gratis Dengan Blogspot
- Cara Menghilangkan Pesan 'Showing Post With Label Blogger'
- Menambah Efek Burung Pada Blog
- Profil Jinchuuriki & Bijuu
- Cara Gabung Ke Jaringan Di Facebook
- Membuat Animasi Status Loading Pada saat Blog dibuka
Label
Blog Archive
-
▼
2009
(162)
-
▼
August
(56)
- Terorisme
- Bom Bunuh Diri, Jihad atau Sesat?
- Aliran Sesat, Kenali dan Hindari
- Karena Cinta Aku Murtad
- Download Al Qur’an dan Hadits Digital Bahasa Indon...
- Membuat Cloud Label (Label Awan)
- Cara Mendaftarkan Blogger di Google Search Engine
- Membuat daftar isi di blog
- Memasang Status Yahoo Messenger di Blogger
- Download Games GRATIS
- Kamus Online
- Nonton Film Anime
- Cara Memasang Live Trafik Feed
- Cara Download Video Yutube
- Download Musik Mp3 GRATIS
- Download Wallpaper GRATIS
- Profil Jinchuuriki & Bijuu
- Memberi Efek Kupu-kupu
- Menambah Teks Yang Mengikuti Cursor
- Buku Tamu yang Unik
- Membuat Link Berwarna-Warni (blink link)
- Tips agar loading blog cepat
- Pasang Multi bahasa (Translator) di Blog
- Membuat Animasi Teks Berjalan (Marquee)
- Membuat Kolom Tulisan (2 atau 3 Kolom) pada Posting
- Memberi Pesan Pada Blog
- Membuat Background Pada Postingan
- Menambah Efek Burung Pada Blog
- Memasang Artikel Terkait Dibawah Postingan
- Membuat Judul Posting Bergerak <==<
- Cara Buat Link Blog
- Pasang Online Visitors Pada Blog
- Template D'Black
- Membuat ReadMore Sederhana
- Cara Mudah Mendapatkan URL dan HTML Gambar dan ata...
- Cara Memasang ShoutMix di Blogspot
- Cara Membuat Navigasi Halaman
- Membuat Kotak Banner
- Membuat Tab View
- Pasang Read More/Baca Selengkapnya yang Otomatis P...
- Memasang Pelacak IP Address pada Blog
- Cara Buat Blogroll (1)
- Mempercepat Loading Blog Dengan Clean CSS
- Membuat Teks Berkedip
- Cara Mendapat Duit Dari Blog Bersama kumpulblogger
- Cara Posting Kode HTML Pada Artikel
- t=v1+v2, Cara Meningkatkan Traffic dan Popularity ...
- Situs-situs Yang Akan Membantu Kehidupan Anda di D...
- Download Temlate Blog/Web
- Cara MemPromosikan Blog Anda
- Cara Memasang Anti Jiplak / Copas
- Memasang Pesan Sambutan pada saat membuka blog
- Cara Mengetahui siapa yang Copas artikel Blog kita
- Mengganti Tampilan Cursor
- Tutorial Membuat Website Gratis (untuk pemula)
- Download e-Book
-
▼
August
(56)
0 comments
Post a Comment
Budayakan membaca sebelum berkomentar NO SPAM NO SARA
Jangan menaruh link aktif jika tetap nekat admin akan menandainya sebagai SPAM.