Hiệu ứng xoay văn bản theo trỏ chuột cho blogspot

Hiệu ứng xoay văn bản theo trỏ chuột là hiệu ứng kết hợp giữa css và javascript.Thủ thuật này tạo ra dòng văn bản(chữ) uốn lượn dưới mọi góc độ theo con trỏ chuột máy tính khi ta di chuyển trỏ chuột theo những góc độ khác nhau kể cả khi với những góc độ phức tạp nhất.

Demo bạn có thể xem ngay tại bài viết này.
Để có dòng chữ uốn lượn theo trỏ chuột bạn chỉ việc vào phần bố cục và tiến hành thêm một tiện ích HTML/javascript rồi dán đoạn code sau vào và lưu lại là xong.

<style type='text/css'>
    #outerCircleText {
    font-style: italic;
    font-weight: bold;
    font-family: verdana, arial; /* Fonts */
    color: #FF0000; /* Text Color */

    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(){

    // Message Dòng chữ của bạn
    var msg = "Dautoblog - Thủ thuật blogspot";

    // Font Size
    var size = 18;

    var circleY = 0.75; var circleX = 2;

    // Space between each letter
    var letter_spacing = 3;

    // Diameter of circle
    var diameter = 10;

    //Rotation speed
    var rotation = 0.3;

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

Thay dòng chữ Dautoblog - Thủ thuật blogspot thành dòng chữ của bạn.
Thật đơn giản.