Come nascondere footer e sidebar nelle pagine di Blogger.

Le pagine statiche di Blogger vengono usate dagli webmaster per degli scopi particolari come la  mappa del sito, una galleria di immagini o di video, il modulo di contatto o la pagina per politica della privacy. A tale proposito si può sentire l'esigenza di avere un layout per le pagine statiche diverso da quello del resto del blog. Credo sia noto a tutti come si possa decidere di visualizzare un widget solo in una determinata tipologia di pagine utilizzando i tag condizionali. Useremo quindi questo metodo anche per le diverse sezioni del blog.

Ho già presentato dei tutorial per nascondere nelle Pagine le sidebar e in questo post vediamo come non visualizzare anche il footer o il piè di pagina in tali pagine. Dopo aver salvato il template andate su Modello > Modifica HTML e cercate la riga </head>. Subito sopra incollate questo codice

Come nascondere sidebar, footer e commenti in un post di Blogger.

Mi ricordo quando per la prima volta pubblicai un tutorial per nascondere le sidebar nei nuovi modelli di Blogger e per applicare queste personalizzazioni a una singola pagina statica. Seguendo la falsariga del post in cui illustravo come mostrare un background personalizzato in un determinato articolo vediamo come sia possibile modificare il layout di un qualsiasi post o di una singola pagina statica senza neppure intervenire nel codice del modello.

La prima cosa da fare è quella di scoprire i fogli di stile di tutti gli elementi che vogliamo modificare o nascondere. Si può usare Firebug, estensione di Firefox, oppure la più semplice Firebug Lite per Chrome. Chi non le conoscesse può leggersi i post che ho linkato e dove ho anche pubblicato dei videotutorial di questi addon per i due browser.

Ogni modello ha una struttura dei fogli di stile sotto certi aspetti unica, dobbiamo quindi scoprirli tramite Firebug e Firebug Lite. Con quest'ultima basta cliccare sul destro del mouse e scegliere Inspect with Firebug Lite per poi cliccare su Inspect e selezionare con il mouse l'elemento che ci interessa.

Come modificare gli elementi del footer di Blogger.

Se si va su Layout > Post sul blog > Modifica possiamo scegliere gli elementi dell'articolo che vogliamo visualizzare e quelli che invece vogliamo nascondere. Questa configurazione del post riguarda  la parte generale come il numero degli articoli per pagina e il testo da visualizzare nel Read More, la parte alta per mostrare o meno la data ma soprattutto la parte bassa del footer con tutte le opzioni che servono per decidere se visualizzare i singoli elementi.

Si tratta del testo da sostituire a Pubblicato da, della data e dell'ora, delle Etichette, del Quick Edit, dei Link a ritroso, delle Reazioni e dei pulsanti ufficiali per la condivisione di Blogger. In alcuni modelli personalizzati queste opzioni di configurazione spesso non funzionano quando si decide di voler nascondere un elemento. D'altra parte con questo strumento non possiamo modificare nulla per quello che riguarda l'allineamento, i colori o le dimensioni di un singolo elemento.

Come cambiare le espressioni nel footer di Blogger e come modificarne la posizione.

Ho già parlato diffusamente di come si possa configurare l'aspetto degli articoli andando su Design > Elementi pagina > Post sul blog > Modifica. Nella finestra che si apre, si possono mettere le flag agli elementi che vogliamo visualizzare e possiamo anche modificare tutte le espressioni che si visualizzano all'interno dei post. Ecco la schermata con quello che propone Blogger di default

Personalizzazione delle tre colonne inserite nella parte bassa del blog su Blogger.

Nel precedente articolo avevo parlato di

      - Inserimento di tre colonne nella parte bassa del blog -

Adesso pensiamo a come si può personalizzare le colonne in funzione delle altre sezioni del blog. Per quanto riguarda questo blog per esempio dotted lo sostituisco con dashed perché il bordo tra il post e la sidebar è formato da delle linee tratteggiate. Per quanto riguarda il colore di queste linee prendo quello di default del blog.

