Come fare Side-by-Side Messaggi nel Minima su Blogger

May 31

Come fare Side-by-Side Messaggi nel Minima su Blogger


Modificare il modello di Blogger Minima per visualizzare i post del blog fianco a fianco, al contrario di uno scorrimento continuo. Ciò richiede facendo un sacco di modifiche al modello del blog HTML. Eseguire il backup del modello prima di fare qualsiasi HTML e CSS cambiamenti di codifica, ed è una buona idea di utilizzare il Blocco note o un altro editor di testo per lavorare su HTML prima di copiarlo e incollarlo nel blog Minima. Ricordate che ogni colonna montante sarà di circa 290 pixel di larghezza, tra cui i margini.

istruzione

Regolare i margini Blog

1 Aprire un browser Web. Vai al sito web di Blogger a www.blogger.com. Inserisci il tuo indirizzo email e password. Fare clic su "Sign in" grigio tasto iscrizione.

2 Fai clic sul link "Design". Fai clic su "Modifica HTML" nella scheda "Design" per andare alla pagina "Modifica modello".

3 Scorrere verso il basso nel modello fino a vedere il tag "# outer-wrapper", seguito da una parentesi "{". La larghezza di default per l'esterno-wrapper in Minima è 660 pixel. Cambiarlo a 940 pixel, in modo che appaia in questo modo:

outer-wrapper {

width: 940px;

}

4 Scorrere verso il basso per il tag "# main-wrapper". Modificare la larghezza da 410 pixel a 620 pixel.

5 Scorrere verso il basso per il tag "# header-wrapper". Eliminare il "width: 660px;" linea. In seguito, sarà simile a questo:

header-wrapper {

margin: 0 auto 10px;

border: 1px solid $ BorderColor;

}

6 Scorrere verso il basso per il tag "# footer-wrapper". Eliminare il "width: 660px;" la linea per eliminare la larghezza piè di pagina.

7 Scorrere verso il basso per il tag "#header .Descrizione". Eliminare il "max-width: 700px;" linea di sotto di esso per centrare la descrizione del blog.

8 Scorrere verso il basso per il tag "# blog-pager". Aggiungere le seguenti due righe di codice sotto di esso:

blog-pager {

width: 600px;

clear: both;

text-align: center;

}

Salvare il modello blog.

Modificare Blog

9 Selezionare la casella "Espandi i modelli widget". Individuare il seguente codice nel modello:

<B: if cond = 'dati: post.dateHeader'>

<H2 class = 'data-header'> <data: post.dateHeader /> </ h2>

</ B: if>

Evidenziare la codifica. Il tasto destro del mouse e selezionare "Taglia" dal menu a discesa. Si consiglia di copiarlo blocco note.

10 Individuare la seguente riga di codice:

<a expr:name='data:post.id'/>

Posizionare il cursore sulla riga dopo di esso. Tasto destro del mouse e selezionare "Incolla" dal menu a discesa. La codifica dal punto 1 paste.

11 Individuare la chiusura "</ b: skin>" tag nel modello. Digitare il seguente codifica subito dopo:

<B: if cond = "dati:! Blog.pageType =" voce "">

<Style>

.post {width: 290px; margin-right: 20px; float: left; overflow: hidden;}

</ Style>

</ B: if>

12 Fare clic sul pulsante arancione "Salva modello". Fare clic sul nome del blog per visualizzare il blog.