Come aggiungere una icona prima e/o dopo il titolo del post di Blogger

Come inserire una immagine prima e/o dopo il titolo di tutti i post su Blogger o prima o dopo solo di dati articoli.

L'abbellimento dell'aspetto di un sito è una esigenza particolarmente sentita da chi abbia dei blog particolarmente votati all'estetica. Lo stile del blog può essere modificato facilmente anche da chi utilizza i modelli ufficiali di Blogger. Questa soluzione è sempre preferibile al download di Temi da internet che spesso risolvono una singola cosa ma ne incasinano molte altre.

In questo post vedremo come applicare una piccola modifica che mi è stata richiesta più volte dai lettori di questo blog, specialmente dalle lettrici. Si tratta dell'aggiunta automatica di una piccola immagine prima e/o dopo il titolo del post.

La prima operazione da compiere è quella di caricare le immagini in oggetto sul nostro account Google Foto. Lo si può fare semplicemente andando su Bacheca -> Nuovo post per poi inserire le immagini nell'Editor. Si clicca sull'apposito pulsante e si selezionano dal computer. Le icone verranno caricate nel nostro account Google Foto. Si clicca su HTML, accanto al bottone Scrivi nell'Editor di Blogger, per visualizzare il codice della o delle immagini aggiunte.

Se ne potrà acquisire il link diretto selezionando e copiando il loro URL che inizia con https:// e che si trova dopo la stringa src=". Questi hotlink saranno usati per creare il codice necessario per questa personalizzazione. Dopo che lo si è fatto, si potrà anche eliminare la Bozza che Blogger ha creato automaticamente, perché le immagini rimarranno comunque nel nostro account.

Si va poi su Tema -> Modifica HTML per cercare la classe di stile del titolo del post. Si digita Ctrl+F e si cerca la stringa .post-title che di solito è quella preposta all'aspetto del titolo dell'articolo. Se tale riga esiste, o esiste anche la riga associata a questa h3.post-title, allora possiamo procedere con le modifiche.

Nell'URL diretto delle immagini, ci sarà una stringa di questo tipo /s1600/ o con altro numero al posto di 1600. Se desideriamo una immagine larga p.e. 25 pixel, nell'URL della stessa, si sostituisce /s1600/ con /s25/. Per controllare che funzioni, si incolla l'URL modificato nella barra del browser e si va su Invio.

Dopo aver salvato il template, si cerca la riga ]]></b:skin>, quindi subito sopra, si incolla questo codice

h3.post-title:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFHbDlFRB7ZcISqvaLvHs8i-xTSL1j9wpCcLioZDCZpNnUSUkt6S-F5AgaDDaybVYRC06wx5qQg17LVFgejsXVawNAdsGWyU6YL6Mw93vXlDW-3AhAXgJlWCahu5Ti8s6I2XNi7ZCDIU/s25/if_pencil_285638.png);
padding-right:15px;
}

Si salva il modello. L'icona verrà aggiunta prima dei titoli dei post. Se invece si incolla questo codice

h3.post-title:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2e-A9F4xV80m7ogCZMrYad_KyBlrKRRXI9ptW9B0eaBO1NC93mNryZtbmMHlU5EcnPhA0ogdA-2gnAvZ7_JzYOY_s-F6ij8n3MVRxCcUDJt6KLrAp7uyMZokLhjPixTz0OsZwUgImnUg/s25/if_heart_299063.png);
  padding-left:15px;
  }

l'icona verrà mostrata alla fine del titolo di tutti i post.

I tag padding-right e padding-left servono per distanziare adeguatamente l'icona dal titolo del post e si deve andare per tentativi per trovare il loro giusto valore, in relazione al nostro template. Si possono inserire icone all'inizio e alla fine del titolo del post incollando entrambi i codici.

Nel caso di una icona identica da aggiungere all'inizio e alla fine del post, il codice può essere semplificato così

h3.post-title:before, h3.post-title:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2e-A9F4xV80m7ogCZMrYad_KyBlrKRRXI9ptW9B0eaBO1NC93mNryZtbmMHlU5EcnPhA0ogdA-2gnAvZ7_JzYOY_s-F6ij8n3MVRxCcUDJt6KLrAp7uyMZokLhjPixTz0OsZwUgImnUg/s25/if_heart_299063.png);
   padding:15px;
   }

Si ottiene questo risultato:

Ricordo che ovviamente dovrà essere sostituito l'URL della immagine che ho usato come test e che dovrà essere scelto il giusto valore per il padding in modo da separare in modo adeguato titolo e icona.

Infine se si desidera inserire queste icone all'inizio e/o alla fine solo di un dato post, non occorre modificare il modello. Si apre l'Editor del post da pubblicare oppure anche già pubblicato. Si va su HTML e si incolla, all'inizio, il codice che ci interessa dei tre che ho presentato. Tale codice però va inserito tra i tag <style> e </style>.