Pubblicato da Denvoizer | 20:10 | , , | 10 commenti »

Abbiamo gia postato una articolo dedicato ai famosi post espandibili; la possibilità di "troncare" gli articoli che si trovano sulla home page aggiungendo un pulsante oppure un link del tipo "leggi tutto l'articolo" per aprirlo interamente.
Oggi ,cari amici, ho per voi un nuovo e semplicissimo metodo per creare quest ultimi, un metodo creato da Mohamed Rias.
le novità sono:

L'impostazione dell'articolo viene fatta in AUTOMATICO: non c'è più bisogno d'inserire lo span

<span id="fullpost">

</span>
come spiegato in quest articolo

La creazione automatica dei thumbnails : l'anteprima di un'immagine più grande (presente nello stesso articolo ) presentata in formato ridotto.

Ora vediamo quali sono i passi da seguire:
Primo passo: Aggiungere il codice JavaScript nell'Header

Layout->Modifica HTML
Cercate il seguente tab: </head> -e non /header-(grazie a Dino per la segnalazione ;-) )
Copiate ed incollate il seguente codice immediatamente sopra questo tag.

<SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src='http://www.smashingtips.com/wp-content/uploads/2009/05/read-more.js' type='text/javascript'/>

Salvate il vostro template.

Ultimo passo: Aggiungere il codice nella parte corrispondente al post
selezionate la voce :"Espandi i modelli widget"
Ora cercate la seguente riga di codice : <p><data:post.body/></p>
E sostituitela con il seguente codice

<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://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/></a></span></div>
</b:if>

Salvate il vostro template.

ecco a voi un anteprima del risultato finale:

Spero che sia tutto chiaro... :-)
Aggiornamento 7/06/2009:
per poter cambiare la dimensione del Thumbnail (la foto "anteprima") basta cambiare questi due valori:
img_thumb_height = 130 (per l'altezza)
img_thumb_width = 281 (per la larghezza)

Per cambiare il pulsante READ MORE cercate questa riga nel secondo blocco di codice:
<img src='http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/>
potete mettere l'indirizzo di un'immagine oppure cancellare questa riga e sostituirla con un semplice "leggi intero articolo".

Scoprite anche



10 commenti

  1. Dino // ha detto... 7 giugno 2009 alle ore 13:09  

    Ciao nel mio template il tab header non riesco a trovarlo.
    head è la stessa cosa??

  2. Denvoizer // ha detto... 7 giugno 2009 alle ore 13:22  

    Oddio Dino GRAAAZIE per questa segnalazione!!!!
    infatti è quello il tag da considerare ( HEAD )
    grazie ancora Dino

  3. Dino // ha detto... 7 giugno 2009 alle ore 15:41  

    Ok adesso va quasi bene grazie
    un unico problema: ha spostato tutte le foto che
    ci sono nei vari post sulla sinistra deformandole).
    posso fare qualcosa per riportarle sulla destra?
    grazie
    p.s. ho aggiunto il link sul mio blog

  4. Denvoizer // ha detto... 7 giugno 2009 alle ore 17:55  

    Praticamente il compito di questo hack è quello di pescare la prima foto che si trova nell'articolo ed usarla come "Thumbnail" cioè una sorta di anteprima, per quanto riguarda la deformazione essa è dovuta al fatto che questo codice ridimensione la foto A:130 per L:281 è cosi per dare una visualizzazione ordinata della home page MA lei è liberissimo di modificarli in un qualsiasi valore.

  5. Dino // ha detto... 7 giugno 2009 alle ore 23:39  

    Grazie risultato raggiunto.
    buona notte

  6. Rosario // ha detto... 11 giugno 2009 alle ore 10:42  

    BELLO TU COMENTARIO SOBRE LAS VERDURAS...SEGUIRE MUY DE CERCA TUS 10 PASOS GRAZIE

  7. Unknown // ha detto... 8 maggio 2010 alle ore 13:52  

    bello! però ho un problema: esso infatti funziona anche nelle pagine inserite con l'apposito widget nel layout. E' possibile farlo funzionare solo sulla homepage? Grazie

  8. Unknown // ha detto... 20 maggio 2010 alle ore 09:33  

    oppure c'è la possibilità di annullare l'effetto in alcune pagine inserendo un determinato comando in html???

  9. Supersupergerod // ha detto... 5 marzo 2011 alle ore 13:31  

    ciao :)
    ho lo stesso problema di Ugo! sulle pagine statiche il post rimane espandibile e non si apre!
    c'è la possibilità di non applicare il codice espandibile alle pagine statiche? ciao :D

  10. Valentina Fantini // ha detto... 22 marzo 2015 alle ore 12:28  

    Ciao! utilissimo!! senti ma per mettere lìimmagine della thumb centrata come posso fare? Grazie

    Instagram: @mybluesjeans87_official
    MyBlueJeans - Facebook
    MyBlueJeans - Blog


Posta un commento