Visualizzazione post con etichetta tendina. Mostra tutti i post
Visualizzazione post con etichetta tendina. Mostra tutti i post

Pubblicato il 04/01/13 - aggiornato il  | 57 commenti :

Menù verticale a tendina che funziona con tutti i browser.

La installazione di un menù è per gli utenti di Blogger una delle cose che porta via più tempo. Già difficile trovare del codice che sia compatibile con il modello che utilizziamo e spesso, quando lo abbiamo trovato, ci accorgiamo che il menù si visualizza correttamente solo con alcuni browser. Trovare un menù non proprio semplicissimo che funzioni con Internet Explorer è spesso una vera impresa.

Un altro discorso lo merita la libreria di javascript utilizzata. Spesso questa va in conflitto con altri javascript presenti nel modello frustrando le nostre ambizioni di avere un menù ricco di voci e di link. La soluzione che propongo l'ho testata con successo su Firefox, Chrome, Internet Explorer e Opera ed ha la particolarità di non utilizzare alcun javascript. La tendina che si visualizza quando si passa con il mouse su una voce principale è ottenuta tramite lo sfondo di una immagine. Inoltre il menù ha anche un effetto trasparenza che permette di non nascondere del tutto gli oggetti sottostanti. Viene utilizzato il nuovo linguaggio CSS3 che però è interpretato correttamente anche da IE



Pubblicato il 09/05/11 - aggiornato il  | 6 commenti :

Come visualizzare i menù a tendina quando sono coperti da un video di Youtube.

Se nel vostro blog avete un menù a tendina che si apre verticalmente e siete soliti inserire dei video nella parte alta dei post, vi capiterà senz'altro che alcune voci del menù rimangano nascoste sotto al video

voci del menù nascoste dal video

Per ovviare a questo fastidioso inconveniente si deve necessariamente acquisire il vecchio codice di Youtube e non quello nuovo basato sull'iFrame. In teoria si potrebbe far diventare trasparente l'iFrame mediante l'attributo allowtransparency="true" e modificare il CSS di body { aggiungendo background:transparent; o background-color:transparent; ma ho verificato che il metodo non funziona. Se qualcuno più bravo di me riesce a trovare un sistema alternativo con il nuovo codice sarei molto lieto che me lo indicasse nei commenti.



Pubblicato il 27/03/11 - aggiornato il  | 31 commenti :

Menù a tendina con tutti i titoli dei post che sono stati pubblicati.

Avere la possibilità di accedere a tutti i post del blog dalla homepage o comunque da una pagina appositamente creata, è certamente l'obiettivo di molti blogger. La cosa è importante anche ai fini del posizionamento nei risultati di Google perché linkare un articolo gli dà certamente una spinta in questa ottica. Facendo delle opportune modifiche al widget dell'elenco dei titoli dei post sono riuscito nell'intento di mostrare appunto questi titoli non in un elenco ma in un menù a tendina con eventuale cursore per lo scorrimento.
Ho inserito due menù. Il primo in un elemento HTML con i post in ordine alfabetico e il secondo in una pagina statica con i titoli in ordine cronologico


Pubblicato il 09/03/11 - aggiornato il  | 24 commenti :

Come creare un menù a tendina con una lista di link.

Non si tratta di un menù in senso classico; è un semplice trucco per risparmiare spazio se si vogliono inserire nella sidebar parecchi link per esempio a blog amici o a fonti di informazione. Il codice da usare è il seguente inteso naturalmente solo come esempio:
<form name="form1" method="post" action="">
<label>ETICHETTE</label>
<select name="collegamenti1">
<option value="http://www.ideepercomputeredinternet.com/search/label/antivirus">Antivirus</option>
<option value="http://www.ideepercomputeredinternet.com/search/label/editor">Editor</option>
<option value="http://www.ideepercomputeredinternet.com/search/label/icone">GMail</option>
<option value="http://www.ideepercomputeredinternet.com/search/label/wikipedia">Wikipedia</option>
</select><input onclick="location.href=form1.collegamenti1.value;" type="button" value="VAI" name="button">
</form>


Pubblicato il 02/01/11 - aggiornato il  | 44 commenti :

Come inserire un menù orizzontale drop-down nei blog su Blogger.

Ho già pubblicato un post sul Menù Chrome che attualmente è visibile in questo blog. Il menù è stato realizzato utilizzando degli script di Dynamic Drive e può essere personalizzato nei colori attraverso la scelta tra quattro opzioni diverse e caricando le rispettive immagini che ne determinano l'aspetto. Si può fare riferimento a un altro articolo che ho pubblicato come tutorial sulla configurazione del menù Chrome

Nel codice che ho postato e nella demo, il colore prescelto era stato il verde ma ho avuto molte richieste per un menù che sia in tutto e per tutto uguale a quello di questo blog

menù-chrome

con una serie di sette voci principali e varie voci secondarie per ciascuna di esse. E' superfluo dire che si può avere un menù con un numero indefinito di voci principali e secondarie, basta mantenere la stessa sintassi per creare ciascuna di esse o eliminare quelle in soprannumero.



Pubblicato il 15/01/10 - aggiornato il  | 90 commenti :

Come inserire un menù orizzontale a tendina in un blog.

Nella mia continua insoddisfazione del modello e delle funzionalità di questo blog mi sono trovato a sperimentare una gran quantità di widget, di personalizzazioni e, soprattutto, di menù. Partendo dal Chrome Drop Down Menù e stimolato da un commento di un lettore mi sono deciso a provare anche questo menù orizzontale a tendina che potete vedere all'opera nel mio blog di demo (solo in una pagina).
Non sto a tediarvi con particolari tecnici, ma mi limito solo a mostrare il procedimento di installazione. Andare su Layout > Modifica HTML e dopo aver salvato il modello completo cercate la riga
</head>
e, immediatamente sopra, incollate il seguente codice
<!-- Inizio Menu Chrome -->
<link href='http://sites.google.com/site/ideepercomputeredinternet/script-1/chrome11.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-1/chrome11.js' type='text/javascript'>
</script>
<noscript><a href='http://goo.gl/GnRP' target='_blank'><span style='font-size: x-small;'>Menu Orizzontale</span></a></noscript>
<!-- Fine Menu Chrome -->
quindi andate a fondo pagina e prima della riga </body>, incollate quest'altro blocco di codice
<script type='text/javascript'>
    cssdropdown.startchrome(&quot;chromemenu&quot;)
    </script>
Salvate il modello. Adesso lo script e lo stile del menù sono pronti non vi resta che personalizzarlo. Mi limito a incollare il codice che ho inserito nel mio blog con alcune considerazioni




<div id="chromemenu" class="chromestyle">
<ul>
<li><a href="http://www.ideepercomputeredinternet.com" rel="dropmenu1">Home</a></li>
<li><a href="#" rel="dropmenu2">Risorse Blogger</a></li>
<li><a href="#" rel="dropmenu3">Widget e Menù</a></li>
<li><a href="#" rel="dropmenu4">Eros e Videochat</a></li>
<li><a href="#" rel="dropmenu5">Streaming</a></li>
<li><a href="#" rel="dropmenu6">Effetti</a></li>
<li><a href="#" rel="dropmenu7">Giochi</a></li>
<li><a href="#" rel="dropmenu8">Altro</a></li>
</ul>
</div>
<!--1st drop down menu -->                                                  
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.blogger.com/profile/03393759575661143644" target="_blank">Profilo su Blogger</a>
<a href="http://it-it.facebook.com/parsifal32" target="_blank">Aggiungimi su Facebook</a>
<a href="http://twitter.com/parsifal32" target="_blank">Aggiungimi su Twitter</a>
<a href="http://friendfeed.com/parsifal32" target="_blank">Seguimi su Friendfeed</a>
<a href="http://parsifal32.stumbleupon.com/" target="_blank">Aggiungimi su StumbleUpon</a>
<a href="http://parsifal32.tumblr.com/" target="_blank">Seguimi su Tumblr</a>
<a href="http://www.mybloglog.com/buzz/community/ideepercomputeredinternet/" target="_blank">Seguimi con MyBlogLog</a>
<a href="http://
www.ideepercomputeredinternet.com/2008/01/messaggi-dei-lettori.html">Modulo per contattarmi</a><a href="http://
www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">Norme sulla Privacy</a></div>
<!--2nd drop down menu -->                                               
<div id="dropmenu2" style="width: 180px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea blog </a>
<a href="http://www.ideepercomputeredinternet.com/2008/12/come-iniziare-un-blog-e-cosa-fare-nel.html">Che fare nel 1° mese</a>
<a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">96 risorse Blogger</a>
<a href="http://www.ideepercomputeredinternet.com/2009/07/altre-16-risorse-per-blog-su-blogger.html">99 risorse Blogger</a>
<a href="http://www.ideepercomputeredinternet.com/2009/12/14-post-utili-migliorare-un-blog-su.html">Altri post su Blogger</a>
<a href="http://www.ideepercomputeredinternet.com/2009/01/la-pi-grande-collezione-di-template-e.html">Collezione di modelli</a>
<a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-emoticon-animate.html">Guadagnare con blog</a>
<a href="http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">Animoticon</a>
<a href="http://www.ideepercomputeredinternet.com/2009/07/come-crearsi-una-rendita-mensile-di.html">Guadagnare 1000€ al mese</a>
</div>
<!--3rd drop down menu -->                                                  
<div id="dropmenu3" style="width: 180px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2009/04/ho-cambiato-il-codice-per-inserire-gli.html">Ultimi Articoli</a>
<a href="http://www.ideepercomputeredinternet.com/2009/04/ho-riadattato-il-widget-degli-ultimi.html">Ultimi Commenti</a>
<a href="http://www.ideepercomputeredinternet.com/2009/11/come-inserire-un-widget-di-benvenuto-in.html">Widget di Benvenuto</a>
<a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi.html">U. A. con miniature</a>
<a href="http://www.ideepercomputeredinternet.com/2009/12/il-fantastico-widget-dell-con-il.html">Archivio con Calendario</a>
<a href="http://www.ideepercomputeredinternet.com/2010/01/il-widget-degli-articoli-correlati-con.html">Articoli simili con M.</a>
<a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi_07.html">U. A. per etichetta</a>
<a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-nel-blog-il-widget-degli.html">U. A per categoria</a>
<a href="http://www.ideepercomputeredinternet.com/2010/01/come-inserire-il-widget-degli-ultimi_04.html"> U. A in verticale</a>
</div>
<!--4th drop down menu -->                                                  
<div id="dropmenu4" style="width: 180px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2008/01/ecco-dove-puoi-trovare-amicizia-amore-e.html">Incontri & Eros</a>
<a href="http://videoblog32.blogspot.com/" target="_blank">Videochat Gratis</a>
<a href="http://www.ideepercomputeredinternet.com/2008/10/ciaoamigos-la-videochat-pi-frequentata.html">Ciao Amigos</a>
<a href="http://www.ideepercomputeredinternet.com/search/label/videochat">Le videochat di tutto il mondo</a>
</div>
<!--5th drop down menu -->                                                  
<div id="dropmenu5" style="width: 150px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2009/03/worldlive-tv-per-vedere-gratis-partite.html">WorldLiveTv per TV P2P</a>
<a href="http://www.ideepercomputeredinternet.com/search/label/televisione">Tutto sulle televisioni</a>
</div>
<!--6th drop down menu -->                                                  
<div id="dropmenu6" style="width: 150px;" class="dropmenudiv">
<a href="http://.com/2008/12/effetti-neve-e-foglie-che-cadono-per-il.html">Effetto neve che cade</a>
<a href="http://www.ideepercomputeredinternet.com/2009/01/cuoricini-animati-che-cadono-da-mettere.html">Effetto cuoricini</a>
<a href="http://www.ideepercomputeredinternet.com/2009/07/come-ingrandire-le-immagini.html">Effetto Expando</a>
<a href="http://www.ideepercomputeredinternet.com/2009/10/ripristinato-l-sfoglia-pagina-con-un.html">Effetto Sfoglia Pagina</a>
<a href="http://www.ideepercomputeredinternet.com/2009/11/come-inserire-un-effetto-multicolore-ai.html">Effetto multicolore</a>
</div>
<!--7th drop down menu -->                                               
<div id="dropmenu7" style="width: 150px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2008/01/gioca-gratis-piu-di-dodicimila-giochi.html">12.000 Giochi gratis</a>
<a href="http://www.ideepercomputeredinternet.com/2009/04/friv-per-giocare-gratis-online-piu-di.html">Gioca con Friv</a>
</div>
<!--8th drop down menu -->                                                  
<div id="dropmenu8" style="width: 150px;" class="dropmenudiv">
<a href="http://www.ideepercomputeredinternet.com/2009/09/come-installare-wordpress-in-un-dominio.html">Installare Wordpress</a>
<a href="http://www.ideepercomputeredinternet.com/search/label/wordpress">Risorse Wordpress</a>
<a href="http://www.youtube-video-it.com/" target="_blank">I migliori video di Youtube</a>
<a href="http://www.ideepercomputeredinternet.com/2008/01/invia-sms-gratis-in-tutta-italia.html">Invia SMS gratis</a>
</div>
Si possono costruire menù con tutte le sezioni che si vogliono, è solo un problema di spazio. Ho creato 8 voci principali che sono quelle che si vedono in grassetto nel primo blocco di codice. Se si volessero diminuire basta togliere le righe del tipo


<li><a href="#" rel="dropmenu6">Effetti</a></li>
e lasciare il numero che ci serve. Analogamente si possono inserire altre voci se si ha un modello molto largo o se si vuole mettere il menù in tutta la larghezza della pagina. In questo caso bisognerà aggiungere la riga


<li><a href="#" rel="dropmenu9">Altra voce</a></li>
con numeri progressivi (9, 10, ecc.). Contestualmente alla eliminazione o all'aggiunta di nuove righe nel primo blocco di codice dobbiamo eliminare o aggiungere il relativo codice delle voci secondarie. Queste voci sono contraddistinte da commenti del tipo


<!--7th drop down menu --> 
e si possono togliere o aggiungere mantenendo la stessa sintassi. Bisogna considerare che ciascun menù si posizionerà sotto alla voce principale a seconda del numero presente dopo dropmenu, e deve esserci una corrispondenza tra i numeri della prima parte di codice e quelli delle altre sezioni.
Si può anche personalizzare la larghezza del sottomenù di ciascuna voce principale variando i numeri evidenziati di rosso accanto a width in ciascun blocco di codice.
In alcuni link oltre al tradizionale URL è presente anche la stringa target="_blank" che serve per far aprire la pagina in un'altra scheda. E' conveniente inserirla negli indirizzi che si riferiscono a un altro sito o che comunque fanno uscire il lettore dal blog.
Nelle voci principali ho inserito solo il collegamento alla Homepage mentre ho lasciato gli altri link vuoti. Se avete l'esigenza di collegare tali voci inseritene l'URL al posto del cancelletto (#) nel primo blocco di codice.
Non vi resta quindi che sostituire i nomi delle voci e i relativi URL a questo codice che serve esclusivamente da riferimento. Fatto questo andate su Layout > Aggiungi un gadget > HTML/javascript e incollatelo in Sezioni del sito senza inserire il Titolo
menù-tendina
Cliccate su Salva e andate su Layout > Elementi pagina dove, con il mouse, attraverso il drag & drop, posizionate il menù nel punto voluto
menù-orizzontale

Andate su Salva per l'ultima volta e verificate il funzionamento dei link delle voci che avete immesso. Al passaggio del mouse si evidenzierà la tendina verticale dei link che sono stati inseriti
menù-orizzontale-3
La voce puntata dal mouse assumerà una diversa colorazione. I più smanettoni possono ulteriormente personalizzare i colori del menù, quelli del colore di sfondo al passaggio del mouse, ecc. Devono scaricare il file chromestyle.css, aprirlo con un editor tipo Notepad++ e modificare i colori. Questo menù non è esclusivo di Blogger e può essere aggiunto anche a altre piattaforme come Splinder; l'ho testato con tutti i browser, compreso Internet Explorer 7 o superiori, e non dà problemi di sorta.

Aggiornamento: (02/01/2011) Ho realizzato un menù di questo stesso tipo ma con i colori identici a quello in uso in questo blog. Si può trovare il codice nel post



Pubblicato il 25/10/09 - aggiornato il  | 17 commenti :

Come creare Chrome Drop Down Menù, un menù orizzontale a discesa per blog su Blogger che funziona con tutti i browser.

Questo menù mi è stato segnalato da un lettore; in genere non posso soddisfare le richieste di questo tipo perché non ho il tempo materiale per farlo ma in questo caso ho fatto un'eccezione perché la realizzazione di questo menù mi sembra possa interessare anche altri frequentatori di questo blog.
Mi sono già addentrato nella creazione di menù usando gli script di Dynamic Drive ma anche attraverso il semplice HTML, alcuni esempi sono

     1) Menù laterale scorrevole
     2) Menù verticale a tendina
     3) Menù espandibile
     4) Tre Menù scorrevoli
