Eliminare o cambiare il bordo dell’header del template su Blogger


Anche se difficilmente riesco a trovare il tempo di commentare, in realtà mi capita spesso di girare tra i vostri blog e di leggere gli ultimi post inseriti, a volte anche per vedere come crescono quei blog che ho “visto nascere”. Oggi, mentre leggevo gli ultimi articoli di Cafè creativo, ho notato il bordo nell’header (l’unico rimasto in tutto il blog, ma vista la bravura di Anna nel personalizzarlo è sicuramente un effetto voluto) e mi è venuta in mente una richiesta fatta tempo fa da Laura (che nel frattempo ha risolto da sè) e che ultimamente mi è stata riproposta da altri lettori: eliminare i bordi dall’header del template.

Anche se i passi che seguirò fanno riferimento al template Minima, probabilmente andranno bene per la maggior parte dei vostri template.

Backup del template!!

Mi raccomando sempre di fare il backup del template di Blogger prima di fare le modifiche, in modo da poter tornare indietro nel caso le cose vadano male, e magari di farle prima in un blog di prova.

Questo passo è importante, mi raccomando, a volte una modifica va male (e spesso non per colpa mia o vostra, ma per colpa di Blogger), e quando qualcuno mi chiede come tornare indietro è sempre qualcosa di molto stressante per entrambi.

Eliminare il bordo dell’header del template

Ecco come appare l’header del template Minima:

image

Da Layout–>Modifica HTML, cercate questa porzione di codice (o analoga, nella maggior parte dei casi comincia con #header-wrapper):

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

E cambiate la parte in rosso così:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:none;
  }

Ecco come apparirà adesso l’header del template:

image

Con un solo bordo, che già è un effetto migliore. Per togliere anche questo, cercate questa porzione di codice (o analoga, nella maggior parte dei casi comincia con #header):

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

E cambiate la parte in rosso così:

#header {
  margin: 5px;
  border: none;
  text-align: center;
  color:$pagetitlecolor;
}

E dopo aver salvato le modifiche ecco come apparirà l’header:

image

Sicuramente una bella immagine farà un effetto migliore (magari una sempre diversa ogni volta che verranno caricate le pagine del blog).

Personalizzare il bordo dell’header

Ho già dedicato un articolo su come personalizzare i bordi delle sezioni del template, dove spiego come aggiustare la proprietà border per far apparire diversi effetti. Adesso che sapete come trovare il codice relativo all’header, potete seguire quelle istruzioni per personalizzarlo.

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!

35 commenti:

Andy ha detto...

Ottima guida, spero passi per il mio blog, "bloginformati".. Dimmi cosa ne pensi.. Ciao

Cindry ha detto...

Utilissimo post e non sembra neppure tanto difficile. In effetti quei bordini non sono per niente carini. Appena avrò tempo proverò. Grazie

daniela sognidiperlej12m13 ha detto...

Grazie per l'utilissima spiegazione, finalmente ho eliminato il bordo che in parte rimaneva nascosto sotto il margine destro dell'immagine scelta creando un brutto effetto. Come al solito sei chiaro e dettagliato nelle spiegazioni e anche per merito tuo, sono riuscita ad imparare un sacco di cose. Grazie grazie :-*

Ingoccupati ha detto...

Ottimo post, seguo da molto il tuo blog e molte delle tue dritte, più o meno modificate, le ho applicate al mio:
www.ingoccupati.blogspot.com

Che ne diresti di dirmi cosa ne pensi?
Magari direttamente sul mio blog :)

lella ha detto...

Ciao carissimo come va?
sempre impegnatissimo x trovare suggerimenti x noi e?
Va bè......tanto sai ke io leggo ma filtro solo ciò ke è a portata del mio webintellect :))
buon fine settimana e riposati,ti raccomando ;)
Lella

essenzadivaniglia ha detto...

Se ci sono arrivata da sola è solo merito tuo... quel poco che so di html l'ho imparato seguendo i tuoi consigli!
Grazie :-))

Claudio Parker ha detto...

