12 febbraio 2011 Ultimo aggiornamento:

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 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://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.


23 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
  18. Ciao Ernesto,
    I due file in formato CSS e dei due in formato JS scaricabili dal link "questo archivio" credo che non siano più disponibili.

    RispondiElimina
    Risposte
    1. Grazie. Ho rimediato. La demo però non funziona. Può essere che all'epoca abbia caricato dei file su SugarSync che ora è diventato a pagamento e a cui non sono più registrato
      @#

      Elimina
  19. ...Nel frattempo solo a titolo informativo
    mi sto dando da fare
    per ovviare ad un menù di questo tipo come ti avevo già accennato
    In questa immagine:
    https://dl.dropboxusercontent.com/u/46733398/MazaraCapitale/men%C3%B9.png

    sto cercando di sfruttare questo menù di questo tuo post,
    dove anzicchè distiguere con i colori diversi per ciascun elemento del menù distinguo con immagini che mi divertirò a fare a parte per Tematiche (nel mio caso per etichette) "NEWS", "TURISMO", "ARTE E CULTURA"....
    "di necessità virtù" :D

    Ovviamente per complicarmi la vita proverò ad applicare i preziosi consigli del tuo post "Come installare un menù direttamente nel modello." per non rallentare il blog stesso.

    RispondiElimina
  20. Ciao Ernesto,
    Ho fatto qualche progresso nel creare le immagini dei pulsanti con Gimp (sotto linux che io uso ed amo)
    come nell’immagine di primo test:
    https://dl.dropboxusercontent.com/u/46733398/Comune_Mazara/Mazaracapitale/menu_iconeimmagini/test_menu_immagini.png
    che se ti ricordi avevo già chiesto inizialmente nel tuo post dei "migliori menu",
    e ho riscontrato subito le principali due seguenti criticità:

    1. E’ possibile eliminare le linguette grigie che fanno da cornice al menù ?
    Ho provato a cambiare i colori, gli spessori simulandolo nel codice delle classi, del tuo post “Menù orizzontale personalizzabile da inserire sopra l'header di un blog su Blogger.” che si inserisce nella modifica Design -> Modifica HTML immediatamente sopra la riga "]]>." ma tutto cambia fuor che far scomparire le linguette grige.

    2. Ho notato anche se impercettibile, un disallineamento tra la prima riga e la seconda riga delle Immagini/pulsanti. Ho provato ad inserire degli spazi tra la prima righe e la seconda, con il codice “#” preso dal tuo post “Menù Orizzontale Popup con Immagini per Blogger.” ma senza successo creando solo ulteriori sfalsamenti e slittamenti con tre righe anzicchè due da 5 pulsanti/immagini.

    Mi riprometto che se ne esco fuori vivo farò un post finale risolutivo da condividerlo qui a tutti :)

    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.