Pubblicato il 14/09/09 - aggiornato il  | 4 commenti :

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

articolo-salto

 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

css-jump

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

 

read-more             mouse-hover

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.





4 commenti :

  1. Ciao! Non so dirti quanto utie sia tutto ciò che condividi pazientemente con noi... e non saprei mai ringraziarti abbastanza:)
    volevo chiederti, questa personalizzazione del "read-more", è possibile applicarla con windows live writer? no eh? anchea costo di scriverlo manualmente ogni volta, come già faccio con il tag

    grazie:)

    RispondiElimina
  2. @fiOrdivanilla
    Sì è possibile basta inserire il commento "more" nel punto in cui vuoi il "jump" in modalità HTML. Per maggiori informazioni leggiti questo post
    http://parsifal32.blogspot.com/2009/09/blogger-introduce-il-read-more-per-la.html
    Ciao

    RispondiElimina
  3. si si già provveduto, mi scuso per non aerlo detto:)
    grazie comunque! ah, da windows live non è possibile apportare effetti-modifiche-cambio di font al "Continua a leggere" vero? :\

    RispondiElimina
  4. @fiOrdivanilla
    Se vuoi pubblicare gli articoli sintetici con il metodo illustrato in questo post
    http://parsifal32.blogspot.com/2008/09/pubblicare-gli-articoli-in-forma.html
    puoi cambiare l'espressione "Continua a leggere" con un'altra modificando leggermente il modello. Se invece vuoi pubblicarli con il "jump" di Blogger puoi modificare l'espressione di default "Ulteriori Informazioni" accedendo a Modifica nell'area del post come illustrato in questo articolo
    http://parsifal32.blogspot.com/2009/09/come-modificare-l-informazioni-per-il.html
    Ciao

    RispondiElimina

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