Come centrare verticalmente un testo o una immagine.

Ho appena letto una email che ho ricevuto con il modulo di contatto. Chi segue questo blog sa che non amo ricevere richieste tramite email e preferisco che questa opzione di interazione sia usata solo per questioni che non possono essere rese pubbliche per questioni di riservatezza. In genere a questi messaggi non rispondo ma stavolta mi è stato posto un quesito che forse potrebbe interessare anche altri lettori.

La domanda era come si faceva a "allineare testi, foto, ecc in altezza e in larghezza in modo che i punti centrali degli stessi fossero allineati". Si tratta di un quesito generale a cui non si può rispondere in modo esauriente ma si possono però fare degli esempi che potrebbero presentarsi nella pratica del blogging.

COME CENTRARE AUTOMATICAMENTE DELLE IMMAGINI

Come personalizzare il Menù delle Pagine Statiche su Blogger.

Da diverso tempo su Blogger è possibile creare un menù in modo molto semplice utilizzando le pagine che sono state pubblicate. Si va su Pagine > Nuova pagina > Pagina vuota e si pubblica la pagina statica utilizzando l'Editor che è lo stesso di quello dei post.

Le pagine così create possono essere inserite in un elenco verticale nella sidebar oppure visualizzate come Schede a formare un vero e proprio menù. Per utilizzare questa opzione occorre andare su Pagine > Mostra pagine come e selezionare Schede in alto.

E' possibile aggiungere altre voci al menù anche di pagine web non appartenenti al blog. Pensiamo per esempio alla pagina fan su Facebook, all'account su Twitter o al Profilo su Google Plus. In questo caso si va su Pagine > Nuova Pagina > Indirizzo web e si incolla l'URL della pagina insieme al suo titolo. Si clicca su Salva per completare l'operazione. Ecco un tipico aspetto di un menù di questo genere

Come nascondere la data degli articoli o metterla al centro del layout su Blogger.

Mi è stato chiesto come fanno alcuni webmaster a non mostrare la data in cui sono stati pubblicati i loro articoli. La cosa in effetti non è difficile da fare però, mi chiedo, quale utilità possa avere e in quali casi potrebbe risultare utile. In fondo evidenziare il giorno, mese e anno in cui si è pubblicato un post dà ulteriori informazioni al lettore sulla freschezza o meno del contenuto.

Questa personalizzazione la ritengo interessante solo per quei blog quasi statici, con pochi contenuti, che vogliono dare una parvenza di attualità al navigatore non mostrandogli la data di pubblicazione. Ho testato questo procedimento sul mio blog di prova. I titoli degli articoli si presentavano in questo modo

Il blocco di codice che sovrintende allo stile della data inizia con la riga

Come centrare il titolo di un articolo su Blogger.

Mi è stato chiesto da qualche parte, non mi ricordo se in un commento su questo blog, su Facebook o per email, se fosse possibile centrare il titolo di un articolo in blog sulla piattaforma Blogger.

La cosa è fattibile se si ha un modello in cui è presente un blocco di codice simile a questo

.post h3 {
  font-family: Trebuchet MS, arial, Sans-serif;
  font-size: 150%;
  font-weight:bold;
}

La riga realmente importante è la prima in cui si definisce lo stile del titolo dell'articolo riguardo alla famiglia di caratteri, alle dimensioni rispetto ai font del corpo del post, all'opzione grassetto, ecc. All'interno delle due parentesi graffe ci possono stare tutte le personalizzazioni possibili. Vediamo come fare per centrare il titolo oppure come visualizzarlo sulla destra. Di default apparirà ovviamente allineato a sinistra.

Come centrare la data in un blog su Blogger.

L'aspetto esteriore di un blog ha la sua importanza ed è esposto a valutazioni fortemente soggettive. Per default la data, nei modelli originali di Blogger, viene inserita a sinistra del layout sopra all'articolo e si può personalizzare andando su Impostazioni > Formattazione > Formato intestazione data.

Prendiamo per esempio questo blog, la sua data è situata nella posizione solita dei blog su Blogger

In taluni blog questo elemento potrebbe essere utile avere una più efficace visualizzazione nella parte centrale del layout. Per modificare la posizione andiamo su Layout > Modifica HTML e cerchiamo la riga di codice

