Pubblicato il 19/02/15 - aggiornato il  | 4 commenti :

Come personalizzare, font, colori e dimensioni dei titoli di Blogger e inserirvi immagini.

Come creare dei titoli di Blogger assolutamente originali modificando famiglia di font, dimensione, colore e stile anche di ciascun carattere e come inserire anche immagini all'inizio, alla fine o anche nel mezzo del titolo al posto dei caratteri stessi.
Alla luce di una conversazione avuta nei commenti su un vecchio post che riguardava la sottolineatura dei titoli di Blogger è forse opportuno integrare l'articolo in cui mostravo come si potesse mostrare solo una parte del titolo in corsivo (o in grassetto) con un nuovo post più approfondito.

Cominciamo col dire che forse non tutti sano che si possono aggiungere una o più immagini al titolo di Blogger. Si possono mettere all'inizio, alla fine oppure nel mezzo del titolo stesso. La piattaforma Blogger infatti supporta l'inserimento del tag <img> nel campo del titolo.

Quindi noi possiamo per esempio aggiungere manualmente una immagine o una icona al nostro titolo semplicemente aggiungendo il tag <img> con l'URL della immagine che vogliamo mostrare. Per esempio se apriamo l'Editor di Post di Blogger e incolliamo nel Titolo questo codice

<img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png" /> Post San Valentino <img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png" />

in questo modo

pubblicare-titolo-immagini-blogger

quando pubblicheremo otterremo questo risultato

titolo-immagini-blogger

Questa funzione non conosciuta da molti si presta a una infinità di utilizzi in tipologie di blog le più disparate. Visto che si opera solo nell'Editor non viene minimamente modificato il modello.


PERSONALIZZARE CARATTERI DIMENSIONI GRASSETTO CORSIVO E COLORI


Usando il tag <font> che come il tag <img> è supportato dal campo del titolo di Blogger possiamo anche realizzare un titolo multicolore, e multifont di questo genere 

titolo-personalizzato

in cui praticamente ciascun carattere ha una sua dimensione, un suo colore, un suo stile e una sua famiglia di font. Il codice incollato sempre nel campo del Titolo dell'Editor per questo test è stato

<font size="5" face = "Arial" color="#000"><em>C</em></font><font size="4" face = "Verdana" color="#0f0"><b>O</b></font><font size="2" face = "Courier" color="#off"><em>L</em></font><font size="4" font="Impact" color="#f0f"><b>0</b></font><font size="5" face = "Arial" color="#036"><em>R</em></font>

e si tratta chiaramente di un divertissement esplicativo di quello che si può realizzare con il tag <font> applicato al Titolo di Blogger. Questa tecnica può essere integrata anche con quella presedente per l'inserimento di immagini nel titolo per avere un risultato veramente originale

titolo-blogger-immagini

per il quale ho usato questo codice

<font size="5" face = "Arial" color="#000"><em>C</em></font> <img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png" />  <font size="2" face = "Courier" color="#off"><em>L</em></font> <img src="https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png" />  <font size="5" face = "Arial" color="#036"><em>R</em></font>

Non mi resta che ricordare alcuni attributi che si possono usare con il tag <font>.
  1. Per la famiglia di caratteri aggiungete nel campo di font l'attributo face = "NomeFamiglia". Per evitare problemi è consigliabile usare font supportati da tutti i browser. 
  2. Per la dimensione aggiungete nel campo di font l'attributo size="X"  con X che può variare da 1 per la dimensione più piccola a 7 per quella più grande
  3. Per il colore si aggiunge l'attributo color="#codice-esadecimale" dove al posto di codice-esadecimale si incolla uno qualsiasi dei codici dei colori  
  4. Per il corsivo e il grassetto non occorre neppure scomodare il tag <font> visto che basta inserire i rispettivi tag subito prima e subito dopo il carattere o la parola da mostrare in questo modo. Per il grassetto si usa il tag <b> con la sua chiusura </b> mentre per il corsivo il tag <em> con la sua chiusura </em>.  Al posto di <em> può essere usato anche <i> e la sua chiusura </i>
Coloro che pur essendo interessati al tema non avessero ben compreso tutto il discorso possono scaricare e consultare il mio ebook gratuito Guida all'HTML e al CSS.


4 commenti :

  1. Non so se il commento arriverà doppio, ma al momento di inviare quello precedente, il testo è scomparso. Comunque, avevo scritto che, vista la interessantissima soluzione grafica qui offerta, mi chiedevo se nel caso si volesse utilizzare lo stesso "modello" del primo esempio qui illustrato (quello con i cuori grandi, prima e dopo il titolo) fosse possibile centrare le immagini con il testo. Ho provato ad utilizzare il solito codice per centrare le immagini, ma nulla.

    Grazie per una eventuale risposta.

    RispondiElimina
    Risposte
    1. Il titolo non supporta il tag < center > o simile per centrare il titolo. Lo puoi solo fare dal modello aggiungendo questa riga
      .post-title {text-align:center;}
      inserito sopra alla ultima riga dei CSS cioè quella con /b:skin
      In questo modo però saranno centrati tutti i titoli. Puoi ovviare inserendo dei tag condizionali ma lo devi fare per tutti i titoli in cui vorrai utilizzare questa soluzione
      @#

      Elimina
  2. Ciao Ernesto, io devo diminuire (di molto) la dimensione del carattere del "blog-title" nella versione mobile perchè si vedono come in quella desktop (quindi troppo grandi). Come si fa a variare la grandezza dei caratteri del titolo del blog nella versione Mobile?
    grazie.

    RispondiElimina
    Risposte
    1. Leggi questo post
      http://www.ideepercomputeredinternet.com/2015/09/personalizzare-blogger-dispositivi-mobili.html
      specie l'ultima parte
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy