Efek Tulisan Mengikuti Kursor Blog / website

Hallo sobat ajibers semua dimanapun berada :)

Kali ini kita akan membahas masalah blog nih. Tampilan blog merupakan unsur pertama yang menentukan nyaman atau tidaknya para pengunjung blog ketika membaca artikel - artikel yang mereka cari di blog kita, terkadang para pembaca sangat risih ketika mereka membaca sebuah artikel akan tetapi tampilan blog kita kurang mendukung alhasil pembaca tersebut jadi mudah jenuh ketika mengunjungi blog atau website kita. Dan untuk menyiasatinya, para blogers di indonesia bahkan di dunia sering menambahkan pernak - pernik berupa efek - efek blog dan masih banyak lagi yang lainya.
Dan kali ini saya akan memberikan sebuah "EFEK" yang sangat unik nih buat blog sobat semua dimanapun berada.
Semua orang khususnya para blogers pasti mendambakan atau menginginkan sebuah blog yang cantik dan menarik sehingga para pengunjung blog enggan cepat2 bergegas meninggalkan blog kita, dan para blogers berlomba - lomba mempercantik tampilan blognya. Dan perlu di ingat, banyak juga blogers yang tidak tahu menahu soal tampilan blog mereka sehingga mereka secara asal - asalan menambahkan banyak sekali efek - efek yang tidak penting didalam blog atau websitenya, alhasil bukanya pengunjung blog semakin senang malah pengunjung blog akan merasa risih karna banyak tulisan - tulisan didalam sebuah artikel terhalang oleh efek - efek yang tidak penting.

Efek ini merupakan efek yang paling unik menurut saya, kenapa ? karna ada sebuah tulisan yang akan terus menerus mengikuti kursor pada saat blog kita terbuka dan kurang lebihnya seperti ular yang sedang mengejar mangsanya. adakah dari kalian yang berminat untuk mencoba Efek script yang terbilang unik ini ? baiklah langsung saja kita simak tutorial dibawah ini :

1. Yang pertama kalian langsung masuk ke akun blogger kalian.
2. Kemudian masuk kebagian "Tata Letak".
3. Dan langsung klik "Tambahkan Gadget".
4. Selanjutnya pilih "HTML/javascript".
5. Nah terus kalian pastekan code script dibawah ini kedalamnya :

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #a4336a;
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(){
// Your message here (QUOTED STRING)
var msg = "TULIS KATA - KATA KALIAN DISINI";
/* 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 =20;
// 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 = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// 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.2;
////////////////////// 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>

KETERANGAN : untuk tulisan yang berwarna merah , kalian isikan dengan kata - kata yang kalian inginkan, misalnya "SELAMAT DATANG" atau apa saja terserah kemauan kalian.
Nah begitulah tutorial singkatnya, semoga dapat membantu kalian semua yah dalam mempercantik tampilan blog / website dan pastinya dapat menambah wawasan juga hehe

Nantikan artikel - artikel menarik lainya yah, dadaaaa

Tweet