Pubblicato il 11/03/14e aggiornato il

Come inserire il Continua a leggere automatico su Blogger.

Come mostrare in automatico su Blogger in homepage, etichette e archivio l'incipit del post con titolo, miniatura e snippet.
Qualche giorno fa abbiamo visto come realizzare una homepage di Blogger come una tabella di titoli, miniature e snippet. Con tale impostazione venivano visualizzati gli incipit dell'articolo in due colonne insieme alla miniatura della prima foto presente nel post. Vediamo una diversa opzione della stessa funzionalità in modo da visualizzare miniature e titoli dei post in una sola colonna non solo nella homepage ma anche nelle pagine di etichette e di archivio.

Con questa funzionalità sarà automaticamente inserito il Continua a leggere anche negli articoli già pubblicati. In questo modo tra l'altro si velocizzerà anche l'apertura di home, etichette e pagine di archivio con un indubbio vantaggio SEO nella velocità di caricamento media delle pagine. Questa personalizzazione è applicabile a tutti i modelli ufficiali di Blogger che non siano già stati troppo modificati.

read-more-automatico-blogger
La modifica riguarderà solo l'area del post mentre la sidebar rimarrà invariata. Se in un post non ci sono immagini ne verrà mostrato solo l'incipit con un numero configurabile di caratteri. Prima di procedere occorre salvare il template per un eventuale ripristino. Si va quindi su Modello > Modifica HTML e si cerca la riga </head>. Subito sopra si incolla questo codice

<!-- Read More Automatico Inizio -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.date-outer .post-outer{width:auto;margin:20px 0px 0px 20px;height:290px;}
.date-outer .post-outer .post-body {font-family:Georgia;font-size:13px;height:240px;}
.date-outer .post-header {margin:0px;}
.date-outer .post-outer h2.exe_post_TITLE {margin:0px;font-size:24px;font-family:Georgia;font-weight:normal;}
.date-outer .post-outer h2.exe_post_TITLE a:hover{text-decoration:underline;}
.date-outer .post-outer img.exe_post_IMG {width:240px;height:240px;margin-right:10px;float:left;}
.date-outer .post-outer .exe_post_Desc  {font-size: 13px;padding: 10px; text-align:justify; display: block;}
.date-outer .post-outer .post-footer {text-align:left;display:block;padding:10px;font-size:11px;}
#exe_readmore {background:#424242;color:#fff;padding:5px;text-decoration:none;margin-top:4px;display:block;width:120px;float:right;}
.post-title, .post-author, .post-timestamp, .post-icons, .post-labels, .post-location, .author-profile, .date-header, .jump-link {display:none;}
</style>
<script type='text/javascript'>
//<![CDATA[
var noImgSum = 800;
var imgSum =330;
var _0xa07b=["\x3C","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x3E","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","","\x6A\x6F\x69\x6E","\x63\x68\x61\x72\x41\x74","\x20","\x2E\x2E\x2E","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x69\x6D\x67","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x49\x56\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x49\x4D\x47\x22\x20\x73\x72\x63\x3D\x22","\x73\x72\x63","\x22\x20\x2F\x3E","\x3C\x68\x32\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x54\x49\x54\x4C\x45\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x32\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x65\x78\x65\x5F\x70\x6F\x73\x74\x5F\x44\x65\x73\x63\x22\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E"];function removeHtmlTag(_0xe2dax2,_0xe2dax3){if(_0xe2dax2[_0xa07b[1]](_0xa07b[0])!=-1){var _0xe2dax4=_0xe2dax2[_0xa07b[2]](_0xa07b[0]);for(var _0xe2dax5=0;_0xe2dax5<_0xe2dax4[_0xa07b[3]];_0xe2dax5++){if(_0xe2dax4[_0xe2dax5][_0xa07b[1]](_0xa07b[4])!=-1){_0xe2dax4[_0xe2dax5]=_0xe2dax4[_0xe2dax5][_0xa07b[5]](_0xe2dax4[_0xe2dax5][_0xa07b[1]](_0xa07b[4])+1,_0xe2dax4[_0xe2dax5][_0xa07b[3]]);} ;} ;_0xe2dax2=_0xe2dax4[_0xa07b[7]](_0xa07b[6]);} ;_0xe2dax3=(_0xe2dax3<_0xe2dax2[_0xa07b[3]]-1)?_0xe2dax3:_0xe2dax2[_0xa07b[3]]-2;while(_0xe2dax2[_0xa07b[8]](_0xe2dax3-1)!=_0xa07b[9]&&_0xe2dax2[_0xa07b[1]](_0xa07b[9],_0xe2dax3)!=-1){_0xe2dax3++;} ;_0xe2dax2=_0xe2dax2[_0xa07b[5]](0,_0xe2dax3-1);return _0xe2dax2+_0xa07b[10];} ;function EXEautoReadMore(_0xe2dax7,_0xe2dax8,_0xe2dax9){var _0xe2daxa=document[_0xa07b[11]](_0xe2dax7);var _0xe2daxb=_0xa07b[6];var _0xe2daxc=_0xe2daxa[_0xa07b[13]](_0xa07b[12]);var _0xe2daxd=noImgSum;if(_0xe2daxc[_0xa07b[3]]>=1){_0xe2daxb=_0xa07b[14]+_0xe2daxc[0][_0xa07b[15]]+_0xa07b[16];_0xe2daxd=imgSum;} ;var _0xe2daxe=_0xe2daxb+_0xa07b[17]+_0xe2dax9+_0xa07b[18]+_0xe2dax8+_0xa07b[19]+removeHtmlTag(_0xe2daxa[_0xa07b[20]],_0xe2daxd)+_0xa07b[21];_0xe2daxa[_0xa07b[20]]=_0xe2daxe;} ;
//]]&gt;
</script>
</b:if>
</b:if>
<!-- Read More Automatico Fine -->

