Inserire un riquadro con collegamento ai feed alla fine di ogni articolo.

Avrete certamente visto che non solo in Homepage ma spesso alla fine di ciascun articolo in molti blog è presente un invito a sottoscrivere i feed. Ho già trattato questo argomento in questo post ma, considerato che mi è stato richiesto e che da allora ho modificato la grafica, ritorno sul tema cercando di essere più chiaro possibile.

Il procedimento che descriverò non è certo l'unico praticabile, diciamo che è un'opzione abbastanza semplice  che  ho utilizzato in questo blog.

Le prime cose da fare sono procurarsi

• L'indirizzo dei nostri feed
• Una descrizione di cosa siano i feed e perché è importante utilizzarli

Per quanto riguarda la prima questione, se avete Blogger e non avete FeedBurner l'indirizzo del vostro feed sarà http://nomedelblog.blogspot.com/atom.xml,  se invece avete FeedBurner allora lo potete ricavare da Impostazioni>Feed Sito>URL di reindirizzamento oppure andando nel vostro account e cliccando sull'icona a sinistra del sito (se ne avete più di uno)



e copiando l'URL della barra degli indirizzi

 

Per risolvere la seconda questione potete editare una pagina utilizzando p.e. Google Page Creator o Google Sites che spiega cosa sono i feed e come usarli.  Se siete pigri potete benissimo utilizzare senza alcun problema anche la pagina che ho messo in rete a tale scopo.

Adesso incollate il codice seguente in  Windows Live Writer in modalità Codice HTML

<table width="90%" align="center" bgcolor="#19265b" border="0"><tbody>
    <tr>
      <td width="100%" bgcolor="#ffffff">testo</td>
    </tr>
  </tbody></table>

dove gli attributi in rosso possono essere modificati a piacimento

• 90% rappresenta quanto lungo debba essere il riquadro rispetto al layout
• center significa che deve essere centrato, può essere sostituito da left
• border="0" rappresenta la larghezza del bordo
• #ffffff è lo sfondo del riquadro in questo caso bianco
• #19265b è il colore del riquadro del mio blog e può ovviamente essere cambiato

Ecco quello che accade se lo incollate in WLW in modalità Codice HTML e poi lo visualizzate in modalità Layout Web

Cliccate con il mouse all'interno del riquadro e cancellate la parola testo e digitate una frase del tipo di quella che vedete nel richiamo ai feed alla fine dei miei post. Potete inserire anche delle icone o delle immagini

Adesso inserite i collegamenti p.e.

• In Iscriviti ai feed mettete il collegamento all'indirizzo acquisito in precedenza
• In clicca qui mettete il collegamento ad una pagina che spiega cosa siano (anche alla mia se credete)

Adesso utilizzando il mouse ridimensionate la grandezza del riquadro per non lasciare spazi vuoti

In questo caso l'ho rimpicciolita ma si può anche ingrandire.

Adesso passiamo a Visualizza>Codifica HTML e copiamo il codice che abbiamo generato

Copiate solo la tabella insieme al suo contenuto e non le due tag iniziali <p></p> che rappresentano solo un salto di riga.

E' giunto il momento di trasformare questo codice HTML in un codice XML per farlo accettare al template di Blogger. Come al solito si utilizza questo strumento online, si incolla il codice e si clicca su Parse; il codice ottenuto si seleziona, si copia e si salva in un file di testo

Finalmente editiamo quello che sarà il file di testo definitivo da incollare nel nostro modello (*)

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

Codice della tabella dei feed modificato con Parse

</p>
</b:if>

In questo codice definitivo <p> e </p> rappresentano l'inizio e la fine del paragrafo per tenere distinta la tabella con il collegamento ai feed dal resto dell'articolo; mentre la prima e l'ultima riga rappresentano la condizione per visualizzare questo riquadro solo quando si apre un post e non quando siamo in Homepage, questo per una questione puramente estetica.

Dove dobbiamo incollare questo codice? Innanzitutto andiamo su Layout>Modifica HTML e scarichiamo un modello completo per, eventualmente, fare il backup nel caso che la modifica non andasse a buon fine.

Adesso ci sono varie possibilità

1. Avete un modello senza pubblicità e senza articoli espandibili
2. Avete un modello con articoli espandibili ma senza pubblicità
3. Avete un modello con pubblicità ma senza articoli espandibili
4. Avete un modello con articoli espandibili e pubblicità che poi è anche il mio caso

Per sapere come si inseriscono gli articoli espandibili andate a questo post, mentre per sapere come inserire la pubblicità di Adsense direttamente nel modello consultate quest'altro articolo.

Dopo aver messo il segno di spunta a espandi modelli widget, nel primo caso, cercate questa riga di codice

<data:post.body/>

nel secondo caso cercate quest'altra riga di codice

<p><data:post.body/></p>

e immediatamente dopo incollate il file di testo che è la risultante del punto contrassegnato con (*). Quindi Salvate le modifiche al modello e visualizzate il risultato. Il riquadro dovrebbe apparire nei post ma non in homepage.

Nel terzo e quarto caso caso la pubblicità da visualizzare nella parte bassa del post è già stata inserita rispettivamente dopo i codici

<data:post.body/>  oppure

<p><data:post.body/></p>

quindi il codice di cui al punto (*) dovrà essere inserito immediatamente dopo il codice della pubblicità. Ecco uno screenshot che mostra visivamente l'iserimento

Da notare che io non ho messo prima del codice dei feed la riga

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

e alla fine non ho messo la riga

</b:if>

in quanto ho considerato un tutt'uno pubblicità e tabella dei feed e ho inserito tutto insieme dopo la riga <p><data:post.body/></p> con questa sintassi

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

<p>

Codice Adsense modificato con Parse

</p>

<p>

Codice del riquadro dei Feed modificato con Parse

</p>

</b:if>

Ho messo prima la pubblicità di Adsense e poi il riquadro con il richiamo ai feed ma nulla vieta di fare il contrario, anzi concettualmente forse è anche più giusto.

La cosa finisce qui se non avete inserito delle immagini. Se invece lo avete fatto allora queste vanno caricate nelle cartelle del vostro blog (cioè su Picasa). Per far questo basta tornare all'articolo posticcio che avevamo creato e, nel caso avreste scelto un riquadro con immagine p.e. di questo tipo

allora bisogna pubblicare il post stando bene attenti a mettere una data antecedente alla nascita dello stesso blog. Questo perché quando si posta un articolo e poi si elimina rimane comunque nei nostri feed con la dicitura articolo eliminato e fa brutta impressione in chi si è abbonato.

La data di pubblicazione si imposta sulla destra del fondo pagina


quindi si pubblica sul blog. Poi si va su Bacheca>Modifica post>Vecchia e si clicca su Elimina per eliminare il post. Bisogna avere l'accortezza di togliere il segno di spunta all'immagine che viene visualizzata per mantenerla nelle nostre cartelle altrimenti scomparirà.