Il menù illustrato in questo articolo viene creato basandoci sul menù Chrome di Dynamic Drive e sono presenti quattro versioni diverse a seconda che si scelga la posizione di centro con tema grigio, quella di sinistra con tema rosso, quella centrale con tema blu o quella sulla destra con tema verde. Come è mia abitudine ho creato un blog demo per visualizzare questo menù.

Mi muoverò su due versanti: il primo è quello di dare tutte le indicazioni di personalizzazione per i lettori più smanettoni ed il secondo è quello di crearne uno specifico che possa essere installato senza grossi problemi.

Nel caso di utenti che amano crearsi i widget con le proprie mani scaricare questo file zip. Scompattarlo con Zip Genius o altro programma analogo. Al suo interno si trovano due cartelle e due file: cartella chromejs, cartella chrometheme, file demo.htm, file down.gif.

Nella cartella chromejs c'è un solo file denominato chrome.js, quindi del tipo Javascript, mentre nella cartella chrometheme ci sono quattro file chromestyle.css insieme a otto file immagine, due per ogni file css. I file sono numerati e possono essere scelti a seconda delle quattro opzioni di cui ho parlato in precedenza.

Il file demo.htm rimanda ad una pagina web in cui è presente la demo del menù mentre l'immagine del file down.gif rappresenta una freccia che deve essere caricata su un hosting. Io l'ho caricata su Skydrive esattamente qui.

Adesso dobbiamo aprire il file chrome.js e, per farlo, occorre rinominarlo in chrome.txt. Quindi sostituiamo down.gif, presente nel codice, con l'indirizzo dell'immagine che abbiamo caricato

image

Dopo l'inserimento dell'URL, occorre rinominare nuovamente il file come chrome.js e caricarlo su un hosting che supporti gli script come MyDataNest


Adesso dobbiamo scegliere quale dei quattro menù utilizzare. Per provare ho scelto il secondo che è supportato dal file di stile chromestyle2.css e dalle due immagini chromebg2.gif e chromebg2-over.gif.
Dobbiamo caricare le due immagini scelte in un hosting. I collegamenti ai file precedenti sono quelli delle immagini caricate. Dobbiamo aprire il file chromestyle2.css rinominandolo in chromestyke2.txt, come fatto in precedenza, oppure si può usare anche un programma tipo FrontPage. Nel file di testo vanno inseriti gli URL delle due immagini appena caricate; si possono anche personalizzare i colori come meglio crediamo. Non mi dilungo troppo su questo tema ma si possono cambiare per esempio i codici dei colori, i bordi, ecc.
Le porzioni di codice in cui intervenire per personalizzazioni sono contrassegnate dal seguente commento

/*THEME CHANGE HERE*/

Terminate le personalizzazioni dobbiamo rinominare il file come chromestyle2.css e caricarlo nel web in un hosting che supporti questo tipo di file. Coloro che non volessero smanettare troppo possono trovare il file nel link precedente.
Adesso passiamo ad intervenire sul template del blog quindi per prima cosa salviamo il modello completo. Andiamo quindi su Layout > Modifica HTML e cerchiamo la riga </head>; immediatamente sopra incolliamo il seguente codice

<link href='http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome3.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-menu/chrome3.js' type='text/javascript'>
/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
Si può incollare il codice così come è, per gli utenti più pigri, oppure si possono sostituire gli URL in rosso con quelli dei file personalizzati che si sono caricati su un nostro hosting. Il file chrome2.js è praticamente senza personalizzazione perché ha solo l'immagine della freccia verticale mentre chromestyle2.css è quello che determina l'aspetto del menù. Ecco lo screenshot dell'inserimento

modello_screenshot

Adesso andate in fondo al modello e subito prima di </body> inserite quest'altro codice
<script type='text/javascript'>
cssdropdown.startchrome(&quot;chromemenu&quot;)
</script>
Salvate il template.
Definito gli stili del menù possiamo passare alla sua creazione vera e propria. Un codice di un menù potrebbe essere simile al seguente
<div id="chromemenu" class="chromestyle">
<ul>
<li><a href="
http://www.ideepercomputeredinternet.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Dove Trovarmi</a></li>
<li><a href="#" rel="dropmenu2">Risorse Blogger</a></li>
<li><a href="#" rel="dropmenu3">Risorse esterne</a></li>

</ul>
</div>