Successivamente si clicca su Vai al widget > Blog1

vai-al-widget-blog1-blogger

Si cerca la sezione che determina l'aspetto del sito nei browser desktop che inizia con la riga
<b:includable id='post' var='post'>
Se il codice di tale sezione non fosse visibile si clicca sulla freccetta nera posta sulla sinistra. Si scorre il codice fino a trovare la riga
<data:post.body/>
Ce ne dovrebbero essere due uguali. Si sceglie la seconda in questa sezione che dovrebbe essere la terza in totale visto che una identica è presente anche nella sezione del codice per il mobile.

read-more-automatico
Si cancella tale riga e si sostituisce con quest'altro codice

<!-- Continua a Leggere Automatico Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> EXEautoReadMore(&quot;summary<data:post.id/>&quot;, &quot;<data:post.title/>&quot;, &quot;<data:post.url/>&quot; );
</script>
<a expr:href='data:post.url' id='exe_readmore'>Leggi tutto...</a>
</b:if>
</b:if>
<!-- Continua a Leggere Automatico Fine -->

Finalmente si salva il modello. Elenco le personalizzazioni più importanti:
  1. 290px è l'altezza dei post mostrati in homepage
  2. Georgia è la famiglia di font utilizzata come test
  3. height:240 e width:240 sono rispettivamente altezza e larghezza delle miniature
  4. background:#424242 è il colore di sfondo per il Leggi tutto mentre #fff è il colore del testo
  5. var noImgSum = 800 determinano il numero dei caratteri per i post senza foto
  6. var imgSum =330; è il numero dei caratteri per i post con immagini
  7. Leggi tutto… è l'espressione visualizzata che può essere cambiata. Se ne utilizziamo una più lunga occorre aumentare la larghezza che attualmente è di 120px
Concludo ricordando che si può mettere anche una immagine al posto della scritta Leggi tutto…. Per farlo basta sostituire nel secondo codice a Leggi tutto… questa riga

<img  src="URL_IMMAGINE" style="width:120px; float: right; margin: 0 10px 0 5px;" title="Continua a leggere" alt="Read More"/>

dove al posto di URL_IMMAGINE si incolla il Link diretto della immagine scelta che avremo precedentemente caricata su Picasa, Google+ Foto o altro hosting.
Fonte | Exe Ideas -




