Come risolvere problemi di layout nei template delle Visualizzazioni Dinamiche di Blogger

Per superare alcuni inconvenienti relativi alla corretta visualizzazione nel browser web  degli elementi del Layout e della grafica dei modelli delle Visualizzazioni Dinamiche di Blogger al momento può essere utile intervenire direttamente con una modifica HTML nel codice del template di Blogger.
La modifica prevede, dopo aver individuato con una scorciatoia da tastiera specifica per Blogspot, lo script:

<script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 0);
    </script>

la sostituzione nel codice del valore 0 con il valore 800 in modo da vedere correttamente, in attesa di una risoluzione definitiva di questo tipo di inconveniente, il blog di Blogspot che utilizza come modello un template delle Visualizzazioni Dinamiche di Blogger,

Come visualizzare un gadget solo in un post o in una specifica pagina di un blog su Blogger

Per inserire nel layout di un blog su Blogger un gadget da far vedere ai lettori solo in uno specifico post è possibile aggiungere dalla Bacheca di Blogger in “Design”>”Modifica HTML” una “condizione” che consenta di ottenere questo tipo di visualizzazione del gadget nella sidebar del blog.
Dopo aver,per sicurezza,salvato una copia del template e selezionato lo strumento “Espandi modelli widget” bisognerà trovare con una scorciatoia da tastiera  inserendo nella casella di ricerca il codice che identifica il gadget  (nell’esempio in basso HTML1)  la sezione di codice HTML che si riferisce al widget che si desidera mostrare solo in un post o in una singola pagina statica.
Individuata la sezione di codice HTML del gadget è necessario inserire subito dopo la stringa:

<b:widget id='HTML1' locked='false' title='' type='Text'>
<b:includable id='main'>

Il seguente codice:

<b:if cond='data:blog.url == "URLdelPost"'>

e subito prima di:

</b:includable>
</b:widget>

Bisognerà aggiungere il codice HTML:

</b:if>

 

Questa modifica (da salvare cliccando a destra su “SALVA MODELLO”) consente,sostituendo nel codice aggiuntivo a URLdelPost l’esatto indirizzo del post ,di rendere visibile un gadget presente nella colonna laterale di un blog di Blogger solo ai visitatori di quella specifica pagina che contiene il post.

Come non visualizzare il modulo del post e le colonne laterali in una pagina statica di Blogger

Per non mostrare in una pagina aggiuntiva di Blogger l’elemento centrale del post e le sidebar laterali è possibile inserire nel codice HTML del template prima del tag:
</head>

la seguente condizione:

<b:if cond='data:blog.url == &quot;URLPAGINA&quot;'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
.columns, .fauxcolumns {
display:none !important;
}
</style>
</b:if>

Inserendo al post di URLPAGINA l'indirizzo specifico della pagina.

Come attivare lo strumento “Espandi i modelli Widget” in un blog di Blogger

Per utilizzare  la funzione “Espandi i modelli widget” che consente,nella finestra del codice HTML del blog disponibile dalla Bacheca di Blogger in “Design”>”Modifica HTML”,di visualizzare ogni elemento gadget/widget nella sua forma completa e non  in una sola riga come da impostazione predefinita è necessario selezionare l’opzione spuntando la casella di controllo posizionata a destra del modulo “Modifica modello” che contiene il codice del blog di Blogspot.
Lo strumento “Espandi modelli widget” è utile per visualizzare l’intero codice HTML presente nel template inserire modifiche al template del blog come ad esempio questa:
Come stampare solo il testo contenuto nel post con Print Friendly

Come mettere pulsante MI PIACE di Facebook in un blog di Blogger con lo sfondo scuro

Per aggiungere il bottone MI PIACE di Facebook all’interno dei post in un blog su Blogspot con lo sfondo scuro o nero è possibile seguire le indicazioni presenti su:
Come inserire il bottone MI PIACE di Facebook nel post di un blog su Blogger
sostituendo il codice HTML indicato con il seguente codice adatto per mettere il pulsante MI PIACE nei blog di Blogger con colori di background scuri:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=
100&amp;action=like&amp;font=arial&amp;colorscheme=dark&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Come mettere una favicon personalizzata nel blog per sostituire l’icona di Blogger

Per inserire in un blog di Blogger una favicon personalizzata al posto della piccola icona arancione e bianca di Blogger  visibile nella barra degli indirizzi del browser posizionata a destra dell’indirizzo (URL) del blog di Blogger è necessario aggiungere,con una modifica al modello,una porzione di codice HTML al template dalla Bacheca di Blogspot nella sezione "Design">"Modifica HTML" ed inserire prima del tag   </head>  il seguente codice:

<link rel="shortcut icon" href="URLicona" />
<link rel="icon" href="URLicona" />
 
Per individuare più rapidamente il tag  </head> nel codice HTML del modello è possibile anche  utilizzare una scorciatoia da tastiera

 
Al posto di “URLicona” bisognerà mettere l’indirizzo diretto dell’immagine scelta per la favicon del blog su Blogger e caricata in precedenza su un servizio di hosting online.
Dopo aver inserito la modifica e controllato il risultato in anteprima è possibile salvare la modifica cliccando su “Salva modello” ed aggiungere così l’icona personalizzata da vedere nella barra degli indirizzi e nel menu dei preferiti del browser utilizzato dal visitatore del blog su Blogspot.
Quando si effettuano modifiche HTML al template è sempre utile,per sicurezza, salvare prima una copia del template in uso dallo strumento disponibile in alto nella stessa pagina
I file adatti per realizzare l’icona sono ICO PNG GIF GIF animato JPEG APNG e SWG,ma non sempre i diversi browser supportano tutti i formati file elencati;al momento i formati che consentono la visualizzazione della favicon  del blog in tutti i browser più utilizzati sono ICO e PNG.
Per il formato .ICO le dimensioni in pixel più adatte sono da 16x16 a 48x48,per gli altri formati si utilizzano anche icone con dimensioni in pixel maggiori.  