Il codice è stato così cambiato

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
metto le seguenti righe

#footer-columns {
border-top:2px dashed $mainTextColor; clear:both;
margin:0 auto;
}

In rosso sono visualizzate le modifiche effettuate. Oltre che a dotted (linea punteggiata) e a dashed (linea tratteggiata) possiamo scegliere anche altri attributi come solid, groove, ecc.
Se si sostituisce border-top con border il bordo sarà visibile sull’esterno di tutta l’area bassa del blog. Se invece si aggiunge 

border-bottom:2px dashed $mainTextColor;

si creerà un bordo tratteggiato anche nella parte bassa di 2 pixel.
Per personalizzare i colori possiamo inserire, proprio sotto il codice di cui abbiamo parlato in questo momento, il seguente codice aggiuntivo

#footer-columns h2 {
margin:5px 0 5px;
font-family:Trebuchet MS, arial, verdana, sans-serif;
font-size:22px;
font-weight:normal;
line-height: 1.4em;
text-transform:none;
letter-spacing:.1em;
color:#1A2865;
}

In cui le parti in rosso possono essere ovviamente personalizzate. Sono particolarmente importanti la dimensione (22px) e il colore (ho inserito quello dei titoli dei widget del mio blog).
Per cambiare anche il colore del testo basta aggiungere la riga in rosso (ovviamente personalizzata) alla prima sezione di codice

#footer-columns {
border-top:2px dashed $mainTextColor;
clear:both;
margin:0 auto;
color:#1A2865;
}

Si può anche inserire un colore di background nel settore delle tre colonne. Occorre aggiungere questo codice
background:#C6FFFF;
dopo #footer-columns { . Ovviamente il codice del colore in rosso va scelto seguendo i colori del nostro blog.

Si potrebbero fare ancora molte cose ma ne voglio sottolineare solo altre due. La prima è quella di inserire i comportamenti e i colori per i link attivi, link visitati e quelli puntati con il mouse.
Andate su Layout > Colori e caratteri e procuratevi i codici esadecimali di

1. Colore link
2. Colore link visitato

poi cercate il seguente codice a:hover { andando su Layout > Modifica HTML, pigiando su F3 e guardate cosa dice il foglio di stile. Nel mio caso si trova

che significa che se il mouse punta un collegamento ad un testo o una immagine questo genera una linea tratteggiata rossa nella parte bassa. E’ chiaro che per uniformità amcje nelle tre colonne in basso inserirò lo stesso comportamento.
Adesso create il seguente codice personalizzato

#footer-columns a {
color:#0000FF;
text-decoration:none;
}
#footer-columns a:visited {
color:#800080;
text-decoration:none;
}
#footer-columns a:hover {
color:#8B4513;
text-decoration:underline;
}

dove al posto dei colori presenti avrete inserito quelli del vostro blog individuati nel modo indicato.
Tale codice va inserito sotto questo codice o un altro simile se lo avete già personalizzato

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
} 

La seconda cosa riguarda le percentuali della larghezza di ciascuna colonna. Ci sono due percentuali per ogni colonna per un totale di sei percentuali. Per un blog dal layout stretto dovrebbero andare bene queste; cioè 31%, 32%, 31% per lo spazio interno e 32%, 33%, 32% per quello esterno. Se si ha un modello largo come questo si possono sostituire rispettivamente con 31%, 33%, 31% per la parte interna e 32%, 33%, 32% per quella esterna. Si può agire anche sul padding cioè sui pixel di margine tra la colonna e i widget che sono inseriti al loro interno.

Forse ho incasinato un po’ le cose e allora per renderle più chiare potete vedere in questa pagina come si presenta il complesso del codice che ho inserito in questo blog al di sopra della riga

]]></b:skin>

Potrebbe essere un’idea inserirlo totalmente e successivamente personalizzare colori, background (che nel mio modello non ho inserito), percentuali, padding e link.

Come aggiungere tre nuove colonne nella parte bassa del modello di un blog su Blogger.

