Come creare post side-by-side in Minima su Blogger

Per impostazione predefinita, Minima, il modello Blogger originale, posiziona i post del tuo blog uno sotto l'altro, ma puoi modificare questo layout in modo che le voci vengano visualizzate una accanto all'altra. Con un posizionamento orizzontale, puoi risparmiare spazio prezioso sulla tua pagina e rendere conveniente per i visitatori trovare articoli perché non dovranno scorrere continuamente verso il basso. Blogger ti consente di accedere al codice HTML del tuo modello, che consente di modificare le larghezze della pagina e di adattare i post del blog per creare un layout a tre colonne che consente di visualizzare le voci affiancate.

Modifica delle larghezze della pagina

1.

Accedi al tuo account Blogger e fai clic sul menu a discesa accanto al nome del tuo blog. Seleziona l'opzione "Modello", quindi fai clic sul pulsante "Modifica HTML" per visualizzare il codice del tuo blog.

2.

Individuare la regola "# outer-wrapper" nel codice e quindi modificare il valore della larghezza esistente a 940 pixel, come nell'esempio seguente:

outer-wrapper {width: 940px; }

Questa azione espande il corpo del tuo blog in modo che possa ospitare i post side-by-side.

3.

Trova la regola "# main-wrapper" e inserisci "620px" dopo la larghezza, come segue:

main-wrapper {width: 620px; }

4.

Individua le regole "# header-wrapper" e "#footer", quindi elimina "width: 660px;" porzione in ogni codice. Inoltre, trova "#header .description" ed elimina "max-width: 700px;" iscrizione.

5.

Trova la regola "# blog-pager" e digita "width: 600px; clear: both;" come questo:

blog-pager {larghezza: 600px; chiaro: entrambi; }

Il cercapersone del blog presenta collegamenti alla home page, nonché nuovi e vecchi post, e questo codice si assicura che si estenda sempre sulla larghezza di tutte le colonne di post sulle pagine.

6.

Fai clic sul pulsante "Salva modello".

Regolazione dei post del blog

1.

Fai clic sulla casella "Espandi i modelli di widget" nella pagina Modifica HTML per mostrare tutto il codice del tuo blog. Trova il seguente blocco di codice e copialo:

2.

Trova questa riga di codice:

Posiziona il cursore alla fine della riga di codice e quindi incolla il codice copiato in modo che venga visualizzato subito dopo.

3.

Trova l'elemento "" finale e inserisci il seguente codice dopo:

4.

Fai clic sul pulsante "Salva modello".

Suggerimenti

  • Prima di modificare il codice del modello, copia e incolla il codice in un file di Blocco note nel caso in cui sia necessario fare riferimento alla sintassi originale in un secondo momento.
  • Premere "Ctrl-F" per aprire una casella di ricerca che consente di trovare il contenuto in una pagina Web e utilizzarla per trovare le linee di codice da modificare.

Raccomandato