I trucchi per personalizzare il Blog

Visita anche Risorse per i webmaster
archivio di risorse per la creazione di pagine web

Ci sono moltissime guide per creare un blog con Blogger e non mi metterò, quindi, a farne una anch'io. Vorrei, invece, raccogliere i trucchi meno conosciuti per personalizzare il blog e ottenere risultati non ottenibili con gli strumenti ufficialmente a disposizione. L'intento è quello di raggruppare ordinatamente le varie soluzioni per renderle facilmente rintracciabili. I "trucchi" reperiti in rete hanno il link agli autori che, spero, non me ne vogliano se riporto e faccio conoscere le loro soluzioni. Non intendo assolutamente copiare le loro guide alle quali, infatti, indirizzo gli utenti per l'approfondimento.

Sommario:

AGGIORNAMENTO al 15 marzo 2021: Blogger ha modificato la sua strumentazione. IL codice HTML/CSS è ora raggiungibile cliccando sulla voce ""Tema" nel menù di sinistra, aprendo, quindi, il menù a tendina sotto alla voce "Personalizza" e scegliendo "Modifica HTML". NOTA: dato che Blogger modifica spesso le sue impostazioni, le indicazioni qui riportate vengono verificate, periodicamente, grazie alle segnalazioni inviate dagli utenti tramite i pulsanti appositi. La data dell'avvenuta verifica appare sotto al pulsante relativo. Se la verifica non ha apportato modifiche, significa che non sono stati riscontrati reali malfunzionamenti. In questo caso, potete contattarmi (vedi "parla con me" a fondo pagina) e sarò lieta di aiutarvi a risolvere le difficoltà che state incontrando.
Per cortesia, non inviate segnalazioni ripetute, o non veritiere, che creerebbero perdite di tempo a scapito del lavoro utile per tutti. Grazie

HTTPS:

È importante impostare il reindirizzamento https fisso affinchè nel browser non appaia l'avvertimento di sito insicuro. Per fare questo, andate in "impostazioni -> di base" e alla voce "Reindirizzamento HTTPS" mettete "SÌ".

Quick edit su dispositivi mobili:

Il "Quick edit" è rappresentato, graficamente, dall'icona con cacciavite e chiave inglese incrociati che appare agli amministratori visualizzando l'anteprima del blog.
Il quick edit serve ad avere rapido accesso alle modifiche dei vari elementi.
Nella visualizzazione su mobile, l'icona potrebbe non apparire, o essere scomparsa dopo un aggiornamento, o dopo l'abilitazione della visualizzazione su mobile di un blog datato.
Per visualizzare l'icona anche su mobile, dovete procedere in questo modo:

Accedete alla home di Blogger e selezionate il blog
Andate in "Tema"
Cliccate sulla rotellina a forma di ingranaggio sotto alla rappresentazione su mobile
Disabilitate (temporaneamente) la versione mobile del tema e salvate
Aprite l'anteprima del blog sul vostro cellulare o tablet. Naturalmente, lo vedrete in versione desktop
Cancellate la cache del browser mobile
Dalla home di Blogger, riabilitate la versione mobile del tema e salvate
Aggiornate l'anteprima sul vostro dispositivo mobile
La versione mobile riapparirà, ma con le icone del Quick edit

NOTA: Le icone potrebbero sparire nuovamente se, in seguito, cancellerete ancora la cache. In questo caso, dovrete ripetere la procedura.

Visualizzare versione mobile su desktop

Può essere necessario poter lavorare sulla versione mobile del blog utilizzando gli strumenti del browser. Per fare questo, basta aggiungere ?m=1 all'url.
Esempio:
https://nomeblog.blogspot.com/?m=1

Come cercare una voce nel codice HTML o CSS

La prima cosa da imparare è come cercare le varie sezioni, o regole, da modificare nel codice. Dopo essere andati in "Tema", bisogna aprire il menù sotto alla voce "Personalizza" e scegliere "Modifica HTML"
Apparirà il codice HTML completo. Scorrendo, troverete anche il codice CSS. Per individuare una parte, o regola specifica, basta aprire la casella di ricerca e inserire la chiave.

CTRL + F (x windows) o Command + F (x Mac) per far apparire una casella di ricerca interna.

Titolo del blog, posizionamento:

Se volete centrare il titolo del blog, aggiungete questa regola di stile nella zona CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

.Header h1 { text-align: center; }

