Pubblicato il 11/08/10 - aggiornato il  | 6 commenti :

Come inserire testo, link e immagini alla fine di ogni post in un blog su Blogger.

Nel momento in cui scrivo questo articolo alla fine di ogni post su questo blog si legge sempre la stessa frase corredata da dei link; questo testo è stato inserito direttamente nel modello

Mi è stato chiesto come si fa a effettuare questa semplice personalizzazione. Innanzitutto fissiamo alcuni concetti:
1) Nel modello di Blogger si possono inserire testo e link ma anche immagini come per esempio bottoni per acquistare un bene, per iscriversi a qualche servizio o anche un pulsante per le donazioni. In teoria potrebbe anche essere inserito un video. E' possibile anche inserire elenchi, tabelle, emoticon, ecc
2) Questo testo l'ho inserito alla fine del post ma nulla vieta di metterlo all'inizio. Si potrebbe anche inserire nel mezzo dell'articolo del post ma questo è più complicato. Potrebbe essere il tema di un nuovo post
3) Il modello di Blogger usa il linguaggio XML invece di quello HTML quindi bisogna effettuare una conversione
4) La procedura che illustrerò è a beneficio di coloro che hanno solo un'infarinatura di HTML e non per gli esperti che sicuramente la troveranno troppo naïf.
La prima cosa da fare è quella di preparare il testo da inserire alla fine di ogni articolo. Aprite Windows Live Writer, andate su Nuovo post e digitate tutto quello che volete con tutti i link che vi servono. Se inserite immagini queste dovranno essere prima caricate su un hosting e non caricate attraverso il computer.
testo-fine-post Se sono presenti dei link si pone il problema se inserire o meno il nofollow. Dobbiamo considerare che questo testo verrà visualizzato in tutti gli articoli. Se ne abbiamo scritti per esempio 500, ci saranno 500 link verso le pagine che abbiamo collegato. Questo potrebbe essere interpretato come una operazione di spam da parte di Google ma non ne sono sicuro. Personalmente ho quindi aggiunto il nofollow a tutti i link ma si tratta solo di una decisione personale e ognuno faccia come crede.
Per inserirlo tramite Windows Live Writer è sufficiente aprire il menù a tendina in Rel 
rel-nofollow
e selezionare nofollow. E' anche opportuno mettere la spunta a "Apri il collegamento in un'altra finestra" per i link esterni al blog. Adesso bisogna adattare il testo al layout del nostro blog. Andiamo quindi su Visualizza e mettiamo la spunta a Modifica con tema, selezioniamo tutto il testo e clicchiamo sul pulsante per la giustificazione
giustificare-testo
Nel momento in cui sarà messo nel blog il testo sarà automaticamente incolonnato senza spazi vuoti alla fine delle righe. Questa operazione serve soltanto se si vuole inserire una frase di più di una riga.
Finalmente possiamo acquisire il codice HTML andando su Origine, selezionando tutto e copiando
codice-HTML-frase-modello
Come ho già accennato dobbiamo convertire questo codice nel linguaggio XML che è quello dei template di Blogger. Possiamo utilizzare lo strumento Blogcrowds HTML Parser. E' sufficiente incollare il codice che abbiamo acquisito nell'apposito campo e cliccare su Parse in basso. Verrà convertito il codice HTML in XML e questo strumento si utilizza anche per inserire la pubblicità di Adsense o di qualsiasi altro circuito pubblicitario
codice-xml
Dovremo selezionarlo, copiarlo e salvarlo in un file di testo tipo Blocco Note o Wordpad. Nel caso lo incollassimo così com'è, sarebbe visibile in tutte le pagine del blog compresa la Homepage. Questo è da evitare perché è opportuno che sia visibile solo negli articoli; a tale scopo nel file di testo inseriamo le seguenti righe di codice
<b:if cond='data:blog.pageType == &quot;item&quot;'>  all'inizio e
</b:if> alla fine, come mostrato nel seguente screenshot
righe-solo-post
dove le righe aggiunte sono state evidenziate di viola. E' venuto il momento di operare sul modello, andiamo quindi su Design > Modifica HTML, salviamo il modello completo per un eventuale backup e mettiamo il segno di spunta a espandi i modelli widget.
La riga da cercare è questa
<data:post.body/>
che può essere trovata cliccando su F3 o Ctrl+F. C'è però da tenere presente che in quella zona possono essere state inserite molte altre personalizzazioni come per esempio il Mi Piace di Facebook, la pubblicità di Adsense, il read more o jump che dir si voglia e eventuali bottoni di condivisione. Bisogna quindi scegliere se si vuole mettere questo testo prima o dopo le altre cose presenti. Si dovrà scorrere il codice del modello scendendo dopo la riga <data:post.body/> fino a trovare la giusta posizione. 
Al momento su questo blog è inserito subito dopo l'iFrame di Facebook
codice-testoDobbiamo solo incollare il codice che abbiamo salvato nel file di testo comprensivo delle due righe aggiunte. Terminiamo l'operazione andando su Salva Modello e visualizzando il risultato aprendo un qualsiasi post. Se si vuole inserire la frase all'inizio dell'articolo occorre cercare la stessa riga <data:post.body/>, e incollare il codice sopra a questa facendo le stesse considerazioni su eventuali altre personalizzazioni presenti.




6 commenti :

  1. Puntuale come un orologio svizzero...!
    Grazie! Questo fine settimana metto in pratica.
    P.S. E' possibile utilizzare altri editor oltre a Live Writer?

    RispondiElimina
  2. @Benzene
    Puoi utilizzare un qualsiasi editor per HTML anche quello di Blogger. Ho indicato WLW perché è il più completo, permette di inserire il nofollow, di giustificare il testo, ecc

    RispondiElimina
  3. Arieccomi!
    Ho seguito le preziose istruzioni ed è tutto andato alla perfezione!!!!
    Grazie infinite!

    RispondiElimina
  4. Grazie, mi hai salvato.....
    Dovevo aggiungere del testo sotto a più di 200 wallpapers e mi ero quasi arreso!
    Ma poi ho letto il tuo post ed in 5 min. ho risolto tutto!!!!!
    Sei mitico.....

    RispondiElimina
  5. Grazie (anche) per questo articolo.
    Ma al momento se vado sul mio pannello Blogger --> Layout --> Modifica
    nel codice non trovo nessun "data:post.body"... Sarà perché da quando hai scritto questo articolo sono cambiate un po' di cose (2010) ?
    Potresti forse aggiornarlo? Grazie ancora.

    RispondiElimina
    Risposte
    1. Più che aggiornare il post che mantiene una sua validità è cambiato il modo in cui cercare il codice nel template. Leggiti questi due post, specie il secondo
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      In ogni caso ti consiglio quest'altro articolo
      http://www.ideepercomputeredinternet.com/2014/04/come-creare-widget-personale-blogger.html
      che tratta lo stesso tema e che ha anche un videotutorial
      @#

      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