34 commenti :

  1. Forse con una personalizzazione del genere è meglio nascondere il footer al di fuori dei post, no?

    A ogni modo l'effetto è molto bello. :)

    RispondiElimina
  2. Credo che si possa anche fare diminuendo l'altezza dei post agendo sul valore di height
    @#

    RispondiElimina
  3. Ciao Ernesto, ho provato ad usare questo tuo codice su un template privo di altri script (con installato il modello semplice) e risulta completamente sfalsato: le immagini non si ridimensionano, il leggi tutto è inesistente, le immagini non ridimensionate sovrastano il post successivo ed i post perdono il titolo, oltre ad altre cose :/
    ti ho fatto uno screenshot di quello che appare a me, per capire meglio: http://i60.tinypic.com/2i0drih.jpg

    RispondiElimina
    Risposte
    1. Il codice non è mio. Alla fine del post c'è il link all'articolo originale del blog. Quando l'ho installato in un blog di prova ha funzionato, altro non so dirti.

      Elimina
    2. pensavo potessi saperlo, perché ho visto che nell'immagine di anteprima anche sul tuo il primo "leggi tutto" risulta un po' sfalsato :)
      grazie comunque, sei sempre velocissimo! ;)

      Elimina
  4. A me piace tantissimo questa struttura grafica. Il mio problema è che sulle immagini (all'altezza del titolo, quindi più o meno a metà) compare una striscia bianca. A cosa potrebbe essere dovuto?

    RispondiElimina
    Risposte
    1. Incollami l'url di una pagina cui questa cosa sia evidente insieme a qualche altra informazione. Quando vado al PC gli do un'occhiata
      @#

      Elimina
    2. Oh, grazie! Ti basterà collegarti alla home ( www.scratchbook.net ) perché il primo articolo contiene un'immagine. Altra cosa inspiegabile: stavo sfogliando il blog con la nuova configurazione per vedere se tutto fosse a posto e ho notato che alcuni articoli non rispettano la nuova formattazione (sebbene io utilizzi sempre la stessa procedura per scrivere un post. Anche volendo, non saprei fare altrimenti). Solo alcuni però. Questa cosa è anche meno sensata della prima.

      Elimina
    3. Aggiornamento! Ho risolto il problema degli articoli malformattati (!). In sostanza, era tutti articoli con le virgolette nel titolo. Magari può essere d'aiuto a qualcuno.
      (Ma per il bug della riga bianca sono ancora in alto mare).

      Elimina
    4. Si vede solo in homepage e probabilmente nelle pagine di etichette e du archivio. Hai un template particolare in cui nella home si vede il titolo e la descrizione con due differenti CSS
      h2.exe_post_TITLE:nth-child(2)
      span.exe_post_Desc:nth-child(3)
      La prima parte della immagine è mostrata con il primo CSS e quella più in basso con il secondo. Non è cosa semplice. Prova a incollare il codice
      h2.exe_post_TITLE:nth-child(2) {margin-bottom:-1px !important;}
      subito sopra alla fine del codice CSS cioè sopra alla solita riga con /b:skin
      P.S. Non garantisco :)
      @#

      Elimina
    5. Avessi capito una parola di quello che hai detto! :)
      Però ho eseguito, come al solito, senza pormi domande e no, nulla di fatto. Ma intendi titolo e la descrizione del post o del blog? Nel caso, si può risolvere portando il titolo sopra l'immagine? E quindi l'anteprima sarebbe titolo,poi sotto immagine e testo a destra? (Sto ipotizzando alternative perché non so proprio come risolverla).

      Elimina
    6. La divisione della foto dipende dal fatto che la parte superiore e la parte di sotto vengono mostrate separatamente nella home. Però non c'è stato un calcolo perfetto delle distanze da parte di chi ha realizzato il modello e quindi tra le due parti si vede la riga bianca proprio perché sono separate da 1/2 pixel forse 1 pixel
      @#

      Elimina
    7. Prova questo codice
      h2.exe_post_TITLE:nth-child(2) img {margin-bottom:-1px !important;}
      da incollare nello stesso punto
      @#

      Elimina
    8. Ah ecco. Il problema l'ho capito ma ho provato l'altra soluzione e non funziona. Non scoraggiarti però, che la terza è quella giusta!

      Elimina
    9. Ho provato a cambiare i margini dell'immagine e a farla capitare ad altezza del corpo del post, eliminando così la riga bianca. Il problema è che il titolo mi resta spostato a destra (come se l'immagine ci fosse ancora). Posso fare in modo che almeno il titolo venga messo sopra immagine e anteprima (spero di essermi spiegata umanamente).

      Elimina
    10. @# Non ti saprei dire. Con il tool Analizza elemento ho trovato quello che dovrebbe essere il problema. La soluzione purtroppo mi hai detto che non funziona :(. Non ti so dire di più. Sicura di aver incollato il codice che ti ho date nel punto giusto? cioè sopra a ]]></b:skin>

      Elimina
    11. Sì, ho provato di nuovo e non cambia nulla.

      Elimina
    12. Ho scritto un commento sul sito da cui hai preso il codice. Quello che mi chiedo è: è un problema solo mio? Perché nella tua anteprima non mi sembra ci sia questo problema.

      Elimina
    13. Ho capito, hai fatto la modifica presentata in questo post. Scusa ma spesso rispondo ai commenti senza guardare neppure la pagina dove vengono postati :)
      Credevo avessi scaricato il modello da internet. L'autore ha usato un linguaggio che non conosco quindi sono in difficoltà. Devi considerare queste tre linee di codice

      .date-outer .post-outer h2.exe_post_TITLE a:hover{text-decoration:underline;}
      .date-outer .post-outer img.exe_post_IMG {width:240px;height:240px;margin-right:10px;float:left;}
      .date-outer .post-outer .exe_post_Desc {font-size: 13px;padding: 10px; text-align:justify; display: block;}

      che hai aggiunto al modello. Prova a modificare il valore di padding o ad aggiungere un margin-top:-1px; o margin-bottom:-1px; per vedere se riesci a trovare la giusta combinazione
      @#

      Elimina
    14. Non so esattamente come, ma ho risolto il problema.
      Dopo due ore di prove, è venuta fuori questa cosa qui:

      .date-outer .post-outer h2.exe_post_TITLE {font-size:20px;font-family:Open sans;font-weight:normal; position: absolute;}
      .date-outer .post-outer h2.exe_post_TITLE a:hover{text-decoration:none;}
      .date-outer .post-outer img.exe_post_IMG {width:200px;height:150px;margin-right:10px; margin-top: 60px; float:left; }
      .date-outer .post-outer .exe_post_Desc {font-size: 13px; color:#666;padding-top: 60px; font-style: italic; text-align:justify; display: block;}
      .date-outer .post-outer .post-footer {text-align:left;display:block; font-size:12px; margin-top:-10px;}
      #exe_readmore {background:#fff;color:#111;display:block;width:100px;float:right; margin-top:10px; }
      .post-title, .post-author, .post-timestamp, .post-icons, .post-labels, .post-location, .author-profile, .date-header, .jump-link {display:none;}

      Elimina
    15. Ma come mai etichette e data non compaiono?

      Elimina
  5. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Hai il destro del mouse disabilitato. Scocciatura per chi deve analizzare il codice. Incolla questo codice

      .content {
      margin-top:-80px !important;
      }

      subito sopra alla riga

      ]]></b:skin>

      Se non va prova con quest'altro codice

      div.content {
      margin-top:-80px !important;
      }

      Se non funziona neppure quello leggiti questo post
      http://www.ideepercomputeredinternet.com/2011/02/come-eliminare-lo-spazio-superiore-nei.html
      @#

      Elimina



    2. Help Tecno Blog3 luglio 2015 20:18

      ora abilito, il problema è che proprio nel layout di blogger vedo un nuovo elemento aggiunto (un piccolo rettangolo posto tra navbar e header che non posso spostare né selezionare, bianco per intenderci) grazie mille delle risposta

      Elimina
    3. Risolto! Grande! Ora ti consigliamo su Twitter, grazie veramente

      Elimina
  6. C'è un modo per mostrare, tenendo questa personalizzazione, il primo post in modo diverso?

    RispondiElimina
    Risposte
    1. Non lo so :)
      Il codice l'ho preso dal blog linkato a fondo post e non è opera mia.
      @#

      Elimina
    2. Mi aggiungo anche io alla domanda sopra... molto tempo fa avevi fatto un tutorial su come visualizzare il primo posto in modo diverso (con i tag etc)... si potrebbe tentare di far agire il read-more automatico solo dal secondo post in poi usando la stessa condizionale?

      Elimina
    3. Il tag condizionale a cui fai riferimento esiste però non so come poterlo applicare a questa personalizzazione :(
      @#

      Elimina
  7. esiste invece il modo di poter disporre tutto come se fosse una griglia? Mi spiego meglio, per esempio in due colonne, con il titolo, sotto la miniatura, e sotto ancora il riassunto; poi accanto un altro post disposto in questo modo?

    RispondiElimina
    Risposte
    1. C'è questa soluzione
      http://www.ideepercomputeredinternet.com/2014/02/homepage-blogger-personalizzata.html
      tra l'altro trovata dallo stesso blogger che ha realizzato questa personalizzazione
      @#

      Elimina
  8. Salve, nonostante la bellissima descrizione non riesco ad aggiungerlo, mi viene doppio titolo, può aiutarmi?
    http://imsweetchiara.blogspot.it/

    RispondiElimina
  9. Il codice l'ho preso dal blog linkato a fondo pagina. Si tratta di un linguaggio di programmazione che non padroneggio. Presumo che il problema dipenda dal fatto che con il nuovo codice ci sono due righe data:post.body che raddoppiano alcuni contenuti
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.