Post espandibili su blogger: cambiare la posizione del link “Leggi tutto…” o sostituirlo con un’immagine

Fin da quando è stato introdotta su Blogger la possibilità di utilizzare i post espandibili mi è stato chiesto come fosse possibile cambiare l’allineamento del link “Leggi tutto…” (o equivalente, visto che è personalizzabile) o sostituirlo con delle immagini.

In effetti la richiesta è lecita e spesso mi chiedo perchè Blogger continui a centellinare le novità e quando ne propone una lo fa ai minimi termini: il template di Blogger, più di quello di altri CMS, si presta benissimo ad offrire all’utente la possibilità di personalizzare facilmente il proprio layout. Comunque, dove non arriva Blogger facciamo con le nostre mani, ma se avete paura di sbagliare ricordatevi di fare un backup del template prima di modificarlo.

E’ anche un occasione per capire come sfruttare la possibilità di aggiungere CSS personalizzato con il nuovo designer di modelli.

Cambiare l’allineamento del link

Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa riga (CTRL+F del browser):

]]></b:skin>

Per avere il link allineato a destra, inserite subito sopra queste righe:

.jump-link
{
    text-align: right;
}

Ecco come apparirà:

Se volete il link allineato al centro, inserite invece queste righe:

.jump-link
{
    text-align: center;
}

Ed ecco un’anteprima:

Per fare la stessa modifica potete usare anche il nuovo designer di modelli. In questo caso il codice scelto va inserito in Avanzato –> Aggiungi CSS:

Attenzione: se scegliete un nuovo template (anche dal nuovo designer), il codice che avete inserito andrà perso e dovrete rimetterlo.

Sostituire il link “Leggi tutto…” con un’immagine

Se oltre a cambiarne l’allineamento volete anche sostituire il testo con un’immagine, tornate in Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa porzione di codice:

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

La parte che ho evidenziato in rosso va eliminata e sostituita con questa:

<img src="indirizzo immagine"/>

Dove ovviamente indirizzo immagine è l’indirizzo dell’immagine che avete precedentemente pubblicato online con Skydrive, Imageshack, Google Sites o qualsiasi altro servizio del genere. Il codice finale quindi apparirà così:

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

Ed ecco un esempio:

Per concludere

Se la scelta dell’immagine da usare è fatta con cura, la sostituzione del link fa sicuramente il suo effetto. Ho visto che alcuni blogger sono stati bravissimi a personalizzare la grafica del proprio blog e sicuramente sapranno sfruttare anche questa opportunità.

Altri articoli con modifiche simili o d’approfondimento:

• Sostituire con delle immagini i link "Post più vecchio", "Home", "Post più recente"
• Inserire un’immagine vicino ai titoli dei post su Blogger!
• Togliere o personalizzare il bordo dalle immagini nei post su Blogger
• Pubblicare le immagini su Imageshack e utilizzarle nel nostro blog
• Pubblicare immagini e file online con Windows Live Skydrive
• File hosting di 100 MB ma con tantissima banda con Google Sites
• Post espandibili finalmente nativi su Blogger

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!