Open Live Writer aggiunge l'elenco delle etichette, il Read More e il controllo ortografico anche per Blogger.

Come probabilmente saprete Windows Live Writer non supporta più dal 15 Dicembre l'accesso con gli account Google quindi gli utenti di Blogger non possono usarlo più da quella data e non lo potranno fare neppure in futuro. Però se avete questo programma della Microsoft nel PC Windows non vi conviene disinstallarlo. Infatti contestualmente alla cessazione del supporto per Blogger ha rilasciato Windows Live Writer come progetto open source che è stato denominato Open Live Writer ed è stato preso in carica da un team di sviluppatori che lo hanno reso disponibile agli utenti. Il nuovo software nella versione stabile può essere installato dalla pagina ufficiale Open Live Writer.

Alcuni problemi iniziali sono stati risolti come quelli dell'accesso con Blogger e quello dell'inserimento delle Categorie.  Altre funzionalità verranno aggiunte in futuro fino ad arrivare alla distribuzione del programma in tutti i linguaggi che supportava WLW e al rilascio dei plugin più usati dagli utenti e supportati da WLW.

Come mostrare una immagine al posto o insieme al Continua a leggere di Blogger.

Ritorno a parlare del Read More di Blogger che è quella funzione che serve per mostrare in Homepage solo l'inizio dell'articolo in modo che il lettore interessato a leggerlo possa aprirlo cliccando sul link Continua a leggere. Dopo l'hack per sostituire questa espressione con l'effettivo titolo del post vediamo come si possa sostituire con una immagine, come possa essere mostrata l'immagine da una parte e il testo dall'altra e come possano essere inseriti entrambi dallo stesso lato.

Per personalizzare l'espressione testuale da visualizzare in calce all'incipit del post si può consultare l'articolo su come configurare il Post sul blog mentre per le modifiche illustrate in questo post dovremo necessariamente mettere mano al Modello.

Come visualizzare il titolo del post al posto del Continua a leggere in Blogger.

Con l'introduzione del Read More avvenuta ormai da anni Blogger si è uniformato a Wordpress nel mostrare in modo nativo nelle pagine dinamiche quali la Home, le Etichette o l'Archivio solo l'incipit del post in modo da rendere queste pagine molto più compatte. Per attivare questa opzione bisogna andare su Inserisci Intervallo all'atto della pubblicazione del post direttamente nell'Editor di Blogger. In questo modo nella Homepage potranno essere mostrati più articoli senza che questa diventi lunghissima da scrollare per i lettori.

I navigatori interessati a leggere il post per intero possono cliccare sul link Continua a leggere: che sarà inserito alla fine dell'incipit del post. Questa espressione può essere modificata a piacere andando su Layout > Post sul blog > Modifica e configurando gli elementi del post

Come inserire il Continua a leggere automatico su Blogger.

Qualche giorno fa abbiamo visto come realizzare una homepage di Blogger come una tabella di titoli, miniature e snippet. Con tale impostazione venivano visualizzati gli incipit dell'articolo in due colonne insieme alla miniatura della prima foto presente nel post. Vediamo una diversa opzione della stessa funzionalità in modo da visualizzare miniature e titoli dei post in una sola colonna non solo nella homepage ma anche nelle pagine di etichette e di archivio.

Con questa funzionalità sarà automaticamente inserito il Continua a leggere anche negli articoli già pubblicati. In questo modo tra l'altro si velocizzerà anche l'apertura di home, etichette e pagine di archivio con un indubbio vantaggio SEO nella velocità di caricamento media delle pagine. Questa personalizzazione è applicabile a tutti i modelli ufficiali di Blogger che non siano già stati troppo modificati.

Riassunti automatici dei post con miniatura per Blogger.

