Assalamualaikum Wr. Wb. Selamat datang di Kata Irhamna | Tutorial, Tips and Trick Blogspot... Silahkan isi komentar dan pertanyaan anda, karena itu sangat berarti buat Saya dan Insya Allah Pertanyaan dari Anda akan Saya Jawab... Terima Kasih Atas Kunjungan Anda dan Jangan Sungkan Berkunjung Kembali...

Membuat Cursors Trailer

Anda pernah melihat cursor pada bog saya beberapa waktu yang lalu ? atau bisa lihat di artiirhamna Kalau udah, bagaimana menurut And, apakah anda tertarik ? Jika Anda ingin menggunakannya, coba saja gunakan hack berikut ini.
Ya seperti biasa Anda harus login ke blog dan menuju ke Edit HTML sebelumnya back-up terlebih dahulu template anda.
Lalu masukkan kode berikut tepat di bawah tag <head>

&lt;style type=&quot;text/css&quot;&gt;
/* 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: #000;
/* 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 */
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

/* Circling text trail- Kata Irhamna
Website: http://www.artiirhamna.blogspot.com/
Visit: http://www.kata-irhamna.blogspot.com/
Modifications as first seen in http://www.kata-irhamna.blogspot.com/Tutorial Blog
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = &quot;Kata Irhamna&quot;;

/* 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 &amp; 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 &amp;&amp; !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 &amp;&amp; document.compatMode != &quot;BackCompat&quot;? 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 &gt; -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 &gt; 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, &amp; 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 &gt; -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);
};

})();

&lt;/script&gt;


Untuk kode yang ditebalkan warna hitam, mulai paling atas adalah style font, ukuran font, jenis huruf dan warna huruf.
Yang berwarna merah adalah teks yang akan muncul di cursor, maka tinggal ganti saja sesuai keinginan Anda. Kemudian kode berwarna orange adalah besarnya lingkaran, kemudian yang berwarna hijau adalah kecepatan teks berputar pada lingkaran dan yang berwarna biru adalah kecepatan teks saat menuju pusat cursor (menuju ke tempat semula).
Setelah itu jangan lupa di save lalu cek pada blog anda.
Selamat mencoba dan Sukses selalu buat anda!!!!


Comments :

16 komentar to “Membuat Cursors Trailer”
Hellen said...
on 

sip.... masuk ke bookmark lagi ah :)
SALAM SUKSES YA mas...

Budiawan Hutasoit said...
on 

sore mas..saya liat ini postingannya pake model read more kan ya..
tapi koq ga berfungsi ya..
postingan kamu jadi panjang ke bawah..
mungkin ada yg salah..coba cek lagi deh..
nice blog...

Didiet said...
on 

ntar kalo ada kesulitan aku nerapkan trik ini aku boleh bertanya kan

Kata Irhamna said...
on 

@ Budiawan
Ya mas, udh saya cek, nah yang ini udah bener read morenya!!!

meiBru_chute abiezz said...
on 

thx ya am,berkat tutorial yg ad di blog mu mY jd bs mempercantik blog my n bs menambah pembelajaran bt nt to persentase,,,^_^

attayaya said...
on 

kok aku dapat pesan sbb :
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The entity name must immediately follow the '&' in the entity reference.

attayaya.blogspot.com

artiirhamna said...
on 

@ attayaya,
Jika kodenya tak dapt digunakan seperti attayaya, maka yang harus dilakukan adalah masuk ke alamat ini
http://centricle.com/tools/html-entities/
lalu copykan kode di ataspada tekx box lalu pilih encode pada item di bawahnya, kalau udah baru kode tersebut baru dapat digunakan sesuai petunjuk postingandi atas (By: Kata Irhamna)

cE tOmbOy 4eVeR said...
on 

ass!
ir, thank's y udah ngajarin linda ngedit blog.
Mksh y, udah ngajarin cara2'y!
you are is smarter boy..........!

DEDY ARFIAN said...
on 

good luck... rajin2 belajar yaaa...karena ilmu tak ada habis2nya...berjuanglah..tatap masa depan yg cerah

klik-ancha said...
on 

wah informasi yg sangat menarik dan sangat bagus untuk di pelajari...

Natalia said...
on 

bagus juga...tapi warna font-nya bisa di ganti gak?

Natalia said...
on 

eh bisa ding..hehehe..gak baca yang di atas..thank you for sharing yach

WAWAN SIGIT said...
on 

saya berterima kasih sekali dengan adanya blog irhamna yang memberikan tip- tip yang penting untuk blogger pemula seperti saya, dengan blog anda saya terbantu sekali untuk merpindah blog saya terutama dalam mebuat teks yang mengikuti arah kursor, sekarang saya sudah bisa makacih...makacih..yaaaaa..

Rossy R said...
on 

Terima kasih banyak... sudah ku coba dan kupasang

christophorus bayu kurniawan said...
on 

kok tidak ada perubahan apa2 di blog saya...
mohon pencerahan...

Ibrohim Haddar said...
on 

Teimah kasih Semoga anda tambah sukses selalu


THANKS

Post a Comment