Pubblicato il 18/09/10 - aggiornato il  | 3 commenti :

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

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

Coloro che lo vogliono personalizzare devono sostituirlo con uno di quelli riportati più in basso. Può essere semplicemente incollato solo nei modelli in cui non è presente. Se non fate la sostituzione vedrete due link di Read More il che non è esteticamente apprezzabile.

Ecco il codice da incollare se si vuole vedere l'immagine a sinistra e il testo a destra

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'> <span style='float:left; margin-left:5px'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='
http://lh6.ggpht.com/_nT13UtBmmiU/TJORw6Qny5I/AAAAAAAAOj4/hKRyZOEy7Zg/more-icon.jpg'/></a></span><span style='float:right; margin-right:20px'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
</div>
</b:if>

Oltre alla personalizzazione dell'immagine, che deve essere caricata su un hosting tipo Picasa o Skydrive, acquisitone l'URL e sostituito a quello evidenziato di rosso, è anche possibile settare l'esatta posizione dell'immagine e del testo mediante i pixel inseriti in margin-left e margin-right che ne determinano la distanza dai bordi. Ecco come si presenta in questo caso il riassunto di un articolo in home page

read-more

I collegamenti all'intero articolo saranno attivi sia nell'immagine che nel testo, quindi il post può essere aperto indifferentemente cliccando su uno dei due. Se invece si preferisce la configurazione opposta, cioè testo a sinistra e immagine a destra, si deve incollare questo codice

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<span style='float:left; margin-left:10px'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
<span style='float:right; margin-right:20px'>
<a expr:href='data:post.url + &quot;#more&quot;'><img alt='read more' border='0' src='http://lh6.ggpht.com/_nT13UtBmmiU/TJORw6Qny5I/AAAAAAAAOj4/hKRyZOEy7Zg/more-icon.jpg'/></a></span>
</div>
</b:if>

che porta a un risultato di questo genere

 read-more-destra

Anche in questo caso si possono personalizzare i margini come illustrato in precedenza. Spero che qualcuno non mi chieda di mettere immagine e testo entrambi a destra visto che tutte le altre opzioni le ho già illustrate! Sarebbe comunque possibile farlo semplicemente sostituendo, in uno dei due codici, float:left; con float:right; e configurando i margini nel modo desiderato.

Ricordo che per l'installazione bisogna andare su Design > Modifica HTML e espandere i modelli widget. Si cerca la riga <data:post.body/> e si sostituisce il codice di inizio pagina con uno di quelli proposti, quindi si Salva il modello.





3 commenti :

  1. Buongiorno,

    il mio nome è Emiliano e faccio parte dello staff del sito di Smilla ( http://smillamagazine.com ), un aggregatore che offre una rassegna stampa quotidiana degli articoli pubblicati su siti di informazione e blog inerenti il mondo della tecnologia e del web in generale e che ha aperto recentemente.

    Mi permetto di contattarti dopo aver scoperto il tuo blog , che contiene articoli che rispondono perfettamente ai nostri criteri di pubblicazione e che quindi potrebbero essere inseriti nel nostro sito.

    Il funzionamento di Smilla è molto semplice: una volta che un blog si iscrive sul nostro sito estrapoliamo per ogni articolo pubblicato un brevissimo snippet o breve riassunto che dir si voglia, del testo, pubblicando così una notizia incompleta che può essere letta nella sua versione integrale, seguendo il link apposto alla fine.

    Ti ricordo che gli aggregatori di notizie sono un prezioso strumento per accrescere la popolarità di ciascun blog citato poichè includono sempre un link diretto al post originale generando visibilità, popolarità e traffico. Ogni articolo aggregato su Smilla appartiene al legittimo autore e ne viene comunque indicato il link per risalire al post originale. In nessun caso SMILLA pretende di rubare contenuti altrui, ma spera di offrire un servizio d'informazione organizzata e sistematica per velocizzare la diffusione e la propagazione dei contenuti stessi.

    Sperando che il progetto di Smilla possa interessarti, rimango a disposizione per qualsiasi dubbio o richiesta di informazione.

    Per l'iscrizione su Smilla è sufficiente compilare il modulo raggiungibile all'url: http://smillamagazine.com/aggiungi_sito.aspx

    Cordialmente

    Emiliano B.

    P.S: scusa se ho utilizzato il form dei commenti ma non ho trovato una sezione contatti

    RispondiElimina
  2. Ahahaah Parsifal penso che tra qualche istante mi odierai profondamente... xD
    Mi sa che mi sono spiegata male perché io intendevo portare tutto a destra...
    Ok, un quarto d'ora nell'angolino per me!

    Grazie, fatto tutto!

    PS Il motivo per cui desideravo portare tutto a destra è semplice. Ho link within e ho deciso di metterlo in home page. La scritta "continue reading" non si leggeva perché era quasi attaccata a quella di link within.
    Grazie mille!

    RispondiElimina
  3. @Marguerite N.
    Ti ho postato i due codici sulla tua Bacheca FB perché nei commenti non si può inserire HTML.

    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