01 marzo 2011

Top Slide Menù per avere anche Facebook, Twitter, Feed e Newsletter insieme al menù.

Ho presentato Menù di tutti i tipi ma questo è veramente originale perché riunisce in un solo slide, oltre alle voci classiche del Menù, anche le icone per accedere alla pagina fan di Facebook, all'account Twitter o per sottoscrivere i feed del blog. C'è anche il modulo per iscriversi alla Newsletter a cura di FeedBurner. Come è mia abitudine, ho pubblicato in rete una

Perché il menù abbia una buona resa estetica è necessario nascondere la navbar che può essere fatto anche al momento incollando questo codice

#navbar-iframe { display: none !important; }

immediatamente sopra alla riga ]]></b:skin> e salvando il modello. Il menù ha questo aspetto

top slide menù

e si apre a scorrimento cliccando su Apri Menù che diventerà Chiudi Menù una volta che si visualizza. E' formato da tre sezioni: la prima con le icone di Facebook, Twitter e FeedBurner, la seconda con le voci del menù suddivise in due colonne e la terza con il modulo per la Newsletter. Per l'installazione si procede in questo modo. Bisogna andare su Design > Modifica HTML e subito sopra a </head> bisogna incollare questo codice

<!--Top Slide Menu Inizio-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});
// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});
// Switch buttons from &quot;Apri menú&quot; to &quot;Chiudi menú&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});
});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>
<noscript><a href='http://goo.gl/zo75J' target='_blank'>Top Slide Menu</a></noscript>
<!--Top Slide Menu Fine - http://www.ideepercomputeredinternet.com-->

Adesso cerchiamo la riga ]]></b:skin> e, subito sopra, incolliamo il

Il dato più interessante da personalizzare è l'altezza dello slide (270px) insieme al colore di sfondo  #272727. Si Salva il modello. Non è finita perché dobbiamo trovare anche la riga  <body> sempre in Design > Modifica HTML, per i vecchi modelli mentre in quelli del Designer modelli ci sarà il codice

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Subito sotto dobbiamo incollare un altro codice che si copia dalla pagina

Si salva nuovamente il modello. Le scritte evidenziate di rosso possono essere personalizzate come più ci piace quando si tratta di semplice testo. Affinché funzionino l'icona e il modulo per la newsletter di FeedBurner occorre inserire correttamente l'ID del blog. Si può desumere andando su Publicize > Email Subscription e copiare la parte del codice simile a questa

http://feedburner.google.com/fb/a/mailverify?uri=ideepercomputeredinternet/zUQN

La parte evidenziata di rosso è quella che dobbiamo inserire al posto dei dati di questo blog evidenziati di viola. Occorre anche aggiungere l'URL dei   vostri feed, l'URL dell'account Facebook o quello della pagina fan e l'indirizzo dell'account su Twitter. Nel codice sono presenti i miei dati evidenziati di rosso.

E' superfluo aggiungere che le righe del tipo

<li><a href='URL del collegamento'>Menu item uno</a></li>

devono essere compilate con gli URL e le voci che vogliamo inserire. In teoria si può aggiungere anche una terza colonna di menù ma non è una operazione semplicissima perché dovrà essere creata un'altra classe di stile slide-menu3 da aggiungere alle altre due. Questo menù è basato su JQuery e, a meno di modifiche di cui magari parlerò in futuro, è incompatibile con Scriptaculous, Prototype e Mootools.

Fonte | Ciudad Blogger -




