Thursday, April 24, 2014

Cara Membuat Tampilan Pada Cursor Blog

Assalamualaikum Wr. Wb

Baiklah kali ini, Saya mau memposting tentang cara membuat tampilan cursor pada blog kita tercinta....
Caranya gampang dan sangat mudah, Teman-teman cuman butuh beberapa langkah diantaranya ikuti langkah berikut ini...

1.Temen-teman cukum mengcopy code dibawah ini NB: yg bertuliskan MERAH itu code warna dan tampilan tulisan yg akan tampil.. pada tulisan yg berwarna merah yg bertuliskan blogalfanandrian.blogspot.com    temen2 bisa merubahnya dengan nama blog temen atau dengan tulisan terserah apa yg temen2 mau.... Pada tulisan yang berwarna KUNING itu adalah warna kalian bisa menggantinya dengan warna yg kalian mau. Nah kao tulisan yang warnanya HIJAU itu adalah model tulisan yang akan muncuk kalo mau tinggl diganti aja dengan model tulisan yang kalian suka hehehe

<div style="border: 2px #006400 ridge; padding: 10px;
background-color:#c2c2c2; text-align: left;"> <style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: &#39;comic sans ms&#39;, verdana, arial;
color: #7FFF00;

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 = "alfan-andrian.blogspot.com";


// 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;

// JANGAN TERLALU BANYAK NGEDIT TAR BLOG KITA JADI BERAT..! Wkkkwkkwkkwkk..! //

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></div>
2. Masuk ke menu ( Dasbor Blogger ) caranya ketik blogger.com/home


3. selanjutnya ikuti gambar dibawah ini

4. Tambahkan Gadget caranya liat gambar dibawah ini 


5. cari, Tambahkan HTML/JavaScript lihat gambar

6. Selanjutnya pada judul yg ada di gambar beri/ yg bertuliskan 1 isi dengan terserah apa yg anda mau yg penting mudah diingat agar pada saat mau merubah/ menghapusnya temen2 tidak bingung mau mencarinya dimana...   pada kode 2, tisitu tempat paste code yg temen2 copy tadi ( code tampilan cursor ) dan kemudian simpan..

7. Selsai deh. trimakasih telah berkunjung ke blogalfanandrian.blogspot.com
sekin wassalam.......

Sumber: alfan-andrian.blogspot.com

2 komentar: