Pubblicato il 31/03/14 - aggiornato il  | 12 commenti :

Come aggiungere immagini a nome e descrizione del blog e al titolo del post in Blogger.

Come aggiungere immagini a Nome e Descrizione del Blog e al Titolo dei post su Blogger.
Gli utenti di Blogger sono già a conoscenza della possibilità di inserire una immagine nella Intestazione del blog che può sostituire il nome dello stesso o essere messa come sottofondo a Nome e Descrizione. Ho anche illustrato un procedimento per inserire una icona prima o dopo il titolo di tutti i post. La cosa sorprendente di Blogger è che nelle Impostazioni di base in cui si possono cambiare nome e descrizione del blog nei rispettivi campi si può anche inserire del codice HTML. Non sono supportati tutti i tag ma lo è sicuramente quello per aggiungere delle immagini.

Con mio stupore ho potuto constatare che i tag delle immagini sono supportate anche nei titoli dei post. Questo comporta che per esempio potremo aggiungere foto insieme al nome o alla descrizione del blog e icone prima o dopo il Titolo di un post.

demo-immagini-nome-blog

Nella immagine precedente viene mostrata una intestazione di un blog che ha una immagine prima del nome e un'altra immagine dopo la descrizione.

AGGIUNGERE IMMAGINI A NOME E DESCRIZIONE DEL BLOG


Bisogna ricordarsi solo un paio di cose. La prima è il codice generico per inserire una immagine che è

<img src="URL_IMMAGINE"/>

e la seconda è che il nome del blog supporta al massimo 100 caratteri. Quindi per essere sicuri che le immagini caricate su Picasa possano essere accettate è meglio accorciare il loro URL mediante il servizio goo.gl che offre anche una pratica estensione per Chrome.

Per inserire una immagine prima o dopo il nome del blog si va su Impostazioni > Di Base > Titolo > Modifica e si aggiunge tale codice in questo modo   

titolo-blogger

Come vedete ho inserito l'URL accorciato e anche i due tag <center> e </center> per centrare immagine e titolo che vengono perfettamente accettati. Si può anche inserire il tag <br/> per il salto di riga e per visualizzare titolo e immagine uno sotto all'altra. Si può mettere prima l'immagine e poi il titolo oppure prima il titolo e poi l'immagine o ancora scegliere una opzione mista come questa

immagine-nome-blog

Sono supportate anche le immagini animate in formato GIF. Per quello che riguarda la Descrizione si può usare la stessa procedura ricordando che avendo la possibilità di inserire fino a 500 caratteri si sente di meno l'esigenza di accorciare l'URL della immagine. Si va su Impostazioni > Di Base > Descrizione > Modifica e si cambia il contenuto del campo inserendoci anche il tag dell'immagine

descrizione-con-immagini-in-blogger

Si va su Salva modifiche per rendere effettivi i cambiamenti. Come vedete dallo screenshot anche in questo caso si possono aggiungere i tag <center> per centrare gli elementi e <br/> per i salti di riga. Se l'immagine avesse delle dimensioni non adatte si può modificare inserendola con questo codice

<img src="URL-IMMAGINE" width="200">

in cui si potrà settare la larghezza a piacere mentre l'altezza rispetterà le proporzioni.

AGGIUNGERE IMMAGINI AL TITOLO DEI POST


In casi particolari oppure anche sempre si possono abbellire i titoli dei post aggiungendo delle icone con questo stesso meccanismo. Nell'Editor di Blogger nel campo del Titolo si inseriscono i tag delle immagini insieme al titolo vero e proprio e poi si pubblica

immagine-titolo-post

Il risultato potrebbe essere questo

immaginenel titolo dei post

Ovviamente possono anche essere inserite due immagini e pure i tag <center> e <br/> per rendere il titolo ancora più originale e accattivante

titolo-immagini-blogger

Se interessa posso testare quali altri tag sono supportati da Nome, Descrizione e Titolo del post in Blogger.


