Diseñador de plantillas

En Blogger in draft ( blogger en borrador), ahora se puede diseñar nuestra plantilla, sin perder nada de lo que tenemos.

Hay varios formatos a elegir, fondos, columnas, pie de página con columnas...cantidad de herramientas. Solo hecho en falta, que no hayan puesto una opción para subirnos, nuestra propia imagen ( o no la vi...).

De cualquier modo, antes de hacer cualquier cambio ( por si acaso) guardar siempre vuestra plantilla  primero.

Empezar un blog

No puedo dejar de publicar esta entrada, la encontré en El Mosquitero, y explica muy bien la mejor forma de construir tu blog.

NO DEJAR DE LEERLO :

Dos formas de comenzar en los blogs

Estoy segura de que será de gran ayuda!

Plantillas flash

Os dejo una dirección, con varias plantilas en flash, muy bonitas. Tienen el código para 2 columnas y 3 columnas. Solo escoger, copiar y pegar.
Es muy sencillo de hacer, solo tenéis que ir a diseño - añadir gadget - HTML - pegar código y voilá!! Listo.

http://decoratublog.blogspot.com/

Saludos

Emoticonos

Poner emoticones en tu blog en realidad es sencillo, lo complicado realmente es crear el Script para hacerlo, pero aqui en esta miniguia pongo a disposicion de todos un Script que he creado y depurado, es el mismo que utilizo en este blog asi que los emoticones que pondremos son los siguientes:

:-) :-s :-p :-[ :-d }:-] x* ;-d :-| :-} :*) :-( ;-) xd

Antes de empezar quiero hacer una aclaracion: El Script del codigo lo pongo en un archivo de texto que pueden descargar, no pongo el codigo aqui escrito en blog porque al poner los cogigos del Script habrian partes en las que ustedes verian en vez de codigo los emoticones, espero darme a entender :-S

Bueno empezemos:


PASO 1

Debes ir a tu plantilla de blogger: Diseño > Edicion HTML y darle click a Expandir plantillas de artilugios una vez estando ahi tienen que buscar </head>

Un truco para buscar codigos en la plantilla de blogger es presionar Ctrl+F esto despliega una pequeña ventanita donde introduces lo que quieres buscar

Bueno una vez lo hayas encontrado tienes que pegar encima del </head> el codigo de Script que he puesto dentro de este archivo de texto

Descargar el Codigo del Script

El codigo es grande(no te asustes) lo unico que tienes que hacer es pegarlo y LISTO!!! ya tienes los emoticones


PASO 2

Ahora que ya tienes instalado el Script hace falta poner encima del formulario de comentarios de tu blog los codigos con la indicacion de los emoticones, para que se vea asi:


Para hacer esto, tienes que insertar una tabla html con los emoticones y el simbolo a utilizar, yo me he tomado la molestia tambien de hacer la tabla que igual que el Script esta en un archivo de texto

Descarga La Tabla de los Emoticones

Cuando ya tengas el cogido de la tabla tienes que ir a tu plantilla y con los artilugios expandidos buscar el siguiente codigo:

<p><data:blogCommentMessage/></p>

Ahi justo debajo de ese codigo debes pegar todo lo que esta adentro del archivo de texto de la tabla


PASO 3

Guarda los cambios en tu plantilla y ya puedes utilizar tus emoticones, tanto en los posts como en los comentarios ;-)

Extraído de   Trucosgeek

Ensanchar la plantilla Mínima

Tutoriales - Ayuda para tu Blog 

Bueno en este tutorial les voy a mostrar como pueden cambiar el ancho de su blog (cuerpo, entradas, sidebar, titulo, etc)
Para esto les dejo 5 pasos sencillos para que lo puedan hacer, ya sea disminuir o agrandar el ancho de tu blog.
En estos 5 pasos les voy a mostrar como ensancho mi blog, ya de paso les dejo una medida muy apropiada y conveniente para ensancharlo, pero esta de mas decir que pueden elegir la medida que ustedes quieran.

1) Primero que nada deben dirigirse a la parte de diseño del blog, a la edicion de codigo HTML. No hace falta que expandamos los artilugios. Nececitamos localizar la instruccion #outer-wrapper ( Esto es como quien dice, el ancho del blog en si, dentro del blog esta el espacio para las entradas y la sidebar, si queremos ensanchar estas ultimas, primero debemos hacer espacio en el blog para que luego entren sin problemas). La primera linea debajo de:#outer-wrapper es width: 660px;Cambiaremos esa línea por width: 850px; (width significa ancho y el numero es la cantidad de pixeles que le estamos dando)

2) A continuacion vayamos a ensanchar el espacio de entradas (main), si buscamos mas abajo de lo anterior debemos encontrar: #main-wrapper ( y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;)

