Plantilla para Blogger de Zona Cerebral.
Si es la primera vez que visitas este sitio, quizás te interese 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.
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. 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:
Si tienes cualquier problema, duda o pregunta sobre esta plantilla, no dudes en dejar tus comentarios.
Publicado en: Plantillas para Blogger
Entradas relacionadas
Loading ...
Excelente! Mil gracias, mañana la probaré
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
De nada Kenji, ha sido un placer poder ayudarte. Un saludo
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
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”.
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!
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!