12 commenti :

  1. Ottimo, proprio quello che stavo cercando! Grazie al tuo articolo ho messo un animale vicino al titolo del mio blog....prova ad indovinare di che animale si tratta!?....(penso si riconosca abbastanza facilmente altrimenti non avrei messo quell immagine)

    RispondiElimina
  2. Ciao Ernesto.
    Ho fatto un bel po' di verifiche con diversi tag e sembra non ci siano limiti ai tag che possono essere inseriti nel titolo; addirittura è possibile anche inserire JavaScript.

    Tutta questa cosa dei tag nel titolo è effettivamente strana e forse potrebbe essere addirittura considerato un bug di Blogger (WordPress.com è mooolto più rigido, accetta solo i classici <b> <i> e poco altro), però è una possibilità carina per formattare parola per parola il titolo. Quindi bug o non bug è comunque una cosa che si può utilizzare.

    C'è però da stare molto attenti nel farlo perché il pericolo è che i tag inseriti nel titolo vadano a finire anche nel tag <title> e questo comporterebbe non pochi problemi.
    Anche qui ho fatto vari test (es: http://tamburoriparato.blogspot.it/2014/05/formattazione-e-ottimizzazione-dei.html) e ho scoperto che il tag <title> rimane "pulito" solo se non è stato cambiato il codice <title><data:blog.pageTitle/></title> all'interno del template.
    Se quel codice è stato cambiato per spostare alla fine o eliminare il dominio dentro il titolo, allora il tag <title> viene fuori pari pari con tutti i tag che sono stati inseriti nel titolo.

    Sperando di essere stato abbastanza chiaro, arrivo alla mia domanda:
    io voglio poter utilizzare i tag nel titolo per formattarlo, ma assolutamente non voglio che il tag <title> si "sporchi"; contemporaneamente voglio però anche modificare il codice <title><data:blog.pageTitle/></title> in modo da mettere il dominio alla fine del titolo reale:
    è possibile avere entrambi le cose salvaguardando il tag <title>?

    Io ci ho provato in tutti i modi che mi sono venuti in mente ma non ci sono riuscito.
    Vuoi provare tu a vedere se esiste un modo?
    Grazie

    RispondiElimina
    Risposte
    1. Per Mettere il titolo del post prima del nome del blog non ci sono problemi
      http://www.ideepercomputeredinternet.com/2012/10/blogger-ottimizzare-titolo-post-risultati-google.html
      poi per le questioni SEO che poni credo che neppure uno del team di Blogger potrebbe risponderti in modo risolutivo
      @#

      Elimina
    2. OK Ernesto, effettivamente la cosa si complica non poco e alla fine non so quanto davvero ne valga la pena. Grazie comunque.

      Elimina
  3. Ho dimenticato di ceccare inviami notifiche; lo faccio con questo commento

    RispondiElimina
  4. Ciao Ernesto e buon 2016 anzitutto.
    Ho provato ma non mi accetta il tag img. :(
    Non so se perchè il layout da la possibilità di inserire l'immagine anche se le opzioni non sono quelle che gradisco. il risultato lo trovi a coach-4you it.

    come mai non mi accetta il tag in titolo di impostazioni? Puoi dirmi qualcosa?
    grazie e buona giornata

    RispondiElimina
    Risposte
    1. Ho appena provato e lo accetta. All'inizio ti dice che il tag img "is broken" ma dopo che lo hai inserito correttamente lo accetta. Eventualmente sostituisci le doppie virgolette " con la virgoletta semplice '
      @#

      Elimina
  5. Ernesto buongiorno, non so dove farti questa domanda ho cercato l'articolo più dedicato alle immagini. Nel mio blog non ho mai avuto problemi ad inserire immagini nel post ma ultimamente non me le carica, o meglio una volta aggiunge nell'album dal computer e selezionata l'immagine per inserirla nel post... niente non la carica. Puoi dirmi se è un problema che avete riscontrato anche voi o qualcun altro? Grazie

    RispondiElimina
    Risposte
    1. Io uso Open Live Writer per caricare le immagini e ho riscontrato altri problemi ma non questo
      http://www.ideepercomputeredinternet.com/2017/05/open-live-writer-error-400-bad-request.html
      Prova a informarti nel forum di Blogger
      https://productforums.google.com/forum/#!forum/blogger
      per controllare se altri hanno avuto o stanno avendo lo stesso problema
      @#

      Elimina
    2. Se rispondono... non lo fanno mai! mah fino ad ora non ho mai avuto problemi sono 3 giorni che è così. Grazie ciao

      Elimina
  6. Mi chiedevo se fosse possibile inserire un'immagine di fondo al titolo dei post. Ho provato inserendo questo codice: <... style="background:url(URL_Immagine);"> prima del titolo post nell'editor ma l'immagine si adatta alle dimensioni del titolo ovviamente. Aspetto aggiornamenti (senza impegno) Grazie.

    RispondiElimina

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