Ci sono diversi metodi per realizzare questa personalizzazione che devo dire suscita particolare interesse tra gli utenti di Blogger considerato il numero dei commenti che ricevono i post che la trattano. Ne fanno fede questo post sugli articoli sintetici e quest'altro sul read more con miniature. In questo articolo presenterò un nuovo procedimento che ricalca in sostanza quelli precedenti ma che ha maggiori possibilità di personalizzazione. Si tratta di mostrare in automatico solo le prime righe del post insieme a una miniatura dell'immagine, ammesso che l'articolo ne contenga almeno una. Ricordo che, come al solito, vengono rilevate solo le foto postate con l'Editor di Blogger e non quelle inserite per esempio tramite Windows Live Writer.
Andate su Design > Modifica HTML e salvate il modello completo. Espandete i modelli widget e cercate la riga </head>. Immediatamente sopra incollate questo codice
<link href='https://sites.google.com/site/scriptperilblog/javascript-2/leggi-tutto.css' rel='stylesheet' type='text/css'/>
Adesso cercate la riga <data:post.body/>. Cancellatela e sostituitela con quest'altro blocco di codice
<b:if cond='data:blog.pageType == "item"'><data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/>
<b:if cond='data:post.hasJumpLink'><data:post.body/><b:else/>
<b:if cond='data:post.snippet'><b:if cond='data:post.thumbnailUrl'><div class='Immagini'><img expr:src='data:post.thumbnailUrl'/></div></b:if> <data:post.snippet/><div class='Elementi'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Continua a leggere...</a></div>
<b:else/><data:post.body/></b:if></b:if></b:if></b:if>
Dove l'espressione Continua a leggere… può essere sostituita da un'altra a piacere. Salvate il modello. Se adesso aprite la homepage, vedrete che i post presenti hanno assunto questo aspetto
Con l'espressione Continua a leggere… all'interno di un rettangolo grigio che muta il gradiente al passaggio del mouse e una miniatura della foto sulla destra. Si possono fare ulteriori personalizzazioni sul link che invita a aprire il post e su altri aspetti grafici. Occorre modificare il file CSS per quello che riguarda i colori o eventuali immagini di sfondo. Lo consiglio solo a chi abbia un minimo di esperienza sui codici dei colori. Si può anche spostare la miniatura sulla sinistra (left al posto di right) e modificarne le dimensioni. Il CSS modificato dovrà essere caricato su Google Sites (modalità Schedario) o Dropbox; ne dovrà essere acquisito l'hotlink e sostituito nella riga di codice che viene inserita nella sezione <head>. Questo codice non avrà effetto sulle pagine statiche che continueranno a essere pubblicate e visualizzate con le stesse modalità.
grazie per l'informazione,mi sarà molto utile
RispondiEliminaCiao, molto interessante!
RispondiEliminaA tal proposito volevo chiederti se fosse possibile usare quel css e quel metodo per visualizzare, con lo stesso stile, le miniature di un paio di articoli in evidenza e lasciare magari il resto dell'homepage con la visualizzazione classica!
Grazie e complimenti per il blog!
@Oberon
RispondiEliminaPuò darsi che sia anche possibile ma francamente non saprei da dove cominciare ^_^
@Ernesto T.
RispondiEliminagrandissimo!davvero utile,visto i tanti articoli che pubblico insieme a volte.premesso che ho provato anche a installare gli articoli sintetici senza fortuna,volevo chiederti se era possibile modificare il numero di righe del post visibili.
@TUTTI GLI SCANDALI DEL VATICANO Non con questo metodo
RispondiElimina@Silvia Marasacchio
RispondiEliminaSe usi Google Sites per caricare il file CSS ti conviene salvarlo in formato CSS mediante Notepad++
http://www.ideepercomputeredinternet.com/2009/12/notepad-per-modificare-modelli.html
Per il link diretto devi eliminare l'ultima parte dell'URL cioè il punto interrogativo e tutto quello che viene dopo. Es:
Al posto di questo
https://sites.google.com/site/machecavolocom/script/leggi-tuttotxt.txt?attredirects=0&d=1
deve essere messo quest'altro
https://sites.google.com/site/machecavolocom/script/leggi-tuttotxt.txt
Ripeto però che è meglio usare l'estensione css al posto della txt
Questo effetto, intelligente, utile e comodo, sia per chi scrive, che per chi legge, si può avere solo in riferimento agli articoli o post di un blog su blogger oppure lo si può inserire anche nel contesto di una o più pagine statiche e, se si, come?
RispondiEliminaGrazie per la risposta.
Questo effetto, intelligente, utile e comodo, sia per chi scrive, che per chi legge, si può avere solo in riferimento agli articoli o post di un blog su blogger oppure lo si può inserire anche nel contesto di una o più pagine statiche e, se si, come?
RispondiEliminaGrazie per la risposta.
@Scl
RispondiEliminaIl metodo è applicabile solo con le caratteristiche descritte. Si può solo editare il CSS https://sites.google.com/site/scriptperilblog/javascript-2/leggi-tutto.css
per modificare colori e posizioni
Grazie per la risposta, nonchè per la cortesia e l'utilità della stessa.
RispondiEliminaMa crediamo di avere formulato in modo non sufficientemente chiaro le nostre domande e ciò a motivo della nostra scarsa dimestichezza col linguaggio tecnico di internet, anche se lei è una delle rarissime persone che usa un linguaggio accessibile a tutti e che non da per scontate in capo a chiunque conoscenze spiccatamente tecniche.
Cerchiamo di essere più comprensibili qui, scusandoci per non esserci riusciti prima.
La descrizione che ha fatto della procedura da seguire per ottenere l'effetto desiderato e mostrato nell'immagine che ne ha allegato è chiara e non ha bisogno di altre integrazioni ed, infatti, non non crediamo di averle voluto chiedere queste.
Ciò che volevamo sapere noi era solo se o se non questa stessa procedura si possa applicare anche a ciò che si scrive all'interno di una " pagina statica " di Blogger, che è una cosa diversa dalle pagine in cui vengo inseriti e conservati i vari post, atteso che, nella sua chiarissima illustrazione lei ne parla solo con riferimento ai post e non pure agli ambiti delle pagine statiche; e, se si, come si può fare?
Grazie ancora con tutta la nostra cordialità.
@Scl
RispondiEliminaLa risposta è che non mi risulta essere possibile creare dei riassunti delle pagine statiche né mostrare solo l'incipit del loro contenuto.
@Slc
RispondiEliminaMi correggo. E' possibile pubblicare una pagina statica anche con il riassunto. Basta andare nel normale Editor di Blogger e cliccare sull'icona Inserisci intervallo dopo che si è posizionato il cursore nel punto in cui si vuole creare la separazione.
Mi è successa una cosa strana, fino a poco tempo fa tutto ok.
EliminaAdesso sul blog in Home Page mi appaiono solo gli ultimi due post (tra l'altro riassunti con questo: http://www.ideepercomputeredinternet.com/2011/03/come-visualizzare-in-blogger-i.html )
Però io ho selezionato sia da Layou che da post e commenti il numero di 4 post da visualizzare ma invece ne appaiono solo 2.
Stessa cosa su un altro blog che praticamente è uguale ma li funziona bene e qua no. Cosa è potuto succedere? Potrebbe essere un numero eccessivo di immagini in home page?
Può darsi che i post siano troppo lunghi ma certo ce hai messo solo il riassunto ...
EliminaNon sono sicuro ma pare sia proprio il numero delle immagini, difatti ho creato un post senza immagini e appariva, mentre se lo creo con delle immagini non appare più.
EliminaForse le immagini le conta come lunghezza... dal css ho messo che non devono superare i 100 px però il problema rimane.
Non trovo la scritta in nessun modo poi come fare espandete i modelli widget con le nove modifiche ???
RispondiEliminacome fare ?
@# Non incollare lo stesso commento su più post altrimenti sono costretto a cancellarlo. Vai qui
Eliminahttp://www.ideepercomputeredinternet.com/2013/04/new-blogger-template-editor.html
e qui
http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html