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
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
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Apri menú" to "Chiudi menú" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});</script>
<b:if cond='data:blog.pageType != "item"'>
<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='"loading" + 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 -
Grazie!
RispondiEliminaC'è un modo per inserire questo stesso menù fisso e poterlo posizionare nella parta finale del blog(sotto i post)
RispondiEliminaCiao e grazie
Volevo chiederti un'altra cosa però nn riesco a trovare il post.
RispondiEliminavolevo inserire anche io il"diventa fan su facebook" con le immagini dei fan di facebook,come il tuo
Ciao
@Petra
RispondiEliminaQuesto 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
A me però quando metto questo menù mi si disattiva il dock menù :(
RispondiElimina@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@Ernesto T.
RispondiEliminaGrazie lo stesso
Seguo tutti i giorni il tuo blog e non ne posso più fare a meno :)
ciao ernesto
RispondiEliminavolevo 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
@denny
RispondiEliminaC'è appunto questo :) Come funziona lo so, l'ho scritto io il post :D
ecco Ernesto cercavo questo... ma mettere la casella di ricerca dentro... si potrebbe?
RispondiElimina@Soffiodidea
RispondiEliminaUna 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
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@Soffio di Dea
RispondiEliminaNon chiedere a me su queste cose estetiche, sai che sono la negazione ;)
eheheh ok :*
RispondiEliminati 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@Soffio di Dea
RispondiEliminaTrovassi uno che avesse la voglia di farlo a me un nuovo template >_<
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:
RispondiEliminaNon è 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
@Gibro
RispondiEliminaIl 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.
grazie mille Ernasto, ho risolto il problema rifacendo il tutto.. probabilmente l'orario notturno mi aveva offuscato il cervello!
RispondiEliminafantastico!!!
RispondiEliminaCiao, 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@ Valerie Annemarie
EliminaProva a sostituire
z-index: 999;
con
z-index: 999999;