Nell'Editor della piattaforma Blogger è presente l'icona della funzione Inserisci Intervallo che divide il post in due parti. La prima parte del post che potremmo definire Incipit viene mostrata nella Homepage, nelle pagine di Etichette e di Archivio mentre la seconda parte si potrà visualizzare solo aprendo tutto il post, cliccando sul Titolo oppure sul link Continua a leggere.

Questa funzione ha la sua utilità per mostrare in Homepage e nelle altre pagine multiple un numero di post molto più elevato del normale visto che se ne vedrà solo la prima parte. Il cosiddetto Read More può essere personalizzato non solo modificando l'espressione Continua a leggere ma anche nell'aspetto o inserendo una immagine al suo posto.

Come inserire il titolo del post dopo il Read More in Homepage di Blogger.

Questa personalizzazione è veramente l'uovo di Colombo ma fino ad ora non ci aveva ancora pensato nessuno. Pochi minuti fa Blogger Buster ha pubblicato un articolo in cui si tratta proprio di questo semplicissimo ma interessante hack. Andando su Design > Elementi pagina > Post sul blog > Modifica si può scegliere la frase da visualizzare alla fine della parte visibile del post che può essere Continua leggere >> , Leggi tutto… oppure un'altra simile a queste. Invece di visualizzare una semplice scritta con il link al post completo potrebbe essere utile visualizzarne anche tutto il titolo.

Questo link sarà visibile anche nelle pagine delle etichette e in quelle di archivio. Si va su Design > Modifica HTML e si cerca il codice del read more, dopo aver salvato il modello completo e aver messo la flag su espandi modelli widget. Si usa F3 o Ctr+F (CMD+F per Mac).

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </div>
</b:if>

Riassunto automatico senza Javascript per post di blog su Blogger.

Pubblico velocemente un aggiornamento al post di ieri "Come visualizzare in Blogger i riassunti dei post con miniature senza usare Javascript" e successivamente sarà mia premura apportare delle modifiche al codice dell'articolo.

Il problema presente nel codice, rilevato anche in un commento, era quello che nel caso si fosse inserito il Read More in modo manuale, tramite l'Editor di Blogger o attraverso Windows Live Writer, si sarebbero visti due link Continua a leggere o un'altra analoga espressione. Inoltre il riassunto automatico sarebbe stato comunque presente. Questo malfunzionamento è stato risolto. 

Andate su Design > Modifica HTML, espandete i modelli widget e cercate la riga <data:post.body/>. Cancellatela e sostituitela con questo codice

Come visualizzare in Blogger i riassunti del post con miniature senza usare Javascript.

Da diverso tempo Blogger ha dato la possibilità ai propri utenti di tagliare l'articolo in due parti attraverso il Read More in modo da mostrare in Homepage e nelle pagine delle etichette solo il riassunto del post con il link per aprirlo nella sua interezza. Attraverso l'editor di Blogger si può usare l'icona che introduce automaticamente il commento <!-- more --> che ha questa funzione. Un simile pulsante esiste anche in Windows Live Writer ma solo nella sua ultima versione.

Vediamo una alternativa automatica a questo metodo. La cosa interessante è che si introduce solo un codice XML nel modello senza utilizzare javascript che appesantisce il caricamento delle pagine. Andate su Design > Modifica HTML e salvate il modello completo in previsione di un eventuale backup per il ripristino. Espandete i modelli widget e cercate la riga <data:post.body/>. Cancellatela e sostituitela con questo codice

Con Blogger adesso si possono mostrare i feed fino al Read More con formattazione e immagini.

Qualche ora fa c'è stato un annuncio da parte di Blogger Buzz che farà felici moltissime persone che usano questa piattaforma per il loro sito. Fino ad oggi si potevano scegliere solo tre opzioni per la visione dei feed da parte di coloro che li avessero sottoscritti. Oltre a Nessuno si poteva optare per Breve e Completo.

Nel caso di scelta del Feed Breve, i lettori vedevano solo i primi 400 caratteri del post, privati però della formattazione e delle eventuali immagini presenti. Anche se avessimo scelto di usare FeedBurner, in Optimize > Summary Burner, se sceglievamo di mostrare solo la prima parte del post e indicavamo il numero di caratteri, si perdeva la formattazione e non si sarebbero visualizzate le immagini.

Finalmente è stata introdotta una nuova possibilità. Potremo dare un assaggio del post ai lettori fino al punto in cui abbiamo inserito il Read More o Jump. La particolarità sta nel fatto che chi leggerà i feed vedrà il post nella sua formattazione originaria e quindi con i link e le immagini. In sostanza nei feed si vedrà l'incipit del post esattamente come si vede nella Homepage.

Molti sceglievano di mostrare il feed completo proprio perché l'altra opzione era esteticamente un obbrobrio. Vediamo come fare per mostrare i feed fino alla stecca da biliardo, così Blogger definisce il punto in cui è stato diviso il post. Si va su Impostazioni > Feed Sito e si possono indifferentemente scegliere una delle due opzioni: Modalità avanzata e Modalità di base. Nel primo caso dovremo selezionare Feed post sul blog > Fino alla stecca da biliardo

Con la modalità di base si va su Consenti feed blog > Fino alla stecca da biliardo

Come inserire immagine e testo su lati opposti del layout nel read more di Blogger.

Nell'articolo di ieri avevo trattato la questione di come inserire contemporaneamente nei riassunti degli articoli un testo e una immagine entrambi posizionati sulla sinistra. Questa mattina mi sono accorto che il riscontro dei lettori è stato oltremodo positivo. Al momento visualizzo 5 Mi Piace nell'iFrame di Facebook sotto il post. Non vedo nessun nome e questo significa che chi ci ha cliccato non è mio amico su Facebook e quindi non fa parte della cerchia di persone con cui mi relaziono più frequentemente.

Considerato questo insperato successo e un commento di richiesta di ulteriore personalizzazione ho deciso di dedicare all'argomento un altro articolo. Si tratta di inserire alla fine del riassunto del post una immagine e un testo, una a sinistra e l'altro a destra del layout e viceversa.

Prima di iniziare la trattazione ricordo che in tutti i modelli recenti è presente sotto la riga <data:post.body/> il seguente codice

Come visualizzare contemporaneamente una immagine e un testo nel read more di Blogger.

Mi è stato chiesto da Marguerite N. se ci fosse stata la possibilità di visualizzare contemporaneamente una immagine e un testo alla fine del riassunto dell'articolo nel classico Read More di Blogger. Ho già illustrato come inserire al posto della scritta "Ulteriori Informazioni" una immagine con il link all'articolo in modo da visualizzarlo per intero. Ho anche spiegato come si possa sostituire a Ulteriori Informazioni un'altra espressione.

Vediamo come procedere per visualizzare sulla stessa riga sia l'immagine che il testo, entrambi con il link all'intero articolo. Il codice da incollare nel modello è il seguente:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25VnwkRX9BHdoqzOfSyBJShVpO6OrrIxbdZvQHD6wxUVASzIgCrkIkgHbgtHVuUhCwpgf8wznstdQ_BZqXfEzWUor6cNh1njuU_RUGbDbwn7ZwCi2hip_RjchaiecFr-SADbX3IjHEAA/'/></a>&#160;&#160;<span align='left'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
</div>
</b:if>

Come inserire e personalizzare il read more in Blogger e come usarlo con Windows Live Writer.

Certamente saprete che Blogger nel suo editor aggiornato ha introdotto la funzione del read more o del jump o del salto. Questa personalizzazione consente di pubblicare in Homepage solo un estratto dell'articolo in modo tale da poter inserire un numero di post più elevato. Prima eravamo costretti a utilizzare il metodo degli articoli sintetici che comportava l'inserimento del codice <span id="fullpost"> nel punto in cui volevamo finisse il riassunto.

Come personalizzare con i fogli di stile il read more o salto in Blogger.

