Come inserire una casella di ricerca personalizzata nel menù di Blogger.

Una delle richieste che mi sento fare più spesso è quella di inserire una casella di ricerca personalizzata accanto alle altre voci del menù. Per affrontare questo tema in senso generale bisognerebbe prima sapere che tipo di motore di ricerca usare e in quale menù si debba inserire. Evidentemente non posso trattare tutti i casi ma illustrerò un esempio che poi potrà essere generalizzato ai diversi casi rammentando che ogni modello e ogni menù fanno storia a sé.

Consideriamo il caso più semplice di un menù orizzontale creato con le pagine statiche di Blogger. Quando si pubblica una pagina ci viene chiesto se inserirla in un widget orizzontale da mettere sotto l'intestazione o in uno verticale da inserire nella sidebar. Mettiamo che si abbia optato per la prima ipotesi e che il menù orizzontale si presenti più o meno in questo modo

Widget di uno slideshow orizzontale con miniature degli Ultimi Post per Blogger.

Sono sicuro che il gadget che vado a presentarvi piacerà a molti lettori e credo che saranno in tanti a istallarlo. Diciamo che va a colmare una lacuna nei widget di Blogger. Per il momento infatti di slideshow orizzontali che mostravano gli ultimi post ce n'era solo uno e con una estetica non proprio straordinaria. La realizzazione di questo widget si basa sulla libreria JQuery CarouFredSel. Si tratta di un plugin che genera degli slideshow  di immagini.

E' opportuno installarlo nella parte principale del layout, magari subito sopra all'area del post. Verranno visualizzate le miniature degli ultimi post in un movimento orizzontale da destra a sinistra. A ciascuna miniatura sarà associato il link al post corrispondente. Il movimento dello slideshow si interromperà quando ci si passerà sopra con il mouse ma solo dopo un lasso di tempo di circa due secondi. Quando si punta una miniatura, si visualizzerà il titolo dell'articolo

Slideshow di immagini in orizzontale con strumenti di navigazione.

Era diverso tempo che volevo presentare questo widget realizzato da Anshul, mi sono finalmente deciso dopo che ho visto il grande interesse che suscitano gli slideshow orizzontali con collegamento a pagine web. Ho apportato delle piccole modifiche e ho caricato gli script su un mio spazio per questioni di affidabilità.

Il widget per Blogger si chiama Image Slider Carousel e per la sua installazione si procede in questo modo. Si va su Design > Modifica HTML e si salva il modello completo. Si espandono i modelli widget e si cerca la riga  </head>, immediatamente sopra si incolla il seguente codice

Come inserire una linea orizzontale sotto il titolo del post in Blogger.

Nella grafica dei quotidiani è molto comune vedere una linea orizzontale che divide il titolo dal corpo dell'articolo. Si può fare la stessa cosa anche nei blog su Blogger, ma anche su altre piattaforme, se non si ha un modello che già non la preveda. E' noto che il codice che indica una linea orizzontale è

<hr>

ma, se si incollasse così com'è nel modello, potrebbe non essere salvato. Occorre quindi convertirlo in linguaggio XML e allora diventa

&lt;hr&gt;

Andiamo su Design > Modifica HTML e espandiamo i modelli widget. Cerchiamo questa riga

<div class='post-header'> oppure quest'altra  <div class='post-header-line-1'/>

e incolliamo &lt;hr&gt; subito al di sopra. Salviamo il modello e vediamo la differenza tra prima e dopo

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

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.

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

Cliccate su Salva e andate su Layout > Elementi pagina dove, con il mouse, attraverso il drag & drop, posizionate il menù nel punto voluto


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

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

• Drop-Down Menù -

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



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



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



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

Come aggiungere un Menù orizzontale nella parte alta di un blog su Blogger.

Ho già presentato diversi tipi di Menù nei seguenti articoli e oramai mi sono specializzato in questo settore 

Come inserire artigianalmente un menù orizzontale -

Come inserire un menù laterale scorrevole -

Come inserire tre menù scorrevoli -

Come inserire un menù espandibile -

Attualmente in questo blog uso il menù espandibile ma non escludo di cambiare in un prossimo futuro. Come cavia per la realizzazione ho usato il blog di prova, che prima delle modifiche aveva questo aspetto
 
Andare su Layout > Modifica HTML e dopo aver salvato il modello completo cercate la seguente riga di codice

]]></b:skin>

Immediatamente sopra incollate quest’altro codice

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 14px Arial;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #ffffff;
color: #191919;
}

.basictab li a:visited{
color: #800080;
}

.basictab li a:hover{
background-color: #FFD2CF;
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #FFD2CF;
color: black;
}

Dove i dati scritti in rosso possono essere personalizzati e sono la famiglia di caratteri (Arial), la dimensione del testo delle voci del menù - bold14px (grassetto), il colore di sfondo del menù, il colore del testo, quello del link visitato, il colore di sfondo del link puntato con il mouse. Adesso Salvate il modello e andate su Layout > Aggiungi un Gadget > HTML/Javascript. Non inserite il Titolo e nel corpo dell’elemento incollate un codice di questo tipo

<ul class="basictab">

<li><a href="http://www.ideepercomputeredinternet.com/">HOME</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2008/12/come-creare-un-blog-con-pochi-click.html">CREA BLOG</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/02/le-55-cose-da-sapere-per-creare-gestire.html">RISORSE BLOG</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/07/come-inserire-emoticon-animate.html">ANIMOTICON</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/06/tutto-quello-che-serve-sapere-per.html">GUADAGNARE</a></li>


<li><a href="http://www.blogger.com/profile/03393759575661143644">PROFILO</a></li>


<li><a href="http://www.ideepercomputeredinternet.com/2009/03/tutti-i-blogger-che-usano-adsense-sono.html">PRIVACY</a></li>


</ul>

dove al posto dei collegamenti in rosso inserite i vostri link e al posto dei Titoli dei Menù colorati di viola inserite i titoli che credete. Ovviamente potete aggiungere anche altre voci al menù inserendo delle righe della forma

<li><a href="URL_Collegamento">VOCE MENU</a></li>

Cliccate su Salva e con il mouse posizionate l’elemento nella parte alta del blog, anche sopra all’header se lo ritenete opportuno


      

  

Cliccate nuovamente su Salva, quindi su Visualizza Blog per vedere come è venuta la vostra realizzazione. Ecco come si presenta il mio blog di prova




Veramente un gran bell’aspetto, forse anche migliore di questo blog; bisogna però dire che nel Menù espandibile si possono inserire molte più voci che in questo che può comunque essere utile per quei blogger che hanno un modello senza menù e che non hanno esigenze di mettere molti link in Homepage.