Allo stesso modo, potete posizionare il titolo a destra mettendo right invece di center.

Logo, posizionamento:

Può essere necessario, per l'aspetto grafico, spostare in giù, o in su l'immagine di logo all'interno dell'header.
Per poterlo fare, incollate questo regola di stile nella zona CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS:

#Header1_headerimg {
margin-top: 20px;
}

Cambiate il valore in pixel a seconda della distanza che desiderate dal bordo superiore.
Allo stesso modo, potete centrarlo nella pagina:

#Header1_headerimg {
display: block;
margin:0 auto; }

Se volete spostare la descrizione sulla destra del logo, usate questo codice:

#Header1_headerimg {
float:left;
margin-right: 10px;
}

Ombreggiatura lati esterni del blog:

Possibile aggiungere un'ombreggiatura di contorno ai blog con larghezza impostata e sfondo.
Aggiungete questa regola di stile nella zona CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS:
Incollate questo codice e salvate:

.content-outer {
-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
}

Potete variare i valori per ottenere colore, sfumatura, intensità e orientamento differenti.

Header, aggiungere più elementi:

Blogger, di default, permette l'inserimento della sola intestazione nell'header. Per poter aggiungere un altro elemento (per esempio la casella di ricerca), bisogna modificare il codice html del modello.

Andate, quindi, in "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML". Cercate il widget "Header1" e questa stringa:

<b:section class='container' id='header' name='Header' showaddelement='false'>

Modificatela così:

<b:section class='container' id='header' name='Header' showaddelement='true'>

Ora potrete inserire più gadget nella zona header.

Post, titoli, colore:

Aggiungete questa regola di stile nella parte CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

.post-title a{
color:red;
}
.post-title {
color:red;
}

Post, titolo, centrare:

.post h3{
text-align:center;
}

Post, modello personalizzato:

Una funzionalità molto utile e spesso trascurata è data dalla possibilità di creare un "Modello di post", cioè impostare un modello personalizzato e predefinito di post che si ripeterà in automatico in tutti i nuovi post creati.

Immaginate, per esempio, di voler mettere in tutti i post un particolare avviso, o un banner pubblicitario, o qualunque cosa di fisso senza doverlo mettere manualmente ogni volta.

Per ottenere questo, basta andare in impostazioni -> post, commenti e condivisione e cercare la voce "Modello post". Nella casella messa a disposizione, potete inserire un testo, o il codice che vi serve. Salvate e da quel momento in poi, ogni volta che creerete un nuovo post, avrete i vostri contenuti predefiniti già aggiunti in automatico.

Sidebar, nasconderla:

#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Larghezza della pagina statica */
background:#fff; /* Sfondo pagina statica */
color:#003366; /* Colore del testo della pagina */
}

Fonte

Si possono nascondere elementi diversi (anche il footer) utilizzando i vari ID separati da virgola:

#sidebar-left-1,
#sidebar-right-1,
#sidebar-right-2-1,
sidebar-right-2-2,
#footer-1,
#footer-2-1,
#footer2-2,
#footer

Footer, nascondere "Powered by Blogger":

Percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.
Aggiungete le seguenti regole nella zona CSS del codice, impostando il colore di fondo della pagina (nel codice esempio è il bianco). Quindi salvate.
La scritta non si vedrà più perchè avrà lo stesso colore del fondo. L'icona viene nascosta con la regola "display:none".
NOTA: declino ogni responsabilità in caso di penalizzazioni da parte di Blogger per l'offuscamento dell'attribuzione.

#Attribution1 {
color: #eeeeee;
}
#Attribution1 a {
color: #eeeeee;
}
#Attribution1 svg {
display:none;
}

Footer, togliere linea grigia e link a home page:

Aggiungete queste regole di stile nella parte CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

#blog-pager {
display: none;}
.post-footer {
display: none;}

Footer 3, aggiungere elementi:

Il Footer 3 sarebbe quello in cui si trova il gadget attribuzione. Per poter aggiungere nuovi elementi in questo spazio, dovete seguire il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e cercare questa sezione....

<b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>

....e sostituire "no" con "yes".

Menù orizzontale:

Con Blogger è possibile creare un menù orizzontale delle pagine. Per fare questo, bisogna andare in layout -> aggiungi gadget e cercare il gadget "Pagine", configurando le impostazioni come si desidera.
NOTA: Per avere la disposizione orizzontale, il gadget pagine, nel layout, deve essere posizionato sotto alla zona intestazione.
In aggiunta alle configurazioni di default, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e individuando la zona CSS, potete....

