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.

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

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.

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 -