Cara Membuat Kursor Mouse Di Ikuti Teks Atau Tulisan Di Blog

 Cara Membuat Kursor Mouse Di Ikuti Teks Atau Tulisan Di Blog - Kali ini saya akan berbagi trik kembali tentang artikel posting yang berhubungan dengan pernak-pernik blog, Yaitu cara membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog.

 Efek dari trik yang saya share ini adalah sebuah teks atau tulisan akan mengikuti kursor mouse ketika kursor mouse di gerakkan ke arah manapun dalam blog, Teks atau tulisan yang mengikuti kursor mouse ini mempunyai efek berputar serta mengikuti arah kursor mouse di gerakkan.

 Hebatnya lagi, Teks atau tulisan yang mengikuti kursor mouse dalam blog ini bisa di ganti dengan teks atau tulisan seperti yang sobat inginkan, Warna dari teks juga bisa di atur sesuai dengan keinginan sobat. Untuk melihat bagaimana contohnya dan hasilnya, Silahkan sobat bisa masuk ke blog DEMO dan lihatlah di bagian kursor mouse akan di ikuti teks dalam blog tersebut.

DEMO

Cara pemasangan kode kursor mouse di ikuti teks di blog sangatlah mudah, Karena sobat hanya akan memasukkan kode script pada kotak HTML/JavaScript dalam Tata Letak blog. Dan tentunya sobat tidak usah susah-susah untuk Edit HTML dalam Template blog sobat yang mungkin akan jadi sangat rumit dan memakan banyak waktu.

 Jika sobat tertarik ingin membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog sobat, Silahkan ikuti langkah-langkahnya sebagai berikut:

1. Langkah yang pertama. Silahkan sobat >> Masuk/Login >> ke Blog sobat.
2. Pada "Dashboard" tampilan blog baru, Pilih dan klik Menu >> Tata Letak >> pilih posisi dan klik >> Tambah Gadget >> pilih >> HTML/JavaScript lalu klik tanda +
3. Kemudian silahkan sobat masukkan semua Kode Script berikut kedalam kotak HTML/JavaScript.

<style type="text/css">
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;
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">
;(function(){
var msg = "Blog Kucopas";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;

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. Langkah yang terakhir. Setelah sobat selesai masukkan semua kode script kedalam kotak HTML/JavaScript, Silahkan sobat klik >> Simpan dan lihat hasilnya pada semua halaman blog sobat, Kursor mouse akan di ikuti teks kemanapun arah kursor di gerakkan pada halaman blog sobat.

Keterangan:

• #FF0000 adalah Kode warna Teks atau tulisan yang mengikuti kursor mouse, Silahkan sobat ganti dengan kode warna yang lain sesuai dngan keinginan sobat. Kode warna HTML bisa di lihat DISINI.

• Warna BIRU adalah Teks yang mengikuti kursor mouse, Silahkan ganti dengan Teks atau tulisan seperti yang sobat inginkan.

 Selamat bagi sobat yang sudah berhasil membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog. Jika sobat menemui kesulitan, Silahkan bertanya pada form komentar yang sudah tersedia dan saya akan dengan senang hati membalasnya.

 Semoga tutorial ringan tentang trik cara membuat dan memasang kursor mouse di ikuti teks atau tulisan di blog ini bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...

---

| Supported by http://kuc0pas.blogspot.com |

---

KODE WARNA HTML

 Kode Warna Html - Cara membuat dan mengetahui warna atau kode warna Html caranya sangat mudah, Kali ini kita akan menggunakan Generator kode warna Html, karena generator ini bisa mempermudah kita untuk mengetahui berbagai macam kode warna Html dan cara menggunakanya juga sangat mudah, silahkan sobat ikuti terus cara-cara untuk menggunakan generator kode warna Html ini.

 Sedikit penjelasan untuk sobat semua, Code Color Html Generator ini sangat di perlukan banget saat kita akan mendesain suatu halaman website atau blog. Dalam mendesain website atau blog, yang pasti kita tidak akan terlepas dari gradiasi atau pemilihan warna yang tepat untuk blog atau website kita. Maka untuk itu kita perlu mengetahui berbagai macam jenis warna tersebut dalam HTML atau lebih tepatnya sering di sebut dengan kode warna HTML.


 Oke sobat, karena kebutuhan untuk mengetahui berbagai macam kode warna Html tersebut, saya sediakan untuk sobat semuanya, Generator kode warna HTML di bawah berikut ini:





keterangan:

1. Kotak Brightness/Saturation adalah pengaturan warna yang bisa sobat geser sesuai yang sobat inginkan.
2. Hue adalah mirip seperti Volume warna.
3. Swatch adalah warna yang terpilih.
4. Hex adalah Kode warna Html.

sobat bisa coba ganti dengan kode warna html yang lain, dan hasilnya bisa sobat lihat pada kotak Swatch untuk kode yang sobat ganti tadi.

 Selamat berkreasi untuk menghasilkan warna yang sobat inginkan dan jadikan semua jadi berwarna, Semoga bermanfaat untuk sobat KUCOPAS semua.

---

| Supported by http://kuc0pas.blogspot.com |

---