Dock Menù per Blogger con icone animate nella parte bassa del layout.

Dock Menù per Blogger adatto per siti di musica.

Quello che vado a presentare è un menù diverso dai soliti adatto a blog su Blogger che abbiano una grafica particolare. Il concetto è quello di inserire dei link a delle immagini in formato PNG che aumentano di dimensione quando ci si passa sopra con il mouse. Si tratta di un plugin basato su Javascript realizzato da Uvumi Tools. Le icone di default sono di argomento musicale ma, sostituendo le immagini, il menù si può adattare a qualsiasi esigenza. Oltre alla demo che potete vedere nella parte bassa del sito dell'autore, ne ho pubblicata un'altra per testare l'adattabilità ai nuovi template

• Demo del Dock Menù per Blogger - 

Se andate in fondo alla pagina e puntate con il mouse le icone, quest'ultime aumenteranno di dimensione con un effetto sorprendente

Ciascuna icona mostra il tooltip della voce a cui è collegata. L'installazione del menù non richiede grande difficoltà. Si va su Design > Modifica HTML e si cerca la riga </head> pigiando su F3 o su Ctrl+F. Immediatamente sopra si incolla il seguente codice 

<!--DOCK-MENU-INIZIO-->
<script src=' ... /mootools-for-dock.js' type='text/javascript'> </script>
<script src='  .... /UvumiDock-compressed.js' type='text/javascript'> </script>
<link href=' .... /uvumi-dock.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href=" ..... /uvumi-dock-ie6.css" />
<![endif]-->
<script type='text/javascript'>
var myDock = new UvumiDock(&quot;dock&quot;);
</script>
<noscript><a href='http://goo.gl/YAlRD' target='_blank'>Dock Menù</a></noscript>
<!--DOCK-MENU-FINE- www.ideepercomputeredinternet.com-->

Dove al posto dei due file in formato CSS e dei due in formato JS si inseriscono gli URL di quelli scaricati da questo archivio e caricati su DropBox o meglio su Google Drive.
Si Salva il modello e si va su Design > Aggiungi un gadget > HTML/Javascript. Si incolla un codice simile a questo in Sezioni del sito

<ul id="dock">
<li>
<a href="http://www.ideepercomputeredinternet.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6hroy3xN7y5GSWg6JNiwnoM456J-ZqL94XEHvLLmYhPc7qk0kaHzz5Yuiu7T_GrALes4XpSEsLm9Cewuxiua3HP1prJLs7gX1HaCgMrUUAcHYT06eWCnUVnPQfY6L4r4RG5JNn2-eE6v8/" alt="Home" title="Batteria"/></a>
</li>
<li>
<a href="http://www.ideepercomputeredinternet.com/2009/03/tre-metodi-per-scaricare-musica-mp3-da.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilGqMzcIDXLHz1ZVioUpL8NqXqsDfbLWlJe3iajY7OmXiaI5zNYE6yQGGRJMSYQ7JTjfpjixNBNiy1lXGhihqcyxayV8TsKiHwRiSlfBiVmAs48RWz11AC4W9_wRzxXpIyQ2zCHO2mKMvR/" alt="Musica" title="CD"/></a>
</li>
<li>
<a href="http://it-it.facebook.com/parsifal32"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPXzv_ageAlDmTRL9UyIiZrkx1TWo6vwyk9vf_l8JmzvCrEqSJsxtAOLyy1SaMAY96Qi7NgVlCLD7I0mUhs1bW-cG5k4I_AltYCrsKp8uZIrEgN0fPXFOd9kTQqNGK3g2jd2uqWZ03_Zr/" alt="Facebook" title="Chitarra"/></a>
</li>
<li>
<a href="http://twitter.com/parsifal32"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHYGl7Q3YiRK5Z60iJvyto9_rR4YEmRbycFEET1Vb4MtBL7rKny_AD_30xe7WUTIhkATRB8rIwDMx9xRxJx2kl_MkWcPJQYzrPF7gxnYYbkYYuB0itK7lA9kI-RzB7L7l-WWzzxrFcPnY/" alt="Twitter" title="Microfono"/></a>
</li>
<li>
<a href="http://friendfeed.com/parsifal32"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtpKb5RxJlFDmwumm2T2pX2TralYupORNd3wYEKMyaehBYfAF4EaH_2siZA1ociWyh1Zd20XK4f_5ldufpCGggx9HB-sdxfJohehXupG-UQ-bECKooN8PxtA-Gjde0mCeKjOI2XFKqsdw/" alt="FriendFeed" title="Speaker"/></a>
</li>
<li>
<a href="http://parsifal32.stumbleupon.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_XLZTFjSDpKLZH8L2IH-1POZpjPUKsgHSV7lz_PFrKcy6nqp7DB3hl6P4Yvge6eURVPEK-MZZaghk4HKMLWwtTUYzmPs3HEQrl7dwxqI-uDXTWZ4s8KFVMvVjaSsBM3FpkZnQKXeQyJe/" alt="StumbleUpon" title="Recorder"/></a>
</li>
</ul>

Il codice deve essere personalizzato in questi termini

1. Gli URL colorati di rosso dovranno corrispondere a degli indirizzi di post o pagine che volete collegare alle immagini
2. Gli URL colorati di blu sono quegli delle immagini usate dall'autore: CD, Batteria, Microfono, Chitarra, ecc. Possono essere sostituite da altre caricate su servizi come Picasa, SkyDrive o DropBox. Ricordo che sono di 128x128 pixel e il formato è il PNG adatto per trasparenze
3. I tag Alt e Title, colorati di viola, rappresentano il titolo della icona. Quello che sarà scritto in Title sarà anche quello visualizzato da chi punterà l'immagine con il mouse.
4. Si salva l'elemento. Non occorre posizionarlo perché le icone saranno visibili in ogni caso nella parte bassa del layout

Il Dock Menù funziona perfettamente con Firefox e Chrome mentre con Internet Explorer può avere qualche lentezza nel caso si abbia un modello già molto personalizzato e pieno di javascript.