Mostrare la Homepage di Blogger come una tabella di titoli, miniature e descrizione.

Come realizzare una homepage di Blogger con una tabella di titoli, miniature e descrizione.

La presentazione classica della homepage di Blogger è costituita dalla giustapposizione degli ultimi post pubblicati mostrati uno dietro l'altro fino al cosiddetto Read More o Continua a leggere. Ci sono molti modelli creati da disegnatori web che hanno invece la homepage suddivisa in tante celle di una tabella con il titolo e l'immagine estratta da ciascun post oltre che con l'incipit dello stesso articolo.

È noto che utilizzare dei template non ufficiali di Blogger comporta moltissime controindicazioni come la difficoltà di ulteriori personalizzazioni, la mancanza di aggiornamenti alle nuove funzioni inserite progressivamente da Blogger e anche una velocità di caricamento significativamente superiore. In questo articolo vediamo come si possa trasformare la homepage di un modello ufficiale di Blogger in una griglia con titolo, immagine e descrizione degli ultimi post pubblicati

  

Si può decidere di mostrare in home il numero di post che si vuole ma essendo posizionati due per due è consigliabile scegliere un numero pari. La personalizzazione non influirà sulla sidebar che con una modifica ulteriore potrebbe persino essere nascosta tramite opportuni tag condizionali.

Dopo aver salvato il template si va su Modello > Modifica HTML  e si clicca sull'area del codice. Dopo aver digitato Ctrl+F si cerca la riga </head> e, subito sopra, si incolla questo codice

<!-- ReadMore 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:46%;float:left;margin:20px 0px 0px 20px;height:490px;}
.date-outer .post-outer .post-body {font-family:Helvetica, Arial, Georgia;font-size:13px;height:432px;}
.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:260px;height:220px;margin-bottom:4px;}
.date-outer .post-outer .exe_post_Desc  {font-size: 12px;padding: 10px; text-align:justify; display: block;}
.date-outer .post-outer .post-footer {text-align:justify;display:block;padding:10px;font-size:11px;}
#exe_readmore {background:#555;color:#fff;padding:5px;text-decoration:none;margin-top:4px;display:block;width:140px;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 = 900;
var imgSum =200;
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 -->

Adesso si va su Vai al widget > Blog1 e si cerca la sezione

<b:includable id='post' var='post'>

Si clicca sulla freccetta nera per visualizzare tutto il codice 

Si cerca mediante Ctrl+F o si scorre fino a trovare la riga <data:post.body/> . Ce ne potrebbe essere una soltanto o anche due. Cancellate la prima e sostituitela con questo codice.

<!-- Read More Automatico Script 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'>Continua a leggere... </a>
</b:if>
</b:if>
<!-- Read More Automatico Script Fine -->

Se ce ne fossero due di righe e con la prima non funzionasse provate con la seconda. Ora si va sempre su Vai al widget > Blog1 e si cerca la riga <b:includable id='nextprev'>. Subito sotto si incolla la riga

<div style='clear:both;'/>

Finalmente si salva il modello. Elenco brevemente le principali personalizzazioni:

1. La dimensione delle miniature 260 pixel di larghezza e 220 di altezza
2. La famiglia di font del titolo e della descrizione
3. Il colore di sfondo del Continua a leggere #555 e il colore del testo #fff
4. Il numero di caratteri da mostrare nella descrizione se non ci sono immagini (900) e se invece ci sono immagini (200)
5. L'espressione  Continua a leggere… e la larghezza del suo sfondo  (140 pixel)
6. La giustificazione del testo text-align:justify;

Fonte | Exe Ideas -