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 1007 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

Cara membuat Alert Untuk Menyambut Tamu

T 3 November 2011 F A Darmanto SEO

Sobatku semua dalam catatanku kali ini Darmanto mau menuliskan “Cara membuat alert untuk menyambut tamu”.Setiap akan kita masuk di sebuah rumah seseorang teman kita, seperti yang biasa saya lihat, di pintu ada aja tulisan (stiker)yang beisikan alert, ‘ucapakan salam”. Dan kita... Selengkapnya

Mengapa Buka Usaha Dengan Membuat Toko Online?

T 9 September 2014 F A Darmanto SEO

Mengapa Buka Usaha Dengan Membuat Toko Online?  Mungkin pertanyaan seperti itu masih ada di pikiran Anda. Toko online menciptakan banyak peluang sukses bagi siapa saja, juga bisa dikelola oleh siapa saja tanpa perlu pendidikan tinggi,asalkan mau belajar memulainya.  Membuat Toko online... Selengkapnya

5 Kesalahan Berbelanja Online Yang Harus di Hindari

5 Kesalahan Berbelanja Online Yang Harus di Hindari

T 5 Oktober 2012 F A Darmanto SEO

5 Kesalahan Berbelanja Online Yang Harus di Hindari.Berbelanja online merupakan salah satu kegiatan yang digemari banyak wanita. Namun tak jarang banyak juga yang kecewa karenanya. Ini 5 kesalahan fatal yang harus Anda hindari saat berbelanja online. 1. Tertipu gambar Foto-foto... Selengkapnya

+ SIDEBAR

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

Google Partner

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