Mi sono già occupato del famoso "jump" introdotto da Blogger nell'editor aggiornato qualche giorno fa. Dopo averlo presentato nell'articolo Blogger introduce il Read More, ne ho illustrato come visualizzare il testo del link nei modelli personalizzati, quindi come modificare il testo del collegamento in Homepage, infine come inserire un'immagine al posto della scritta "Ulteriori Informazioni".

Adesso presento una nuova proposta di personalizzazione per i blog estremamente attenti all'aspetto visivo. Partiamo dal presupposto che nel vostro blog sia già presente il codice seguente

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>

poco sopra la riga <div class='post-footer'>. Questo significa che in Homepage i post con il salto avranno questo aspetto

 Con il link Ulteriori Informazioni che ha i colori di tutti gli altri collegamenti del blog. Se vogliamo personalizzarlo, per renderlo più accattivante o per puro senso estetico, dobbiamo creare una classe di stile specifica per questo elemento. Le classi di stile vengono create facendo precedere il nome dell'elemento da un punto o dal simbolo del cancelletto. Possiamo per esempio fare in modo di cambiare i colori del link, i colori del background e i colori di quando viene puntato con il mouse. Possiamo introdurre anche il padding per far iniziare la scritta un po' più internamente di qualche pixel. Come vedete dal precedente screenshot il testo "Ulteriori Informazioni" è infatti esattamente allineato al resto dell'articolo.

Un esempio di un codice potrebbe essere questo

.jump-link a {
background: #940F04;
padding: 10px;
color: #FFFFFF;
}
.jump-link a:hover {
background: #FDBCB7;
padding: 10px;
color: #003366;
}

che fa in modo che la scritta abbia come sottofondo il colore dei link del blog e il link abbia invece il colore della pagina(bianca). Per quanto riguarda i codici dei colori inseriti, sono quelli di questo blog ma possono ovviamente essere scelti a piacere.

Andare su Layout > Modifica HTML e cercare la linea di codice

]]></b:skin>

e immediatamente sopra inserite il codice delle classi che si sono create per il jump. Come mostrato in questo screenshot

Salvate il modello e guardate come adesso si presenta il link Ulteriori informazioni

 

            

Ho fatto uno screenshot in condizioni normali e uno quando il collegamento è puntato dal mouse. Si vede anche che la scritta ha un leggero rientro (10 pixel) rispetto all'articolo. Se non vi piace l'espressione Ulteriori Informazioni e volete modificarla con un altra seguite i consigli dell'articolo su come cambiare la scritta che si legge in Homepage negli articoli con il Read More.

Come inserire un'immagine al posto della scritta "Ulteriori Informazioni" in un salto in Blogger.

Per comprendere il significato di questo articolo dovete prima aver letto i due post seguenti

1. Blogger introduce il read more per la pubblicazione dei sommari degli articoli -
2. Come visualizzare la scritta "Ulteriori Informazioni" nei modelli personalizzati di Blogger -

Se andate in Layout > Modifica HTML, dopo aver espanso i modelli widget, sia nel caso in cui abbiate un modello originale di Blogger che in quello di un template personalizzato dovrete comunque avere questo codice

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>

poco sopra alla riga

<div class='post-footer'>

Se al posto di Ulteriori Informazioni o un testo analogo che avete selezionato in Modifica Gadget Post, volete inserire un'immagine per accedere all'articolo completo dovete procedere in questo modo

1. Creare o acquisire l'immagine che volete inserire al posto del link
2. Caricarla nel web in un hosting gratuito tipo SkyDrive
3. Acquisirne l'indirizzo. Ecco un esempio di immagine che potrebbe essere usata per il read-more

Modificare il precedente codice sostituendo <data:post.jumpText/>, evidenziato in rosso, con <img src="URL_immagine" border="0" alt="Read More" />. Dove al posto di URL_immagine si inserisce l'indirizzo dell'immagine caricata nel web e al posto di Read More il testo che credete più opportuno. Questo testo si vedrà solo nel caso in cui un browser non riuscisse ad aprire l'immagine.