22 commenti:

  1. C'è un modo per inserire questo stesso menù fisso e poterlo posizionare nella parta finale del blog(sotto i post)
    Ciao e grazie

    RispondiElimina
  2. Volevo chiederti un'altra cosa però nn riesco a trovare il post.
    volevo inserire anche io il"diventa fan su facebook" con le immagini dei fan di facebook,come il tuo
    Ciao

    RispondiElimina
  3. @Petra
    Questo menù non si può mettere nella parte finale. I menù di navigazione vengono sempre inseriti "above the fold" a beneficio dei navigatori.
    Se vuoi inserire il Like Box della pagina fan puoi consultare questo post
    http://www.ideepercomputeredinternet.com/2010/05/come-inserire-nel-blog-il-like-box-di.html
    La cosa è più semplice visto che non si inserisce più l'ID ma l'URL della pagina fan

    RispondiElimina
  4. A me però quando metto questo menù mi si disattiva il dock menù :(

    RispondiElimina
  5. @filippo99 Io molto spesso lo scrivo nei post che ci possono essere incompatibilità tra le varie librerie javascript, altre volte non lo dico esplicitamente ma il problema è comunque sempre presente. Alcuni di questi script poi sono già presenti in alcuni modelli. In questi casi bisogna scegliere quello che ci piace di più o che è più utile alla usabilità del sito.

    RispondiElimina
  6. @Ernesto T.
    Grazie lo stesso
    Seguo tutti i giorni il tuo blog e non ne posso più fare a meno :)

    RispondiElimina
  7. ciao ernesto
    volevo chiederti se per caso ce qual'che menu come questa
    apri il sito e vedrai che nella parte sotto ti aprirà una menu
    in qui ce la ricerca
    post recenti,tweet,mi piace,condividi,diventa fan,e altro ancora
    fammi sapere grazie mille

    RispondiElimina
  8. @denny
    C'è appunto questo :) Come funziona lo so, l'ho scritto io il post :D

    RispondiElimina
  9. ecco Ernesto cercavo questo... ma mettere la casella di ricerca dentro... si potrebbe?

    RispondiElimina
  10. @Soffiodidea
    Una casella di ricerca basata su Google si può inserire dopo tutti gli altri elementi. Se guardi nella Demo ho messo un link a questo post. Al posto del link si può mettere lo script di ricerca di Google. Se non vuoi usare Adsense puoi provare con questo
    http://www.ideepercomputeredinternet.com/2011/03/come-inserire-una-casella-di-ricerca.html

    RispondiElimina
  11. ok grazie mille. Secondo te... è preferibile un menu visibile con about contact icone fb e twitter e ricerca... in alto oppure questo a scomparsa? Questo è più scenico... ma forse meno intuitivo?

    RispondiElimina
  12. @Soffio di Dea
    Non chiedere a me su queste cose estetiche, sai che sono la negazione ;)

    RispondiElimina
  13. ti aggiorno... allora ho preso il codice della casella ricerca e l'ho sostituito a quello di etichette... è venuto carino. Volevo metterlo alla fine e mettere le newsletter per seconde... ma pur invertendo i codici, non mi è venuto. Grazie cmnq così è carino. E' sul blog di prova per cui nn lo vedi ancora nel mio :) ti ho avvisato perché nn so se possa servirti x un articolo. Ed è solo l'inizio -.-' avevo dimenticato quanto fosse stressante un template... nn ricordo + nulla di ciò che ho fatto, forse ero posseduta :D ciao

    RispondiElimina
  14. @Soffio di Dea
    Trovassi uno che avesse la voglia di farlo a me un nuovo template >_<

    RispondiElimina
  15. Ciao, ho da poco finito di seguire molti dei tuoi utilissimi tutorial per il mio blog ma non sono proprio riuscito a concludere l'ultimo passaggio in quanto mi da questo errore:
    Non è stato possibile analizzare il tuo modello, in quanto non è strutturato correttamente. Assicurati che tutti gli elementi XML presentino il tag di chiusura richiesto.
    Messaggio di errore XML: The value of attribute "expr:href" associated with an element type "null" must not contain the '<' character.

    spero mi potrai aiutare, mi serve davvero tanto questo menù, grazie!!

    tecnoeggs.blogspot.com

    RispondiElimina
  16. @Gibro
    Il tipo di errore mi fa pensare che tu abbia tralasciato un tag come questo > o come questo <. Potrebbe esserci anche un errore di copia incolla nel codice del post ma i commenti precedenti mi fanno ritenere che il codice funzioni.

    RispondiElimina
  17. grazie mille Ernasto, ho risolto il problema rifacendo il tutto.. probabilmente l'orario notturno mi aveva offuscato il cervello!

    RispondiElimina
  18. Ciao, ho un problema: ho uno slideshow nella home della mia pagina e il menu c'e' ma va sotto lo slideshow. Come posso fare per farlo andare sopra?

    RispondiElimina
    Risposte
    1. @ Valerie Annemarie
      Prova a sostituire
      z-index: 999;
      con
      z-index: 999999;

      Elimina

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.