Plantilla estilo Megazine

Hacer que nuestro blog se vea tipo Megazine, es realmente fácil.

Esta es una forma muy distinta de que aparezcan las entradas de nuestro blog, de forma reducida, así mostrando a nuestros lectores una cantidad de entradas en el incio de nuestra página.

Para empezar, yo empezaría con un blog de pruebas antes de hacerlo en nuestro propio blog.

Nos vamos al inicio de nuestra página y en la parte izquierda, le damos a crear nuevo blog.

Al realizar esta acción se nos abre otra ventana donde pondremos el nombre del blog y la url que usaremos, y tenemos que elegir la plantilla Mínima que blogger ofrece.

Como mostramos en la imagen lo que vamos a ver es en la página de inicio la división de nuestras entradas en dos columnas.

Esto solo lo veremos en la pagina principal de nuestro blog. 

Modificando nuestra plantilla

Lo primero que amos ha hacer es irnos a:

Ahora nos vamos a Plantilla editar HTML y buscamos esta parte del código

#header-wrapper,
 #outer-wrapper 
y #footer-wrapper
 cambiamos el ancho y escribimos width: 980px;

en #main-wrapper usamos width: 560px;

en #sidebar-wrapper usamos width: 390px;

Eliminar la fecha de los post
Para eliminar la fecha de los post nos vamos a :
Tema > Editar HTML y buscamos

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>

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

</b:if>

<b:include data='post' name='post'/>

Eliminamos las lineas en negrita.

Modificando el ancho del post

El ancho del post no esta definida en nuestra plantilla ya que es un DIV dentro de otro y se define por un elemento padre.

En la plantilla mínima veremos esto.

 

<div id="main-wrapper">

<b:section class="main" id="main" showaddelement="no">

<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog">

<div class="blog-posts hfeed">

<div class="post hentry uncustomized-post-template">

....... aqui se muestra el post .......

Para modificar el ancho de las entradas de nuestro blog usaremos este codigo CSS.

Nos vamos a Tema > HTML  y buscamos  </b:skin>

Justo después pegamos este código

  

<b:if cond='data:blog.pageType != "item"'>

<style type='text/css'>

.post {

background-color: #FAF5FF;

border-bottom: 10px solid #FFFFFF;

float: left;

margin: 0 10px;

overflow: hidden;

width: 310px; /* este es el dato importante */

}

</style>

</b:if>

Para cambiar la altura y ancho de nuestros post, podemos cambiar un poco el código anterior para evitar que se corte, además de incluir una barra de desplazamiento.

.post {

background-color: #FAF5FF;

border-bottom: 10px solid #FFFFFF;

float:left;

height: 200px;

margin: 0 10px;

overflow-x: hidden;

overflow-y: scroll;

width: 310p