15 ottobre 2009

64 commenti Condividi il post Facebook Twitter Google+

Post in forma sintetica su Blogger: la mia versione senza script

Ho sempre pensato di presentare nella homepage del mio blog gli articoli in forma sintetica seguendo i due post di Tenebrae (versione manuale e automatica) ma non mi andava di mettere mano all'html dei post che avevo già pubblicato né tanto meno di aggiungere altri script al blog (che già ne ha troppi).

Qualche mese fa ho anche pubblicato il post su come realizzare i Post espandibili su Blogger; l'unica differenza con i due metodi presentati da Tenebrae stava nel fatto che cliccando su "Leggi tutto..." il resto del post veniva visualizzato senza aprire una nuova pagina ma semplicemente rendendo visibile quella parte di post nascosta. Ovviamente sempre grazie ad uno script.

Da oggi, come potete vedere, nella homepage del mio blog i post sono in forma sintetica e la soluzione che ho trovato non utilizza script...

Su alcuni blog ho letto anche che Blogger ha introdotto da poco la possibilità di utilizzare i post espandibili grazie al nuovo editor; io l'ho provato sul mio blog di prova e preferisco utilizzare l'editor classico.

Vediamo insieme come realizzare la mia soluzione senza script!

Andate in Blogger - Layout - Modifica HTML e cliccate poi su Espandi i modelli widget. Trovate la riga di codice:

<p><data:post.body/></p>

e sostituitela con

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='height: 300px; overflow: hidden;'><data:post.body/></div>
<span class='readmore' style='margin-top: 15px; margin-left: 380px'><a expr:href='data:post.url'> Leggi tutto...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

In questa porzione di codice potete personalizzare il valore 300px, che rappresenta l'altezza della porzione di post che volete mostrare nell'homepage, e la dicitura Leggi tutto..., per il link che consente di visualizzare il resto nel post.

Potete anche scegliere uno style per la scritta Leggi tutto... da inserire nel css del blog o sostituirla con un'immagine o un pulsante.

Nel mio blog il css per abbellire il Leggi tutto... è il seguente:

.readmore a {
color: #9B0021;
font-weight: bold;
font-size: 10px;
text-decoration: none;
padding: 5px;
}
.readmore a:hover {
color: #F00036;
}

Resto a disposizione per ogni dubbio o chiarimento.
Copyright © Iole - Non è consentito ripubblicare, anche solo in parte, i post di questo blog senza l'esplicito consenso dell'autrice.

