Beranda » Uncategorized » Membuat Cursor Mouse Di Ikuti Text

Membuat Cursor Mouse Di Ikuti Text

T Diposting oleh pada 7 Juni 2012
F Kategori
b Komentar Dinonaktifkan pada Membuat Cursor Mouse Di Ikuti Text
@ Dilihat 989 kali
Membuat Cursor Mouse Di Ikuti Text.Kali ini ada catatan special buat sobatku yang ada di rembang.Ya pada catatan kali ini saya akan berbagi mengenai cara membuat cursor mouse di ikuti text atau tulisan.Membuat Cursor selalu di ikuti text adalah mungkin kelihatan jadi fariatif kali ya,makanya beliau ingin membuatnya.Ok sobat begini nih ara membuat cursor mouse selalu di ikuti text.

Pertama-tama yang harus sobat lakukan adalah:

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Copy kode script di bawah ini dan paste kan ke dalam kolom Konten:
<style type=”text/css”>
    /* 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’;
    color: #ff0000;
    /* 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 */
    </style>

    <script type=”text/javascript”>
    /* Circling text trail- Tim Tilton
    Website: http://www.tempermedia.com/
    Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
    Modified Here for more flexibility and modern browser support
    Modifications as first seen in http://www.dynamicdrive.com/forums/
    username:jscheuer1 – This notice must remain for legal use
    */

    ;(function(){

    // Your message here (QUOTED STRING)
    var msg = “…Sobat Darmanto…”;

    /* 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 & 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 && !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>
7. Klik Simpan
8. Selesai

Keterangan : 

warna merah untuk kemiringan teks
– warna biru muda untuk ketebalan teks
– warna oren untuk bentuk tulisan / font
– warna biru tua untuk warna teks
– warna ungu untuk Kata – kata yang ingin Sobat buat
– warna hijau untuk ukuran teks
Ok sobat,cukup itu saja ya,catatan saya mengenai cara membuat cursor mouse di ikuti text,semoga berhasil membuatnya ya…

Diposting oleh

Darmanto adalah owner CV. Studio Web, sebuah perusahaan jasa pembuatan web SEO friendly, jasa desain blog, google ads, jasa SEO profesional. Follow Channel telegramnya di https://t.me/darmantoseo

Komentar dinonaktifkan: Membuat Cursor Mouse Di Ikuti Text

Maaf, form komentar dinonaktifkan untuk produk/artikel ini

a Artikel Terkait Membuat Cursor Mouse Di Ikuti Text

Arti Sebuah Nama Koruptor Adalah Sosok Idaman???

T 21 April 2015 F A Darmanto SEO

Arti Sebuah Nama Koruptor Adalah Sosok Idaman??? Kini telah merebak diberanda-beranda facebook sebuah aplikasi arti sebuah nama yang bisa mengartikan nama kita… Yang kita sesalkan kebanyakan saudara-saudara muslim percaya saja dengan aplikasi ini… na’udzubillah. Kami coba mengetes sebuah kata “Koruptor”... Selengkapnya

Siapa Peduli Pak Untung

Siapa Peduli Pak Untung

T 29 Juni 2012 F A Darmanto SEO

Pagi ini ada satu berita lagi yang patut kita semua untuk berfikir akan kepedulian kita untuk saudara-saudara di sekitar kita.Seperti berita yang pagi ini saya baca di id berita yahoo yang bersumber dari Liputan6.com. Ada satu kisah nyata sebuah keluarga... Selengkapnya

Tata Cara Membuat Akun Paypal

T 8 Juni 2012 F A Darmanto SEO

Tata Cara membuat akun paypal .Sobat Darmanto,sudahkah sobat membuat akun paypal? Saya rasa banyak dari sobat-sobat blogger yang sudah membuat akun paypal ya…Pada catatan saya kali ini,saya hendak berbagi tata cara membuat akun paypal.Catatan saya ini special buat sobat Darmanto... Selengkapnya

+ SIDEBAR

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.

Operation time

Senin-Jumat: 08.00-17.00
Sabtu: 08.00-16.00
Minggu: Buka dengan buat janji dulu
Email: admin(at)darmanto.com

Alamat

Darmanto:
Jl. Raya Gili Tugel – Kreo KM 1, Rt. 039 Rw. 005

Desa Cibuyur, Kec. Warungpring

Kab. Pemalang, Jawa Tengah,52358

Butuh Bantuan? Chat Kami Sekarang