Blogger, i trucchi







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 mettere insieme soluzioni trovate in posti diversi e riordinarle per renderle facilmente rintracciabili. Alcuni "trucchi" 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.
Noterete che, in alcuni casi, ho fatto delle correzioni ai codici originari. Questo perchè i codici andavano aggiornati per poter funzionare, oppure solo per aggiungere migliorie.
Forse non tutti sanno che è possibile inserire codice html e  javascript nelle pagine e nei post di Blogger. Ci sono due modi per farlo:
  1. Inserire il codice in un gadget. In questo modo l'applicazione apparirà in tutti i post e in tutte le pagine.
  2. Inserire il codice direttamente nell'html del post o della pagina. In questo modo l'applicazione apparirà solo in quel determinato post o pagina. Importante, dopo aver incollato il codice, pubblicare (o aggiornare) subito senza cliccare su "Scrivi".


Sommario

  1. 1 I trucchi per personalizzare il Blog
  2. 2 HTTPS:
  3. 3 Modello, cercare una stringa nel codice html:
  4. 4 Titolo del blog, posizionamento:
  5. 5 Logo, posizionamento:
  6. 6 Ombreggiatura lati esterni del blog:
  7. 7 Header, aggiungere più elementi:
  8. 8 Post, titoli, colore:
  9. 9 Post, titolo, centrare:
  10. 10 Post, elenco per etichetta (solo link):
  11. 11 Post, elenco per etichetta (link e immagini):
  12. 12 Post, modello personalizzato:
  13. 13 Sidebar, nasconderla:
  14. 14 Footer, nascondere "Powered by Blogger":
  15. 15 Footer, togliere linea grigia e link a home page:
  16. 16 Footer 3, aggiungere elementi:
  17. 17 Menù orizzontale:
    1. 17.1 Centrare il menu:
    2. 17.2 Colore background caselle menù:
    3. 17.3 Evidenziare pagina attiva nel menù:
    4. 17.4 Testo pagina attiva in grassetto:
    5. 17.5 Distanziare caselle menù:
    6. 17.6 Dimensione caselle menù:
    7. 17.7 Togliere il gradiente nella barra del menù:
  18. 18 Modulo contatto, centrare:
  19. 19 Traduttore, centrare:
  20. 20 Casella di ricerca, centrare e ridimensionare:
  21. 21 Sfondo blog, immagine a piena pagina:
  22. 22 Sfondo contenuti con immagine:
  23. 23 Immagini, eliminare bordi e ombre:
  24. 24 Mappa del blog, creare:
  25. 25 Commenti recenti:
  26. 26 Commenti recenti con avatar:
  27. 27 Commenti nascosti e visualizzabili al click:
  28. 28 Pagina statica come prima pagina:
  29. 29 Pagine, titolo, rimuovere:
  30. 30 Visualizzare, o non visualizzare un gadget in determinate pagine o post:
  31. 31 "Iscriviti a Post Atom", rimuovere:
  32. 32 Link a tutti i post:
  33. 33 Widget, farli apparire anche in versione mobile:
  34. 34 Widget, farli apparire solo in versione mobile:
  35. 35 Google foto, creare slideshow per Blogger:
  36. 36 Cookie policy:


Premessa: le modifiche grafiche si possono effettuare agendo direttamente sul codice, oppure seguendo il percorso tema -> personalizza -> avanzato -> aggiungi css. Nel secondo caso, le modifiche resteranno visibili nella finestra di configurazione solo finchè non verrà effettuato un salvataggio del modello nel codice html, dopodichè diverranno effettive e non più visualizzabili.


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. 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, usate questo codice:

.Header h1 { text-align: center; }

Allo stesso modo, potete posizionarlo a destra sostituendo right a 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 codice in

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

Modello -> 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:

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:

Modello -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:

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

Post, titolo, centrare:

Modello -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:

.post h3{
text-align:center;
}

Post, elenco per etichetta (solo link):

Fonte

Scaricate il codice 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. 

Post, elenco per etichetta (link e immagini):

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.

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:

In Modello -> Personalizza -> Layout trovate le varie configurazioni del layout.

In alternativa:
Modello -> 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":

Solo da desktop:
Design -> Designer modelli -> Avanzato -> Aggiungi CSS.

#Attribution1 {
display: none;}

Anche da mobile:
Andate in "Modello -> Modifica HTML".
Cliccate sulla voce "Vai al widget" e cercate il widget "Attribution 1".
Sostituite "true" con "false" in questo modo:

<b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='false'>

Footer, togliere linea grigia e link a home page:

Modello -> 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".
In aggiunta alle configurazioni di default, potete....

Centrare il menu:

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

Ovviamente, lo stesso codice può essere usato per spostare il menù a destra, sostituendo right a center.

