Come visualizzare nella homepage di Blogger il riassunto dell'articolo con miniatura dell'immagine.

Ci sono diversi metodi per realizzare questa personalizzazione che devo dire suscita particolare interesse tra gli utenti di Blogger considerato il numero dei commenti che ricevono i post che la trattano. Ne fanno fede questo post sugli articoli sintetici e quest'altro sul read more con miniature. In questo articolo presenterò un nuovo procedimento che ricalca in sostanza quelli precedenti ma che ha maggiori possibilità di personalizzazione. Si tratta di mostrare in automatico solo le prime righe del post insieme a una miniatura dell'immagine, ammesso che l'articolo ne contenga almeno una. Ricordo che, come al solito, vengono rilevate solo le foto postate con l'Editor di Blogger e non quelle inserite per esempio tramite Windows Live Writer.

Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate la riga </head>. Immediatamente sopra incollate questo codice 

<link href='https://sites.google.com/site/scriptperilblog/javascript-2/leggi-tutto.css' rel='stylesheet' type='text/css'/>

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 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 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.

Blogger introduce il Read More per la pubblicazione di articoli con il sommario.

Questa funzionalità del Read More è già presente in molti blog, tra i quali anche questo, e va sotto il nome di articoli sintetici o articoli espandibili. Le ho dedicato diversi articoli e ho modificato il template per poterla utilizzare. Adesso Blogger Buzz rivela che sarà possibile per tutti i blog, mediante l'editor aggiornato di Blogger, di pubblicare gli articoli in modo che solo una parte di essi si veda in homepage.
Dopo aver selezionato la modalità aggiornata andate su Nuovo Post. L'editor si presenterà così

Per generare il cosiddetto salto (jump), come dicono quelli che usano wordpress, è sufficiente cliccare sull'icona e il salto sarà generato nel punto in cui si trova il cursore dell'editor. Ecco come cambia la visualizzazione della pagina


Se si vuole inserire utilizzando l'HTML, basta cliccare su Modifica HTML ed inserire il seguente codice nel punto in cui si vuole che avvenga il salto

<!-- more -->

Si tratta di un semplice commento; ecco come si presenta l'HTML in questo caso

Adesso ci poniamo le seguenti domande

1. Se abbiamo il modello già predisposto con gli articoli sintetici funziona ugualmente questa feature?
2. Conviene rimodificare il modello o lasciare così com'è? 
3. Si può indifferentemente fare il salto con <span id="fullpost"> e con <!-- more -->?

Per una risposta complessiva vi rimando a successivi articoli per adesso testerò queste nuove funzioni su questo stesso articolo.

1) - Se si inserisce il commento <!-- more --> con Windows Live Writer non funziona.

2) - Se invece si introduce con l'Editor di Blogger modificando l'articolo allora funziona ma non c'è nessun link per vedere tutto il post. Occorre cliccare sul titolo.

3) - Penso che continuerò con il sistema che uso attualmente.

Scusate l'aspetto dell'articolo ma dopo tutti questi test era il minimo .

Come inserire automaticamente in Blogger gli articoli espandibili con il sommario in Homepage di lunghezza prestabilita.

Mi sono già occupato di come inserire gli articoli sintetici in Blogger. Quel metodo ha comunque delle controindicazioni che si possono così riassumere

1. Questa possibilità valeva solo per gli articoli futuri e non per quelli passati
2. Non venivano create automaticamente delle miniature degli articoli
3. Non venivano creati i Riassunti automaticamente e dovevamo inserire nel post in modalità HTML il seguente codice Scrivi il riassunto
   <span id="fullpost">
   Scrivi il resto del post
   </span>

Adesso è possibile inserire gli articoli sintetici automaticamente con miniature in Homepage.
Andare su Layout > HTML e dopo aver scaricato il modello completo cercare la riga di codice

</head>

Immediatamente sopra  questo codice inserire il seguente script

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 150; img_thumb_width = 200; </SCRIPT> <SCRIPT src=’http://parsifal32.altervista.org/articoli-espandibili.js' type='text/javascript'/>
<noscript><a href='http://goo.gl/THMup' target='_blank'><span style='font-size: x-small;'>Automatic Thumbnail</span></a></noscript>

come mostrato nello screenshot. Salva il modello.
Adesso cerca quest’altro codice

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

e rimpiazzalo completamente con quest’altro

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'><img src=’http://tinyurl.com/ou439a’/></a></span></div>
</b:if>

Come mostrato nello screenshot seguente

Salva il modello nuovamente. Adesso passiamo alle personalizzazioni
summary_noimg = 500 ; – Sono il numero di caratteri che devono essere mostrati se l’articolo non contiene immagini
summary_img = 400 ; – Sono il numero di caratteri mostrati nel riassunto se sono presenti immagini
img_thumb_height = 150; – Rappresenta l’altezza della miniatura in pixel
img_thumb_width = 200 ; – Rappresenta la larghezza in pixel della miniatura
http://tinyurl.com/ou439a – E’ l’URL dell’immagine con la scritta Leggi Tutto. Ovviamente può essere rimpiazzata con una fatta da voi che sarà sicuramente migliore di quella che ho fatto io.
Se non volete inserire un’immagine potete sostituire il secondo codice con quest’altro

<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/><DIV expr:id='"summary" + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT> <div style='clear: both;'/><div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'>Leggi tutto l’articolo</a></span></div>
</b:if>