h2.date-header {

Nel modello del blog preso in esame il codice che definisce lo stile della data è

h2.date-header {
  margin:1.5em 0 .5em;
  }

 

Come vedete lo stile della data è fortemente minimalista visto che sono indicati solo i margini; in altri modelli potrà essere sostanzialmente diverso. Nel caso si voglia inserire al centro del layout la data basterà aggiungere la riga di codice scritta in rosso

h2.date-header {
  margin:1.5em 0 .5em;
  text-align:center;
  }

in questo modo

quindi salvare il modello. Ecco il risultato, con la data che si posiziona al centro del main-wrapper

Se siete all'argomento su come personalizzare la data di un blog su Blogger potete anche leggere

1. Come cambiare il colore di background ai titoli dei widget e alla data - 
2. Come inserire un calendario con la data prima del titolo del post -

Come centrare un testo, un’immagine o un video in un articolo o in un elemento di Blogger.

Il sistema per centrare qualsiasi cosa in una sezione di un blog agendo sull’HTML è quello di inserire i due tag <center> e </center> all’inizio e alla fine della “cosa” che vogliamo nel centro del layout. Se è un’immagine si tratterà di un codice di questo tipo

<center><img src=”URL-Immagine”></center>

mentre se è un video, quello che vogliamo centrare in mezzo alla pagina o nella sidebar, il codice da inserire sarà il seguente

<center><object…….                …….</object></center>

dove <object… e …</object> rappresentano l’inizio e la fine del codice copiato p.e su Youtube. Ovviamente per inserire questo codice dobbiamo andare il modalità HTML se stiamo scrivendo un articolo oppure inserire questi tag in un elemento pagina HTML/Javascript.

La cosa funziona egregiamente anche con del testo. Per esempio questo codice

<center><p><font size="3"><strong>Testo centrato con il tag center</strong></font></p>
</center>

genera questa scritta

Testo centrato con il tag center

Questo tag ha però un problema, viene deprecato dal W3C che è l’istituzione che sovrintende al miglioramento dei protocolli. Se si stesse dietro a tutte le raccomandazioni di questo consorzio staremo freschi. Ecco per esempio come dovremmo inserire un oggetto flash secondo i dettami del W3C.

C’è però un’altra considerazione da fare. Il tag center non è supportato dall’XHMTL  che è un linguaggio che associa alcune proprietà dell’XML con le caratteristiche dell’HTML. In altri termini un file XHTML è una pagina HTML che rispetta lo standard XML.

Gli utenti di Blogger forse sapranno che i modelli del loro blog sono compilati proprio in XML.

Quindi se volessimo fare le cose precise, per centrare un oggetto, invece di usare il tag center dovremmo usare quest’altro tipo di codice

<div style="text-align:center;">oggetto da centrare</div>

e questo modo di procedere dà dei risultati sostanzialmente analoghi al precedente. Ecco quindi come dovrebbe essere impostato il codice per centrare video, immagini e testi

<div style="text-align:center;">testo da centrare</div>

<div style="text-align:center;"><img src=”URL-Immagine”></div>

<div style="text-align:center;"><object…           …</object></div>

dove al posto dei dati in rosso si inseriscono testo, immagine e video. Concludendo fate un po’ come vi pare, tanto funzionano tutti e due  .

Aggiornamento: In un commento mi è stato fatto notare che per centrare un oggetto si può utilizzare anche la seguente sintassi

<div align="center">oggetto da centrare</div>

questo sistema funziona perfettamente come gli altri due che ho illustrato. In questo caso non si usano i fogli di stile rappresentati dal tag style quindi sicuramente è meno apprezzato da parte del W3C, anche se questo consorzio invita ad usare certi protocolli non obbliga.

Come centrare un video all’interno di un articolo.

Coloro che hanno modelli con un layout abbastanza largo hanno la possibilità di gestire la posizione delle immagini a loro piacimento mettendole sulla sinistra, sulla destra o in posizione centrale.

Questo si può fare facilmente con l’editor di Blogger o anche con Windows Live Writer. Non ci sono invece sistemi automatici per sistemare i video nell'Editor di Blogger mentre invece esistono su WLW. Se si vuole mettere un video esattamente nel centro del post dobbiamo utilizzare i tag

<center> e </center>

dove il primo si inserisce subito prima del codice acquisito da Youtube o da un sito analogo, mentre il secondo si mette alla fine. Bisogna cioè inserire in modalità HTML un codice di questo tipo

<center> Codice del video </center>

Alternativamente si può usare quest'altro codice visto che il precedente è stato deprecato dal W3C

<div align="center"> Codice del video </div>