Showing posts with label Kursor. Show all posts
Showing posts with label Kursor. Show all posts

Monday, January 2, 2012

Cara Membuat Teks Pada Kursor

Membuat Teks Pada Kursor – Jumpa lagi sobat blogger !! Sory banget kalau saya lama ngga bikin posting karena lagi banyak kesibukan offline di akhir tahun 2011 kemarin. Mengawali tahun 2012 ini saya mau share tentang membuat teks pada kursor. Teks yang mengikuti kursor pada trik efek ini menggunakan javascript yang relatif ringan, jadi jangan khawatir akan pengaruhnya terhadap loading blog. Buat yang sudah bosan dengan trik mengganti gambar pada kursor, coba aja trik membuat teks yang mengikuti kursor ini biar ganti suasana tampilan baru. Kan udah Tahun Baru nih..he he.


Cara Membuat Teks Pada Kursor :

1.    Login ke dashboard blogger anda.
2.    Pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
3.    Copy script dibawah ini dan paste pada gadget.

<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 teks anda 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>

4.    Save/Simpan dan lihat hasilnya.
5.    Sobat dapat mengganti jenis dan warna font pada bagian yang ditandai dengan warna biru.
6.    Tulis teks yang anda inginkan pada “Tulis teks disini” yang berwarna merah.
7.   Sekedar mengingatkan lagi saja, trik paling mudah untuk mencoba script seperti ini adalah copy dan paste script pada notepad. Kemudian klik Save as dan beri nama apa saja diikuti ekstensi .html. Misalnya beri nama file notepad tadi teks-kursor.html dan pada pilihan Save as type pilih All Files. Terakhir double klik file html yang baru disimpan tadi, maka sobat akan langsung dapat melihat hasilnya pada browser.

Selamat mencoba Cara Membuat Teks Pada Kursor ini dan Selamat Tahun Baru 2012 buat sahabat blogger semuanya !!

Friday, September 2, 2011

Cara Membuat Link Menjadi Warna-Warni di Blog

















Cara Membuat Link  Menjadi Warna-Warni di Blog  - Udah
pernah liat link yang berwarna-warni
seperti pelangi (rainbow) ketika disorot kursor ? Ya sebenarnya itu adalah
salah satu trik sederhana yang menggunakan javascript. Cara membuatnya pun
sangat mudah dan GPL alias gak pake lama, asal sudah tau script yang mau dipake
maka ngga sampe 5 menit proses membuat
link di blog menjadi berwarna-warni
seperti pelangi itu pun akan segera
terwujud.





Cara membuat link
berwarna-warni :


1.   
Login ke dashboard blogger anda.


2.   
Pilih Rancangan > Elemen Laman > Add
gadget (HTML/JavaScript).


3.   
Copy kode javascript dibawah ini dan paste pada
gadget.


<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>


4.   
Selesai dan silahkan diliat hasilnya.


5.   
Cara lainnya adalah sobat bisa meletakkan script
tadi pada template tepatnya diatas kode <body>
, masuk ke menu Edit HTML, letakkan scriptnya dan save template anda.





Benar kan ngga sampai 5 menit ? Nah selamat mencoba
cara membuat link menjadi warna-warni ini, semoga sobat puas dengan hasilnya.





Cara Mengganti Gambar Kursor di Blog

















Cara Mengganti Gambar Kursor di Blog  - 
Gara-gara kepingin sekali mengganti gambar kursor di blog ini, akhirnya
setelah googling kesana kemari nemu juga sebuah situs yang menyediakan banyak
gambar-gambar kursor pilihan. Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi
kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini
di blog
, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada
template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil
berikut URL alamat kursor tersebut.







              URL
:









http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif










                URL
:









http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif










                URL
:



















http://downloads.totallyfreecursors.com/thumbnails/tail2.gif










                URL
:









http://downloads.totallyfreecursors.com/thumbnails/banana1.gif










                URL
:









http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif


               





Cara mengganti gambar kursor di blog :





1.   
Login ke dashboard blogger anda.


2.   
Pilih Rancangan > Edit HTML, centang Expand
widget template.


3.   
Carilah kode </head>
pada template anda dengan menggunakan Ctrl F.


4.   
Copy kode CSS dibawah ini dan letakkan tepat
diatas kode </head> .





<style type='text/css'>
HTML,BODY{cursor: url(&quot;http://downloads.totallyfreecursors.com/thumbnails/sweden.gif&quot;), auto;}
</style>




5.   
Simpan template anda dan lihat perubahan pada
gambar kursor


6.   
Jika sobat ingin mengganti gambar kursor dengan
gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL
gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/ .





Nah ternyata mengganti gambar kursor di blog memang bisa
jadi solusi mempercantik tampilan blog juga ya apalagi kalo ditambahin lagi dengan efek bintang siip dah. Tinggal giliran sobat blogger nih, selamat
mencoba ya !






Friday, August 26, 2011

Cara Membuat Efek Bintang (Sprinkle) Pada Kursor

















Cara Membuat Efek Bintang ( Sprinkle ) Pada Kursor – Pastinya sobat blogger sudah sering melihat tampilan kursor di
blog lain dengan efek bintang yang bertaburan (sprinkle) dan
berwarna-warni bukan ? Memang efek bintang
bertaburan (sprinkle) pada kursor
bisa mempercantik penampilan blog sobat,
namun disisi lain juga punya kelemahan yaitu akan memperlambat loading blog
akibat efek penggunaan javascript. Namun tidak ada salahnya juga sih kalo
memang sobat pengen tampilan blognya keren, silahkan saja untuk mencoba membuat efek bintang bertaburan (sprinkle) ini di blognya.





Cara membuat efek bintang bertaburan pada kursor
cukup mudah, sobat blogger tinggal ikuti langkah-langkah seperti dibawah ini :


1.      
Login ke dashboard blogger sobat.


2.      
Pilih Rancangan > Elemen Halaman > Add
Gadget (HTML/JavaScript).


3.      
Copy dan paste script dibawah ini pada gadget
baru tadi.















4.      
Simpan dan lihat hasilnya.


NB : Silahkan ganti warna “red”
dengan warna lainnya green, blue, yellow atau warna lain sesuka anda.





Efek bintang bertaburan pada kursor ini akan terlihat
jika loading telah selesai. Kalo loadingnya jadi agak lambat ya ditunggu aja
yang sabar ya. Selamat mencoba sobat.