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.

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.