Creare una barra di navigazione su Blogger


image Una cosa che mi è stata chiesto davvero spesso è come creare una barra di navigazione come quella che c'è in testa su Creare blog, ma ho sempre rimandato la pubblicazione di post sull'argomento perchè, anche se non troppo complicato, rischia di diventare davvero lungo. Avete presente quando aspettate il momento giusto per fare una cosa e potervi dedicare tutta l'attenzione necessaria? Bene, mi sono stancato io stesso di aspettare il momento giusto, quindi comincio a trattare questa modifica per Blogger. Comincieremo con le basi e man mano pubblicherò altri post di approfondimento sull'argomento.

Quello che sto per spiegare ruota principalmente attorno a Blogger, ma se avete il blog su altre piattaforme potete utilizzare lo stesso il codice.

Cominciamo.

Aggiungiamo l'area che conterrà i bottoni

Il posto migliore per inserire i bottoni di navigazione è in testa al template (anche se non necessariamente!), ma molti template non permettono di inserire lì degli elementi (i Minima rientrano tra questi se non sbaglio). Se avete la possibilità di inserire elementi sotto l'header, andate avanti, altrimenti andate in Layout->Modifica HTML e cercate questa riga di codice (o una molto simile):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

e cambiatela così:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Cioè cambiando i valori di maxwidgets a 2 e showaddelement a yes. Se andate in Layout->Elementi pagina, vedrete che adesso potete aggiungere un nuovo elemento nell'header: aggiungete un elemento di tipo HTML/Javascript e trascinatelo verso sotto (sennò vi viene sopra l'intestazione del blog!):

image

Questo nuovo elemento conterrà i nostri bottoni.

Creare i link

A questo punto bisogna creare un elenco di link, ma tramite il codice html e non tramite il widget predefinito su Blogger. Per creare un link in html, basta utilizzare la seguente riga:

<a href="indirizzo">testo</a>

Sostituendo indirizzo con l'indirizzo web della pagina e testo con il testo che volete visualizzare. Ad esempio, per creare un link "Home" alla pagina principale di questo blog, utilizzerò il seguente codice:

<a href="http://creareblog.blogspot.com">Home</a>

Allo stesso modo si lavora per creare un link ad un singolo post. Per creare un link ad una categoria (come quelli che uso io sopra) basta visualizzare i post di quella categoria e copiare l'indirizzo visualizzato nella barra di navigazione del browser. Ad esempio, nel mio caso il link alla categoria Strumenti sarà il seguente:

<a href="http://creareblog.blogspot.com/search/label/Strumenti">Strumenti</a>

Create il codice html necessario per tutti i link che volete aggiungere. Nel mio esempio, creo tre link:

<a href="http://creareblog.blogspot.com">Home</a>

<a href="http://creareblog.blogspot.com">Chi sono</a>

<a href="http://creareblog.blogspot.com">Donde vengo</a>

In questo caso puntano tutt'e tre allo stesso indirizzo, ma nella pratica ognuno deve avere il suo indirizzo personalizzato, sennò non c'è motivo di metterne più di uno. Incollate il codice nell'elemento in testata in template (che avete creato prima se già non ce l'avevate), e questo sarà il risultato:

image

Anche se non si direbbe, praticamente abbiamo già raggiunto l'obiettivo.

Abbelliamo i pulsanti

Modifichiamo il codice html sopra aggiungendo la parte evidenziata in rosso ai vari link:

<a href="http://creareblog.blogspot.com" class="Bottone">Home</a>
<a href="http://creareblog.blogspot.com" class="Bottone">Chi sono</a>
<a href="http://creareblog.blogspot.com" class="Bottone">Donde vengo</a>

Aggiungendo questa parte, diciamo al codice html che deve utilizzare la classe Bottone per definire lo stile dei link. Ovviamente, la classe Bottone ancora non l'abbiamo creata. Andiamo in Layout->Modifica HTML, e nella parte del template usata per il CSS incolliamo le righe che ho evidenziato in rosso (le altre possono servirvi come riferimento per trovare il punto dove inserire il codice):

a img {
  border-width:0;
  }

a.Bottone {
    background: #0000FF;
    padding: 3px;
    color: #FFFFFF;
}