Ciao Tenebrae, sono Claudio e innanzitutto volevo ringraziarti per l’aiuto che mi hai dato nell'allestire il mio blog. L’80% della costruzione e personalizzazione del template ed altro, è merito tuo. È un blog che ha come tema principale, l’approfondimento e la diffusione culturale della musica rock italiana e affine. Ti avevo spedito una mail a riguardo, ma sembra tu non l'abbia ricevuta.
Mi sono aggiunto al seguito dei tuoi lettori fissi ;-)
Se vorrai farmi visita questo è l'indirizzo del blog. Grazie e a presto. http://www.italianrockmusic.com/

Michele Guzzini ha detto...

Ciao Tenebrae,
a proposito di Header...
Vorrei che cliccando sull'immagine del mio header si possa tornare alla Home, mi dici se si può fare e come?
Altra cosa, sono riuscito a capire come aumentare lo spazio tra i vari blocchi giocando sui margin...lo scopo è quello di inserire degli annunci adsense tra di loro ma...la strada non è corretta, credo di dover creare una seconda header sotto quella del titolo...è così? e come si fa?

grazie in anticipo e complimenti.

Michele

fabrax ha detto...

ciao Orazio, volevo sapere com'è possibile cambiare i caratteri delle parole e farle assomigliare a quelle della macchina da scrivere. Sei provvisto di Skipe e Team Viewer?

giovanna ha detto...

Orazio,
dai sempre preziose idee! :-)
Ho provato a togliere il bordo nell’header, ma nel mio blog lo preferisco "con".
In compenso ho però personalizzato i bordi delle sezioni post e sidebar (mi è piaciuto solo bordo in basso ma... double e colorato e... 3px! :-)
grazieee!
buona domenica,
g

Mr. E ha detto...

ciao...ho messo il link al tuo blog nel mio...aggiungimi pure all'elenco ;-)

Milla ha detto...

Ciao, grazie, come al solito chiarissimo ed efficentissimo. Per caso hai già postato come togliere le cornici anche dalle foto dei post? Se si mi scrivi il link perchè non sono riuscita a trovarlo, altrimenti aspetto numi!! Grazie ancora

Calliope ha detto...

Ciao Tenebrae ho un problema grande :((
Ho inserito nell'intestazione del mio blog un'immagine gif col sito hosting imgur.
Volevo cambiarla ma cliccando su rimuovi immagine non si toglie!!!:-o
Ho eliminato anche l'immagine dal sito hosting digitando l'indirizzo dell'immagine ma..nulla!!

Ho guardato se dal template posso fare qualcosa ma non trovo l'appiglio.
Ti prego mio salvatore aiutami, come faccio!!

(nel mio blog d prova ho applicato questo tuo post...sei un grande!!
grazie a te il linguaggio html non è più sanscrito ;;)

Attendo un tuo cenno..ti prego..
Ciao Tenebrae e saluti alla tua Light ^_^

Calliope ha detto...

il blog è perle di infinito

Calliope ha detto...

Dopo mille prove...sai cosa era che non mi faceva rimuovere l'immagine???
INTERNET EXPLORER!!!
Con la volpe rossa invece tutto risolto..
ciao, grazie lo stesso e buona settimana.
Seppelisco IE, pace all'anima sua ...anzi...che non riposi in pace, mi ha fatto letteralemente impazzire questa cosa x(

AnnaDrai ha detto...

Ciao Tenebrae,
che onore essere citata qui! anche per una cosetta banale come l'header ;)
a dire il vero inizialmente avevo provato a togliere la cornice, poi riguardando dopo l'inserimento mi era piaciuto anche così... dava un certo ordine, non so se mi spiego ;))
tuttavia ora grazie a te so come fare se domani mi stuferò e vorrò toglierlo :)
grazie grazie ancora... per tutti i tuoi magnifici post, ai quali faccio anche un po' fatica a stare dietro, ma oggi mi leggo gli arretrati ;;)
buon inizio di settimana!

acetosella ha detto...

ciao volevo chiederti una cosa veloce, va bene PICFONT per inserire su foto scritte da mettere poi nei post su blogger oppure mi consigli altro? grazie ancora, non ti leggo da molto ma è tutto interessante e ti leggo a puntate, grazie e ciao

Tenebrae ha detto...

@michele: sembra che il tuo template non lo preveda, si dovrebbe modificare manualmente.. ma c'è comunque il link "Home" che sicuramente è anche più intuitivo

@fabrax: puoi provare a vedere se da layout->caratteri e colori riesci a trovare dei font che ti piacciono... tieni presente però che utilizzando font come dici tu rendi impossibile la vita a chi legge le pagine

è possibile utilizzare dei font personalizzati, ma in alcuni browser si vedrebbero in altri no

mi dispiace, non do consulenze via skype :)

