Plantilla para Blogger de Zona Cerebral
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Si conoces este blog desde hace más de una semana, seguro que te suena esta plantilla para Blogger. De lo contrario, te presento el que era el anterior diseño de esta página cuando estaba alojada en Blogger y no en Wordpress.
La plantilla ha sido creada 100% por un servidor, a partir del diseño estándar Son of Moto de Jeffrey Zeldman. Como puedes ver, está compuesta por una sección central, una única columna lateral o sidebar, una barra de navegación, un espacio para incluir enlaces patrocinados y un widget de Twitter totalmente integrado en el diseño. La plantilla se comparte de forma gratuita bajo licencia Creative Commons Reconocimiento-No comercial. El único requisito que se exige para usarla es reconocer su autoría con un enlace hacia este blog.
Descarga
Personalización
Header. La descripción del blog que se muestra en la plantilla, en realidad es el texto que se incluye en la sección del título de la página y no en la descripción de la misma. En los enlaces anteriores, se encuentra la imagen en formato PSD. Para reemplazarla, sólo tienes que modificar la dirección de la imagen dentro del valor CSS #header h1.
Menú. Entra en edición de elementos de página en Blogger y edita el segundo elemento HTML/Javascript (el primero que está debajo de la cabecera corresponde a los enlaces de Adsense). Añade el siguiente código, modificando los valores marcados con almohadillas “#” por las direcciones URL que desees vincular.
<div id="navcontainer"> <ul id="navlist"> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> </ul> </div>
Twitter. Para mostrar las actualizaciones de tu cuenta de usuario de Twitter en el blog, sólo tienes que editar el elemento de página HTML/Javascript que se encuentra debajo del menú y añadir lo siguiente:
<div id="twitter_div"><a id="twitter-link" style="display:inline;" href="http://twitter.com/Minikotry"><img border="0" style="float:left;" alt="Mi Twitter" src="http://img401.imageshack.us/img401/2307/icontwitter2ya4.gif"/></a><div id="twitter_update_list"></div> </div> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script text="text/javascript" src="http://twitter.com/statuses/user_timeline/Minikotry.json?callback=twitterCallback2&count=1"></script>
En esta entrada puedes ver cómo modificar el código para mostrar tus actualizaciones en lugar de las mías.
Entradas del blog. El formato de la fecha de los posts es el penúltimo a elegir en Configuración > Formato > Formato de cabecera de fecha. Estas son las opciones de formato que debes seleccionar en las entradas del blog para adaptar el diseño a la plantilla:
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
43 Comentarios
De nada Francisco, espero que te sea útil. Un saludo amigo!
quiero qui 
ero quiero quiero 
me va a dar laburo pero gracias, voy a ver como lo adapto a mi blog
saludos
perfecto esta plantilla esta muy buena gracias
amigo tengo problemas con el heat , no puedo entenrder como cambiar zona cerebral por punto baires, y por alguna razon no lo encuentro en la platilla no encuetro el header 1, buenop ya empezaste a romperme el coco, ejjeje saludos
Hola Betoz! Gracias a ti, me alegro de que te guste. Un saludo 
Oscar, para cambiar el texto del header tienes que descargar la imagen desde el enlace anterior y modificarla con el Photoshop. Seleccionas la herramienta de texto, haces click sobre el título y lo cambias por el que tu quieras. Busca a través del navegador la etiqueta #header h1, está debajo del #header-wrapper, aunque tampoco hace falta porque está solo unas líneas más abajo del inicio de la plantilla. Un saludo!
Bueno primeramente felicidades por la plantilla y gracias por liberarla, acabo de crear un post en mi blog acerca de la plantilla (espero que no haya problemas)
tengo ya tiempo viendo este blog y los felicito (bueno lo conoci gracias a blogandweb)
Saludos
Hola Luis! Muchas gracias por comentar y por publicar el post. Blogandweb es un gran blog, al igual que su autor Francisco. Un saludo y gracias de nuevo
Hola primero que nada muchísimas gracias por tu trabajo 
es una gran ayuda! ¿te quiero preguntar como puedo hacer para poner una barra de navegación abajo del banner de mi blog? ¿es posible añadir un espacio que pueda luego configurar en los elementos de la pagina y de ahi ponerle html/javascript? estoy en Blogger! gracias por tu tiempo
http://www.xalapalife.com
Hola Kenji! De nada, me alegro de que te guste mi trabajo. Para insertar una barra de navegación, sólo tienes que crear un nuevo div con una sección para añadir el elemento de página que contenga el menú de enlaces. Puedes encontrar más información sobre cómo añadir una sección o una etiqueta div en esta entrada (aunque trata sobre cómo insertar un nuevo sidebar, el proceso es prácticamente el mismo).
- Entra en el modo de edición HTML y activa la casilla “expandir plantillas de artilugios”.
- Busca el div con el id “header-wrapper”, situado después de la etiqueta <body>. Debajo de esta, es donde debes crear el espacio para añadir los enlaces, insertando este código:
<div id=’menu’>
<b:section class=’menunav’ id=’menunav’ showaddelement=’yes’>
</b:section>
</div>
- Guarda los cambios y vuelve al apartado de edición de elementos de página. Añade un nuevo elemento HTML/Javascript en la sección que aparece debajo del header y pega este código:
<div id=”navcontainer”>
<ul id=”navlist”>
<li><a href=”#”>Inicio</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Archivos</a></li>
</ul>
</div>
- Entra de nuevo en el modo de edición HTML y pega el siguiente código CSS:
#menu {}
#menunav {}
#navcontainer {
margin: 10px 0 0 10px;
padding: 0 0 10px 0;
}
#navcontainer ul {
margin:4px 0;
}
#navcontainer ul li {
padding:4px 0px; display:inline; font:10px arial;
}
#navcontainer ul li a {
text-transform:uppercase; padding:4px 5px;font:10px arial; margin:0px 3px;
}
#navcontainer ul li a:hover {
color:#eee; background:#597692;
}
- Si le das a vista previa, verás que la barra de navegación es bastante simple y es idéntica a la de la plantilla Resurrection. A través del CSS puedes comenzar a personalizar el diseño de los enlaces, incluir una imagen de fondo, etc.
Los códigos #menu y #menunav hacen referencia al estilo de la etiqueta div y de la sección respectivamente.
Espero que te haya servido de ayuda. Un saludo y gracias por comentar
IVAn en la busqueda del template perfecto me encontre con este
http://www.jackbook.com/2007/08/red-white-web-20-blogger-template.html#updates
pero por alguna razon no puedo conservarlas imagenes, se pierden 
ME ayuidaria a descifrar el problema, creo que encontre algo pero quiero estar seguro 
Gracias de nuevo
amigo como habras visto tengo problemas con mis widgets , me ayudas?
si visitas el blog del quien diseño el theme te encontraras con tres widges, no se donde colocarlos, espero que tengas un tiempo y me digas donde colocarlos porque no lo ubico en la planilla html
Hola Oscar! Es una plantilla muy bonita. No se a que problemas te refieres con las imágenes y con los widgets, yo los veo perfectamente. Si especificas un poco más a lo mejor puedo ayudarte. A ver cuanto te dura esta plantilla… jeje es broma. Un saludo
Minikotry muchisimas gracias por la velocidad de tu respuesta, tu explicacion y tu tiempo me han servido muchisimo gracias!
De nada Kenji, ha sido un placer poder ayudarte. Un saludo 
espero que me dure y no me canse de el, el tema es que me gusto la palntilla, muy al estilo 2.0, y es un gran cambio para mi que soy amante de los colores azulados 
Ok te explico, en algunos casos las iamagenes del blog desaparece, ya me di cuenta que es solo por problemas con internet explore, pues con otros navegadores lo veo bien, en la pagina del creador del template, me da tres widjes, uno de la imagen de sindicacion otra de los enlaces y otra de la caja de busquedas, cuando busco donde colocarlos dentro de mi platilla estendida en html, no encuentro los lugares. es asi de simple. Gracias Ivan saludos 
A mi también me gusta e l estilo de esta plantilla. Ya se a lo que te refieres. Para instalar los widgets tienes que añadirlos desde la sección de “elementos de página” de edición de la plantilla y hacer lo siguiente:
- Widget 1. Edita el elemento HTML/Javascript que está al lado derecho del título e inserta el formulario que te facilitan en la página de la plantilla de Jackbook.
- Widget 2. Edita el elemento HTML/Javascript que está justo debajo del título y al igual que antes, pega el código de Jackbook allí.
- Widget 3. Inserta un nuevo elemento HTML/Javascript en tu sidebar y pega el código que aparece en su página.
Eso es todo. Deberás cambiar los enlaces de los dos últimos widgets por los tuyos. Un saludo
Te quiero!!!, Grande Ivan Gracias, date una vuelta y ve lo lindo que quedo, jeje, decidi agregar un formulario de contacto inclusive, sigo teniendo problemas con el IE, pero solo es ocasional, ya encontraremos la falla y lo solucionaremos, mil gracias
Jeje… gracias Oscar. Me alegro de que te haya servido de ayuda. Te ha quedado una plantilla preciosa. Un saludo
Saludos Minikotry intente hacer lo que me comentaste para crear el menu de navegacion pero al insertar el div id_ menu despues del header wraper e intentar guardar me aparecio el siguiente mensaje de error:
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute “{1}” associated with an element type “id”.
Ops ¿que estare haciendo mal? Gracias de antemano y disculpa las molestias
Hola Kenji! El problema es que al copiar el código desde aquí y pegarlo en blogger, el formato de las comillas del div id=’menu’ (estas ‘) cambia y da error si no se reemplaza. Para arreglarlo, tienes que cambiar cada comilla que has copiado desde aquí, por la que se encuentra al lado del cero en tu teclado. Espero que te sirva de ayuda.
Saludos!
Ivan gracias!!!!! en serio, no se mucho de estas cosas y tu me has ayudado muy amablemente un saludo y felicidades por tu pagina!
De nada Kenji, para eso estamos. Si tienes cualquier otro problema o lo que sea ya sabes
Un saludo!
Ivan me vas a matar haha gracias por tu apoyo pero me surge un problema el menu me aparece sobre el banner de mi pagina ¿por que pasa esto? por cierto de donde saco un banner de tu pagina para ponerlo en la mia
He estado viendo la plantilla original a través de b-themes y en teoría, ese menú debería aparecer de forma horizontal encima del título. Para eliminarlo, sólo tienes que borrar estas líneas que se encuentran dentro del div “header-wrapper” en el código de tu plantilla:
<a class=’minyx’ href=’http://www.spiga.com.mx/’><em>Spiga</em></a>
<ul id=’topMnu’>
<li>
<a href=’http://b-themes.blogspot.com’ title=’free blogger templates’>B-Themes</a> </li>
</ul>
Te agradezco que quieras insertar un banner de mi blog en tu página. Sólo tienes que decirme las dimensiones de la imagen y te la enviaré encantado.
Saludos!
Hola amigo tremenda plantilla muy gorxo !!! tengo un gran problema kiero cambiar mi plantilla ah esta pero no me deja cargarla esto es lo que me dice cuando kiero cargarla:
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
Your template is invalid because the tag ‘div’ appears inside of the tag ‘head’.
no entiendo mucho del tema html me podrias decir que ago para que la cargue te lo agradeceria mucho !!!
saludos !!
pliz alguien respondaaaaa!!!!
Hola Nico! ¿Cómo has cargado la plantilla, copiando y pegando o subiendo directamente el archivo XML? Prueba haciéndolo de esta segunda forma, a ver si así también te sale este error. Saludos
Holas gracias por responder prove de las dos formas pero tampoco me la cargue, tambn cree un nuevo blog aver si asi me loa cargaba pero tampoco nada no se que sera 
hola nico lo que pasa es que no hay ningun problema con la plantilla , el error que te aparece es error de blogger 
, pero igual y si haces unas modificaciones antes de guardar resulte, puedes visitar Vagabundia o La Blogueria ellos hablan sobre este problema que se esta sucitando en blogger. 
nos vemos espero y te haya servido de algo la info
Graxxx rocky vamos a ver que pasa saludos !!
ricky perdon jeje !
Gracias por la información Ricky, la verdad es que desconocía el problema. Espero que pronto se solucione. Saludos!
jeje para eso estamos para ayudar…
Saludos
Que rápido me contestaste, gracias, pero aun me sigue saliendo el mismo error al colocarlo como me dijiste, realmente no se cual es el detalle.
El error al cargar la plantilla xml es este “Your template is invalid because the tag ‘div’ appears inside of the tag ‘head’.”
Hola Roberano! Me temo que se trata de un error interno de los servidores de Blogger y la única solución por el momento es esperar a que lo solventen. Saludos!
He buscado por más de una hora temas para blogger y me decidí por este, pero cuando lo cargo me tira el siguiente error:
La plantilla no es válida porque la etiqueta “div” aparece dentro de la etiqueta “head”.
Si me puedes ayudar te lo agradezco. He guardado esta página para revisar a diario a ver si ves el comentario y me contestas. Gracias.
Hola Gastón! Siento la tardanza en contestar. Ese error se debe a una actualización que realizaron los desarrolladores de Blogger, por la cual los códigos insertados entre las etiquetas “head” (antes del body en tu código HTML) no pueden contener etiqeutas “div”. Esto ocurre en las plantillas que tienen scripts para mostrar la fecha con una imagen u otros scripts similares.
Para solucionarlo, tan sólo tienes que encontrar ese script en el que se incluyen las etiquetas div y cambiarlas de sitio en una posición del código que esté fuera de las etiquetas “head” del mismo. Aquí puedes encontrar más información:
- Error al insertar etiquetas div en la sección head.
- Blogger, problema con la plantilla.
Espero que te sirva de ayuda. Un saludo!
No sabia eso del twitter u.u! yo jalé el código asi crudo qu m dieron y lo puse.. pero si hay una mejor manera de hacerlo, gracias
Gracias Iván por la respuesta. Le quité el Twitter y le moví el script de la fecha y funciona bien.
Lo único, la maldita fecha, he probado con todos los formatos y no hay caso. El problema es que la opción de seleccionar el formato de fecha que tu describes ya no existe en la nueva versión de blogger, mala suerte.
Hola…!
Primero mis felicitaciones pues los recursos ofrecidos son muy buenos…!
nesecito saber como pudo lograr que los menus que traen esta plantilla me muestren otar pagina pero que sea como estar dentro de la misma plantilla; es decir como un sitio web normal en donde si tu le da click en el enlace contactos, te muestra otra pagina pero sigue en la misma plantilla.Para resumir ya se como es colocarle los enlaces pero no se hace para mostar otar pagina en relacion a la misma plantilla.
Gracias,,,——1
Hola Emilson! Creo que te refieres a la creación de páginas internas. Siento darte la mala noticia, pero Blogger aún no dispone de esta función. Para obtener el resultado que mencionas, en Blogger es necesario crear un post y luego enlazarlo desde ese menu de enlaces (por ejemplo) para imitar lo que sería la creación de una página estática interna.
Espero que te sirva de ayuda. Un saludo!
Excelente! Mil gracias, mañana la probaré