12 febbraio 2011

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

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
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 SugarSync.
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://lh4.googleusercontent.com/_nT13UtBmmiU/TVXIt7mzXpI/AAAAAAAAR24/9T9X9S-zaeg/drums.png" 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://lh3.googleusercontent.com/_nT13UtBmmiU/TVXItxVq0hI/AAAAAAAAR20/9Xrn-E0sYJs/cd.png" alt="Musica" title="CD"/></a>
</li>
<li>
<a href="http://it-it.facebook.com/parsifal32"><img src="https://lh3.googleusercontent.com/_nT13UtBmmiU/TVXItxlKUAI/AAAAAAAAR28/k1CG1ahVGsA/guitar.png" alt="Facebook" title="Chitarra"/></a>
</li>
<li>
<a href="http://twitter.com/parsifal32"><img src="https://lh4.googleusercontent.com/_nT13UtBmmiU/TVXItzW7whI/AAAAAAAAR3A/yDc3G90e7rk/mic.png" alt="Twitter" title="Microfono"/></a>
</li>
<li>
<a href="http://friendfeed.com/parsifal32"><img src="https://lh4.googleusercontent.com/_nT13UtBmmiU/TVXIuIGWSpI/AAAAAAAAR3E/sy-5ZQbYr0A/speaker.png" alt="FriendFeed" title="Speaker"/></a>
</li>
<li>
<a href="http://parsifal32.stumbleupon.com/"><img src="https://lh6.googleusercontent.com/_nT13UtBmmiU/TVXIw539SkI/AAAAAAAAR3M/6gfToeOCqFg/tape.png" 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.



18 commenti:

  1. Ciaooo *__* senti ci sono riuscita (grazieeeeeee) tranne per facebook..cioè ho messo tutto... come ho fatto per youtube e "contattami" ma non compare proprio l'icona di facebook...ho provato a caricare cn picasa altre icone per paura che fosse l'icona ma nn va :-(

    RispondiElimina
  2. @Simona
    Ti riferisci a questo menù? Se non funziona l'icona di Facebook significa che hai sbagliato qualcosa oppure che non hai preso una immagine in formato PNG. Prova a inserire questo URL
    https://lh4.googleusercontent.com/_nT13UtBmmiU/TVsJ5UXnJpI/AAAAAAAAR8g/2x_7mJQky-E/Facebook_icon.png
    Ciao

    RispondiElimina
  3. ci sono riuscitaaaaaaaaa *___* grazieeeeeee ho solo un altro problemino...la scritta ad es (youtube) quando si passa con il mouse sopra è bianca...si può mettere colorata??? e non so se posso scrivere qui...ma ho creato un "contattami" sulla mia pagina di facebook con Kontactr (nn so se lo conosci) e su facebook non va...mentre su blogger si :-( uff

    RispondiElimina
  4. @Simona
    Il colore della scritta non dovrebbe dipendere dal menù ma dagli stili del tuo blog. Per il modulo di contatto su Facebook ci sono brutte notizie perché la cosa è diventata molto più difficile da ieri. Hanno tolto il supporto a Static FBML. Prova con 123Contact, puoi trovare un tutorial anche su questo blog.

    RispondiElimina
  5. uffiii ecco perchè nn mi andava :-( grazie mille sei stato gentilissimo *__* sei tu il magnifico proprietario di questo blog?? *__*

    RispondiElimina
  6. @Simona
    Proprietario di questo blog lo sono, magnifico mi sembra eccessivo anche se c'è stato un mio illustre concittadino Lorenzo che secoli fa venne definito tale :D

    RispondiElimina
  7. Davvero bello questo menu!!purtroppo però a me serve uno con i sottomenu altrimenti sarebbe stato perfetto..colpisce davvero graficamente(vedrò di trovare un modo per inserirlo xD)

    RispondiElimina
  8. Graaaaaaaaaaaaaazie!!!!!! http://www.techhdblog.tk

    RispondiElimina
  9. Ciao,

    Ho provato a metterlo sul blog e funziona!! Ma se volessi metterlo su un sito come si fa? Ho provato ma non riesco. :((

    RispondiElimina
  10. @Ntuonio Dipende da cosa intendi per sito. Questo è un menù per siti creati attraverso la piattaforma Blogger. In teoria potrebbe andare anche su Splinder. Su Wordpress ci sono migliaia di plugin..., su altre piattaforme non saprei dire.

    RispondiElimina
  11. Caro ernesto... mica mi potresti scrivere i codici Url dei loghi di Tou Tube e Twitter? Grazie In Anticipo... io non ci riesco! :)

    RispondiElimina
  12. @Nintendo
    Non ci sono gli URL dei loghi. Anche se ci fossero non si potrebbero utilizzare perché sarebbe violazione di copyright. Ci sono però moltissime icone simili o in tutto identiche ai loghi di Youtube e Twitter che puoi caricare su un tuo hosting tipo Picasa. Le puoi trovare anche seguendo le indicazioni di questo post
    http://www.ideepercomputeredinternet.com/2009/07/iconfinder-per-trovare-icone-gratis.html
    o in quest'altro
    http://www.ideepercomputeredinternet.com/2011/05/iconza-per-icone-gratis-con-gli-stessi.html

    RispondiElimina
  13. ciao la cosa mi interessa tantissimo pero ho una richiesta da farti il mio problema è, che vorrei mettere la barra con le icone sopra il mio blog , ma non sotto come potrei modificare il codice da inserire nel mio blog, non so rendo l'idea ma se non sbaglio non comanda il winget ma il codice da inserire nell'html del blog ho no, ho fatto alcune modifiche ma rimane tutto invariato.
    grazie tanto se mi rispondessi tramite email

    RispondiElimina
  14. @thesantis
    La modifica che richiedi credo sia possibile solo modificando il javascript dell'effetto. Dovresti chiedere all'autore Uvumi Tools di cui puoi ricavare il link della homepage ad inizio post.

    RispondiElimina
  15. ciao, come faccio a togliere un post dalla homepage?
    grazie

    RispondiElimina
  16. e come faccio a togliere la data di un post'

    RispondiElimina
  17. @Sairos
    Per togliere un post dalla homepage lo ripubblichi con una data precedente a quella dell'ultimo articolo che viene visualizzato. Per togliere la data da tutti i post vai su Design > Elementi pagina > Post sul blog > Modifica e togli la spunta alla data. Leggi qua sotto
    http://www.ideepercomputeredinternet.com/2010/12/impostazioni-per-configurare-il-post-su.html
    Se invece vuoi nascondere la data di un solo post segui questo tutorial
    http://www.ideepercomputeredinternet.com/2011/06/come-nascondere-la-data-in-un-post-su.html

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti al post.