@mr. E: grazie per aver linkato il blog, stasera ricambierò molto volentieri

@Milla: no.. hai provato a scrivere sul blog con windows live writer? risolvi problemi di questo tipo

@calliope: visto? basta anche solo lasciare qui il commento che le cose si risolvono da sole... :)

scherzi a parte, è interessante, tempo fa un'altra persona avevo lo stesso problema, e ora grazie a te so come risolverlo

@anna: si infatti, come ho detto nel post immaginavo fosse un effetto voluto

@acetosella: pensa che proprio oggi ho in scaletta di scrivere un post sull'argomento... quindi se hai pazienza di aspettare stasera ti proporrò delle alternative

Annalisa ha detto...

Ciao Tenebrae,
ti pongo una questione estranea a questo post: come diminuire (o aumentare) lo spazio tra i Gadged della sidebar? Ti ho scritto email, anche. Grazie.

Ingoccupati ha detto...

Ciao,
grazie mille per il commento sul mio blog.
Ti ho anche risposto :)

giovanna ha detto...

ehm... poi dice che i complimenti non incoraggiano! :-) :-)
Che stupida, solo ora mi è venuto in mente di *personalizzare* il bordo, nel mio heaeder!
doppio bordino 2px solid #FF9900;
mi piace proprio! :-)
ri-grazieee, Orazio!
g

silvia85 ha detto...

Ciao Tenebrae.... volevo ringraziarti innanzitutto dei tuoi tutorial... finalmente riesco a fare tutto da sola senza l'aiuto di nessuno... ed è una gran cosa... sono precisissimi e spieghi tuto molto bene...davvero complimenti....
ti volevo porre una questione.... in questi giorni ho seguito molti dei tuoi tutorial... in modo così da modificare quasi completamente il mio blog... ho immesso una colonna in più sistemata con margini ecc, messo link within e tanto altro... ora mi rimane irrisolta una questione... ho seguito il tuo tutorial su come immettere lo sfondo sul blog e fino a li tutto bene... il mio problema però è che io vorrei inserire come sfondo un'immagine fatta da me con photoshop...la questione dunque è... come faccio ad allargare l'immagine del background in modo da farla diventare grande quanto lo schermo? spero tu possa aiutarmi presto... ho provato davvero di tutto... non volevo disturbarti vistele numerose richieste che ti arrivano... ma non so proprio più cosa fare...
grazie mille
Silvia

ah dimenticavo se vuoi conoscermi meglio questo è il mio blog (naturalmente lo sfondo che c'è ora non è quello che intendo)
http://silviacrea85.blogspot.com/

GugolMen ha detto...

grande!
ottimo consiglio!

Manu ha detto...

Ciao Tenebrae,
trovo moltissimo interessanti i tuo post riesco quasi sempre a risolvere tutti i miei problemi nella personalizzazione del blog

vorrei chiederti se è possibile ridurre un pò in altezza l'header, mi piacerebbe mettere una foto lunga e stretta così non occupi tutta la pagina e subito al primo impatto si possano vedere i post

grazie per la tua cortesia
Manu
;)

gagadivastaff ha detto...

Fatto!
Troppo bravo a spiegare..complimenti!

Garba [nothing owed] ha detto...

Uoh, grazie mille per la dritta!

Torte & Decorazioni ha detto...

ancora infinitamente grazie con le tue spiegazioni mi stai aiutando tantissimo!!
ti meriti una torta :-D
per ringraziarti mette il tuo link nel mio blog..

Circe ha detto...