<!--1st drop down menu -->                                                  
<div id="dropmenu1" class="dropmenudiv">
<a href="
http://www.blogger.com/profile/03393759575661143644" target="_blank">Profilo Blogger</a>

<a href="http://it-it.facebook.com/parsifal32" target="_blank">Facebook</a>
<a href="
http://twitter.com/parsifal32" target="_blank">Twitter</a>
<a href="
http://www.youtube.com/parsifal32/" target="_blank">Youtube</a>
<a href="
http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">Privacy</a>
</div>

<!--2nd drop down menu -->                                               
<div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
<a href="
http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">Crea blog</a>
<a href="
http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">101 risorse Blogger</a>
<a href="
http:/www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">Guadagnare con blog</a>
</div>

<!--3rd drop down menu -->                                                  
<div id="dropmenu3" style="width: 150px;" class="dropmenudiv">
<a href="
http://videoblog32.blogspot.com/" target="_blank">Videochat</a>
<a href="
http://www.youtube-video-it.com/" target="_blank">Video Youtube</a>
<a href="
http://film-streaming-italiano.blogspot.com/" target="_blank">Film streaming</a>
<a href="
http://www.ideepercomputeredinternet.com/2008/09/vedere-le-partite-del-campionato.html" target="_blank">Calcio gratis</a>
</div>
dove la personalizzazione riguarda l'inserimento dell'attributo target="_blank" se si vuole che la pagina venga aperta in un'altra scheda. Al posto degli URL in rosso vanno inseriti gli URL dei nostri collegamenti mentre alle voci scritte in verde vanno sostituite le vostre. All'inizio del codice ci sono tre collegamenti contrassegnati dal cancelletto # e da rel="dropmenux" . Si possono lasciare vuoti così come sono oppure aggiungere dei collegamenti a delle sezioni particolari del nostro blog.
Questo codice va inserito in un elemento HTML/Javascript andando su Layout > Elementi pagina > Aggiungi un gadget. Successivamente con il mouse va posizionato subito sotto l'intestazione

menù_drag-and-drop

Per ciascuno dei tre menù è possibile aggiungere tutte le voci che vogliamo semplicemente aggiungendo delle nuove righe con la stessa sintassi.
Per vedere all'opera questo menù andate nel blog Demo del Menù orizzontale.
Questo menù è stato testato ed è perfettamente funzionante con Firefox, Chrome, Internet Explorer e Opera.
Aggiornamento importante: E' meglio evitare di usare MyDataNext e scegliere il più affidabile DropBox o addirittura Google Sites per chi non possiede un dominio personalizzato


Pubblicato il 17/07/09 - aggiornato il  | 47 commenti :

Come creare un menù a tendina, Drop Down Menu per Blogger.

Può essere interessante creare un menù a tendina o, come si dice in lingua inglese, Drop Down Menu, per inserire dei collegamenti nella sidebar di sinistra o di destra di Blogger.



 Per inserirlo in un blog su Blogger bisogna andare su Layout > Elementi Pagina > Aggiungi un Gadget > HTML/Javascript ed inserire un codice nel corpo del widget.

Il codice da inserire è il seguente


<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="border: 2px solid; color: #191919; background: white; font-family: Trebuchet MS; font-weight: bold;" name="menu"
size="1">

<option/>MENU
<option value="URL_HOME">HOME <option value="URL_LINK1">NOME LINK1
<option value="URL_LINK2">NOME LINK2
<option value="URL_LINK3">NOME LINK3 </select></form>

in cui le parti in rosso sono da personalizzare.

  1. 2 sono i pixel di larghezza del bordo
  2. Solid è il tipo di tratto del bordo, si può scegliere anche dotted o dashed e pure un eventuale colore
  3. #191919 è il colore del testo
  4. White è il colore di sfondo che può essere adattato al blog. Si può inserire anche il codice esadecimale come nel punto 3)
  5. Trebuchet MS e la famiglia di caratteri
  6. Bold significa che sarà in grassetto, se si vuole normale si elimina font-weight
  7. 1 è il numero delle righe di menù che si visualizzano
  8. MENU è il titolo del menù a tendina
  9. URL_LINK e NOME LINK sono rispettivamente l’indirizzo e il nome della pagina o della sezione di archivio (cartelle tipo search) a cui si vuole creare un collegamento
  10. Si possono creare quanti collegamenti si vuole
Ecco un esempio di Menù, il cui codice è qui, creato con i collegamenti del mio Menu laterale