Un esempio di codice modificato potrebbe essere questo

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><img src="http://fb647g.blu.livefilestore.com/y1pYUMWDgOhS-WN2NoQKj1oPEOmWVxwA6H4_7Z-g_zKlJ55A6enYUV8yAmiqVR1x_8fD-OBvDy81rzu9nPjYpFLzw/Read-More.png" border="0" alt="Read More" /></a> 
      </div>
    </b:if>

e l'inserimento nel modello al posto dell'altro modifica l'aspetto dei sommari degli articoli in questo modo

     

In alcuni modelli molto sofisticati dal punto di vista della grafica potrebbe essere un tocco ulteriore di eleganza.

Come modificare l'espressione "Ulteriori Informazioni" per il link del read more (salto)

Mi è stato chiesto per email se esiste la possibilità di modificare l'espressione "Ulteriori Informazioni" che appare in Homepage alla fine del sommario dell'articolo nel caso si sia inserito il salto. La cosa non solo è fattibilissima ma estremamente semplice. Se tale scritta non vi appare perché avete un modello personalizzato leggetevi il post

• Come visualizzare l'opzione "Ulteriori Informazioni" nel sommario degli articoli in Blogger -

che forse potrà aiutarvi.

Andate in Layout > Elementi pagina e cliccate su Modifica nel gadget del post

Si aprirà una finestra di questo tipo

Nella seconda riga è presente il "Testo del link della Pagina di post", evidenziato di verde nello screenshot. Se si vuole cambiarlo si sostituisce con un altra espressione a nostra scelta quindi si clicca su Salva in basso a destra.

Il nuovo testo comparirà non solo negli articoli che scriverete in futuro ma anche in quelli già scritti in cui è stato inserito il read-more.

Come visualizzare l'opzione "Ulteriori Informazioni" nel sommario degli articoli del blog su Blogger in cui si è inserito il read more o salto che dir si voglia.

Se si ha un modello originale di Blogger nel momento in cui si inserisce il read more viene visualizzato in Homepage il link Ulteriori Informazioni per leggere tutto il post

Se si ha invece un modello molto personalizzato può capitare di non visualizzare tale link e quindi i visitatori, per aprire il post, dovranno cliccare sul titolo. Molti magari crederanno che l'articolo si sia concluso lì e neppure lo faranno

Si può fare in modo di ovviare a questo inconveniente modificando leggermente il modello. Avverto comunque che questo metodo l'ho sperimentato solo in due modelli e quindi non è detto che funzioni su tutti. In uno di questi modelli erano già presenti gli articoli sintetici e ha funzionato egregiamente.

Per sicurezza prima di verificarne l'efficacia nel vostro template scaricate un modello completo, cosa che deve essere fatta comunque sempre. 

Andate su Layout > Modifica HTML ed espandete i modelli widget. Guardate se è presente il seguente codice

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>

che si dovrebbe trovare tra la riga

<data:post.body/>

e la riga

<div class='post-footer'>

Fra queste due righe ci può essere pochissimo codice o molto di più a seconda dei modelli e se avete inserito la pubblicità.

Nel caso in cui non vediate il link Ulteriori Informazioni probabilmente non sarà presente. Allora lo dobbiamo inserire sopra la riga <div class='post-footer'>, come mostrato in questo screenshot

Salvate il modello. Adesso quando inserirete il salto o read more in un articolo sarà visibile il collegamento Ulteriori Informazioni. Diventerà visibile anche negli articoli che avete pubblicato in precedenza. Ecco come si presenta dopo la modifica al template l'articolo test di prima

Sono graditi commenti, suggerimenti e eventuali conferme del corretto funzionamento di questo piccolo trucco da applicare nel caso di modelli con forti personalizzazioni.