Come mostrare messaggi, link, icone e altri contenuti alla fine di ogni post di Blogger.

Come visualizzare testo, link, immagini e altro ancora alla fine di un post. I contenuti possono essere editati da ciascun blogger usando un normale Editor e senza conoscere l'HTML.

Tutti gli utenti della piattaforma Blogger sono alla ricerca di widget da mostrare ai loro lettori contestualmente ai contenuti pubblicati per mettere maggiormente in evidenza i loro profili sui social o per mostrare un messaggio soprattutto a quelli casuali o che abbiano aperto il sito per la prima volta. Con questo post intendo mostrare una procedura alla portata di tutti per creare un widget personale secondo le singole esigenze anche se non si conosce nessun linguaggio di programmazione.

L'idea è quella di creare un contenuto da visualizzare automaticamente alla fine di tutti i post che potrebbe essere un messaggio, un invito a sottoscrivere i feed, il consiglio di iscriversi alla pagina fan su Facebook, alla pagina business su Google+ o a un nostro board su Pinterest. Non ci sono limiti alla fantasia e si possono inserire immagini, link e anche video. È anche possibile inserire dei bottoni con script tipo di quelli allineati sotto il post di Facebook, Twitter e Google Plus.

Ho postato sul mio canale di Youtube il tutorial completo di tutto il procedimento

Per prima cosa va creato il contenuto utilizzando un Editor WYSIWYG come può essere Windows Live Writer oppure anche lo stesso Editor di Blogger. Si crea quindi tutto quello che vogliamo mostrare contestualmente all'articolo utilizzando quello che si vuole come link, immagini e altro ancora

Nello screenshot precedente è stato creato un contenuto con un testo dei link e una tabella da 1 riga e 3 colonne per allineare le icone sei principali social network con i collegamenti ai nostri account. Ho usato WLW ma ripeto che si può utilizzare qualsiasi altro Editor. Se si decide di mostrare delle immagini bisogna prima caricarle su Google+ o su Picasa e inserirle nell'Editor con il loro link diretto. Nel caso si usi WLW si si va in basso su Origine ci viene mostrato il codice necessario per creare quel contenuto

Non resta che cliccare con il destro del mouse, selezionare tutto, copiare il codice e incollarlo in un file di testo tipo Blocco Note. Questo codice in teoria potrebbe essere incollato nel modello di Blogger ma in pratica non è così semplice perché Blogger non lo salverebbe. La ragione risiede nel fatto che il template di Blogger è in linguaggio XML mentre il codice è in HTML. Dovremo quindi operare una conversione da HTML in XML. Ci sono molti tool online adatti a questo scopo. Si tratta di una operazione che viene solitamente fatta anche quando si vogliono inserire dei banner pubblicitari direttamente nel modello. Personalmente uso da anni lo strumento Parse HTML. Si incolla il codice ottenuto nell'apposito campo vuoto e si clicca su Parse

Il codice "parsato" andrà selezionato, copiato e incollato in un altro file di testo. Ora dobbiamo fare in modo che questi contenuti siano visibili solo nei post. Si dovranno quindi usare i tag condizionali segnatamente i due che inseriscono il suddetto vincolo

<b:if cond='data:blog.pageType == &quot;item&quot;'> e </b:if>

che vanno inseriti rispettivamente all'inizio e alla fine del codice in questo modo

Finalmente dopo aver salvato il template si va su Modello > Modifica HTML e si digita Ctrl+F per cercare la riga di codice che determina l'inizio della versione desktop del blog

<b:includable id='post' var='post'>

Se invece volessimo inserire i contenuti solo nella versione mobile dovremo cercare la riga

<b:includable id='mobile-post' var='post'>

Nel caso volessimo i contenuti visibili sia sul mobile sia su browser desktop bisognerà incollare il codice per due volte secondo la stessa procedura. Se il codice della sezione desiderata non si fosse tutto palesato occorre cliccare sulla freccetta nera posta alla sua sinistra

Si scorre quindi il codice fino a trovare la riga

<div class='post-footer'>

che determina l'inizio del footer. Subito sopra si incolla il codice parsato e con i tag condizionali

Si salva il modello. Se si volessero visualizzare i contenuti invece che alla fine del post al suo inizio, il codice andrebbe incollato subito dopo la riga <div class='post-header'> o l'altra <div class='post-header-line-1'/>. Le modifiche non saranno visibili nell'anteprima del modello ma solo se si apre un post

si visualizzeranno in calce all'articolo i contenuti che avevamo creato con l'Editor.