Aiutoooo! Il mio problema è che ho combinato un casino con il layout del mio blog! E adesso non vedo più l'immagine che uso come header! :(

Fangyaya ha detto...


fangyanting20150926
pandora jewelry, http://www.pandorajewelryoutlet.us.com/
cheap wedding dresses, http://www.cheap-weddingdresses.net/
louis vuitton bags, http://www.louisvuittonbag.us.com/
nike air force 1, http://www.airforce1.us.com/
chanel handbags, http://www.chanelhandbagsoutlet.eu.com/
north face jackets, http://www.thenorthfaces.in.net/
ghd hair straighteners, http://www.ghdhairstraightenerssale.co.uk/
michael kors outlet, http://michaelkors.outletonlinestores.us.com/
nike mercurial, http://www.nikemercurial.org/
louis vuitton outlet, http://www.louisvuittonus.us.com/
oakley sunglasses, http://www.oakleysunglassescanada.com/
louis vuitton handbags, http://www.louisvuittonhandbags.org.uk/
football shirts, http://www.cheapfootballshirt.org.uk/
prada outlet, http://www.pradaoutlet.us/
michael kors wallet, http://www.michaelkorswallet.net/
ralph lauren uk, http://www.ralphlauren-outletonline.co.uk/
toms shoes, http://www.toms.us.com/
michael kors factory outlet, http://www.michaelkorsfactoryoutlets.in.net/
ugg boots, http://www.uggbootsclearance.in.net/
hermes birkin, http://www.hermesbirkin.org/
oakley sunglasses, http://www.oakley.in.net/
polo ralph lauren, http://www.poloralphlauren.us.org/
cheap jordans, http://www.cheapjordanshoes.in.net/
tiffany and co jewelry, http://www.tiffanyandco.in.net/
michael kors handbags, http://www.michaelkorshandbag.co.uk/

dong dong23 ha detto...

cheap oakley sunglasses
michael kors outlet online
nike sb
nike running shoes
true religion jeans
nfl jerseys wholesale
christian louboutin outlet
abercrombie & fitch
celine
polo ralph lauren
nike basketball shoes
coach outlet
michael kors handbags
nike roshe flyknit
polo ralph lauren
coach outlet online
rolex watches
coach factory outlet
celine
cartier watches
ray ban sunglasses outlet
coach factory outlet
michael kors outlet
caoch outlet
coach outlet
michael kors outlet online
louis vuitton handbags
nike air force 1
louis vuitton outlet
louis vuitton
louis vuitton outlet
giuseppe zanotti sneakers
michael kors outlet
michael kors handbags
cheap jordan shoes
replica watches for sale
michael kors outlet clearance
ray ban sunglasses
cheap jerseys
20165.4wengdongdong

chenmeinv0 ha detto...

hollister clothing
canada goose outlet
michael kors outlet online sale
christian louboutin sale
ugg boots paris
michael kors handbags
pandora jewelry
abercrombie outlet
clippers jerseys
cheap louis vuitton handbags
2016.11.10xukaimin

Unknown ha detto...

ferragamo shoes not
san diego chargers jerseys sheet
michael kors handbags online on
gucci sito ufficiale on
instyler max 2 in
toms outlet updating
philadelphia eagles jerseys blog
packers jerseys Five
louis vuitton pas cher the
michael kors outlet online of

Meiqing Xu ha detto...

nike store
coach outlet
abercrombie and fitch
ray ban sunglasses discount
cheap nfl jerseys
canada goose jackets
michael kors uk
fit flops
longchamp bags
pandora jewelry
20161230caiyan

chenmeinv0 ha detto...

gucci uk
louis vuitton outlet
ralph lauren
abercrombie and fitch
polo ralph lauren
giuseppe zanotti sneakers
ray ban sunglasses
coach outlet
kate spade outlet
ralph lauren
20173.4chenjinyan

raybanoutlet001 ha detto...

michael kors handbags
under armour outlet
christian louboutin outlet
michael kors handbags wholesale
tennessee titans jersey
gucci outlet
reebok outlet
michael kors outlet
nike outlet store
arizona cardinals jerseys


Prima di lasciare un commento, leggete qui

Posta un commento