Centrare il menu:

.tabs-inner {
text-align: center;}
.PageList LI {display:inline-block;
float:none !important;}

Spostare il menu a destra:

.tabs-inner {
text-align: right;}
.PageList LI {display:inline-block;
float:right !important;}

Colore di background caselle menù:

.PageList LI {background-color: #fff;}

Colore di background pagina attiva:

.PageList LI.selected A {background: #9fc5e8;}

Testo pagina attiva in grassetto:

Se avete tolto il grassetto al testo delle voci di menu e volete mantenerlo solo per la pagina attiva, dovete inserire questo codice..

.PageList LI.selected A {font-weight: bold !important;}

Distanziare voci menù:

Se il menù ha molte voci e si posiziona su due righe, può essere necessario distanziarle con questo codice:

.tabs .widget li, .tabs .widget li {margin: 2px;}

Padding voci menù:

Con questo codice potete impostare il padding delle caselle del menu per regolarne la dimensione..

.tabs-inner .widget li a {padding:4px}

Togliere il gradiente nella barra del menù:

In alcuni temi, la barra del menù ha il colore sfumato. Se volete togliere la sfumatura e avere una tinta uniforme, usate questo codice, mettendo il codice colore che preferite.

.tabs-inner .widget ul {background: #ff969b;}

Aggiungere testo prima della freccetta della tendina in versione mobile:

Nella versione mobile del blog, il menu di navigazione si apre in una tendina cliccando sulla zona predisposta.
Può essere poco intuitivo per il visitatore.
Potete aggiungere la voce "MENU", o altro, prima della freccetta in giù di apertura.
Le regole da aggiungere alla sezione css del codice html del tema sono queste:

.pagelist-arrow::before {
content: "MENU " !important;
color: #000 !important;
}

Il testo e il colore sono liberamente modificabili.

Modulo contatto, centrare:

.ContactForm {
text-align: center;
}
.contact-form-widget {
text-align: left;
margin: 0 auto;
}

verificato su segnalazione in data 3 novembre 2020

Traduttore, centrare:

#google_translate_element {text-align: center;}

Casella di ricerca, centrare e ridimensionare:

#BlogSearch1{
max-width: 400px;
margin: 0 auto;}

Sfondo blog, immagine a piena pagina:

Prima di tutto, caricate la vostra immagine di sfondo normalmente (Tema -> Personalizza -> Sfondo).
Fatto ciò, aggiungete queste regole di stile nella parte CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Sfondo contenuti con immagine:

Per mettere un'immagine come sfondo della sezione contenuti, procedete come segue:

Prima di tutto, impostate lo sfondo trasparente, andando in "Tema" -> "Personalizza" -> "Sfondo".

Fatto questo, dovete incollare queste regole nella parte CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

.content-outer {
background: url("URLimmagine");
background-position: center ;
background-repeat: no-repeat;"
}

Al posto di URLimmagine, incollate l'indirizzo dell'immagine che volete usare come sfondo. Nel caso, potete tranquillamente caricare l'immagine in un post, prelevarne l'url e poi cancellarla. Potete caricare anche immagini semi-trasparenti.

Modificate le altre impostazioni secondo le vostre esigenze.

Immagini, eliminare bordi e ombre:

In alcuni modelli di Blogger le immagini vengono caricate con bordo e ombreggiatura di default. Se volete toglierli, aggiungete queste regole di stile nella parte CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
border: 0 !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Commenti recenti:

Fonte

Scaricate il codice da qui.

I parametri da personalizzare nella zona script sono i seguenti (in ordine da quelli più in alto, a quelli in fondo al codice).

5 - è il numero dei commenti da visualizzare
False - mettete true se volete la data
True - mettete false se non volete il link al post
200 - numero massimo di caratteri
https://your-blog-name.blogspot.com/feeds/comments/default - sostituite con l'indirizzo del vostro blog

Più sotto, nella zona style, potete personalizzare i link.

In aggiunta, potete inserire lo stile per il testo, impostando le seguenti regole come preferite:

.rcw-comments {
color: #000;
font-family: Arial;
font-size: 0.8rem; }

NOTA: è possibile includere i commenti di tutto il blog, o di un post specifico.

Esempio per post specifico:
https://lachiavenelpozzo-blog.blogspot.com/feeds/XXXXXXXXXXXXXXXXXX/comments/default
sostituite le X con l'ID del post (la trovate nell'URL in modaltà editor)

Commenti nascosti e visualizzabili al click:

Fonte

Se i commenti cominciano a diventare tanti, può essere opportuno nasconderli per non appesantire la pagina e dare la possibilità all'utente di visualizzarli cliccando su un link di comando. Per ottenere questo, dovete lavorare sull'html del modello.

Andate quindi in modello -> modifica html e cercate questa parte di codice:

         <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>

Subito sotto, incollate quest'altra parte di codice:

<b:if cond='data:blog.pageType == "item"'><div>
<span class='numer-comment'> <data:post.commentLabelFull/>: </span>
<span class='botton-visual'><a href='javascript:void(0)' onclick='var el=document.getElementById('comments'); el.style.display=='block'?el.style.display='none':el.style.display='block';'>Visualizza tutti i Commenti ></a></span> </div></b:if>

Ora cercate il tag:

]]></b:skin>