64 commenti

  1. Ciao, mi piace l'idea... ma dovevo dirtelo??? ma... e c'è un ma... perchè vedo una riga rossa in verticale su tutti i post? perchè uso ie??? è posizionata appena prima del "leggi tutto"... ciao

    RispondiElimina
  2. @Ale: l'unico browser su cui non avevo testato questa modifica al template era proprio IE. Grazie mille per avermelo segnalato. Sei un tesoro!!! Ora ho risolto ;)

    RispondiElimina
  3. Ciao, bello qesto post. Lo so, sono una frana con il pc, ma non riesco a trovare la riga di codice da sostituire.
    Io leggo, rileggo, scorro e...niente! Mi puoi aiutare?
    P.S. Lo so che mi aiuterai, a volte ti scrivo e-mail, perchè mi sembra di essere se non l'unica una delle poche che di PC ne sa poco o quasi niente! Sigh.
    CIAO,CIAO.
    Giuliana "GOGO".

    RispondiElimina
  4. @Giuliana "GOGO": non precoccuparti... non sei l'unica. Ricevo decine di email al giorno.
    Cmq come scrivo spesso nei post non tutti i template sono uguali, nel mio il codice da sostituire è <p><data:post.body/></p>, nel tuo (ho dato un'occhiata veloce, spero di non sbagliarmi) dovrebbe essere <data:post.body/>. Prova così e se hai ancora problemi, come ti ho già scritto nell'email, lo vediamo insieme domani :)

    RispondiElimina
  5. Interessante questo metodo, però io rimarrò col sistema di Blogger, perchè altrimenti dovrei modificare tutti i miei post passati. Inoltre preferisco scegliere io a che punto del post inserire il "leggi tutto...", ma ovviamente per chi non ha dal principio usato il "leggi tutto..." è più conveniente quest'altro metodo... :)

    RispondiElimina
  6. Ciao,
    grazie per il prezioso consiglio. Come faccio a inserire a fine post, una volta aperto qualcosa (anche javascript) tipo "Ritorna al sommario" per ritornare alla home del blog senza usare il tasto back?
    Grazie
    Paolo

    RispondiElimina
  7. @Den: con questa soluzione in effetti non puoi scegliere quale parte del post mostrare e in che punto inserire il "Leggi tutto...". Tutti i post avranno la stessa dimensione; io ho scelto di visualizzare solo i primi 300px del post perché alcuni miei post sono molto corti!
    @Paolo: per inserire alla fine del post il link "Torna alla home..." sostituisci il codice
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
    con
    <b:if cond='data:blog.pageType == "item"'><data:post.body/><span class='readmore' style='margin-top: 15px; margin-left: 330px;'><a expr:href='data:blog.homepageUrl'>Torna alla home... </a></span></b:if>
    personalizzando la scritta Torna alla home... e, in base al tuo template, il valore 330px del margine sinistro della posizione del link.

    RispondiElimina
  8. Ciao veramente interessantissima questa tua soluzione, l'adotterò sicuramemnte

    avevo leto la soluzione di Tenebrae ieri sera ma sicuramente la tua è veloce e funzionale .......... spero di non fare confusione ..... questa sera mi applico

    grazie
    Manu

    RispondiElimina
  9. Ciao Iole
    scusa se ti disturbo ancora
    volevo chiederti secondo te c'è la possibilità di ridurre la foto di testata, la mia è grande e occupa tutta la pagina vorrei ridurla un po' come la tua per capirci, ma non so dove mettere mano

    grazie ancora
    smack Manu

    RispondiElimina
  10. @Manu: ho dato un'occhiata al tuo blog e per quanto riguarda i post in forma sintetica forse nel tuo template non troverai <p><data:post.body/></p> ma solo <data:post.body/>.
    Per l'immagine di header, devi caricarne una più stretta... La tua ha dimensioni 755x566px. Devi crearne una con altezza inferiore, ma ovviamente non si vedrà tutto il fiore.

    RispondiElimina
  11. @Manu: un ottimo strumento online per modificare le foto è picnik. Carichi la tua foto, poi clicca su Modifica e poi su Ritaglia. Quindi scegli la parte della foto che vuoi visualizzare nel blog e clicca su OK; infine salvi l'immagine e la carichi come header sul blog. Prova e fammi sapere!

    RispondiElimina
  12. Ciao, molto interessante il tuo suggerimento, pero ho un problema, a me mi sballa tutti i video caricati, nel senso che, un video caricato in un post, mi esce in un'altro, ma solo con il mozzilla, con explore va bene, sai darmi un suggerimento?

    RispondiElimina
  13. @Mauro: ho appena provato a pubblicare un post nel mio blog di prova con più video e su firefox vengono visualizzati come dici tu. Ci lavorerò su e ti farò sapere. Grazie per la segnalazione!

    RispondiElimina
  14. ok, aspetto tue notizie, grazie in anticipo!

    RispondiElimina
  15. @Mauro: ho trovato una soluzione, non è il massimo ma funziona bene. Prova a sostituire la proprietà overflow: hidden; che trovi nel codice riportato nel post con overflow: auto;. In questo modo i video si vedono bene (nel senso che non compaiono in altri post) ma comparirà la barra di scrolling nei post lunghi. Prova e fammi sapere. Continuerò comunque a lavorarci su per trovare una soluzione migliore!

    RispondiElimina
  16. Grazie Iole, ora va meglio, l'ultima cosa che vorrei chiederti, se "leggi tutto..." posso allinearlo completamente a destra senza che va a capo? Grazie, ti faccio veramente tanti complementi

    RispondiElimina
  17. @Mauro: cambia il valore del margine sinistro margin-left: 380px; con un valore più basso (ad esempio margin-left: 310px;)

    RispondiElimina
  18. Ok ora è perfetto, grazie mille, se meglio dell'informatica del filmtv criminal minds :)

    RispondiElimina
  19. Ciao Iole!!!
    Finalmente ho trovato il tempo di provare e ....FUNZIONA!!!
    Grazie.
    Giuliana.

    RispondiElimina
  20. hi.. just dropping by here... have a nice day! http://kantahanan.blogspot.com/

    RispondiElimina
  21. Complimenti per il restyling del blog io uso quello di blogger; adesso i post nell' hompage sono molto più leggeri; soprattutto per chi usa immagini e video.
    Il tuo metodo è buono anche se bisogna stare attenti ad usare immagini e video.

    RispondiElimina
  22. Io l' ho sempre detto che sei un geniaccio! ..O si dice geniaccia??

    Cmq molto interessante veramente..e mettiamo anche questa modifica nel cassetto! ;D

    RispondiElimina
  23. ciao Iole: sono passata solo per un salutino!!! Ho cambiato il template ( son diventata matta per sistemarlo) ma naturalmente ci son due o tre cosette che proprio non sono riuscita a fare... ti scriverò!
    Per ora Ciao^^^

    RispondiElimina
  24. ciao!! è un po' che non ci si sente. bella soluzione per il "leggi tutto", Grazie!!

    RispondiElimina
  25. Bella anche questa nuova funzione!!! Sei un geniaccio!! ^_-

    L'unico pecco è che per ora preferisco poter far espandere i post nella Home senza dover per forza entrare nella pagina dei post.

    Ma lo consiglierò ad un amica!!!

    RispondiElimina
  26. Ciao Iole
    scusa mi sono accorta che non ti ho più ringraziata per l'aiuto che mi hai dato per la foto iniziale ............ a dir la verità ero convinta d'averlo fatto ma si vede che il ringraziamento è rimasto nella tastiera ......... sai l'età fa brutti scherzi

    ieri sera ho messo anche l'opzione del "LEGGI TUTTO" e funzinona, certo bisogna un po' abituarsi al fatto che sia un altezza definita ma si può fare basta prenderci la mano

    l'ho fatto sul blog prova e quasta sera lo riporto anche su quello ufficiale ...... ieri sera l'avevo fatto ma poi è andato in tilt internet prima di salvare così lo rifaccio ............... così faccio anche pratica ihhhhh

    buona giornata e grazie
    Manu

    RispondiElimina
  27. iole grazie mille per i tuoi prziosi consigli.... anche a me sarebbe piaciuto accorciare un po' i post della home page, purtroppo non ci riesco con blogger e probabilmente è dovuto al template, ma non trovo nemmeno la "famosa" scritta data:post.body/ con o senza < p > (chiedo scusa per come è stato inserito il codice, ma altrimenti non partiva il commento!) eppure ho letto e riletto tutte quelle scritte almeno 3/4 volte..... è possibile che l'abbia persa? ti andrebbe di aiutarmi a cercarlo? potresti dirmi in quale contesto cercarla? ovviamente l'ho cercata sia prima che dopo aver spuntato "espandi widget", dove sbaglio? Grazie anticipate!!! :D

    RispondiElimina
  28. @Il mondo in due Penny: ho dato un'occhiata al codice html del tuo blog e dovresti provare a cercare
    <div class='post-body entry-content'>
    subito dopo dovrebbe esserci <data:post.body/>.
    Prova e fammi sapere!

    RispondiElimina
  29. Grande Iole!!!! Grazie mille!! Non solo finalmente ho trovato la stringa e sono riuscita a di inserire il "leggi tutto, ma grazie ai consigli sui commenti ho inserito anche il "torna alla home" e ho anche sistemato le due diciture in modo che restino su una riga senza andare accapo!!!!
    Ti scoccio solo per sapere ancora una cosa ;D , se volessi le due scritte in corsivo, cosa dovrei fare? hai consigli per dire la stessa cosa di "torna alla home" utilizzando una frase più simpatica? a me non viene in mente altro :S
    Grazie ancora di tutto!!!!

    RispondiElimina
  30. @Il mondo in due Penny: per le scritte in corsivo sostituisci Leggi tutto... con <i>Leggi tutto...</i>

    RispondiElimina
  31. L'ho già detto e non mi stanco di ripeterlo, sei una grande!!! Ho apportato la modifica del corsivo e per il momento ho finito proprio di apportare modifiche! Grazie dell'aiuto che ci hai dato e spero tu voglia accettare uno dei premi che ci hanno appena assegnato, lasciaci il tempo di pubblicare il post così potrai ritirarlo.... grazie ancora di tutto! ;)

    RispondiElimina
  32. ops!! il premio è lo stesso, anche se arriva da due blog diversi! Vieni comunque a ritirarlo, ti aspettiamo! ;)

    RispondiElimina
  33. Cara Iole, sono di nuovo qui a disturbarti. Prima di tutto ti ringrazio per aver inserito sulla tua homepage il mio blog candy, questo mi onora moltissimo e mi spiace non averti ringraziata prima ma non me n'ero accorta, pur visitandoti spesso. Oggi ho un problemone. Ho da qualche giorno cambiato il template al mio blog e non posso più usare l'editor di blogger, nn mi facambiare caratteri, colori ed ora non posso più nemmeno inserire il plug per il leggi tutto, cosa per me semplicissima così potevo scegliere di volta in volta dove inserirlo. Mi dispiacerebbe cambiare il template perchè mi piace troppo. Che mi suggerisci?
    Grazie come sempre per la tua preziosa disponibilità
    Baci Ros

    RispondiElimina
  34. @roro: appena mi hai segnalato il tuo blog-candy, ho subito aggiunto il tuo banner nella sidebar!
    Per l'editor dei post, prova ad andare in Blogger - Impostazioni - Generale e in Seleziona post editor clicca su Editor aggiornato.
    Se hai ancora problemi contattami in chat!

    RispondiElimina
  35. Ciao Iole, oggi ho provato a modificare il colore del "Leggi tutto", inserendo il css da te indicato, solo che nonostante cambio il codice del colore, resta sempre quello di default cioè arancione, mentre per quello del passaggio del mouse posso modificarlo, come mai?
    Grazie

    RispondiElimina
  36. @Mauro: ho controllato il css del tuo blog e ho visto che il codice per il "Leggi tutto" sta prima del codice per i Links.
    Ti basta spostarlo dopo quello dei Link e tutto funziona!

    RispondiElimina
  37. Ciao Iole, volevo chiederti se per caso poi sei riuscita a risolvere il problema che si ha con questa variante dei post-sintetici-espandibili! Mi spiego, Non so se ti ricordi ma tempo fa ti segnalai che i video all'interno dei post andavo sballati rispetto alla forma sintetica, e grazie a una tua modifica, mi hai consigliato di mettere la barra dello scrolling. Purtroppo pero, mi accorgo che gli utenti non cliccano all'interno del post ma leggono con lo scrolling quindi non riesco a capire con le statistiche se alcuni tipi di articoli sono più interessanti o meno! Ora effettivamente, con la soluzione automatica di blogger, che ho provato su un mio blog di prova va bene, ma significa ripassarmi più di 1.000 post....Mi faresti un grande favore se riuscissi a farmi eliminare lo scrolling, senza avere problemi con i video! Grazie
    Un saluto
    MAURO

    RispondiElimina
  38. @Mauro: scusami se ti rispondo solo ora... Ho lavorato oggi pomeriggio al problema riguardo ai video con i post espandibili su Firefox e non sono riuscita a trovare una soluzione migliore. Ci lavorerò nuovamente appena possibile.

    RispondiElimina
  39. Ciao Iole complimenti per la soluzione!!! Dunque..allora un consiglio a tutti quelli che non riescono a trovare il tag

    Espandete i modelli Widget!!!!

    Secondo. se ci fai caso nel mio blog in alcuni leggi tutto mi taglia le parole del post...!! il mio blog è milanandoblog.blogspot.com

    In ultimo un consiglio...daresti un'occhiata?? siccome mi sono ispirato al tuo, come vedi non riesco ad unire il titolo del post con il corpo, come hai fatto tu, ti prego aiutami!!! e così anche il footer...di nuovo complimenti...un abbraccio

    RispondiElimina
  40. @MilanandoBlog: hai ragione, non ho specificato che occorre cliccare su Espandi i modelli widget, a volte do per scontato alcune cose.
    Riguardo al tuo blog, mi sembra che hai fatto un ottimo lavoro con lo sfondo del post senza il mio aiuto ;)

    RispondiElimina
  41. Ciao Iole,
    scusami se ti disturbo.. Probabilmente te l'avranno chiesto in moltissimi, però io non sono molto pratica dei blog e delle varie funzioni che v possono essere..
    Innanzitutto complimenti per il tuo.. Aiuti veramente tutti e in modo molto chiaro e gentile.. Io sarei impazzita.. =p
    Ho visto questo post e penso che anche per un blog "appena nato" come il mio, l'opzione "Leggi tutto" sarebbe perfetta.. Però non so dove mettere le mani..
    La riga che hai indicato, io non la trovo e se devo essere sincera al 100% non so nemmeno se sto cercando nel posto giusto.. Devo andare nel HTML del post, giusto?
    Potresti darmi qualche aiutino? Altrimenti non ne verrò mai fuori.. =p
    Grazie mille!!

    RispondiElimina
  42. @Yuka: scusami ma non l'avevo specificato... non bisogna cercare la riga nell'html del post ma in quello del template andando in Blogger - Layout - Modifica HTML e cliccando poi su Espandi i modelli widget.
    Aggiorno subito il post! Grazie per la segnalazione ^_^

    RispondiElimina
  43. grazie mille! ho dato un occhiata veloce e non trovo la riga.. =p però riproverò xkè ci devo riuscire.. =D grazie

    RispondiElimina
  44. Ciao Iole, avrei una domanda riguardo la personalizzazione di "leggi tutto" ed un'altra riguardo il link "torna alla home".

    nel primo caso: a che punto inserisco il seguente codice?

    .readmore a {
    color: #9B0021;
    font-weight: bold;
    font-size: 10px;
    text-decoration: none;
    padding: 5px;
    }
    .readmore a:hover {
    color: #F00036;
    }

    nel secondo caso (torna alla home): ho più di una riga di codice simile a



    quale devo sostituire?
    Grazie x l'eventuale aiuto :-)

    RispondiElimina
  45. @Alberto Fileti: ti consiglio di provare a seguire tutte le istruzioni riportate nel mio post e a fare delle prove in un tuo blog di prova. Purtroppo ogni template è diverso dall'altro, quindi non so dirti esattamente dove inserire il codice.

    RispondiElimina
  46. ciao Iole! intanto ci tengo a ringraziarti nuovamente perchè il tuo lavoro facilita il nostro!

    come ti ho accennato ho un problema sulla visualizzazione delle pagine statiche, se vai sul mio blog te ne renderai subito conto. ho usato un template che aveva già la funzione di "sommario" (nel mio template è function createSummaryAndThumb) e ho provato dii tutto ma non riesco a sistemarle in modo che si aprano mostrando tutto il post (se clicchi su leggi tutto neanche si espandono o si aprono in un'altra finestra)

    grazie mille

    RispondiElimina
  47. @DOCsubtitles: sono stata sul tuo blog e ho notato che il problema si presenta solo sulle pagine statiche e non sui post.
    Controllando l'html del blog, ho notato che quando sei in una pagina statica cliccando su "Leggi tutto..." ricarica la stessa pagina. L'unica soluzione è scrivere quella pagina senza utilizzare il codice per il "Leggi tutto...".

    RispondiElimina
  48. grazie Iole, infatti intendevo il post delle pagine statiche, scusa forse non è il linguaggio corretto :) il fatto è che ho provato qualsiasi cosa ma niente!! come faccio a scrivere quella pagina senza utilizzare il codice? io non ho modificato il codice html dei post era già tutto così quando ho installato il template... aiuto!!

    RispondiElimina
  49. @DOCsubtitles: mandami via email il codice html di una delle pagine statiche così ti dico cosa modificare.
    Per prendere l'html della pagina vai nell'editor di Blogger e clicca sulla scheda Modifica html (e non Scrivi).
    La mia email la trovi cliccando sulla terza icona del menu.

    RispondiElimina
  50. Ciao Iole complimenti per il Blog, io ho messo nel mio blog di prova il codice, funziona tutto, ma con explorer la seconda foto che si trova all'interno del post mi compare lo stesso in home.
    Come posso fare?

    RispondiElimina
  51. @Marco: se mi dai l'indirizzo del tuo blog, vedo cosa non va nel codice html.

    RispondiElimina
  52. hai ragione ecco l'indirizzo http://provadtt.blogspot.com/

    RispondiElimina
  53. @Marco: ho aperto il tuo blog con Internet Explorer 6 e vedo tutto correttamente. Tu che versione hai? Di solito comunque quella che crea più problemi è la 6 (io la utilizzo proprio per testare i miei script, se funziona su IE6, funziona anche su tutti gli altri browser).

    RispondiElimina
  54. Bo a me cmq si vede da schifo...cmq grazie lo stesso...

    RispondiElimina
  55. @Marco: mandami via email uno screenshot del tuo blog.

    RispondiElimina
  56. Ciao Iole, per caso è possibile agire sul codice e fare in modo che la sola immagine di apertura di un post abbia dimensioni predefinite, ad esempio 200px x 150px?

    RispondiElimina
  57. ciao iole! io sono un pò incapace e non riesco a trovare la riga da sostituire ...... mi poui aiutare ?? grazie 10000

    RispondiElimina
  58. @Vinnie e aleimp: mi dispiace non potervi aiutare in questo momento ma ho tante richieste e poco tempo a disposizione, mi sto quindi dedicando soltanto alle richieste di coloro che mi hanno già fatto una donazione, che come ho più volte ripetuto hanno la precedenza assoluta.

    RispondiElimina
  59. Non trovo la parte di codice che hai segnalato.... scusa il disturbo... ma potresti spiegarmi? ho fatto modello poi mod.cod. HTML poi espandi modelli widget poi per velocità ho fatto f3 e ho scritto la parte che avevi segnalato ma mi da zero risultati...

    RispondiElimina
  60. Non trovo la parte di codice che hai segnalato.... scusa il disturbo... ma potresti spiegarmi? ho fatto modello poi mod.cod. HTML poi espandi modelli widget poi per velocità ho fatto f3 e ho scritto la parte che avevi segnalato ma mi da zero risultati...

    RispondiElimina
  61. @SweetFairy28: come ho detto più volte i template non sono tutti uguali. Evidentemente nel tuo template la stringa da cercare differisce da quella che ho segnalato nel post. Se mi mandi il tuo template via email ti dirò cosa cercare esattamente.

    RispondiElimina
  62. Ok lo faccio subito scusami ancora il disturbo !

    RispondiElimina
  63. Il post mi è stato molto utile, Iole! ;D L'ho applicato solo che... mi comparivano i codici dopo ''Leggi tutto...'' e mi tagliava le foto xD poi con un po di pazienza sono riuscita a cancellare i codici e rimettere tutto a posto xDD

    RispondiElimina

Licenza Creative Commons This blog by Iole is licensed under a Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Copyright © 2008- iolecal.blogspot.it|Design by Iole|Privacy Policy