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 = "no-float" ; 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 == "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'><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".
Post
Ciao nel mio template il tab header non riesco a trovarlo.
head è la stessa cosa??
Oddio Dino GRAAAZIE per questa segnalazione!!!!
infatti è quello il tag da considerare ( HEAD )
grazie ancora Dino
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
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.
Grazie risultato raggiunto.
buona notte
BELLO TU COMENTARIO SOBRE LAS VERDURAS...SEGUIRE MUY DE CERCA TUS 10 PASOS GRAZIE
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
oppure c'è la possibilità di annullare l'effetto in alcune pagine inserendo un determinato comando in html???
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
Ciao! utilissimo!! senti ma per mettere lìimmagine della thumb centrata come posso fare? Grazie
Instagram: @mybluesjeans87_official
MyBlueJeans - Facebook
MyBlueJeans - Blog