Colore background caselle menù:

#PageList1 li {
background: #ffffff}

Evidenziare pagina attiva nel menù:

#PageList1 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..

#PageList1 li.selected a {font-weight: bold; }


Inserite questi codici in modello -> personalizza -> avanzato -> aggiungi css.

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

Dimensione caselle menù:

Con questo codice potete impostare il padding delle caselle 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:

Modello -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:

.contact-form-widget {
margin:0 auto;}

Traduttore, centrare:

Modello -> Personalizza -> Avanzato -> Aggiungi CSS.
Incollate questo codice e salvate:

 #google_translate_element {text-align: center;}

Casella di ricerca, centrare e ridimensionare:

Modello -> 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 dall'alto).
  • 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
  • URLblog - sostituite con l'indirizzo del vostro blog (es: https://nomeblog.blogspot.com)
  • XXXXXXX - sostituite con l'ID del post (la trovate nell'URL in modaltà editor)
  • inhert - font utilizzato
  • 14px - dimensione caratteri

Più sopra, nella zona style, potete personalizzare l'aspetto grafico.

NOTA: è possibile includere i commenti di tutto il blog, o di un post specifico. Nel primo caso, togliete tutta la parte "/XXXXXXXXXX" compreso lo slash iniziale.

Commenti recenti con avatar:

Esempio aspetto:



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 style="text-align:center;">
</div>


Fonte

I parametri da modificare sono quelli in rosso, in questo modo:
  • numComments  = 8: e` il numero massimo di commenti che volete far apparire (lo stesso numero va riportato anche alla fine)
  • showAvatar  = true: se non volete che appaia l'avatar vicino ai commenti, cambiate "true" con "false"
  • avatarSize  = 60: dimensione dell'avatar
  • roundAvatar = true: questo valore, se impostato su "false", rende il box dell'avatar quadrato invece che tondo
  • characters  = 40: e` il numero massimo di caratteri del commento
  • defaultAvatar  = "URLavatar": al posto di "URLavatar" dovete mettere l'indirizzo dell'immagine che apparira`, di default, quando l'utente che pubblica non ha un profilo associato (nel caso dell'esempio e` la stellina)
  • src="URLblog: qui dovete mettere l'indirizzo del vostro blog
  • postID: qui dovete inserire l'ID del post. Se volete pubblicare tutti i commenti e non solo quelli di un post specifico, rimuovete la parte, compreso lo slash (/postID)
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:


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 ottimizzare il reindirizzamento per il mobile, mettete questo codice in "Modello -> Modifica html", subito sopra "</head>":

<!-- Redirect Inizio -->
<script>
//<![CDATA[
if (window.location.href == 'http://nomeblog.blogspot.com/2014/04/post-arrivo.html?m=1' | | window.location.href == 'http://nomeblog.blogspot.com/2014/04/post-arrivo.html')
{window.location = "http://nomeblog.blogspot.com/2014/04/post-partenza.html";}
//]]>
</script>
<!-- Redirect Fine -->

Sostituite gli indirizzi come indicato e salvate.

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:


"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'

Google foto, creare slideshow per Blogger:

Per farlo, dovete, prima di tutto, creare un album in Google Foto, accedendo col vostro account google. Ricordatevi di renderlo condivisibile, cliccando sull'icona con i 3 puntini (in alto a dx) e scegliendo "Condividi.
dovete cliccare su design->layout->aggiungi gadget e scegliere slideshow. Apparirà questa finestra:





Scegliete il titolo, mettete la spunta su "album" (come sopra) e ora....attenzione! Perchè c'è voluta tutta la mia pazienza per capire....dove c'è scritto "nome utente", dovete mettere la parte dell'indirizzo email del vostro account che c'è prima della chiocciola (@). Ora, nel menù a tendina, sotto la voce "album", dovrebbe essere apparso il nome del vostro album creato in Picasa. Sceglietelo. A questo punto, se avrete fatto 
tutto bene, comincerà a scorrere in anteprima, in basso, il vostro slideshow. Sistemate le altre preferenze e salvate. Fatto!





Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in     

Ti e` stato utile questo argomento?







ċ
commenti-recenti avatar.zip
(2k)
Maria Silvana Radice,
24 feb 2017, 01:58
ċ
commenti-recenti.txt
(2k)
Maria Silvana Radice,
10 mar 2017, 01:18
ċ
elenco-post.txt
(7k)
Maria Silvana Radice,
28 gen 2017, 08:55
ċ
etichetta-sommario.txt
(6k)
Maria Silvana Radice,
26 gen 2017, 04:04
ċ
sitemap-blogger.txt
(8k)
Maria Silvana Radice,
26 gen 2017, 01:22