jQuery 3D list Menu Widget για τον Blogger

Ένα φανταστικό gadget, δύσκολο κατά μια άποψη, αλλά πολύ όμορφο. Λόγω του μεγάλου μεγέθους δε μπορεί να σταθεί στο Sidebar, αλλά μπορείτε να το βάλετε σε μια ανάρτηση ή σε μια Στατική Σελίδα.

 Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε κι εσείς:

• Σύνδεση στον Blogger
• Σχεδίαση / Επεξεργασία HTML
• Βρείτε την ]]></b:skin>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

#list{
    margin:0 auto;
    height:600px;
    width:600px;
    overflow:hidden;
    position:relative;
    background-color: #111;
    -moz-box-shadow:0px 10px 20px #000;
   }
   #list ul,
   #list li{
    list-style:none;
    margin:0;
    padding:0;
   }
   #list a{
    position:absolute;
    text-decoration: none;
    color:#666;
    text-shadow:0px 1px 2px #000;
   }
   #list a:hover{
    color:cyan;
   }

• Βρείτε τώρα την </body>
• Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
 var element = $('#list a');;
 var offset = 0; 
 var stepping = 0.03;
 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.2 - 0.1;
 });
 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 + "pt");
   $(element[i]).css("opacity",size/100);
   $(element[i]).css("zIndex" ,size);
   $(element[i]).css("left" ,leftValue);
   $(element[i]).css("top", y + "%");
  }
  offset += stepping;
 }
});
</script>

• Αποθηκεύστε το πρότυπό σας.
• Πατήστε "Νέα Ανάρτηση" και με τη σειρά αντί για "Σύνθεση" πατήστε "Επεξεργασία HTML"
• Επικολλήστε τον παρακάτω κώδικα:

<div id="list">
<ul>
<li><a href="#">ajax</a></li>
<li><a href="#">css</a></li>
<li><a href="#">design</a></li>
<li><a href="#">firefox</a></li>
<li><a href="#">flash</a></li>
<li><a href="#">html</a></li>
<li><a href="#">Devirtuoso</a></li>
<li><a href="#">jquery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">usability</a></li>
<li><a href="#">www</a></li>
<li><a href="#">web</a></li>
<li><a href="#">xhtml</a></li>
</ul>
</div>

• Αντικαταστήστε τα ονόματα με κίτρινο φόντο με τα δικά σας ονόματα και στη θέση κάθε δίεσης # βάλτε το link που θέλετε να οδηγεί το κάθε όνομα.

Μπορείτε να προσθέσετε ή να αφαιρέσετε ετικέτες αναλόγως με τις ανάγκες της Σελίδας σας.

DEMO