e subito sopra incollate questo comando:

.comments {display:none;}

Potete personalizzare l'aspetto aggiungendo le seguenti regole di stile nella parte CSS del codice, seguendo il percorso "Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML" e scorrendo per individuare la zona con le regole CSS.

.botton-visual {
margin:0 0 .5em;
padding:0 0 .75em 40px;
}
.botton-visual a:link {
color:#c57346;
border:1px solid #c57346;padding:4px;
}
.botton-visual a:hover {
color:#000000;
border:1px solid #000000;
}
.numer-comment {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 180% Georgia,Serif;color:#333;
}

Pagina statica come prima pagina:

Fonte

Blogger imposta come prima pagina l'ultima pagina pubblicata. Questo può non essere gradito. Per avere come prima pagina una pagina fissa, si può fare così:

Preparate una nuova pagina statica da utilizzare come home page e copiatene l'indirizzo.

Andate in "Impostazioni -> Preferenze di ricerca -> Errori e reindirizzamenti -> Reindirizzamenti personalizzati -> Modifica".

Nella sezione "Da", mettete una slash /.

Nella sezione "A", mettete il percorso della pagina statica. Esempio: /p/home-page.html (attenzione allo slash iniziale).

Mettete la spunta su "Permanente" e poi cliccate su "Salva modifiche".

Per indirizzare gli utenti ai post dalla nuova home page, dovete usare un link simile a questo: https//www.nomeblog.blogspot.com/index.html

Pagine, titolo, rimuovere:

Per rimuovere il titolo delle pagine, andate in "Tema -> Personalizza -> Modifica html".
Cercate la zona con le regole di stile e incollate questa regola:

.post-title {
display:none;
}

"Iscriviti a Post Atom", rimuovere:

Tema" -> tendina sotto "Personalizza" -> voce "Modifica HTML
Incollate queste regole di stile nella zona CSS del codice e salvate:

.feed-links {
display:none;
}

Link a tutti i post:

nome-blog.blogspot.com/search

Widget, farli apparire anche in versione mobile:

Vi sarete accorti che Blogger, nella versione mobile, fa apparire, di default, solo alcuni widget che sono: Intestazione, Post su blog, Profilo, Widget delle Pagine, Adsense e Attribuzione.

Per fare in modo che vengano visualizzati anche gli altri gadget inclusi da voi, dovete fare così:

Andate in "Modello -> Modifica HTML".
Cliccate sulla voce "Vai al widget" e cercate il widget che vi interessa.
Nella stringa relativa, simile a quella che vedete in esempio, dovete aggiungere il comando mobile='yes', in questo modo:

Esempio:
<b:widget id='BlogSearch1' locked='false' mobile='yes' title='Cerca nel Blog' type='BlogSearch' visible='true'>

Ripetetelo per ogni widget che volete visualizzare sul mobile.
Salvate il modello.

Ora, cliccate di nuovo sulla voce "Modello" nella barra laterale di sinistra per tornare alla schermata precedente.
Sotto all'esempio di visualizzazione per cellulare, cliccate sull'ingranaggio.
Nella schermata che si apre, mettete la spunta su "Sì. Mostra il modello per cellulari nei dispositivi mobili".
Aprite la tendina sotto la voce "Scegli modello per cellulari" e scegliete "Personalizza".
Salvate

Widget, farli apparire solo in versione mobile:

Come sopra, ma invece di aggiungere mobile='yes', aggiungete:

mobile='only'

Continua con: