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 creare GIF animate dalle proprie foto direttamente online

Per realizzare GIF animate da immagini o foto conservate sul proprio PC , da URL già online o da Webcam è possibile utilizzare direttamente su Internet il servizio Picasion GIF Maker
L'applicazione web Picasion consente infatti di caricare tramite il tasto "Scegli file" le foto dal proprio PC (è possibile aumentare il numero delle immagini da inserire nella GIF animata da "Add one more picture") che, dopo aver impostato la dimensione (Size) e la velocità (Speed),verranno mostrate in sequenza nella GIF animata da creare.
Dopo aver cliccato su "Create Animation" nella schermata successiva si potrà ottenere il link diretto alla GIF, il codice HTML da utilizzare per incorporare l'immagine creata nel blog di Blogger (tramite il gadget HTML/Javascript) o di Wordpress (in un widget "Testo")  il BBcode da utilizzare per i Forum e, da "Save this animation" sarà possibile scaricare la Gif animata sul proprio computer.

Come centrare la didascalia in un gadget FOTO di Blogger

Per posizionare al centro il testo utilizzato come "Didascalia" sotto ad una immagine inserita nel layout del blog tramite il gadget "Foto"di Blogger (come il banner di Prove di blogger presente nella colonna laterale di Web per blog ) è possibile inserire il testo nell'apposito campo "Didascalia" della finestra di configurazione del gadget Foto in questa forma:

<div style="text-align:center;">Testo della didascalia</div>

Nello stesso banner per centrare la foto rispetto alla colonna che la ospita nel blog di Blogger è stata utilizzata questa soluzione:

Come centrare l'immagine inserita in un gadget FOTO di Blogger con un CSS

Per centrare i titoli dei gadget (nell'esempio: Realizzato con) presenti nella sidebar di Blogspot è possibile utilizzare il seguente procedimento:

Come centrare il titolo dei gadget in un blog di Blogger

Per chi desiderasse aprire il link del gadget "Foto" in una nuova finestra del browser è possibile applicare una modifica direttamente nel codice HTML del blog

Come aprire il link del gadget FOTO in una nuova finestra del browser in un blog 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 centrare il contenuto di un gadget HTML/Javascript in un blog di Blogger

Per posizionare al centro del modulo il contenuto di un widget inserito direttamente in un gadget HTML/Javascript all’interno della colonna laterale di un blog su Blogspot è possibile inserire il codice HTML in questa forma:

<div align="center">codiceHTMLdelwidget</div>

Come mettere una firma automatica in un post di Blogger

Per inserire automaticamente all’interno di un post su Blogger una firma personalizzata,realizzata con un programma di grafica o direttamente con un generatore online di firme è possibile utilizzare dalla Bacheca di Blogger nella sezione “Impostazioni”>”Formattazione” il modulo “Modello post” che consente la pre-formattazione dell’editor con testo o codice HTML che verrà visualizzato alla creazione di ogni nuovo post.
Per mettere la firma possiamo inserire il codice HTML:

firma<p><div align="center"><img src=URLdellafirma /></div></p>

Nel codice HTML è necessario sostituire ad  URLdellafirma l’indirizzo dell’immagine della firma online prelevato dal sito del generatore di firme o dal servizio di hosting online utilizzato per rendere la firma disponibile su Internet.
Dopo aver salvato la modifica con “Salva Impostazioni” al momento di pubblicare un nuovo post la firma sarà già automaticamente aggiunta e potrà essere posizionata in calce al post del blog di Blogger

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.

Codice HTML per inserire un link con immagine per inviare una email al blogger

<a href="mailto:indirizzoemail" target="_blank"><img border="0" src="URLimmagineOnline" /></a>

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

Codice HTML per inserire una textarea nel post o in un gadget del blog

<textarea rows="8"cols="35">contenuto da visualizzare nell'area di testo</textarea>

Codice HTML banner PROVE DI BLOGGER

<br /><a href="http://provediblogger.blogspot.com/" target="_blank"><img src="http://img526.imageshack.us/img526/6027/bannerprovediblogger.png" />
</a><br />

Codice HTML per inviare una email al blogger

<a href=mailto:indirizzoemail>indirizzoemail</a>

Codice HTML per inserire il link al proprio profilo sul social network

<a href="URLprofilosocialnetwork" target="_blank"><img border="0" src="URLiconasocialnetwork"></a>

Codice HTML per aprire un link in una nuova finestra

<a href="URLdelsito" target="_blank">ilnomedelsito</a>

Sostituendo a
URLdelsito      l'indirizzo di destinazione del collegamento
ilnomedelsito    il nome da visualizzare nella pagina web

Codice HTML per centrare un'immagine in un gadget o in un post di Blogger

<div align="center"> codiceHTMLimmagine </div>