blogger

I trucchi per personalizzare il Blog

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.
Dato che Blogger si rinnova spesso, questa pagina viene aggiornata periodicamente grazie alle segnalazioni degli utenti inviate tramite il pulsante apposito che si trova sotto ad ogni specifica guida.
Le guide verificate portano la data del controllo sotto al pulsante di segnalazione. Tale data viene indicata anche se non sono stati riscontrati errori e la guida non è stata modificata. In questo caso, chi avesse ancora difficoltà, può contattarmi tramite il modulo di contatto del sito. Grazie
Sommario:
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Ì".

Modello, cercare una stringa nel codice html:

La prima cosa da imparare è come cercare le varie sezioni nel codice html. Oltre agli strumenti già presenti per individuare determinate zone, potete inserire le vostre chiavi di ricerca. Dopo essere andati in "Tema -> Modifica html", click sopra il codice html e....

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 in "tema -> personalizza -> avanzato -> aggiungi CSS":
.Header h1 { text-align: center; }

Allo stesso modo, potete posizionare il titolo a destra mettendo right invece di center.
Verificate su segnalazione in data 10 marzo 2019.

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 sempre in "tema -> personalizza -> avanzato -> aggiungi CSS":
#Header1_headerimg {
    margin-bottom: 20px;
    margin-top:20px;}

Allo stesso modo, potete centrarlo nella pagina:
#Header1_headerimg {
display: block;
margin:0 auto; }

Ombreggiatura lati esterni del blog:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:
.content-outer {
    box-shadow: 3px 0 2px #928b8b, -3px 0 2px #928b8b;}

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

Header, aggiungere più elementi:

Fonte

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 modello -> modifica html e cercate questa stringa:

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

Modificatela così:

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

Ora potrete inserire due gadget nella zona header.
Se ne volete di più, cambiate il numero, oppure eliminate completamente le voci:

maxwidgets='1' showaddelement='no'

In questo modo, potrete aggiungere sempre tutti i gadget che desiderate.

Post, titoli, colore:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:
 .post-title a{
color:red;
}
.post-title {
color:red;
}

Post, titolo, centrare:


Tema -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:
.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:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.

Incollate questo codice e salvate:

#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":

Tema -> Modifica html.

Cliccate sulla voce "Vai al widget" e cercate il widget "Attribution 1".
Cercate la stringa sottostante e sostituite "true" con "false" in questo modo:
<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

Ora andate nella schermata del vostro blog e cliccate sull'icona per le modifiche posta accanto al widget che volete modificare.
A differenza di prima, nella finestrella che si aprirà, vedrete l'opzione "Rimuovi". Cliccate e otterrete il risultato desiderato.
Se vorrete ripristinare quanto cancellato, basterà mettere di nuovo true al posto di false nella stringa precedentemente modificata.

Footer, togliere linea grigia e link a home page:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.

Incollate questo codice e salvate:
 #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 elementi in questo spazio, dovete 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. Oltre a ciò, è possibile personalizzare la grafica del menu andando in modello -> personalizza -> avanzato e cercando le voci "Testo schede" e " Sfondo schede".

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 -> Personalizza -> Avanzato -> Aggiungi CSS, potete....

Centrare il menu:

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

Aggiornate su segnalazione in data 10 aprile 2019

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;}

aggiornato su segnalazione in data 28 maggio 2019

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;}

Modulo contatto, centrare:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.

Aggiungete queste regole di stile:
.ContactForm {
  text-align: center;
}
.contact-form-widget {
  text-align: left;
  margin: 0 auto;
}
aggiornato su segnalazione in data 20 aprile 2019

Traduttore, centrare:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:
 #google_translate_element {text-align: center;}

Casella di ricerca, centrare e ridimensionare:

Tema -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:
#BlogSearch1{
max-width: 400px;
margin: 0 auto;}

Sfondo blog, immagine a piena pagina:

Prima di tutto, caricate la vostra immagine di sfondo normalmente (modello -> personalizza -> sfondo).
Fatto questo, sempre nel designer modelli, andate in  Avanzato -> Aggiungi CSS.
Incollate questo codice:
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 -> Personalizzare -> Avanzato -> Sfondi -> Sfondo principale.

Fatto questo, dovete incollare questo codice in Aggiungi 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 una cornice di default. Se volete toglierla, usate questo codice:
 .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
}

Da incollare in Modello -> Personalizza -> Avanzato -> Aggiungi CSS.


Mappa del blog, creare:

Fonte

Scaricate il codice da qui.

Create un post, o una pagina statica e incollate il codice nell'editor html. Pubblicate la pagina senza cliccare su "Scrivi".

Nel codice potete effettuare diverse personalizzazioni



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).

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. Nel primo caso, semplicemente, cancellate tutta la parte relativa all'ID.

Esempi:
Post specifico:
https://lachiavenelpozzo-blog.blogspot.com/feeds/XXXXXXXXXXXXXXXXXX/comments/default
Tutto il blog:
https://lachiavenelpozzo-blog.blogspot.com/feeds/comments/default

Commenti recenti con avatar:

Esempio aspetto:
Blogger, box commenti
Potete scaricare il file.zip da qui
Dopo averlo scompattato, troverete due file all'interno della cartella:
  1. commenti-blogger.xml
  2. gravatar.js
Aprite il file.xml con un editor di testo.
Questa e` la parte di codice da completare:
<script type="text/javascript">
 var
 numComments  = 8,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "URLavatar",
 hideCredits = true;

</script>
<script type="text/javascript" src="gravatar.js"></script>
<script type="text/javascript"
src="URLblog/feeds/postID
/comments/default?alt=json&callback=w2b_recent_comments">
</script><div >
</div>

Fonte

I parametri da modificare sono quelli in rosso, in questo modo:
Per trovare l'ID del post, dovete aprirne l'opzione di modifica. L'ID e` visibile nell'indirizzo che appare nella barra del browser.

Esempio:
https://www.blogger.com/blogger.g?blogID=631374906564628731#editor/target=post; postID=8220653226919423795;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=2;src=link

Leggi anche la guida ufficiale su come ottenere i feed delle diverse sezioni:

https://support.google.com/blogger/answer/97933?hl=it


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 == &quot;item&quot;'><div>
<span class='numer-comment'> <data:post.commentLabelFull/>:  </span>
<span class='botton-visual'><a href='javascript:void(0)' onclick='var el=document.getElementById(&apos;comments&apos;); el.style.display==&apos;block&apos;?el.style.display=&apos;none&apos;:el.style.display=&apos;block&apos;;'>Visualizza tutti i Commenti &gt;</a></span>  </div></b:if>

Ora cercate il tag:

]]></b:skin>

e subito sopra incollate questo comando:
.comments {display:none;}

Potete personalizzare l'aspetto andando in modello -> personalizza -> avanzate -> aggiungi css, incollando questo codice e impostando i vari valori come preferite :
.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
Verifica su segnalazione in data 19 marzo 2019

Pagine, titolo, rimuovere:

Per rimuovere il titolo delle pagine, andate in "Modello -> Modifica html" e cercate questa stringa:

</b:skin>

Subito sotto, incollate questo codice e salvate:
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.post-title.entry-title{
display: none;
}
</style>
</b:if>

Visualizzare, o non visualizzare un gadget in determinate pagine o post:

Per questo vi rimando direttamente alla guida dell'autore:
http://www.ideepercomputeredinternet.com/2010/11/come-mostrare-o-non-mostrare-widget-in.html

"Iscriviti a Post Atom", rimuovere:

Modello -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo 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'


Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: