Plantilla para Blogger Clean and Dark con 3 columnas y optimizada para Adsense
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Clean and Dark es la nueva plantilla para Blogger adaptada del theme para Wordpress con el mismo nombre diseñado por Chris Coyier. Lo más destacable de este nuevo template es su completa optimización para incluir publicidad contextual de Adsense de Google o de cualquier otro servicio publicitario online, por lo que te lo recomiendo especialmente si lo que buscas es añadir este tipo de anuncios para rentabilizar tu blog.
La plantilla está disponible de forma gratuita bajo licencia Creative Commons, siempre que reconozcas la autoría de la obra manteniendo los enlaces hacia CSS-Tricks y hacia Zona Cerebral situados en el footer o en cualquier otra parte del blog y no la utilices para fines comerciales.
Descarga
Elementos
Título. Tanto el título como la descripción del blog han sido desactivados con el código CSS “display:none” . Si quieres modificar ambas secciones, deberás descargar la imagen del header disponible en formato PSD y realizar los cambios oportunos utilizando el Photoshop.
Menú, Adsense y Feed RSS. Estas tres partes del diseño se encuentran situadas dentro de un mismo widget. Para añadirlas a la plantilla sólo tienes que editar el widget HTML/Javascript que se encuentra justo debajo de la cabecera del blog y pegar el siguiente código:
<div id="navcontainer"> <ul id="navlist"> <li> <a href="#">Inicio</a></li> <li><a href="#" >About</a></li> <li><div class="adcode"> <script type="text/javascript"><!-- google_ad_client = "pub-demo"; google_ad_width = 468; google_ad_height = 15; google_ad_format = "468x15_0ads_al_s"; //2007-10-03: Plantilla Clean and Dark google_ad_channel = "4787029732"; google_color_border = "202020"; google_color_bg = "202020"; google_color_link = "ffffff"; google_color_text = "000000"; google_color_url = "008000"; //--> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script></div></li> </ul> <div class="feedicon"><a href="#" ><img border="0" alt="Feed RSS" src="http://img155.imageshack.us/img155/8936/rssiconcx8.gif"/></a> </div></div>
Para incluir la dirección URL de los enlaces en el menú de la parte superior, sólo tienes que cambiar el símbolo ” #” de “Inicio” y “About” por la dirección URL que desees. El código que se muestra dentro del div con la clase “adcode” corresponde a los enlaces de Adsense, por lo que también deberás reemplazarlo por el código que contenga tu ID de usuario. En los atributos google_ad_width, google_color_border, etc encontrarás los valores del ancho y el alto del bloque de vínculos y el color de las distintas partes del mismo.
La etiqueta div inferior con la clase “feedicon” contiene el vínculo y la imagen del feed RSS que se encuentra en la parte superior derecha del blog. Puedes introducir la dirección de tu feed en el lugar marcado por el símbolo “#”.
Fecha. Estas son las opciones de publicación que tienes que seleccionar para conseguir un aspecto acorde al diseño original de la plantilla, editando la sección de entradas del blog en el modo de edición de elementos de página en Blogger:
Si tienes cualquier duda o problema a la hora de instalar esta plantilla, puedes enviarme un e-mail o dejar tus comentarios en la entrada.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
33 Comentarios
Hola Jose! Muchas gracias por usar la plantilla. Si no te aparecen los enlaces del footer, sólo tienes que añadir este código HTML/Javascript:
<div align=”center”>
Copyright 2007 <a href=”http://www.zonacerebral.com”>Zona Cerebral</a>, un blog para ganar dinero en internet.</div>
El problema que mencionas de las etiquetas quizás puede ser porque no las has insertado en el post o bien porque no has modificado las opciones de entradas del blog, como se detalla en la imagen de más arriba.
En todo caso, no tiene que ver con el diseño, ya que en la página de demostración funcionan a la perfección. Un saludo 
Oye no puedo modificar la cabecera, photoshop me dice que no tengo ram suficiente, no hay otro programa con el que pueda modificarla?
Has probado con ImageReady? Es casi igual que Photoshop y acepta imágenes en PSD manteniendo las capas. Creo que utiliza algo menos de memoria que Photoshop, porque me temo que no conozco ningún otro que te permita modificarla manteniendo las capas.
ME DICE ESTO CUANDO QUIERO GUARDAR LA PLANTILLA
No hemos podido guardar tu plantilla
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
Se ha encontrado más de un artilugio con el ID: HTML2. Los ID de artilugio deben ser exclusivos.
Ese error aparece porque hay más de un widget con el nombre de identificación HTML2. Cada artilugio debe tener un ID exclusivo, por lo que tendrás que buscar los elementos que tienen el ID HTML2 y cambiar uno de ellos por otro que no se encuentre repetido, como HTML3, HTML4… en función del número de widgets de este tipo que tengas en la plantilla.
Puedes hacerlo entrando en el modo de edición, activando la casilla de expandir plantillas de artilugios y buscando la palabra HTML2 a través del buscador del navegador. Espero que te sirva.
Saludos
Thanks for sharing this. 
I used it in one of my tech sites:
http://pcdistrict.blogspot.com/
Hello mate! No problem, thank’s for use it in your blog. Regards
Hola mira como he usado esta plantilla gracias http://adrian-fotoblog.blogspot.com
¿Q te parece?
Solo una pregunta q sale del tema, es que kiero que mis fotos puedan ser votadas (y el q tengo no me gusta) ¿Que sistema gratuito me recomiendas?
Hola! Te ha quedado muy bien, me gusta el toque personal que le has dado. En cuanto al tema de las votaciones, solo conozco dos servicios que funcionen con Blogger: uno es el que estás utilizando ahora y otro es Outbrain, aunque ambos son parecidos. Espero que te sirva.
Saludos
Hola, tengo un problema, y es que no se me muestra la barra con home y about y adsense. que puedo hacer?
Hola! ¿Has añadido el código como se detalla en las instrucciones del post? Es decir, editando el elemento de página que se encuentra justo debajo de la cabecera del blog. Los enlaces y los anuncios de Adsense no aparecen automáticamente al instalar la plantilla, ya que no se guardan los cambios de los widgets y es necesario añadirlos manualmente.
Un saludo
Hola!
Hay alguna forma de que aparezca la barra con el home y about pero SIN adsense?
Como sería el codigo?
Mas que nada porque quiero la barrita negra alli asi encuadra mejor.
Gracias desde ya! 
Hola buenisima la plantilla, ya la estoy usando en mi blog. Pero tengo un problema:
Copio el codigo que dejas a qui para que aparezca adsense + home + about + feed pero no anda.
Le cambio todo, tal como indicas aca de poner mi pub, y mis urls, pero no lo toma – es decir, se ve “inicio – home” con fondo negro y despues nada mas.
¿que estoy haciendo mal?
- Lola. Para que sólo aparezcan los vínculos del home y about sin Adsense, lo único que tienes que hacer es no copiar el código del anuncio que se incluye en el post y que se encuentra dentro de la etiqueta “div class=”adcode”. Espero que te sirva de ayuda.
- Paula. Hola! Muchas gracias. Ten en cuenta que los anuncios de Adsense pueden tardar en aparecer hasta 10 minutos, desde que Google decidió integrar el nuevo sistema de gestión de anuncios en Adsense. Puede que este sea el problema. En todo caso, asegúrate de que las comillas que se muestran en el código son las que se encuentran encima del número 2 de tu teclado, y no estas “”. Si esto ocurre, debes reemplazarlas por las anteriores.
Saludos!
Perfecto, eran las comillas nomas!! 
Gracias Ivan.
Una última duda, ya que solo me faltan unos retoques:
¿como puedo hacer para hacer que la imagen del header se clickee y lleve a inicio?
Probé de mil formas y no me sale, intenté poner
Blog
entre el div del header-wrapper (como he leido en otros lados) pero no pasa nada
¿Me ayudas?
De nada Lola. En cuanto a lo que comentas de transformar la imagen del header en un vínculo que te dirija al inicio de la página, la solución sería eliminar el widget que hace referencia al header de la página (edición html > activar plantillas de artilugios > eliminar el código que se encuentra entre “” y “” del div “header-wrapper”), entrar en el modo de edición de elementos de página y añadir un widget HTML/Javascript en la posición del header, incluyendo la imagen correspondiente con el vínculo.
En este artículo sobre como cambiar el titulo del blog por una imagen en Blogger, podrás encontrar más información.
Espero que te sirva de ayuda Saludos!
Hola! DTB
Bien decidi usar esta platilla me parecio la mas padre que encontre, pero el problema es que no se como editar la cabezera, es decir yo tengo Photoshop pero no se ni como puedo descargar la imagen para editarla…
Pnese que era en “Imagenes PSD” pero no me abre porque esra en .rar
me podrias ayudar? je
Hola Jorge! Efectivamente, el enlace “Imagenes PSD” contiene la imagen que necesitas para modificar la cabecera. El archivo está en formato .rar porque está comprimido con WinRar. Una vez que lo descargues, has de descomprimirlo con este u otro programa similar que acepte este formato y podrás editar las imágenes contenidas en el mismo. Saludos
no encuentro exactamente en que parte del codigo hay que agregar el otro codigo para que aparezca el menu, adsense y el rss feed 
Nacho entra en el modo de edicón de elementos de página en el panel de tu plantilla en Blogger. Una vez allí, verás los diferentes widgets que componen tu blog. Ahora haz click sobre el vínculo “Editar” del elemento de página HTML/Javascript, que se encuentra justo debajo de la cabecera del blog, y pega allí el código proporcionado en este post.
Ten cuidado, ya que las comillas que se encuentran en el código se han modificado al publicarlo. Debes reemplazarlas por estas las que se encuentran encima del número 2 de tu teclado.
Saludos!
ahora si gracias!!! Yo lo estaba queriendo agregar en la edicion pór html directamente
Jeje ok. Me alegro de que te haya servido de ayuda. Saludos!
Ivan lo estoy probando en otro proyecto mio http://www.sellersclub.blogspot.com pero el nav bar me queda asi, ya hice todo correctamente , lo revise miles de veces, ya no se que hacer
perdon quice decir navcontaine
Hola Oscar! Tan sólo tienes que seguir las instrucciones tal y como se detallan en el post. Puede que se deba a las comillas del código. Si te fijas bien verás que son las comillas que se encuentran un poco torcidas, por lo que deberás reemplazarlas por las que se están situadas en las mayúsculas del número 2 de tu teclado.
Saludos!
ya me di cienta jajajajja 
gracias ivan!!!
Hola que tal desd hace varios dias trato de instalar la plantilla dark ritual que por cierto me encanto, pero no logras cargarse ,me da error
> Your template is invalid because the tag ‘div’ appears inside of the
> tag ‘head’.
Mientras no solucione esto no puedo avanzar en mi blogs 
.Recurro a uds para que me ayuden les dejo la dirección de mi blogs .
http://artedanzarabeperu.blogspot.com/
Gracias por su pronta respuesta.
desaparecio el fondo del theme, que hago?
Olá. parabèns pelos templates e pelo site, muito bom mesmo!
pode me ajudar, estou tentando inserir o template clean and dark em meu blog mas sempre dá a mesma mensagem:
bX-w3ndel
Informações adicionais
blogID: 617585439174212922
host: http://www.blogger.com
uri: /html
Agradeço antecipadamente sua ajuda, abraços.
ya bajé las imágenes, y he editado la barra,pero no sé como subirla. como hago????
hola ivan!
muy buena la plantilla
ya la estoy ocupando para un proyecto de matematicas
Una consulta
pasa que por defecto no se me incluye el JAVAscrip de la autoría del diseño del blog, de donde saco el codigo rapidamente o lo elaboro yo con paciencia ?¿?
Otra cosa, las etiquetas no funcionan, eso es un poco decepcionante
Saludos!
JOsé