Nel momento in cui si inizia un blog, specialmente se è il primo, non si sta troppo a considerare il modello tanta è l’eccitazione di cominciare questa avventura. Successivamente ci si rende conto che un avere avuto un modello diverso ci avrebbe facilitato il compito.

I widget aumentano, gli annunci pubblicitari da inserire pure e lo spazio è sempre lo stesso. Cambiare il modello non è poi più tanto semplice perché a parte i problemi con i vari widget quando si varia la larghezza della zona in cui è situato l’articolo questo pone dei problemi con immagini e video che si sono già postati.

Questo tutorial è dedicato a coloro che hanno un modello semplice come il mio e che vogliono aumentare lo spazio di inserimento per i widget ma nello stesso tempo non vogliono cambiare template perché la ritengono un’operazione troppo complessa e dal risultato incerto.

Per aumentare lo spazio del blog vediamo come si possono aggiungere tre nuove colonne nella parte bassa del layout.

Premetto che ci sono due possibilità

1. Si ha un modello in cui non è prevista la parte bassa del modello (Blogger Footer)
2. Si ha un modello in cui invece è già presente il Blogger Footer

Per verificare la cosa basta andare su Personalizza > Layout > Elementi pagina e guardare come si presenta graficamente il template. Se è presente Aggiungi un gadget significa che esiste il Blogger Footer, se non è presente vuol dire che non c’è

 

 

Nel modello di questo blog il Blogger Footer non esisteva. Descriverò il procedimento in due passaggi mentre in un prossimo articolo mi occuperò di eventuali personalizzazioni. Prima di iniziare in ogni caso andare su Layout > Modifica HTML e scaricare il modello completo per ragioni di sicurezza.

Primo passo – Questo vale solo per i modelli che non hanno il blogger footer, quelli che ce l’hanno possono passare al Secondo passo.

Andare in Layout > Modifica HTML e cercare la seguente riga di codice (è un commento che indica la fine del modello vero e proprio)

</div></div> <!-- end outer-wrapper -–>

Per cercare la riga pigiare F3 oppure Ctrl+F. Dopo questa riga ci sono solo eventuali script per statistiche come Google Analytics oppure script aggiunti per funzionalità particolari come quello fatto qualche giorno fa per le emoticon animate nei commenti.

Inserire prima della riga il seguente codice

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

come mostrato nello screenshot 

Salvare il modello e andare su Layout > Elementi pagina. Vedrete che nella parte finale sarà comparso un elemento Aggiungi un gadget

 

Una colonna l’abbiamo quindi aggiunta , adesso cerchiamo di moltiplicarla per tre!

Secondo passo – Coloro che non avevano la parte finale del modello e l’hanno aggiunta nel Primo passo ovviamente non hanno nessun widget in quella zona. Quelli che invece quella parte ce l’avevano già e hanno saltato il primo punto devono spostare eventuali widget che si trovano nella parte finale del modello. Basterà inserirli momentaneamente in una sidebar laterale per poi riposizionarli alla fine del processo di modifica del template.

Pigiando F3 o Ctrl+F cercare adesso la seguente riga di codice

]]></b:skin>

e immediatamente sopra inserire il seguente codice

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

come mostrato nel seguente screenshot

Adesso, con lo stesso sistema, cercate quest’altra parte di codice

<b:section class='footer' id='footer'/>

quindi selezionatela, cancellatela e sostituitela con quest’altro codice

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

come evidenziato in quest’altro screenshot

Salvate il modello. In linea di massima dovrebbe andar bene per quasi tutti i template. Occorrerà fare delle personalizzazioni per quanto riguarda la larghezza, i margini e altri particolari. Intanto andate su Layout > Elementi pagina e cominciate a spostare qualche widget nella parte bassa che avete appena creato.  

Per esempio fate un lavoro di questo tipo

e salvate nuovamente il modello. Ecco come si presenta la parte finale del mio blog dopo tutte queste operazioni

 

Per oggi basta così! Nei prossimi giorni penseremo alle personalizzazioni. Fonte |

Aggiornamento: Per la personalizzazione consulta questo articolo.