3) Un poco más abajo vemos #sidebar-wrapper (, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;)



4) Ahora vayamos a ensanchar el titulo para lograr una mejor estetica en nuestro blog, para eso dejemoslo del mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper ( y cambiamos la línea del width porwidth:850px;) (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas. Bajamos ahora por el código de la plantilla, hasta encontrar el #footer ( y le ponemos también el mismo ancho que el blog: width:850px;)
de esta forma nuestro blog logra una imagen uniforme.





5) Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.

Si usas otras medidas no olvides que la suma del ancho de las entradas con el de la sidebar, debe ser menor o igual a el ancho del blog para una correcta vizualizacion.

Eliminar fecha del post

Cómo quitar la fecha de las entradas
lunes 21 de diciembre de 2009

Hay dos formas sencillas de eliminar la fecha de las entradas.

La primera consiste yendo a Diseño - Elementos de página - Entradas del blog - Editar. 
En editar os encontraréis con la siguiente opción:

Debes dejar la casilla sin seleccionar y posteriormente guardar los cambios.

Si con esto aún continua apareciendo la fecha en las entradas, deberás realizar cambios en tu plantilla HTML. Esto puede deberse a que no estés empleando una de las plantillas mínimas que nos facilita Blogger.

1) Ves a Diseño
2) Edición de HTML
3) Busca date-header (teclea Ctrl + F para buscar más rápido)
4) Te encontrarás con algo así:

h2.date-header {
margin:0;
padding:0;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

Deberás añadir, respetando la estructura, este código:

visibility:hidden;

Es decir, deberás quedarte así:

h2.date-header {
margin:0;
padding:0;
visibility:hidden;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

5) Clica en vista previa, y si todo está correcto guarda tu plantilla.

Fuente - Quiero crear un blog

Sidebar con 2 columnas

FUENTE  -  TUTORIALES - EL ESCAPARATE DE ROSA

Una manera de ganar espacio extra en el blog sin hacer grandes cambios es añadir una nueva sidebar debajo de la que ya tenemos y dividirla en dos.

Para explicar estas modificaciones, damos por hecho que la plantilla a la que vamos a hacer los cambios tiene solamente una sidebar y, por descontado, que lo más adecuado sería tratar de hacer los cambios en un blog de pruebas antes de pasarlos al "original".

Para mi ejemplo usaré la plantilla Mínima de Blogger con sus medidas originales.
Haremos todos los cambios sin "expandir las plantillas de artilugios".

[1] Localizamos el código CSS que corresponde a la sidebar que ya tenemos en la plantilla y que será algo como esto:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Lo copiamos y justamente debajo pegamos la copia y le cambiamos la id, por ejemplo a sidebar-wrapper-doble:

#sidebar-wrapper-doble {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[2] Debajo de ese mismo código que acabamos de añadir, pegamos este otro que servirá para controlar las dos columnas de la nueva sidebar:

#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}

[3] Bajamos ahora hacia el HTML de la plantilla para localizar el código de la sidebar que ya tenemos:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

</b:section>

</div>

Añadimos, justo debajo, el código para la nueva sidebar con sus columnas incluidas:

<div id='sidebar-wrapper-doble'>

<b:section class='sidebar' id='columna-izda' showaddelement='yes'>

</b:section>



<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>

</b:section>



<div style='clear: both;'/>

</div>

Este sería el  resultado:

 

Mas plantillas

Blogger:

• Blogandweb. Muy buenos diseños creados a partir de plantillas gratuitas en CSS de la web Free CSS Templates y similares. Sin duda, es un trabajo que merece ser reconocido y premiado al menos con un enlace hacia su blog al instalar alguno de sus themes.
• BloggerTemplates. Es un buen sitio con excelentes diseños, aunque algo escaso en cuanto a la cantidad de plantillas.
• Blogger-Templates. Blog con bastantes themes clasificados en función de su estilo y codificación.
• BlogSkins. Puedes ver las plantillas más votadas por los usuarios o el estilo del día en su página principal. Los diseños están disponibles para Blogger, Movable Type y Xanga.
• BlogFlux Themes. Sección para descargar templates de este directorio de blogs.
• Geckoandfly. Blog con multitud de diseños para Blogger con un estilo similar al de los themes disponibles para WordPress.
• BlogMundi. Un blog fantástico con consejos para bloggers y multitud de utilidades que cuenta con algunos templates para Blogger magníficos.
• TemplatePanic. Las plantillas de Blogger están clasificadas en función de su número de columnas en la barra de navegación derecha.
• Psycho. Generador de plantillas para Blogger gratuito que te permitirá crear tu propio diseño en menos de 10 minutos.

MARGIN - BORDER - PADDING

Para poder cambiar el tamaño en varias zonas de la  plantilla, hay que saber distinguir  muy bien entre estas 3 definiciones : Border, Margin y Padding

Border

Si en una capa solo definimos su contenido en Html, esta solo mostrará eso, el contenido, ya sea una imagen, un párrafo o lo que sea. Pues bien, la propiedad border dibuja un borde alrededor justo de ese contenido. El borde estará pegadito pegadito al contenido, como en este caso de la derecha. El borde por defecto, si no se indica otra cosa, es una línea continua de 1 pixel de grosor y de color negro.

Padding

El padding lo usaremos para definir una distancia de separación entre el borde y el contenido. Es decir, separa el borde de su contenido en una distancia igual a la que le indiquemos. Concretamente, esta zona sería como la parte roja que se ve en esta otra imagen de la derecha. Como ves, el borde ahora no está pegado a la imagen, sino separada de ella por la zona roja que ha sido definida con la propiedad margin. Fíjate que el borde ahora está pegado al padding, no al contenido.

Margin

Ahora tenemos otra distancia más. El margin es la distancia de separación que se va a dejar entre el borde y la parte exterior del elemento de la capa. En este caso no se ve, pues es una zona exterior al dibujo en la que no se permite que aparezca nada. Por eso se usa para separar unos párrafos de otros, como vimos en las lecciones primeras. En este caso solo hay definido el margin en el ejemplo de la derecha. Como ves, hay una separación entre la imagen y este mismo párrafo, aunque no se ve.

Fuente : Como crear tu web

Plantillas para Blogger

Listado páginas donde podéis encontrar plantillas ya diseñadas para vuestros blogs:

• CSS Design templates:
  http://templates.arcsin.se/
• CSSfill:
  http://www.cssfill.com/
• Dezinehub:
  http://www.dezinehub.com/
• dotCom:
  http://www.dotcomwebdesign.com/?Free-Website-Templates-Section-1
• Effex Media:
  http://effex-media.com/templates/
• Ex-Designz:
  http://www.ex-designz.net/template/default.asp
• Free CSS templates:
  http://www.freecsstemplates.org
• Free Layouts:
  http://www.freelayouts.com/templates/website
• Free Site templates:
  http://freesitetemplates.com
• Free templates Online:
  http://www.freetemplatesonline.com
• Free Web templates:
  http://www.freewebtemplates.com
• Free Website templates:
  http://www.freewebsitetemplates.com/
• Free-CSS-Templates:
  http://www.free-css-templates.com
• Freewebtemplates.de:
  http://www.freewebtemplates.de
• Ginger Ninja:
  http://www.ginger-ninja.net
• Hot Free templates:
  http://hotfreetemplates.com/WebsiteTemplates/
• Interspire:
  http://www.interspire.com/templates/
• Layouts 4 Free:
  http://layouts4free.com
• Master templates:
  http://www.mastertemplates.com
• Open Designs:
  http://www.opendesigns.org/
• Open Source templates:
  http://www.opensourcetemplates.org/
• Open Source Web Design:
  http://www.oswd.org
• Open Web Design:
  http://www.openwebdesign.org
• Six Shooter Media:
  http://www.sixshootermedia.com/free-templates/
• Solucija:
  http://www.solucija.com/home/css-templates/
• Style Shout:
  http://www.styleshout.com
• template Navigator:
  http://templatenavigator.com
• template Perfection:
  http://www.templateperfection.com
• template Workz:
  http://www.templateworkz.com/
• template World:
  http://www.templateworld.com/free_templates.html
• template:CSS:
  http://tools.i-use.it
• templates Box:
  http://www.templatesbox.com
• Webdesign Helper:
  http://www.webdesignhelper.co.uk
• Webpage Design:
  http://www.webpagedesign.com.au/Free_Templates/
• Zeroweb:
  http://www.zeroweb.org
• Zymic:
  http://zymic.com

 Páginas  con plantillas en blanco, con diversas estructuras,  en estas tenéis que ponerles vuestro estilo :

• Code Sucks:
  http://www.code-sucks.com/css%20layouts/
• Layout Gala:
  http://blog.html.it/layoutgala/
• Intensivnation:
  http://www.intensivstation.ch/en/templates/
• Max Design:
  http://maxdesign.com.au/presentation/page_layouts/
• The Layout Reservoir – Blue Robot:
  http://www.bluerobot.com/web/layouts/
• Little Boxes:
  http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
• CSS Tinderbox:
  http://csstinderbox.raykonline.com/
• Mollio:
  http://www.mollio.org/
• Particletree:
  http://particletree.com/features/quick-start-your-design-with-xhtml-templates
• Strictly CSS:
  http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need
• Ben Meadow Croft Webdev:
  http://www.benmeadowcroft.com/webdev/

Fuente: Carrero