Quiero Crear un Blog - Como crear un blog

Mostrando entradas con la etiqueta Sidebars. Mostrar todas las entradas

Cómo enmarcar las entradas y los elementos de la sidebar por separado

Hace tiempo me preguntaron cómo había conseguido que en mi sidebar cada elemento se mostrase como un bloque individual, por eso voy a tratar de explicar lo mejor posible cómo conseguirlo, aunque con la variante que también explicaré cómo hacerlo con cada post (entrada). Sin duda es una buena opción para mejorar el diseño de nuestros queridos blogspot.

1. Enmarcar post (entradas) por separado en Blogger.

1) Ves a Diseño
2) Edición de HTML
3) Busca el código .post { (teclea Ctrl + F para buscar más rápido)
4) Debajo de él pega lo siguiente:

border:1px solid black;
}
.main .post { margin:0 0 1.5em;padding:0 0 1.5em; padding: 10px; }

La primera línea de border hace referencia al borde que recorrerá cada entrada individual. Si quieres más información sobre los bordes puedes visitar la siguiente entrada: Bordes en Blogger.

Padding es la separación o distancia que habrá entre el borde y el comienzo del texto. Margin es la distancia de separación entre el borde y la parte exterior del elemento. Cambia los valores de padding y margin según tus necesidades y la estructura de tu blog. Cada plantilla de Blogger es un mundo. Si te quedan dudas fíjate en esta imagen extraída de comocreartuweb.

5) Por último clica en vista previa y si todo está bien, guarda tu plantilla.

2. Enmarcar gadgets (widgets) de la sidebar por separado en Blogger.

1) Ves a Diseño
2) Edición de HTML
3) Busca el código .sidebar .widget, (teclea Ctrl + F para buscar más rápido)
4) Debajo de él pega lo siguiente:

.main .widget {
border:1px solid black;
margin:0 0 1.5em;
padding: 10px;
}

Es decir, al final debería quedarte algo así:

.sidebar .widget,
.main .widget {
border:1px solid black;
margin:0 0 1.5em;
padding: 10px;
}

Para modificarlo, te servirá lo mismo que comenté en la explicación de cómo enmarcar las entradas por separado.

5) Clica en vista previa, y si no hay ningún fallo guarda tu plantilla.

Espero que estos dos trucos para Blogger te hayan servido para decorar y diseñar aún más tu blogspot.

Gadget con scroll para una lista de enlaces

Si quieres agregar una lista de enlaces en la sidebar de tu blog, muchas veces la lista puede resultar interminable por la cantidad de enlaces. Por esta razón es conveniente poner un scroll para que se pueda bajar y/o subir para así convertir la lista en una lista de dimensiones visiblemente más adecuadas.

Para instalar este scroll de enlaces, haz lo siguiente:

1) Ves a Diseño
2) Elementos de página
3) Añadir un gadget
4) HTML/Javascript. En él pega el siguiente código:

<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">

<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>
<li><a href="http://www.enlacedelblog">NOMBREBLOG</a></li>

<span style="font-weight:bold;"></span>
</a></li></ul></div>

Código a copiar/pegar

Para modificar el tamaño de este gadget, cambia el with y height de acuerdo a las dimensiones de tu sidebar. Para cada enlace deberás poner el enlace correspondiente en enlacedelblog y el nombre de éste en NOMBREBLOG.

Para agregar o eliminar enlaces, fíjate en como está estructurado el código.

Todo listo, espero que te sea de utilidad.

Cómo poner una cabecera doble (header) en tu blog

Muchos me habéis preguntado ya por cómo poner una cabecera (header-wrapper) doble en el blog. De esta forma la cabecera queda dividida en dos partes, y tal y como lo tengo yo: a la izquierda el logo y a la derecha el buscador. Pues bien, os voy a tratar de explicar cómo lo hice yo.

Para ello vamos a:

1) Diseño
2) Edición de HTML -Recuerda antes siempre guardar una copia de tu plantilla-
3) Busca #header-wrapper (teclea Ctrl+ F para buscar más rápido). Te encontrarás con algo así:

#header-wrapper { background:$headerbgcolor; height:90px; width:980px; padding-top:16px }

Si te fijas el width (ancho de la cabecera) es de 980px y el height (altura) es de 90px. Obviamente en cada plantilla habrá unos valores diferentes. Si deseas puedes aumentar o reducir el tamaño de tu blog, pero siempre recomiendo no sobrepasar los 980px para que todo el mundo pueda leerte sin problemas. Pero como queremos un header doble (cabecera doble) deberemos dividir por dos ese valor. Es decir, si nuestra cabecera mide 980px deberemos darle un valor ahora de 490px, pero recomiendo siempre darle algo menos de valor, por ejemplo 400px.

4) Una vez modificados los valores ahora debemos cambiar el nombre de #header-wrapper por #header-wrapper-left y le añadiremos float:left; Es decir, nos debe quedar algo así:

#header-wrapper-left { background:$headerbgcolor; float: left; height:90px; width:400px; padding-top:16px }

5) Justo debajo pegaremos lo siguiente:

#header-wrapper-right {float:right; width:400px; height:60px; text-align:right }

6) Ahora buscamos <div id='header-wrapper'> y lo cambiamos por <div id='header-wrapper-left'> Si te has fijado todos elementos que abrimos con <...> luego los cerramos con </...> por eso deberemos buscar a ver dónde acaba <div id='header-wrapper-left'>

Cuando hayamos visto el cierre de <div id='header-wrapper-left'> es decir, </div> pegaremos a continuación lo siguiente:

7) Ahora clicamos en vista previa y si todo está bien guarda tu plantilla. Ahora dirígete a Diseño->Elementos de página y comprobarás que ahora tienes un header doble disponible para poner los gadgets que quieras en tu blog.