Dove al posto di Leggi tutto l’articolo potete inserire una qualsiasi altra espressione.
Adesso quando posterete un articolo in modo automatico in Homepage sarà visibile solo un riassunto con il numero di caratteri che hai scelto di mostrare. Coloro che vorranno leggere tutto il post dovranno cliccare sull’immagine Leggi Tutto se hai scelto la prima opzione di codice oppure sulla scritta Leggi tutto l’articolo se hai scelto la seconda opzione.
Accortezze – Siccome questo codice va ad incidere nella stessa zona degli annunci pubblicitari di Adsense per inserirlo bisogna

1. Togliere la pubblicità dal modello.
2. Inserire questo codice degli articoli espandibili.
3. Rimettere nuovamente la pubblicità

Per vedere e testare il funzionamento di questo codice ho creato un blog apposito

• Blog degli articoli espandibili -

Cliccando su Leggi Tutto potete rendervi conto del suo funzionamento che è automatico. Se si inserisce un’immagine nella prima parte del post bisogna mantenere le proporzioni con i dati che si sono inseriti cioè 200 pixel di larghezza e 150 pixel di altezza altrimenti l’immagine risulterà distorta. Ovviamente ripeto di nuovo che questi numeri possono essere cambiati ed adattati al modello del blog.
Come potete notare nel primo articolo sono state mantenute le proporzioni perfettamente cosa che non è avvenuta nel secondo. Ovviamente eventuali distorsioni sono visibili solo in Homepage.
Visto che il bottone da me creato, che si trova qui, non si può dire sia un’opera d’arte se c’è qualche grafico tra i lettori che lo realizza e me lo recapita in qualche modo, oltre a fare un gesto caritatevole, gli metto il link del suo blog nell’articolo. Le misure sono pressappoco 80-90 pixel di larghezza e 15-25 di altezza. I colori sono a piacere.
Aggiornamento importante: E' ora possibile inserire il Read More direttamente dall'editor di Blogger.

Pubblicare gli articoli in forma sintetica su Blogger.

Certamente avrete nei vostri Preferiti (Favoriti) la Homepage di qualche blog importante. In questi blog di alto livello che producono dieci articoli al giorno ed anche di più nella Home non viene visualizzato tutto l'articolo ma solo un sunto in modo che il lettore possa avere sotto gli occhi tutti gli articoli recenti senza dover scorrere la pagina eccessivamente, soprattutto nel caso in cui questi articoli fossero lunghi. Anche per chi posta con la piattaforma Blogger c'è la possibilità di modificare il modello in modo da presentarlo ai lettori nella stessa forma di cui dicevo.

Per prima cosa andate su Layout>Modifica HTML quindi scarica modello completo, operazione fondamentale per fare il back-up nel caso la modifica del modello non andasse a buon fine. Quindi mettete il segno di spunta in Espandi modelli widget e cercate il tag

</head>

quindi immediatamente prima incollate tutto il codice che trovate in questa pagina (mi raccomando non selezionate anche il titolo!), quindi cercate queste righe di codice

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Selezionatele, cancellatele e al suo posto inserite quest'altro codice

<div class='post-body entry-content' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
    <style>#fullpost{display:inline;}</style>
    <p><data:post.body/></p>
  <b:else/>
    <style>#fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <span id='showlink'>
      <a expr:href='data:post.url'>Continua a leggere...</a>
    </span>
    <script type='text/javascript'>
      checkFull("post-" + "<data:post.id/>");
    </script>
  </b:if>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Salvate il modello e visualizzate il blog per vedere che sia tutto a posto. Nel caso in cui non lo fosse potete sempre tornare a Layout>Modifica HTML e ricaricare il modello che avete scaricato per sicurezza. Al posto di Continua a leggere... scritto in rosso potete naturalmente mettere un'altra espressione come Leggi tutto l'articolo o altro ancora. Adesso dobbiamo decidere in che modo formattare i nostri articoli. Ci sono due modi, il primo è quello di andare su Impostazioni>Formattazione e inserire in Modello post il seguente codice e salvare le impostazioni
Riassunto
<span id="fullpost">
Resto del post
</span>
Quando andrete a pubblicare un post vedrete questa immagine

Dovrete inserire quindi al posto di Riassunto la parte del post che sarà visualizzata in Homepage e in Resto del post appunto il resto dell'articolo. Alternativamente a questo sistema un po' macchinoso voi potete procedere così

• Scrivete tranquillamente il vostro post
• Passate alla visualizzazione Modifica HTML e qui inserite la tag
  <span id="fullpost"> nel punto in cui volete che finisca il riassunto
• Inserite la tag </span> alla fine del post

La cosa è mostrata in questo screenshot relativo proprio a questo post


Quando pubblicherete un articolo sarà visualizzata in Homepage solo la parte iniziale e il lettore per poterlo leggere interamente dovrà cliccare su Continua a leggere... come mostrato in quest'ultimo screenshot.

Aggiornamento: Se avete inserito la pubblicità di Adsense direttamente nel modello seguendo le indicazioni di questo post potrebbero verificarsi delle incompatibilità in quanto si opera con le stesse righe di codice; quindi se non funzionasse dovrete prima togliere la pubblicità della seconda parte del post, quella dopo la riga
<p><data:post.body/></p>
seguire le indicazioni di questo articolo per inserire gli articoli sintetici, quindi inserire nuovamente la pubblicità secondo le indicazioni del succitato post. E' inutile dire che tutte queste operazioni vanno fatte scaricando il modello ad ogni passaggio e rinominandolo per non fare confusione.
Aggiornamento importante: Questo metodo per mostrare solo i riassunti dei post in homepage è ormai sorpassato perché Blogger ha introdotto il Read More che consente di fare tutto questo in modo automatico dall'editor di Blogger.