/* Header
-----------------------------------------------

Salviamo e visualizziamo il template, ecco quello che otterremo:

image

Spieghiamo le righe che abbiamo aggiunto:

  • background: indica il colore di sfondo, secondo il codice RGB (le prime due cifre indicano la tonalità di rosso, quelle al centro di verde e le ultime due di blu)
  • padding: distanza tra i pulsanti, in pixel (ne ho parlato approfonditamente qui)
  • color: il codice del testo visualizzato, secondo la codifica spiegata prima

Per scegliere i colori, potete vedere i loro codici in Layout->Caratteri e colori. Potete anche utilizzare lo stesso di sfondo del template.

Cambiare colore al passaggio del mouse!

Un bell'effetto è cambiare il colore al passaggio del mouse. Niente di più facile, seguendo l'esempio sopra basta aggiungere (sotto le righe inserite prima):

a.Bottone:hover {
  background:#FFFFFF;
  color: #0000FF;
}

Ed ecco cosa succederà passandoci sopra il mouse:

image

In questo caso ho usato il bianco come sfondo e il blu per il testo quando passo col mouse, altrimenti il contrario. Anche in questa seconda porzione di codice potete personalizzare i colori.

Per concludere

Ci sarebbero ancora molti abbellimenti da fare alla nostra barra di navigazione, come ad esempio aggiungere delle immagini ai pulsanti o usare bottoni grafici invece del testo, o gestire l'allineamento della barra, ma sarà argomento di futuri post. Per qualsiasi dubbio o difficoltà, lasciatemi un commento!

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

106 commenti:

the Tramp ha detto...

Prima di tutto bentornato, ci sei mancato.
Complimenti per il post, credo sia la risposta ad una delle prime cose che ti chiesi (e come sempre hai mantenuto la parola). Non appena avrò risolto quel problemino di cui ti ho parlato, questa sarà la modifica successiva.
Approfitto per comunicarti che c'è un premio per te (mai così meritato), quando vuoi passa a ritirarlo.Ciao.

Profeta ha detto...

Bentornato!!!!!!!!!!!!!!!!!!!!!!

Andrea Pietrarota ha detto...

uauhhh non ho fatto in tempo a chiedere e già mi hai dato l'aiuto.

Profeta ha detto...

scusa ma perchè tutto questo funzioni, bisogna inserire una Etichetta?

G-Man ha detto...
Questo commento è stato eliminato dall'autore.
Boby ha detto...

Sei tornato! Che bello! Mi mancavano i tuoi post. Meglio adesso?

Io sul mio blog ho inserito proprio un menu, ma è stato più per un esigenza che una scelta, avrei preferito uno semplice così.

visto che ti sei rimesso, tra un pò di mando quel riepilogo, volevo aspettare che ti riprendessi e che svuotassi la casella di posta xD

cristina ha detto...

ciao, come sempre sono a stressarti e spero di farmi capire nelle domande..per la precisione due.
1) come faccio a inserire uno sfondo nel post e nel menù a fianco? (per intenderci come quello che ho ma il risultato non doveva essere così ma lineare..)
2) vorrei mettere un separatore tra un post e l'altro, ho inserito il codice ma non lo vedo...cosa posso fare?

ho usato come base blog Minima e da lì ho modificato ciò che volevo.
Se riesci ad aiutarmi è un mese che provo ma non ci salto fuori..
grazie,
cristina

G-Man ha detto...

Ciao, è la prima volta ke guardo il tuo blog e l'ho trovato assolutamente fantastico...
magari se ti va opotresti dare un'occhiata al mio e dirmi cosa te ne pare, è il mio primo blog sn ancora un principiante.

www.blogindashock.blogspot.com

ho solo un problema, come hai notato, tra una sezione e l'altra (sidebar, intestazione etc..) vi è del bianco, sapresi dirmi come cambiare colore, magari nero...perxhè non so da dove incominciare...grazie e di uovo complimenti

sempre Fata Bislacca ha detto...

Ma benguarito!!!!
Vivavivaviva!!!! Bacio a te e Mary. Ripasserô per un saluto più decente. Tchüss

Alessia ha detto...

Articolo interessantissimo :)
ho già eseguito sul blog dell'associazione ed è andato tutto perfettamente liscio, GRAZIE ;)

Davide Dragonetti ha detto...

bentornato tenebrae! grandissimo post!!! farai felice un milione e passa di blogger :)

Den ha detto...

Ciao Tenebrae, sono riuscito a metterlo perfettamente!!! Però rimane uno sfondo bianco intorno alla barra; è possibile colorarlo? E poi, si può anche aggiungere un elemento sotto il template (nei template che non ce l'hanno predefinito)?

Tenebrae ha detto...

@den: il colore di sfondo è quello del template, se lo cambi lo cambi dovunque, cmq puoi farlo da layout->caratteri e colori

vuoi dire aggiungere una sezione in fondo al template? sarà argomento di un futuro post ;)

fiore_labs ha detto...

Bellissimo questo post.... non appena ho un momento ci provo, per ora mi sono limitata a inserire la terza colonna sul blog di tutte le mie amiche!

Domandina... perchè il mio blog in basso ha una barra di scorrimento che corre verso dx (con moltissimo spazio bianco??)

Grazie mille!
Fiore

Tenebrae ha detto...

@fiore: bella domanda, ho visto che il problema si verifica solo con internet explorer, mentre con chrome o firefox si vede tutto benissimo... probabilmente qualche modifica che hai fatto recentemente, cerca di fare mente locale e vedere se riesci a risolvere il problema, casomai fammi sapere!

fiore_labs ha detto...

Grazie.... quel problemo ce l'ho già da un po', da quando ho allargato (circa 6 mesi fa)... se un giorno troverai una soluzione io sono qui con le orecchie alzate!
Ciauz
Fiore

Daniele ha detto...

Questa modifica è compatibile con il mio template???

http://tanarossonera.blogspot.com/


Grazie mille!

Tenebrae ha detto...

@daniele: il tuo template deriva dal minima, che è lo stesso che ho usato io per la prova, quindi la modifica puoi farla tranquillamente... magari in un blog di prova, per vedere se ti piace l'effetto

Annodel ha detto...

grande! sto imparando pian piano le cose che mi interessano! ti ho linkato nel mio blog sotto la sezione uno sguardo su. nel blog di prova che ho creato sono riuscita ad inserire articoli correlati e la barra di navigazione. l'unica cosa che per ora non mi va è l'antipixel che ho inserito in annodel mi restano delle virgolette. ci puoi dare un'occhiata quando hai tempo? non so dove ho sbagliato. grazie mille!

Anonimo ha detto...

Ciao ho provato a fare la modifica ma alla fine, nell'ambiente reale rimane il simbolo degli attrezzi dappertutto (widget) barra a destra ecc.ecc. come devo fare:
ricerca.rpg@libero.it

Ti ringrazio se mi rispondi

coscienza critica ha detto...

Buongiorno, grazie per i tuoi consigli e suggerimenti, ne sto facendo tesoro. Riguardo a questo argomento, avrei bisogno di più delucidazioni. quando tu dici 'Sostituendo indirizzo con l'indirizzo web della pagina...', ti riferisci all'indirizzo della homepage del blog o alla pagina dove appare il post che mi interessa inserire in una categoria? A me interessa creare una sezione 'analisi', ma se inserisco i link dei vari post escono fuori tante 'linguette analisi' quanti sono i post e questo perchè nomino tutti i link. Dove sbaglio?
Ciao, grazie

nike ha detto...

per me scusate ma è arabo. non ho capito nulla!! sono proprio negato.. peccato.

Tenebrae ha detto...

@coscienza critica: puoi usare l'indirizzo che vuoi, comunque mi riferivo a quello delle categorie. puoi vedere come ho fatto in questo post per recuperarne l'indirizzo

non ho ben capito il discorso dell'analisi... vuoi ottenere un unico link che apra più post?

Tenebrae ha detto...

@anonimo: che rimanga il simbolo degli attrezzi è normale, magari se mi metti il link del blog ci do un'occhiata

coscienza critica ha detto...

Salve, Tenebrae. Io non ho mai usufruito delle 'categorie' per i miei post, forse è qui che sbaglio? Nel tuo blog hai creato una navbar con varie 'linguette' o bottoni; a me interessa soltanto un bottone denominato 'analisi' (oppure 'le mie analisi'), dove posso racchiudere tutti i post che parlano di analisi sociale. Seguendo il tuo post, sono riuscito a creare il nuovo elemento nell'header. Poi però non sono andato più avanti, ho cercato di inserire una lista di link, ma a questo punto avvenivano due cose: se elencavo una lista di post nominati 'analisi' (come questi)

analisi

analisi

si vedeva la parola 'analisi' ripetuta sull'header, una per ogni post.
Se, invece, eliminavo dal codice la parola 'analisi' a tutti i link, ovviamente si visualizzava solo il primo post della lista. A questo punto, probabilmente, starai ridendo per la mia ingenuità (sempre che io sia riuscito a spiegarmi). Ad ogni modo ci tengo a ringraziarti, anche per il link che mi hai qui suggerito (creare diversi gruppi di categorie).
Cordialmente saluto
Coscienza critica

coscienza critica ha detto...

... scusa, avevo scritto le stringhe html complete, ma qui si sono trasformate in link 'analisi'. Penso che avrai capito

coscienza critica ha detto...

Caro Orazio, ci sono riuscito... dovevo prima etichettare i post, tz tz! Mi pare di aver letto che tu avessi volontà di suggerirci come cambiare questi link in immagini. Cerco ancora nel tuo blog...
Grazie :-)

Anonimo ha detto...

scusa la mia ignoranza..ma dove devo inserire :

a.Bottone {
background: #0000FF;
padding: 3px;
color: #FFFFFF; ??

Non so come distinguere il CSS dal resto del testo html.

Grazie.

p.s. sto imparando da soli 2 giorni a creare un blog :)

Tenebrae ha detto...

@anonimo: il fatto che tu non mi indichi il tuo blog mi è di poco aiuto, comunque dovrebbe andare subito sopra /*Header , come vedi nell'esempio che ho portato

giovanna ha detto...

sei chiarissimo ed il risultato è eccellente! come faremmo senza di te?

Tenebrae ha detto...

@giovanna: siamo pari, a chi scriverei io senza di voi?

andrea ha detto...

sei un mito!!!!!!

ti lancio, per quando avrai tempo e voglia, un'altra sfida/quesito:

è possibile raggruppare insiemi di etichette che rimandino allo stesso bottone del menù?

Nel mio caso specifico ho per esempio TROPPE etichette: solo con tema artistico: mostre, arte, pittura, scultura, neoimpressionismo, fotografia, ecc ecc.

Lo stesso per tanti altri maxi argomenti (economia, ambiente...) e relative sottocategorie (x es per ambiente: fotovoltaico rifiuti, ecc..)

Anonimo ha detto...

Ciao Tenebrae, io ho aggiunto il widget per la barra navigazione e l'ho spostato sotto alla intestazione, ma non sono riuscita a capire dove vanno inserite le righe per creare i link
Home, Chi sono etc, devo andare in Layout-Modifica Html o lo devo fare dalla autocomposizione Aggiungi widget --elemento html/jscript?

kayowas ha detto...

Sei un grande, ottimo post, seguito quasi tutto solamente ho inserito dei bottoni grafici, grazie.
Aha ti ho linkato, ciao.

dany ha detto...

Ciao, ho un problemino strano. Ho inserito i bottoncini, ed ho anche modificato il colore direttamente dallo script che hai lasciato tu, il mio è:
a.Bottone {
background: #CAF99B;
padding: 1px;
color: #FFFFFF;
}

Questo perchè se vado su Layout->Caratteri e colori, il mio Template non ha questa possibilità

Il problema è che non mi considera ne la modifica dei pixel nè la modifica del colore.

Avresti mica un suggerimento?

DARKinside ha detto...

Anch'io ho lo steso problema....non riesco a cambiare il colore dei link...mi rimane blu elettrico...come fare???!

ilgabbianoJohn.blogspot.com ha detto...

Mi chiamo Viktor. Sono vecchio d'età, ma quasi nuovo di Blog. Mi serviva una Barra di navigazione più una per aggiungere categorie al blog. Ho seguito il tuo interessantissimo post, ma trovo che tutti voi che c'istruite, parlate il "Politichese". (Cosa vuol dire: "Incollate il codice nell'elemento in testata (che avete creato prima se già non l'avevate?) Torniamo a noi. Ho usato il template Sand Dollar di Blogger. Ho cambiato "1 col 2 e il no con yes", sono andato su elementi pagina e non ho visto niente di nuovo. Allora ho interpretato che dovevo aggiungere l'elemento pagina HTMLJavascript,(come si aggiunge Adsense). L'ho aggiunto e l'ho portato sotto. Ho aggiunto i link:
"Poesie Racconti Indovinelli massime" e si sono tutti posizionati sopra al titolo, quasi attaccato uno con l'altro. Ho provato a cliccarli, e come tu dici, puntano tutti ad un solo indirizzo (ma che non è il mio) ma di uno che inizia come il mio. Sto cercando di spiegarmi: (secondo me questo è un altro errore) il commento non mi permette di scrivere codici HTML per farti vedere quello che ho scritto e l'errore che mi ha dato.
Il blog che stavo provando si chiama: "Provamodello.blogspot.com
Grazie. Obbligato se mi rispondi e se m'indichi dove posso trovare un "tuo" blog che parla di aggiunte di categorie.

Fabietto ha detto...

Grazie mille.

Fabietto, Scenografo

Tenebrae ha detto...

@viktor: puoi vedere se ti è utile questo post

Monteiasi ha detto...

vorrei inserire il modulo contatti..con l'indirizzo email come faccio?

ilgabbianoJohn.blogspot.com ha detto...

Ciao Tenebrae. Sono Viktor.Sei stato molto gentile a rispondere. Voglio scusarmi con te per aver detto che parli il politichese, invece leggendo altre cose tue, ho visto che sei l'unico che ti dice dove inserire le cose. Tornando a noi. Tu mi hai dato una indicazione ed io voglio capire se mi sono spiegato bene. Ho su blogger una diecina di post.(tutti nella bacheca però perché i modelli che mette a disposizione google sono tutti senza categoria.
Il mio problema è che vorrei riunirli in un unico blog e metterli ognuno al suo post.
Per quando riguarda la barra di navigazione, vuoi vedere per cortesia in "Provaxmodello.blogspot.com" cosa ho combinato? Grazie.

Tenebrae ha detto...

tranquillo viktor. adesso dovrai invece scusarmi tu, ma ho bisogno di un chiarimento: nella barra vuoi che vadano gli indirizzi dei post o quelli di altri blog?

ilgabbianoJohn.blogspot.com ha detto...

Scusami tu Tenebrae, ho fatto confusione tra "Barra di navigazione" e "Categorie".
Il mio problema è che ho una decina di blog che parlano di cose diverse, ma i template prefrabbricati di blogger non permettono divisioni e quindi vanno a finire tutti nella bacheca. Hai motori di ricerca che mando dieci indirizzi diversi? Spero di essermi spiegato.
Grazie per il tuo interessamento. Viktor.

ilgabbianoJohn.blogspot.com ha detto...

Scusatemi... mi è scappata una Acca (H) Viktor

Tenebrae ha detto...

Si viktor, ai motori di ricerca vanno segnalati tutti e dieci

louischiper76 ha detto...

ciao tenebrae, complimenti per il blog.
ho un problema.
come faccio a spostare la mia barra di navigazione più al centro?
ti do l'indirizzo del mio blog. un grazie in anticipo.
http://ilmiliteignoto.blogspot.com/
poi ne ho un altro.
come faccio a trovare le porzioni di codice html all' interno di modifica html? c'è qualche strumento?
di nuovo tante grazie

Eleonora ha detto...

Ciao Tenebrae, innanzi tutto grazie per i tuoi preziosi consigli! Ho seguito la procedura per creare una barra di navigazione, ma ora ho un problemino: come faccio ad inserire i post ognuno nella sua categoria?
So che è spiegato, ma non credo di aver capito bene...
Grazie anticipatamente!

Tenebrae ha detto...

@eleonora: mi sembra tu abbia risolto, nel tuo blog vedo che hai linkato in alto le categorie... o sbaglio?

Eleonora ha detto...

Si si, grazie! Ho guardato meglio come avevi fatto tu e ho notato che andavano linkate le categorie!
Grazie mille!

Anonimo ha detto...

grazie...grazie davvero...ho abbellito il mio blog grazie
Aro=stefano

Riki ha detto...

Ciao, ho un problema: nel mio blog, dopo aver creato il codice html per inserire il bottone, non riesco a trascinarlo sotto all'intestazione. I codici html che creo non si spostano. Posso trascinarlo, ma sotto all'intestazione non posso metterlo in quanto non mi segnala lo spazio. Come posso fare?

Riki ha detto...

Correggo..ho risolto tutto..una domanda: è possibile spostare questi pulsanti?Se vai sul mio blog vedrai che non sono perfettamente allineati con il mio template..

Tenebrae ha detto...

@riki: non li vedo nel tuo blog quindi presumo tu li abbia tolti

purtroppo ogni template ha una storia a sè e quelli personalizzati possono richiedere qualche intervento a parte, purtroppo non è una cosa veloce e va vista caso per caso

Riki ha detto...

si li avevo tolti perchè stavano troppo male..in pratica avrei bisogno di sposare il tutto di circa 1 cm (non so a quanti px corrisponda), perchè altrimenti la scritta "home" esce dalla zona colorata in verde. Per farti capire meglio, vorrei che la scritta "Home" venisse allineata con la lettera A della frase "a portata di blog". Devo aggiungere una parte di codice per sporsarlo di qualche px?

Lukino ha detto...

ciao! come puoi vedere nel mio blog (http://angelinajolieandmore.blogspot.com) ho inserito i pulsanti..ma..non sono proprio proprio come i tuoi:( come posso fare x non far apparire lo sfondo così largo e x togliere la sottolineatura al testo? poi la tua è proprio come una sorta di barra..i miei sono delle scritte ke fluttuano nel vuoto:P
sxo mi darai qst delucidazioni x abbellire ulteriormente i miei pulsanti!

Andrea ha detto...

Infinitamente grazie per questo post e per molti altri! Davvero utili.

Complimenti.

Un saluto d'oltreoceano

SALSA ha detto...

Grazie articolo davvero interessante,credo che ti stresserò ancora.
Un saluto.

cinzia ha detto...

Ci sono riuscita, ho inserito la barra di navigazione.......nu ce posso credere.....
sei un genio......e l'ho messa proprio al centro.....se ci sono riuscita io.....che non ne capisco nulla, ci riuscirete anche voiiiii.

Un grande saluto...sono troppppooooo contenta....non potete capire......

arrgianf ha detto...

ciao, complimenti per il post e il mio blog; vorrei fare questa stessa cosa anche io sui miei blog, tra cui http://arrgianf.blogspot.com/ perchè c'è una confusione totale... Come faccio?
Cioè.. una volta create le categorie in alto, come faccio a mettere i vari post li dentro? Bastano le etichette? Grazie

Peppe Luongo ha detto...

Ciao Tenebrae,grazie per i tuoi preziosi consigli!
Ho messo un link sul mio blog amicipittori.
Un saluto

IlPrincipino89 ha detto...

complimenti!! Quello che cercavo! Ora mi divertiro a formattarli a mio piacimento..:)

IlPrincipino89 ha detto...

E non si puo per ogni bottone creare una scaletta a comparsa sotto ogni qual volta ci si passa sopra con il mouse? del tipo passi su home e a discesa si apre un sottomenu per intenderci con scritto per esempio che ne so, chi sono, informazioni sul sito ecc.. dei "sottobottoni" se mi permetti il termine. :-)

Luca ha detto...

Ciao Orazio, riprendo questa frase.

"A questo punto bisogna creare un elenco di link, ma tramite il codice html e non tramite il widget predefinito su Blogger. Per creare un link in html, basta utilizzare la seguente riga.."

A che punto della head devo inserire questa porzione di codice:

testo

Jan Kowalski ha detto...

uff.. son principiante, ma non riesco a capire una cosa: fatta la modifica sul mio minima lefty streched, mi dice "impossibile salvare la modifica, variabile presente ma non definita".. dove sbaglio?

Jan Kowalski ha detto...

uhm. e dovrei specificare: ho solo cambiato i valori di maxwidgets da 1 a 2, e showaddedelement da no a yes...

Jan Kowalski ha detto...

aspetta.. non ci credo: se lo faccio sull'editor e poi copio e incollo mi da quell'errore che ti dicevo sul 64/65. Se faccio i cambiamenti da "dentro" l'editor di blogger no.. Boh. Davvero, sbaglio io, a questo punto. :)

Tenebrae ha detto...

@jan: è un problema che può succedere, dipende da determinate condizioni, lunghe da spiegare, ma che comunque si risolve in genere come hai fatto tu

Il Mitico GA ha detto...

Mamma mia, sei troppo bravo non vale!! Comunque questo Post serve a un casino, appena riesco lo faccio anche io....

Daniela ha detto...

AIUTO AIUTO!!! mi sono incasinata un attimo: Sono riuscita ad ottenere lo spazio per inserire i bottoni e poi? non ci capisco più niente. Dove devo scrivere tutto il RESTO? dove trovo i codici per scrivere l'indirizzo dei link. Mi aiuti per favore? il mio blog si chiama Igiardinidimarzo. Grazie mille Daniela?

Gianni ha detto...
Questo commento è stato eliminato dall'autore.
ابوتقوى ha detto...

Ciao oriazo
Sono Aboutaqua, vorrei ringraziarti per il bel servizio messo a disposizione di chi ha bisogno come me .
Sono nei primi passi e da parecchi mesi che cerco di realizzare questo mio primo Blog ma sempre c’e qualcosa che va storta, forza per motivi di lingua e apprendimento !
Ti prego di dare un’occhiata a questo mio problema e scrivermi i tuoi suggerimenti in modo semplice e chiaro come lo sai fare solo tu !
Ho cercato di inserire la barra di navigazione orizzontale ma vedi come è venuta male !
Cercato di allontanarla dal bordo un po’ o di metterla al centro o a destra, o di creare un bottone link ad una categoria ma non c’è niente da fare..
Ho un argomento che contiene circa 20 post, e quando ho copiato i 20 indirizzi dei post visualizzati nella barra di navigazione del browser, trovo 20 bottoni oltre le altre link come HOME ecc.. !!
Come faccio ad avere un solo bottone con linguette(categoria e sotto categoria) ? !
Un’altra cosa ho cercato di inserire i numeri delle pagine ma sono venute male. Cosa che è andata storta ?
Grazie mille e che Dio ti benedica

http://aboutaqua.blogspot.com
aboutaua@yahoo.it

ابوتقوى ha detto...

Ciao oriazo
Sono Aboutaqua, vorrei ringraziarti per il bel servizio messo a disposizione di chi ha bisogno come me .
Sono nei primi passi e da parecchi mesi che cerco di realizzare questo mio primo Blog ma sempre c’e qualcosa che va storta, forza per motivi di lingua e apprendimento !
Ti prego di dare un’occhiata a questo mio problema e scrivermi i tuoi suggerimenti in modo semplice e chiaro come lo sai fare solo tu !
Ho cercato di inserire la barra di navigazione orizzontale ma vedi come è venuta male !
Cercato di allontanarla dal bordo un po’ o di metterla al centro o a destra, o di creare un bottone link ad una categoria ma non c’è niente da fare..
Ho un argomento che contiene circa 20 post, e quando ho copiato i 20 indirizzi dei post visualizzati nella barra di navigazione del browser, trovo 20 bottoni oltre le altre link come HOME ecc.. !!
Come faccio ad avere un solo bottone con linguette(categoria e sotto categoria) ? !
Un’altra cosa ho cercato di inserire i numeri delle pagine ma sono venute male. Cosa che è andata storta ?
Grazie mille e che Dio ti benedica

http://aboutaqua.blogspot.com
aboutaqua@yahoo.it

Tenebrae ha detto...

@Aboutaqua: grazie a te!

purtroppo non tutte le modifiche vengono bene con tutti i template, e in determinati il mio consiglio è che piuttosto che impazzire dietro alle varie modifiche, conviene cercarsi un template diverso e più adeguato alle proprie esigenze, anche se so benissimo che spesso significa dover rifare da capo altre modifiche

molti template hanno già pronto il menù come serve a te, basta semplicemente personalizzarlo

puoi cercare qualcosa tra i vari template che ho pubblicato finora

Tenebrae ha detto...

@Aboutaqua: dimenticavo, complimenti per l'italiano!

Gabriele ha detto...

Ciao,
prima cosa complimentoni!
Ho implementato la modifica! Solo che adesso il mio template presenta 2 rettangoli concentrici! E dopo la modifica sul lato sx si sono attaccati!
Come faccio a ripristinare la distanza uguale su tutti i quattro lati?
Con firefox invece la distanza rimane uguale e il testo si sposta, ma non credo dipenda dalla modifica! In più i bottoni si accavallano al contorno! Stesso per Chrome!
Magari se ti va di dare un occhiata akeryone.blogspot.com
grazie mille!

Alexxandro ha detto...

ciao! non succede nulla se togli l'header? ed aggiungi un solo widget in html ??

titti ha detto...

mi sono persa, ok ho creato i bottoni, ma adesso come li collego alle pagine?
Vorrei creare bottoni tipo ( i miei banner oppure i
lik amici, quindi sono html/yava script non post
scusa ma sono un po' di coccio, mi dai una mano????
grazie mille Titti

Stefano Dell'Agnello ha detto...

Ciao Tenebrae, il tuo blog mi ha davvero aiutato tantissimo per capire come sistemare il layout del mio. Riguardo a questo post, mi sapresti aiutare e dirmi come faccio a spostare questi bottoni dove voglio e a distanziarli tra di loro?
Grazie mille dell'aiuto.
matt

Mammagiramondo. ha detto...

Sei un mito, grazie, le tue spiegazioni sono sempre chiarissime!!!!

Associazione AmicidiFido ha detto...

Ciao ho creato il maxiwidget ma non riesco a sposterlo sotto quello dell'intestazione che sembra come bloccato
Grazie

http://ilblogdegliamicidifido.blogspot.com/

Stresa 2.0 ha detto...

Ciao, grazie per il tuo aiuto.
Purtroppo mi si verifica un'errore, e solo se il sito viene visualizzato con IE. In home page tutto bene, ma, quando si apre un singolo post, il menu crea casini con la foto principale e si mescolano tutte i bottoni del menù.
NOn so se è capitato anche ad altri.
Cordiali Saluti
www.stresaduepuntozero.com

Tenebrae ha detto...

@amicidifido: puoi provare ad aumentare il valore di maxwidgets='2' portandolo a 3 o più

@stresa: può succedere che ci siano effetti collaterali alle modifiche provando a visualizzare il blog con browser diversi... devo dire però che provando a visualizzare il tuo blog non ho i problemi che dici tu

Gabriele Gualco ha detto...

Ciao, ogni tanto rispunto. Ho esguito la prima parte, io vorrei mettere adsense sopra la foto e l'intestazione. Il problema è che c'è una cornice, e il nuovo spazio al di sopra viene incluso, e nn riesco a trovare come escluderlo! Hai un sistema? Attendo news! Grazie Gabriele ~x(

Gabriele Gualco ha detto...

P.S. Il problema si vede concretamente dal blog di prova: http://www.provagabrielegualcoontravel.blogspot.com/ invece il blog dove attuo le modifiche è http://www.gabrielegualcoontravel.blogspot.com/ Ciao Grazie ;)

Walter ha detto...

Prima di tutti complimenti per il blog,davvero molto utile.
In merito alla barra di navigazione volevo sapere se era possibile,per un blog su blogspot,distinguere le pagine ed avere più pagine all'interno del blog nelle quale si può postare in maniera separata.
In pratica se si ha un blog ove si trattano argomenti ben distinti è possibile postare un post in una pagina sua dedicata,oppure nella home e farin modo che si vedano nella aree apposite?
Grazie

ninnallegra ha detto...

grazie mille!!!!! avevo trovato altre spiegazioni ma non ero riuscita a capirle, invece con questa...

http://diariodiunaterapista.blogspot.com

EVVIVA!!!!!

Gabriele Gualco ha detto...

Ciao, mi fa piacere se te la sei passata bene! Te lo meriti.. Per quando riuscirai a rispondere, ho capito come aggirare il problema sul header, lasciando la cornice e inserendo i bottoni sopra e sotto, ma ora nasce un altra richiesta di consiglio: 1 mi conviene fare come te che hai i post anticipati come data per fare le pagine o aprire cinque o sei blog come http://diariodiunaterapista.blogspot.com onde evitare che si vedano come primi post andando indietro con il numero pagina in basso e potendo cambiare l'aspetto della pagina diversamente? 2 se faccio i post con data in anticipo come posso escluderli dal resto e/o evitare che si veda la data solo su questi? perdona la mia lungaggine come sempre.. attendo luce! G

wtw ha detto...

ciao e complimenti per l'articolo.
ti chiedo una cortesia:
ho il modello di un blog in cui la barra di navigazione ha i soliti link:
home
comments rss
post rss
edit

il mio problema è il seguente: nel codice io riesco a modificare il nome dei link ma non il link vero e proprio. ad esempio io vorrei che edit puntasse su un sito esterno. se provo a scrivere il link nel codice del blog succede che viene fuori questo tipo di collegamento nomedelblog/il sito che ho messo io .
qual'è la sintassi corretta per avere un link esterno sulla barra di navgazione del blog? devo eliminare qualche cosa nel codice originale del blog stesso??
ti prego aiutami...
non so davvero cosa fare...

grazie.
webwtw@gmail.com

Stjarna ha detto...

Ciao!! inanzitutto volevo farti i complimenti per il blog, è incredibilmente chiaro e completo!! L'ho scoperto solo pochi giorni fa e dopo essermi letta ogni post, ho cercato di fare qualche modifica al mio blog...non ho riscontrato problemi in nulla, sono pure riuscita a mettere una barra di navigazione decente..non riesco pero' ad avvicinare la barra all'header!! ho provato a cambiare un po i margini etc..ma nn si vedono cambiamenti! Poi mi piacerebbe unire i tab con una linea..ma pure questo si sta rivelando un enigma dato che riesco a metterla ovunque tranne nel punto desiderato..probabilmente mi sfugge qualcosa...
Ti sarei davvero grata se tu potessi darmi una mano, compatibilmente ai tuoi impegni :)
la mia mail la trovi sul mio blog:
http://seeyouinoxfordstreet.blogspot.com

grazie!!!

Associazione AmicidiFido ha detto...

Tenebrae 3 agosto 2009 16.36


GRAZIE DAVVERO!!!!!!!!!!

@amicidifido: puoi provare ad aumentare il valore di maxwidgets='2' portandolo a 3 o più

@stresa: può succedere che ci siano effetti collaterali alle modifiche provando a visualizzare il blog con browser diversi... devo dire però che provando a visualizzare il tuo blog non ho i problemi che dici tu

Mariana & Roberta ha detto...

Grazie...c'e l'ho fatta...anche se mi piaccierebbe abbelirlo di +...GRAZIE ANCORA

Torri Pensanti ha detto...

Ciao,
sto cominciando da poco ad avventurarmi nel mondo dei blog e spesso guardo il tuo per capire come fare i vari passi. Grazie mille perchè sei di grandissimo aiuto.
In questo caso però ho un problema, forse molto stupido... non riesco proprio a capire dove devo inserire l'elenco dei link. Se mi potessi spiegare questo passaggio te ne sarei molto grata.

http://torripensanti.blogspot.com/

Torri Pensanti ha detto...

Ciao Tenerebrae, sono riuscita ad inserire i link!! Però ora non riesco a creare i bottoni. Ho copiato tutti i codici che indichi, ma mi compare la seguente scritta:

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: Element type "a" must be followed by either attribute specifications, ">" or "/>".

Qualche suggerimento??
Grazie mille.

Malla ha detto...

Ok, diciamo che ci sono riuscita, però adesso la sidebar è infondo a tutto ed le sparito anche lo sfondo dei post, che era un nero con opacità ridotta, e l'aspetto del blog è questo...
http://ogm2009.blogspot.com/

che faccio?

Malla ha detto...

Ok, ho rimediato nn so nemmeno io come ^__^ però è andata, cmq se volesi un po' ingrandire il testo e spostare il tutto un po' più a destra?

Ariados97 ha detto...

Scusate, potrei scrivere in una sezione ciò che voglio invece di inserire dei Post?

Ariados97 ha detto...

Ah....Ho risolto, grazie lo stesso.

Giuseppe Pierri ha detto...

grande !!
avevo poche speranze di riuscire a fare una cosa del genere e invece...dopo 10 minuti ho risolto

Grande post

ASD Monteiasi Calcio ha detto...

Ciao Tenebrae ma per creare una barra di navigazione come quella che hai creato tu come si fa :)? ti ringrazio anticipatamente :)

Piccoli Segreti di Bellezza ha detto...

Ciao grazie per questi post utilissimi, volovo chiederti come faccio a cambiare il colore dei bottoni, lo stile del testo e la dimensione. scusa per tutte queste domande.
Grazie

Piccoli Segreti di Bellezza ha detto...

Che differenza c'è tra la barra di navigazione e le pagine statiche?
perchè ho fatto la barra ma non riesco a inserirci nulla :(

Leazzurredilavezzi ha detto...

ciao io ho seguito passo passo i tuoi consigli e sono riuscita a mettere qst barra ma nn riesco ad inserire qst codice:a.Bottone {
background: #0000FF;
padding: 3px;
color: #FFFFFF;
}
potresti aiutarmi

LittlEye ha detto...

salve, io sto creando un blog con blogger. ho seguito le tue istruzioni e ho dovuto modificare html mettendo "2" e "yes". ma ora nn riesco a continuare..come metto l'elemento htmljavascript?? non riesco proprio. help :(

Omy Photo ha detto...

A me non funziona..

Gerardo Bonifiglio ha detto...

Fai una guida su come mettere i bordi arrotondati.. Grz..

Massimo Antonio Carofano ha detto...

Ciao, ti devo chiedere aiuto!
Mi sapresti aiutare a posizionare i bottoni?
Ovvero,
a.Bottone {
background: #0000FF;
padding: 3px;
color: #FFFFFF;
}

Non riesco a trovare dove vanno!
Lavoro con Blogger ovviamente..


Prima di lasciare un commento, leggete qui

Posta un commento