Pubblicato il 25/02/14 - aggiornato il  | 87 commenti :

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

homepage-blogger-griglia  

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 

tabella-homepage-blogger

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 -


87 commenti :

  1. si possono centrare foto di anteprima e titolo, ed esiste per caso la possibilità di impostare un codice che non deformi le immagini. Grazie mille per il tuo aiuto

    RispondiElimina
    Risposte
    1. Per centrare sostituisci text-align:justify; con text-align:center;
      La deformazione delle immagini come la chiami tu dipende dal rapporto tra le dimensioni 260 e 220 pixel rispetto alle immagini che hai pubblicato. Puoi modificare questi valori però se le immagini che posti non hanno tutte lo stesso rapporto altezza/larghezza ce ne sarà sempre qualcuna distorta
      @#

      Elimina
    2. infatti credo che per il futuro posterò diversamente. Stuzzicata da questo tuo post ho cambiato template, per rendere tutto più omogeneo, ed ho verificato che la visualizzazione in tabelle viene estesa anche alle pagine di archivio, e li ho un problema di sovrappone la visualizzazione dei linkwithin. Ora mi chiedo se ho impostato per quest'ultimo widget la visualizzazione solo nei singoli post, come mai li vedo anche nelle pagine dell'archivio del blog. Cosa posso fare? Non so se sono riuscita a spiegare bene il mio problema. Ti lascio l'indirizzo del mio blog www.madeinbottega.com. Grazie mille

      Elimina
    3. Se vedi LinkWithin anche nelle pagine di archivio significa che non hai impostato bene i tag condizionali. Leggi questo post
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html
      @#

      Elimina
    4. perfetto ho sistemato tutto, ma ho un ultimo piccolo problema non visualizzo il riquadro con i numeri di commenti

      Elimina
    5. Prova a andare su Layout > Post sul Blog > Modifica per vedere se c'è la spunta su Mostra numero di commenti comunque può darsi che l'elemento non venga mostrato con questa procedura
      @#

      Elimina
  2. È un articolo che aspettavo da tempo ma a me non funziona. Ho seguito alla lettera il procedimento ma in home page mi compaiono due pagine bianche e solo in fondo alla pagina mi compare un post in anteprima, ma senza immagine. Possibile che qualcosa faccia contrasto col nuovo codice? Grazie.

    RispondiElimina
    Risposte
    1. Ho testato il codice su un modello Simple e funziona. Può darsi che nel tuo template ci siano altre personalizzazioni tipo il Read More automatico o dei javascript che gli impediscono di funzionare oppure è possibile che non vada con modelli diversi da quello Semplice. Non ho testato con gli altri.
      @#

      Elimina
    2. Prova con la prima riga invece che con la seconda se ce ne fossero due.
      @#

      Elimina
    3. Ciao Ernesto e grazie di questo splendido spazio!
      Analogamente a quanto indicato da Maria, anche a me appaiono due "pagine bianche" (in realtà nel mio caso sembra lo spazio di due post "bianchi"...) e poi un post in anteprima (io visualizzo correttamente anche l'immagine).
      La cosa curiosa è che ho seguito pedissequamente anche quanto hai indicato in "Come inserire il Continua a leggere automatico su Blogger" ed in questo caso funziona tutto correttamente. Potrebbe essere un ulteriore indizio?
      Grazie anticipatamente!

      Elimina
    4. Purtroppo si tratta di una personalizzazione piuttosto ardita che in alcuni template funziona e in altri no. Tra l'altro il codice non è mio, si tratta di un linguaggio che non padroneggio e quindi non ti saprei dire neppure dove intervenire
      @#

      Elimina
    5. Comunque grazie mille, Ernesto!

      Elimina
  3. questo tuo lavoro è eccezionale!!! tra i migliori che hai creato: porta a nuove idee per progetti su blogger davvero entusiasmanti!!! consente di avere un layout da magazine o anche da sito senza dover usare un template scaricato, che come dici giustamente è spesso di difficile gestione.
    pensavo, a proposito di usare questa modifica per creare un blog con l'aspetto di un magazine: lo si potrebbe abbinare ad una slideshow orizzontale degli ultimi post, solo che così ci sarebbero dei doppioni, perchè appunto gli ultimi post sarebbero sia in slideshow che nella parte sottostante a "celle" creata con questa modifica; c'è quindi un modo per far sì che lgi ultimi post siano solo nella slideshow e che nelle celle ci siano quelli dopo, a scalare? ad esempio i primi 4 nella slideshow, poi sotto nelle celle dal 5 in poi...

    RispondiElimina
    Risposte
    1. Nelle celle è difficilissimo inserire i post non presenti nel primo widget che hai intenzione di inserire. Potresti però tentare di fare la cosa inversa cioè mostrare nello slideshow gli ultimi post esclusi quelli visibili in Homepage. Questa cosa però è fattibile solo per i gadget che abbiano l'URL dei feed. In questo caso infatti si può personalizzare l'URL per mostrare per esempio i post che vanno dal 9° al 16°. Leggi qui
      http://www.ideepercomputeredinternet.com/2012/05/come-visualizzare-un-determinato-numero.html
      nella sezione
      COME MOSTRARE UN NUMERO DETERMINATO DI FEED
      @#

      Elimina
    2. soluzione da provare... grazie mille per la dritta!
      buon lavoro :-)

      Elimina
  4. ciao Ernesto, ho inserito la prima porzione di codice prima del tag /head e già mi appaiono gli articoli divisi in tabelle solo che non appare il titolo.
    Essendo un template dove ho fatto diverse modifiche, non so dove mettere mano per fare apparire il titolo,
    Puoi darmi una mano?

    RispondiElimina
  5. Prova a aumentare l'altezza modificando il valore di height:220px;
    @#

    RispondiElimina
    Risposte
    1. ciao, niente, aumentando l'altezza creo dello spazio vuoto e non escono i tioli

      Elimina
  6. ciao Ernesto, nel ribadirti che sei il numero uno, ti chiedo anche un aiuto, nel mio template non trovo la riga .
    come posso ovviare?

    RispondiElimina
    Risposte
    1. Leggi questi due post e se hai ancora dei dubbi guarda i video tutorial
      http://www.ideepercomputeredinternet.com/2013/04/how-to-search-blogger-template-code.html
      http://www.ideepercomputeredinternet.com/2013/08/cercare-codice-html-blogger-template.html
      @#

      Elimina
    2. Ciao Ernesto, sono riuscito a la home page con il continua a leggere, le immagini ed il titolo però, quando apro un singolo articolo, mi esce duplicato nel senso che lo stesso articolo viene riproposto nella singola pagina 2 volte, sai da cosa può dipendere?
      Ciao

      Elimina
    3. Come ho già detto altre volte ogni template fa storia a sé e onestamente non saprei come aiutarti. Prova a andare su Layout per vedere se hai due elementi pagina Post sul blog
      @#

      Elimina
  7. Ernesto
    ciao.
    per caso c'è un modo per mettere il titolo prima della foto e per nascondere i commenti?
    ho provato con b if con
    e provando ad aggiungere nell'elenco di {display:none;} -dove ci sono .post-labels, .post-location, .author-profile, .date-header, .jump-link - la dicitura ".post-comments, "
    ma forse sbaglio o non è possibile.
    grazie

    RispondiElimina
    Risposte
    1. @# Intendi eliminare il link con i commenti dalla homepage, dalle pagine di etichette e di archivio? Procedci in questo modo. Trova il selettore dei commenti con questo tool
      http://www.ideepercomputeredinternet.com/2013/05/selettori-css-chrome-firefox.html
      Dovrebbe essere
      span.post-comment-link
      Se fosse questo crea un CSS tipo
      span.post-comment-link {display:none;}
      e ponilo tra tag condizionali in questo modo
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <style>
      span.post-comment-link {display:none;}
      </style>
      </b:if>

      Elimina
    2. Buongiorno Ernesto,
      mi sono accorta dopo anni che inserendo questo codice, i commenti sia esistenti che il format sono visibili solo nel primo post del blog e non negli altri.

      Ho provato ad eliminare il codice, fatto il controllo del HTML con il mio secondo blog dove invece funziona. Sono due giorni che ci sto su.
      Puoi illuminarmi?

      Il blog che non funziona è energiacreativapuntoorg
      grazie mille

      Elimina
    3. Purtroppo, come puoi constatare dal link di credit posto a fondo pagina, questo codice non è mio quindi non ti so aiutare, mi spiace. Si tratta però di un codice vecchio di 5 anni quindi sono cose da aspettarsi visto le modifiche continue apportare da Blogger al proprio codice
      @#

      Elimina
    4. Prova a modificare il modo in cui vengono pubblicati i commenti (incorporato, ecc...). Può darsi che in un blog funzioni e in uno no perché c'è un diverso sistema di pubblicazione dei commenti
      @#

      Elimina
  8. ciao! non riesco a far funzionare questo suggerimento, mi dice che nella sezione blog1 non posso caricare un elemento div ?!?
    come posso fare?

    RispondiElimina
    Risposte
    1. Forse ti riferisci all'inserimento della ultima riga visto che è l'unico div presente
      div style='clear:both;
      Non ti so dire. Prova a incollare questo codice alternativo

      &lt;div style=&#039;clear:both;&#039;/&gt;

      che è stato convertito in XML
      @#

      Elimina
    2. grazie! alla fine ci sono riuscita con il primo codice, ma ne viene fuori un casino di foto sovrapposte, probabilmente ho fatto qualche pasticcio in passato, con i vari cambi da autodidatta... non conosco per nulla il linguaggio di codificazione e mi sa che piuttosto che leggermi questi tuoi turorial strafighi dovrei prima leggermi i post in cui spieghi l'ABC ;)
      grazie comunque della risposta!

      Elimina
    3. Per l'ABC sul linguaggio HTML scarica il mio ebook gratuito
      http://www.ideepercomputeredinternet.com/2012/09/guida-html-ebook.html

      @#

      Elimina
  9. Ciao Ernesto...ancora complimenti per i tuoi grandissimi suggerimenti...avrei una domanda da porti: è possibile secondo te organizzare questo template in modo che siano tre le colonne invece che due?Grazie in anticipo per la risposta..Fabio

    RispondiElimina
    Risposte
    1. Onestamente non te lo saprei dire. Si tratta di un tutorial che ho ripreso e che non è mio. Se non sei super esperto ti sconsiglio di metterci mano :)
      @#

      Elimina
  10. Ciao, grazie per questo post, era quello che cercavo!! Una curiosità, c'è modo di far apparire il titolo, la data e la categoria sopra l'immagine??
    Chiedo troppo?
    :)

    RispondiElimina
    Risposte
    1. Non so se sia possibile solo che il codice di questa personalizzazione non è mio ed è in un linguaggio che non padroneggio per poter pensare a qualche modifica :(
      @#

      Elimina
  11. Grazie per il post che è veramente interessante. ho provato ad usare lo script. l'unico problema riscontrato è la quantità di post che posso gestire in home page: non so perché ne visualizza solo 5 al massimo, anche se ho impostato un numero di post molto superiore... non riesco a capire da dove nasca il problema. mi sai aiutare?

    RispondiElimina
    Risposte
    1. Questa è una cosa comune a tutti. Blogger su Impoostazioni > Post e Commenti mostra in Home più post possibili in funzione del numero prescelto. Prova a usare la funzione Inserisci intervallo per mostrare in home solo la prima parte dell'articolo e allora vedrai che aumenteranno anche il numero di post visualizzati
      @#

      Elimina
    2. Anche io ho questo problema. Benché abbia impostato nelle impostazioni di visualizzare 10 post, prima si vedevano solo 4 post, e adesso che ne ho pubblicato un altro si vede solo uno nella Home. Non è che c'è qualche codice che blocca il numero dei post?

      Elimina
    3. E' uno dei tanti misteri di Blogger. Credo che dipenda dalla lunghezza e dalla pesantezza dei post. Più sono grandi meno se ne vedono. Per ovviare inizia a pubblicare con Inserisci Intervallo in modo da mostrare in Home solo l'incipit del post. In questo modo ne potrai visualizzare anche 20
      @#

      Elimina
    4. Grazie mille, ho risolto. In pratica negli ultimi post che avevo pubblicato non avevo inserito l'intervallo! Adesso posso visualizzare tutti i post che voglio!
      Grazie mille per la risposta e per tutti gli aiuti che ci dai!

      Elimina
  12. Ciao Ernesto grazie per il tuo lavoro minuzioso e complimenti per il tuo sito, vorrei sapere se è possibile disporre l'elenco in verticale :D

    RispondiElimina
    Risposte
    1. Ma l'elenco è già in verticale :)
      Si tratta di una tabella che è in funzione delle dimensioni dell'area del post. Comunque per rispondere alla tua domanda questo codice è stato creato da Exe Ideas e onestamente non credo sia facile modificarlo :)
      @#

      Elimina
  13. Grande Ernesto, per il contributo che dai sul web. Volevo chiederti, ho eseguito tutti passaggi e va tutto bene, tranne una cosa: i post mi escono 1 sotto l'altro, e non a coppie di 2. Come mai? Cosa posso fare? Grazie

    RispondiElimina
    Risposte
    1. Il codice non è mio. Alla fine del post c'è il link all'articolo da cui l'ho preso. Si tratta inoltre di un linguaggio che non padroneggio quindi non ti posso aiutare :(
      @#

      Elimina
  14. ho un problema ho seguito tutte le tue istruzioni e però i post in home mi compaiono uno sotto l'altro in un'unica colonna invece io vorrei che venissero in due, anche tre colonne e senza testo sotto come posso fare??

    RispondiElimina
    Risposte
    1. Devi fare delle prove. Comincia a diminuire la larghezza in questi tre parametri

      width:46%
      width:260px
      width:140px

      sostituendoli per esempio con

      width:42%
      width:200px
      width:100px

      e vedi come viene poi i numeri li adatti al tuo layout
      @#


      Elimina
    2. Grazie mille cosi funziona :)

      Elimina
  15. Ciao Ernesto,
    volevo chiederti se sia possibile allineare in basso i riquadri "continua a leggere", in modo che, in caso di titoli lunghi su più righe, non risultino in posizioni diverse.
    Grazie

    RispondiElimina
    Risposte
    1. Non capisco la domanda. Se apri la Homepage di questo blog i Continua a leggere sono già tutti allineati a sinistra e non hanno il titolo del post accanto. Forse hai un modello personalizzato scaricato da internet
      @#

      Elimina
    2. Mi sono spiegata male, vedo di chiarire.
      Anzitutto premetto che il modello è Travel di Blogger, quindi nessun modello personalizzato. E che ho messo in homepage una griglia di 4 post sulla prima riga e 4 su quella sottostante.
      Nei post che hai usato tu hai messo dei titoli che fanno TITOLO10, TITOLO9, TITOLO8, TITOLO 7, Quindi i tuoi titoli occupano uno stesso numero di righe (in questo caso 1). Sono titoli brevi.
      Nel blog che sto costruendo ora i titoli sono molto più lunghi ed arrivano, quindi, ad occupare non una, ma più righe (a volte 2 a volte 3).
      La lunghezza del titolo influenza chiaramente la posizione del riquadro "continua a leggere", visto che il numero di caratteri è fisso. Quindi se, su una stesa riga, mi trovo post che hanno titoli con lunghezze diverse i riquadri risultano un po' bassi e un po' alti.
      Spero di essere stata più chiara.
      Se vuoi dare un'occhiata: https://ispirazioninfiera.blogspot.it/
      Ti rendo conto meglio della cosa se vedi la seconda riga di post.
      Grazie

      Elimina
    3. Mi pare una cosa veramente trascurabile. Cerca di fare titoli più corti che tra l'altro sono anche più attrattivi dal punto di vista SEO.
      @#

      Elimina
    4. Ci sono tornata sopra su questo discorso qui sopra (sono sempre io, in altra veste), i riquadri non allineati mi disturbavano. Ho risolto, rendendoli non visibili, in questo modo i titoli possono essere su 1,2 o 3 righe e non cambia nulla ai fini dell'allineamento (anche se, in generale, vedrò di farli più corti).
      Invece una domanda: se io faccio una ricerca per etichette, i riquadri mi escono in maniera corretta, come nella homepage, solo che - non ho idea del perché - il primo risulta sempre (provato con ogni etichetta) più alto.
      C'è modo di rimediare? Lo trovo proprio brutto.
      https://ispirazioninfiera.blogspot.it/search/label/Multimateria

      Elimina
    5. Non esistono tag che possano modificare le dimensioni di un elemento in funzione di parametri che neppure siamo in grado di determinare con esattezza :(
      @#

      Elimina
  16. No, aspetta, non mi sono spiegata bene (mi sono persa un pezzo)
    Il problema sopra l'ho risolto. E vale sia in home che quando ricerco per etichette. Ho eliminato il riquadro con "continua a leggere", tanto al post ci si arriva comunque clikkando sul titolo.
    Quello che invece volevo chiederti ora .... se ricerco per etichette il primo post che esce (il suo riquadro con foto, titolo e descrizione) risulta più alto degli altri. Io non voglio modificare la sua dimensione, vorrei che fosse alla stessa altezza degli altri. Così come poi è in homepage.
    Cioè la domanda è, in sostanza, perchè risulta più alto?
    Spero di essere stata più chiara

    RispondiElimina
    Risposte
    1. Non mi sono spiegato bene anche io. Il concetto è lo stesso. Bisogna modificare delle distanze in funzione di non si sa cosa quindi vale quello che ho scritto nel precedente commento
      @#

      Elimina
  17. Ah ok, perfetto. Pazienza.
    Grazie di tutto, sempre gentilissimo!

    RispondiElimina
  18. Ciao Ernesto.
    Siccome sono di coccio, ho contattato i tizi di Exe Ideas.
    Il problema del non allineamento dei riquadri, quando si fa la ricerca per etichette, si risolve così

    Find The Below CSS And Delete It.

    .main-inner .date-outer{
    margin-bottom: 2em;
    }

    Spero di fare cosa gradita a fartelo sapere.

    RispondiElimina
    Risposte
    1. Grazie della info utile a chi avesse utilizzato questo tipo di layout
      @#

      Elimina
  19. Ciao, grazie mille dei tuoi consigli. Ho applicato il codice seguendo le tue indicazioni e funziona. Ora sto giocando con le dimensioni per adeguarlo al mio blog, ho solo un dilemma. Vorrei centrare l'immagine con il testo, perché per ora mi risulta tutta spostata a sinistra rispetto al testo. Ho provato ad allineare con il comando center ma nulla.
    L'unica soluzione è che ingrandisco l'immagine con la grandezza del post e poi aumentare l'altezza del post, ma così mi viene tutto troppo grande.
    C'è un modo più immediato?
    Grazie mille
    Miriam

    RispondiElimina
  20. Fai riferimento a questa riga
    .date-outer .post-outer img.exe_post_IMG {width:260px;height:220px;margin-bottom:4px;}
    che configura la posizione della immagine. Prova a aggiungere margin-left:30px; in questo modo
    .date-outer .post-outer img.exe_post_IMG {width:260px;height:220px;margin-bottom:4px; margin-left:30px;}
    per distaccare l'immagine dalla sinistra. Se non bastano 30 pixel prova con un numero superiore. Prova anche con il tag padding-left:30px; se quello precedente non funzionasse

    @#

    RispondiElimina
  21. Ciao, di nuovo io. Sono riuscita a sistemare la home page e mi piace il risultato ottenuto.
    Ora però mi piacerebbe adeguare le altre pagine del mio menù con questo tipo di layout.
    Per ora io ho un menù orizzontale con le pagine statiche, le quale contengono l'elenco dei link dei post.
    C'è un modo di far vedere questo elenco nello stesso modo della homepage?
    grazie mille per il tuo lavoro.
    Miriam

    RispondiElimina
    Risposte
    1. Prova a leggere questo post
      http://www.ideepercomputeredinternet.com/2012/10/blogger-menu-pagine-altezza-larghezza-centrare-personalizzare.html
      per vedere se trovi qualcosa di utile per le tue esigenze
      @#

      Elimina
    2. Ciao, allora ho visto il link, ed avevo già effettuato questa operazione per personalizzare la barra del menù. La mia domanda era un altra.
      Vorrei fare in modo che il contenuto delle pagine del menù abbia lo stesso layout della home page. E' una cosa fattibile o sogno?
      Ciao grazie

      Elimina
    3. Vuoi dire di mettere su due colonne il contenuto? Questo si può fare
      http://www.ideepercomputeredinternet.com/2013/05/dividere-post-blogger-colonne.html
      poi il resto dipende da quanto sei brava. Onestamente non ne vedo la necessità
      @#

      Elimina
  22. Ciao! Funziona alla grande! Però, siccome il mio sito non prevede né commenti ai post e né pulsanti di condivisione, le miniature mi escono troppo spaziate tra loro (in senso verticale). Come posso eliminare quegli spazi?
    Grazie

    RispondiElimina
    Risposte
    1. Prova a sostituire
      margin:20px 0px 0px 20px
      con
      margin:5px 0px 0px 5px

      per diminuire la distanza di 15 pixel in alto e in basso e vedere poi se l'aspetto migliora
      @#

      Elimina
    2. Poi eventualmente prova anche con
      margin:5px 0px -5px 20px

      @#

      Elimina
    3. Non funziona...
      Inoltre ho un altro problema: benché io abbia impostato 10 post nella pagina principale, ne vengono visualizzati solo 4...

      Elimina
    4. Nella Bacheca -> Impostazioni -> Post e commenti c'è scritto "Mostra·più·post·possibili ". Se ne vengono mostrati solo 4 è perché sono troppo lunghi. Forse non utilizzi la funzione Inserisci intervallo
      @#

      Elimina
  23. Che intendi per "inserisci intervallo"? Il tag "more"?

    RispondiElimina
    Risposte
    1. Sì. Se passi con il mouse sopra a quel pulsante si visualizza quella scritta
      http://i.imgur.com/tAGwGIz.jpg
      @#

      Elimina
  24. Ah okay, speravo di poterlo evitare... Grazie comunque!

    RispondiElimina
  25. Ciao Ernesto,

    ho verificato un altro problema con questo modello ed è il seguente.
    Quando si effettua una ricerca per etichette vengono rilevati solo un numero limitato di post, non tutti.
    Non dipende sicuramente dal discorso dell'interruzione di pagina, perché - visti i problemi di cui sopra - l'interruzione di pagina è sempre stata inserita per favorire caricamento in homepage.
    Il fatto è che vengono trovati solamente 20 post, anche se il loro numero è maggiore.
    Faccio un esempio pratico: https://ispirazioninfiera.blogspot.it/search/label/Lazio
    Troviamo 20 post con etichetta LAZIO, quando in realtà ci sono 29 post che recano quell'etichetta.
    Il discorso vale anche per altre etichette.
    Penso che questo sia un limite non da poco, perchè penalizza e non di poco la ricerca.
    Credi ci sia un qualche parametro da modificare per ovviare a questo inconveniente?
    Grazie

    RispondiElimina
    Risposte
    1. Guarda che il problema è esattamente l'opposto. Blogger ha scelto di non fare indicizzare le pagine di etichette per evitare che i post venissero indicizzati due volte. Però Google le indicizza lo stesso. Puoi avere maggiori informazioni leggendo questo post
      http://www.ideepercomputeredinternet.com/2012/07/etichette-blogger-google.html
      Ma forse tu ti riferisci al fatto che si "vedono" solo 20 post. Quello però è il limite imposto da Blogger alle pagine dinamiche che possono al massimo avere 20 post.
      @#

      Elimina
    2. Sì, sì .... mi riferivo proprio a questo .... al fatto che si vedono solo 20 post. Mi sono espressa male.

      Ho fatto una prova con altro mio blog con modello diverso ..... effettivamente trova solo 20 post (non ci avevo mica fatto caso che fossero 20), ma c'è comunque la possibilità di scorrere e trovare gli altri clikkando "post più vecchi".

      Qui però per una questione estetica ho eliminato tali diciture, che inizialmente avevo pure provato a sostituire con le immagini di frecce (pure queste in home davano problemi). E quindi ecco perchè mi fermo a 20.

      Grazie, Ernesto, proverò a ripristinare e vedere se riesco a sistemare.

      Elimina
    3. Rettifico quanto sopra.
      Io ho tuttora inserito le frecce e l'immagine di una home, come si vede qui in fondo: https://ispirazioninfiera.blogspot.it/2016/11/il-tempo-elastico-di-andrea-daddi.html (e comunque in ogni post)
      Ma ho eliminato tali icone in home (con un tag condizionale), perchè appunto davano problemi.
      Ho idea che devo trovare un altro tag condizionale, che mi permetta di visualizzarle anche nella ricerca.

      Elimina
    4. Ti do un consiglio :). Non ti preoccupare di questa cosa. Si tratta di una sciocchezza. Probabilmente solo lo 0,00001% dei tuoi visitatori cercheranno i post nel tuo blog tramite le etichette per poi scorrere verso quelli più vecchi. Se punti a avere più visite e una migliore frequenza di rimbalzo concentrati sulla qualità dei contenuti
      @#

      Elimina
  26. Sì, certo, su questo non ho alcun dubbio.
    E' solo che volevo capire il perché della cosa.

    Invece ...se io volessi lasciare le frecce e l'icona della home in homepage ... posso modificarne la posizione?
    Perchè attualmente le frecce si vedono, ma sono spostate tutte su un lato, incastrate fra i riquadri dei post e la cornice esterna.
    Per questo le avevo eliminate dalla home e inserite solo nei post.
    https://ispirazioninfiera.blogspot.it/

    Ri-grazie

    RispondiElimina
  27. Buonasera Ernesto, come sempre complimenti per la qualità e quantità dei tuoi consigli. Ho seguito la procedura che hai consigliata ma non riesco ad avere più post per riga. Come posso impostare il numero di post in orizzontale? Quello che vorrei, come vedo in vari template, è una homepage con i post inseriti come in una griglia, per esempio 4 per riga. Grazie del tuo aiuto.

    RispondiElimina
  28. Questa personalizzazione è pensata per mostrare i post in righe di due a due. Se a te vengono tutti in verticale e non a coppie leggi il commento 15.a. Non ho testato la possibilità di mostrare 3 o 4 post per riga ma puoi tentare per esempio dimezzando la percentuale e le larghezze, per esempio 22-23% al posto di 46%, ecc
    @#

    RispondiElimina
  29. Ciao, scusa ma alla mia ricerca folle di trovare il giusto compromesso ho trovato questo nuovo widget, ma per caso conosci il modo di far partire i post visibili dal secondo in poi, in modo che in testa metto l'ultimo con il widget post in evidenza. Ciao e grazie.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy