Menu đám mây 3D cuộn theo chiều dọc đẹp cho Blogspot

Bạn cần trình bày một danh sách nhưng không thích kiểu thiết kế đơn điệu như thường ngày thì bạn hãy thử đổi mới với một menu 3D cuộn dọc dạ...

Bạn cần trình bày một danh sách nhưng không thích kiểu thiết kế đơn điệu như thường ngày thì bạn hãy thử đổi mới với một menu 3D cuộn dọc dạng đám mây đẹp mà mình tìm hiểu được. Đầu tiên các bạn xem demo trong chính bài này.

• Blogspot căn bản
• Kỹ năng viết blog
• Sticky
• Tên miền Godaddy
• Hubspot Marketing Grader
• IE CSS hack

Sử dụng
Các bạn copy đoạn code sau đặt vào bất kỳ tiện ích HTML/Javascript nào mà các bạn thích hoặc đặt ngay vào bài viết cũng được nhưng phải sử dụng chế độ soạn thảo HTML.

<style type="text/css">
#list{ 
    margin:0 auto; 
    height:450px!important; 
    width:100%; 
    overflow:hidden; 
    position:relative; 
    background-color: #111; 
    -moz-box-shadow:0px 10px 20px #000; 
    font-size:10px!important;
} 
#list ul, 
#list li{ 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
#list a{ 
    position:absolute!important; 
    text-decoration: none!important; 
    color:#666; 
    text-shadow:0px 1px 2px #000; 
    border:none!important;
    line-height:1.2em!important;
} 
#list a:hover{ 
    color:cyan; 
}  
</style>

<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script> 
<script type="text/javascript">
 
$(document).ready(function(){ 
    var element = $('#list a');; 
    var offset = 0;  
    var stepping = 0; 
    var list = $('#list'); 
    var $list = $(list) 
    $list.mousemove(function(e){ 
        var topOfList = $list.eq(0).offset().top 
        var listHeight = $list.height() 
        stepping = (e.clientY - topOfList) /  listHeight * 0.1 - 0; 
    }); 
    for (var i = element.length - 1; i >= 0; i--) 
    { 
        element[i].elemAngle = i * Math.PI * 2 / element.length; 
    } 
    setInterval(render, 20); 
    function render(){ 
        for (var i = element.length - 1; i >= 0; i--){ 
            var angle = element[i].elemAngle + offset; 
            x = 120 + Math.sin(angle) * 30; 
            y = 45 + Math.cos(angle) * 40; 
            size = Math.round(40 - Math.sin(angle) * 40); 
            var elementCenter = $(element[i]).width() / 2; 
            var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" 
            $(element[i]).css("fontSize", size + "px"); 
            $(element[i]).css("opacity",size/100); 
            $(element[i]).css("zIndex" ,size); 
            $(element[i]).css("left" ,leftValue); 
            $(element[i]).css("top", y + "%"); 
        } 
        offset += stepping; 
    } 
}); 
</script> 
<div id="list">
<ul>
<li><a href="#">Blogspot căn bản</a></li>
<li><a href="#">Kỹ năng viết blog</a></li>
<li><a href="#">Sticky</a></li>
<li><a href="#">Tên miền Godaddy</a></li>
<li><a href="#">Hubspot Marketing Grader</a></li>
<li><a href="#">IE CSS hack</a></li>
</ul>
</div>

Tùy biến
Bạn thấy trong code có một danh sách nằm trong div có id="list". Bạn thay đổi các liên kết trong đó theo ý của mình để tạo ra một menu cho riêng blog của bạn.

Thủ thuật này mình tình cờ biết được khi đi dạo trên các blog Indonexia. Mình Việt Hoá lại để các bạn cùng biết.Đây là bài viết đầu tiên của mình trên Vnblogspot nên có thể chưa được tốt lắm.Vì vậy bạn hãy đánh giá bài viết để mình viết bài ngày một tiến bộ hơn.Thanks