Come Convertire in una Favicon in formato .ico le immagini .jpg .png .gif .bmp .tiff

Per utilizzare nel blog di Blogger una Favicon in formato file ICO è possibile convertire le immagini realizzate in formato file  JPG PNG GIF BMP  ICO e TIFF utilizzando lo strumento online per convertire icone di ICONJ
ICONJ  permette anche di utilizzare un servizio gratuito di Hosting Icone in modo da caricare online l’icona ed ottenere così il link con il collegamento diretto all’immagine, da inserire nel codice HTML per mettere una Favicon personalizzata in un blog di Blogger.

Come eliminare i bordi bianchi alle foto nei post del template Filigrana / Watermark di Blogger

Per eliminare la cornice e togliere così il bordo bianco nelle immagini ed alle foto caricate nei post sui blog che utilizzano il template Filigrana / Watemark del Designer di modelli è possibile modificare il codice del template dalla Bacheca di Blogspot in “Design”>”Modifica HTML”.
Dopo aver individuato nella finestra del modello questa porzione di codice:
(E’ possibile utilizzare una scorciatoia da tastiera per individuare il testo)

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 5px;

  background: #fff;

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Per eliminare la cornice con il bordo  bianco alle foto è necessario togliere alcune righe e modificare quindi la porzione di codice in modo da cancellare questa sezione:

background: #fff;

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

A questo punto è possibile visualizzare il blog in anteprima e se i bordi bianchi nelle foto dei post nel template Filigrana / Watermark sono stati eliminati è possibile cliccare su “Salva modello” per rendere definitiva la modifica.

Prima di modificare il codice HTML di un blog di Blogger è sempre utile,per sicurezza,salvare sul proprio computer una copia del template attuale.

Come ripristinare i Widget ai valori predefiniti per inserire i bottoni di condivisione di Blogger

In alcuni template personalizzati per aggiungere e rendere visibili i bottoni di condivisione automatica sui Social Network di Blogger disponibili dal menu “Design”>”Elementi pagina” nell’elemento “Post sul blog”>”Modifica” può essere necessario tornare alle impostazioni originarie dei widget del blog e cancellare tutte le modifiche HTML precedentemente inserite.

Per questa operazione è possibile utilizzare lo strumento automatico “Ripristina modelli widget ai valori predefiniti”disponibile dalla Bacheca di Blogger nella sezione “Design” > “Modifica HTML” in basso,sotto la finestra di testo con il codice HTML del template del blog su Blogspot.
Come già scritto,l’utilizzo di questa opzione cancella le modifiche alle configurazioni dei widget eventualmente già presenti nel blog e che dovranno essere in seguito nuovamente inserite.

Come ripristinare le impostazioni dei modelli widget ai valori predefiniti in Blogger

Dalla Bacheca di Blogger in “Design” > “Modifica HTML”,in basso sotto alla finestra con il template HTML,dal link “Ripristina modelli widget ai valori predefiniti”.

Utilizzando questa funzione le personalizzazioni HTML eventualmente inserite in precedenza nel codice HTML del template verrebbero cancellate e dovrebbero quindi essere aggiunte nuovamente al modello.

Come inserire i meta tag Description e Keywords in un blog di Blogger

Nella sezione “Design”>”Modifica HTML” della Bacheca di Blogger aggiungere nella finestra con il codice HTML del template in alto nella sezione  <head> possibilmente dopo il rigo:

<title><data:blog.pageTitle/></title>

la seguente porzione di codice:

<b:if cond='data:blog.pageType == "index"'>
<meta content='descrizione' name='description'/>
<meta content='key1,key2,key3' name='keywords'/>
</b:if> 

Sostituendo nella stringa di codice:
descrizione con la descrizione del blog espressa con un breve testo o una frase che descriva gli argomenti trattati nel blog
key1,key2,key3 con le parole chiave che identificano il contenuto ed i temi del blog

AGGIORNAMENTO:il metatag keywords con le parole chiave non è  più preso in considerazione dal motore di ricerca di Google e dagli altri principali motori di ricerca.


Per aggiungere codice HTML nel template del blog utilizzando la nuova bacheca di Blogger è necessario seguire questa procedura:
Come modificare il codice HTML del modello in un blog di Blogger

<  Attenzione  >

Nuova Procedura per inserire il Meta Tag Description in un blog di Blogspot:

Come mettere il metatag Description in un blog di Blogger

Come eliminare o invertire su Blogger il nome del blog dal titolo del post visibile nella SERP

Per cancellare il titolo del blog visibile in alto nel browser,dalla Bacheca di Blogger e visibile nella SERP di Google in “Design Modello>”Modifica HTML” nella finestra con il codice HTML del template è necessario, utilizzando una scorciatoia da tastiera, individuare il codice
  
<title><data:blog.pageTitle/></title>

ed al suo posto inserire la seguente stringa:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Subito dopo bisognerà salvare la modifica al template con il bottone “Salva Modello”
E’ sempre utile prima di inserire modifiche HTML al template, per sicurezza,salvare una copia del template che si sta utilizzando sul proprio computer.

Per invertire invece la posizione tra il titolo del blog ed il titolo del post è possibile utilizzare la seguente modifica:
sostituire la stringa già indicata :

<title><data:blog.pageTitle/></title>

con il codice

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>