Tecnología

Inicio

Cómo hacer Side-by-Side Mensajes de los mínimos en Blogger

Cómo hacer Side-by-Side Mensajes de los mínimos en Blogger


Modificar la plantilla de Blogger Mínimos para visualizar de lado a lado las entradas del blog, en oposición a una de desplazamiento continuo. Para ello es necesario hacer un montón de cambios en la plantilla del blog HTML. Copia de seguridad de su plantilla antes de hacer cualquier cambio de codificación HTML y CSS, y que es una buena idea utilizar el Bloc de notas u otro editor de texto para trabajar en HTML antes de copiarlo y pegarlo en el blog Mínimos. Recuerde que cada columna posterior será de unos 290 píxeles de ancho, incluyendo los márgenes.

Instrucciones

Ajustar los márgenes de blog

1 Abra un navegador Web. Ir a la página web de Blogger en www.blogger.com. Escriba su correo electrónico y contraseña. Haga clic en el gris "Entrar" para acceder.

2 Haga clic en el enlace "Diseño". Haga clic en "Editar HTML" en la pestaña "Diseño" para ir a la página "Editar plantilla".

3 Desplazarse hacia abajo en la plantilla hasta que vea la etiqueta "#-envoltura exterior", seguido de un soporte "{". El ancho predeterminado para el exterior-envoltura de las mínimas es de 660 píxeles. Cambiarlo a 940 píxeles, por lo que se ve así:

outer-wrapper {

Anchura: 940px;

}

4 Desplazarse hacia abajo a la etiqueta "# main-wrapper". Cambiar el ancho de 410 píxeles a 620 píxeles.

5 Desplazarse hacia abajo a la etiqueta "# header-wrapper". Eliminar el "width: 660px;" línea. Posteriormente, tendrá un aspecto similar a este:

header-wrapper {

margin: 0 auto 10px;

frontera: 1px $ BorderColor sólido;

}

6 Desplazarse hacia abajo a la etiqueta "#-pie de página envoltorio". Eliminar el "width: 660px;" línea para eliminar el ancho pie de página.

7 Desplazarse hacia abajo a la etiqueta "#header .description". Eliminar el "max-width: 700px;" la línea debajo de ella para centrar la descripción del blog.

8 Desplazarse hacia abajo a la etiqueta "# el blog-pager". Añadir las siguientes dos líneas de código debajo de ella:

Blog-pager {

Anchura: 600px;

Limpia los dos;

text-align: center;

}

Guarde la plantilla del blog.

Modificar las publicaciones de blog

9 Marque la casilla "Expandir plantillas de artilugios". Busque el código siguiente en la plantilla:

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

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

</ B: if>

Resalte la codificación. Haga clic y seleccione "Cortar" en el menú desplegable. Es posible que desee copiarlo en el Bloc de notas.

10 Busque la siguiente línea de codificación:

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

Coloque el cursor en la línea después de ella. Haga clic y seleccione "Pegar" en el menú desplegable. La codificación de la Etapa 1 pastas.

11 Busque el cierre "</ b: la piel>" etiqueta en la plantilla. Escriba el siguiente codificación inmediatamente después de que:

<B: if cond = "data: blog.pageType =" elemento "">

<Style>

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

</ Style>

</ B: if>

12 Haga clic en el botón naranja "Guardar plantilla". Haga clic en el nombre del blog para ver el blog.