Saturday, October 1, 2011

Cara membuat tulisan berjalan mengikuti kursor di blog

Berhubung ada yg nanyain gmn cara buat tulisan berjalan kaya punyaku di blog ini, baca : " Don't be Silent Reader" .. ini aku kasih tau langkah2 nya :)

Silakan, ikuti langkah- langkah berikut :
1. Masuk ke Blogger  account kamu
2. Pada menu Dashboard, pilih Tata Letak
3. Pilih Elemen Halaman ==> Tambah Gadget ==> Pilih HTML/Javascript


Copy kode di bawah ini :

<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: #662211;
    /* 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 = "^Don't be Silent Reader^";


    /* 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 = 12;


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


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

   
  

Ganti tulisan bercetak biru sesuai keinginan kalian...
Ganti kode berwarna merah dengan kode warna yg kalian inginkan...

Untuk melihat kode warna klik :
http://amalialuphonewkey.blogspot.com/2011/11/kode-warna-html.html#axzz1dIypnBhK


PILIH SIMPAN :)
Selamat Mencoba !!!



Take out with full credit

60 comments:

  1. Thx ya.. cuma kq nongol jg kodenya di blog?? caranya ilangin gmn?

    ReplyDelete
  2. Yang diganti cuma yang tulisan warna biru aja, tanda petik jangan dirubah... OK>?

    ReplyDelete
  3. kenapa ya gue terapin di blog gue sendiri gamau muncul tulisan kursornya

    ReplyDelete
  4. @Natasya : Itu udh kukasih tau di postingannya :)

    ReplyDelete
  5. terima kasih gan atas info nya...
    :)

    ReplyDelete
  6. Terima kasih sudah berkunjung smuanya ~

    ReplyDelete
  7. Mkasih bnyak sama infonya..
    xmoga ilmu kamu brtambah

    ReplyDelete
  8. @TrisnaTri3vand amien ... :) makasih juga bwt kunjungannya..

    ReplyDelete
  9. kenapa gabisa??
    nyimpen kode nya pada konten kan??

    ReplyDelete
  10. @Lika iya pada konten :)
    kodenya jgn sampe ada yg kehapus

    ReplyDelete
  11. thx bgt gan,, mampir kelapak ane jg yahh.. dmzberbagi.blogspot.com

    ReplyDelete
  12. mantap, udh bsa kok kk, makasih banget yaa, mampir k blog aq walaupun masih blog kecil-kecilan...
    www.r-wavolt.co.cc

    ReplyDelete
  13. thnk's atas infonya sekarang aku sudah mengerti..
    jangan lupa kunjunin blogku balik ya.. :)

    ReplyDelete
    Replies
    1. Yuk, masama...
      Udh ku kunjungi balik :)

      Delete
  14. Replies
    1. Beneran ga bsa? Msa? Aku bsa loh :)

      Delete
  15. klo cra bwat cover yg kya kmu gmn cra'a?

    ReplyDelete
  16. @layla3103 pertama-tama kmu tentukn dlu gambar yg cocok dgn blogmu, usahakan pilih ukurannya yg kaya di blogku .. Klo ga ada bisa dipotong , trus diedit terserah mau pke photoshop ato yg lainnya :)

    ReplyDelete
  17. tQ gan
    jngan lupa follow yenzay90.blogspot.com yaaa

    ReplyDelete
    Replies
    1. Follow dlu bru ntr ku follback ~

      Delete
  18. Elemen halaman itu yang mana ya ?

    ReplyDelete
  19. @seikmada pas ke tata letak otomatis masuk ke elemen halaman udah, jdi tinggal tambah gadget aja...

    ReplyDelete
  20. THANK YOU! kk CUMA gk muncul aku pikir karena bertabrakan DENgan GADGET lain THX kk sekali lagi Thank you very much kan ku follow blog KK meski gk muncul tapi kk udah berusaha GK papa lah Kadang gagal kadang berhasil LIAT BLOGKU PLISZ
    thecheaterschool.blogspot.com
    thx

    ReplyDelete
    Replies
    1. Udah berkunjung, muncul ko' udh.. brti berhasil kan? :)

      Delete
  21. Ngomong-ngomong kalo aku hapus gadgetku yg lain apa bisa ini di pakai !!! (bingung) takutnya kalo aku hapus yg lain nanti capek lagi dicari! hehehe

    ReplyDelete
    Replies
    1. ini apa maksudnya? ga ush pke dihapus ..

      Delete
  22. aku berhasil akhirnya, makasih ya atas infonya :)

    ReplyDelete
  23. thenks trik blog nya

    http://oooozzzz100x.blogspot.com/

    ReplyDelete
  24. udah nggak bisa niih..
    tolong penjelasanya!!!

    ReplyDelete
  25. lumayan bagus tutorialnya,
    ditunggu kunjungan balik

    ReplyDelete
  26. kak, aku terapin ke blog ku kok gak bisa? tolong ajarin donk..

    ReplyDelete
  27. ASSALLAMUALAIKUM,,, hay mbak AMALIA ... SALAM KENAL YA..mampir dong ke BLOK acak2kan SAYA di tunggu mbak coment nya

    ReplyDelete
  28. Makasih Gan Infonya Saya Coba Gan Salam Kenal ......
    Furniture Jepara

    ReplyDelete
  29. Makasih Gan Infonya Saya Coba Gan Salam Kenal ......
    Furniture Jepara

    ReplyDelete

Jangan lupa tulis nama kalian sebelum komentar ^^

LinkWithin

Related Posts Plugin for WordPress, Blogger...

KAMSAHAMNIDA

Profile

My photo
Pangkalan Bun, Kalteng, Indonesia
Saya buat BLOG ini untuk berbagi dengan teman-teman penjelajah dunia maya.... WELCOME TO MY BLOG :)