Archivo de la categoría ‘Plantillas para Blogger’
Plantilla para Blogger Codigo Geek
Tras la renovación del diseño del blog Codigo Geek, Hernan puso a disposición de sus lectores el theme de WordPress utilizado anteriormente. Hace unos días Hernan me invitó a adaptarlo a la plataforma de Blogger con el fin de ampliar las posibilidades del diseño, invitación que acepté encantado y que le agradezco una vez más desde aquí. La plantilla para Blogger resultante es prácticamente idéntica al theme original:
La plantilla se comparte de forma totalmente gratuita bajo licencia Creative Commons, por lo que puedes descargarla sin coste alguno y utilizarla en cualquier blog siempre que cumplas estos requisitos: no usarla con fines exclusivamente comerciales y mantener intactos los enlaces del pie de página hacia Codigo Geek y Zona Cerebral, como reconocimiento de los derechos de autor.
Descarga
Edicion
Header. En el div con el mismo nombre situado bajo el <body> del código HTML de la plantilla, reemplaza las etiquetas h3 y h2 para cambiar la descripción y el título del header respectivamente. No te olvides de modificar el enlace del título.
Menu. Debajo del header, sustituye las direcciones URL y los anchor text de los enlaces delimitados por los elementos li de la lista ul.
Sidebar. El sidebar o columna derecha de la plantilla se encuentra dividida en 3 secciones distintas, como puedes comprobar si accedes al panel de edición de elementos de página, cuyos ID son #sidebartop, #sidebarleft y #sidebarright.
Suscripción. Si quieres insertar el bloque de suscripción creado por Hernan, sólo tienes que añadir un nuevo gadget o elemento de página HTML/Javascript en la sección superior del sidebar y pegar el código siguiente, sustituyendo los enlaces e imágenes por los correspondientes a los de tu feed RSS:
<div class="RSSRow"> <div style="float:left; padding-left:110px; text-align:center;"> <a href="http://feeds.feedburner.com/codigogeek">Suscribete via RSS</a> / <a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=772432">Email</a><br/> <a href="http://feeds.feedburner.com/codigogeek"><img width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/codigogeek?bg=C40A28&fg=FFFFFF&anim=1" height="26"/></a> </div> </div>
Buscador. En la misma sección que en el caso anterior, crea un elemento de página HTML/Javascript e inserta este código reemplazando la dirección URL por la de tu blog terminada en “/search/” (importante), tal y como se muestra a continuación:
<form id="searchform" action="http://codigogeekzc.blogspot.com/search/" method="get"> <div class="search"> <input id="s" value="Usa el buscador..." name="s" onclick="this.value='';" type="text"/> <input src="http://img172.imageshack.us/img172/9419/icogodd2.gif" value="Go" class="btn" name="q" type="image"/> </div><!--/search--> </form>
Entradas del blog. Adapta el estilo de las entradas del blog y el formato de la fecha al diseño original visible en la página de demostración, seleccionando estas opciones en zona editable de “Entradas del blog”, en el panel de elementos de página en Blogger:
Otras consideraciones. La publicación de comentarios en esta plantilla está configurada mediante la inserción del formulario en la parte inferior de los posts individuales del blog.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Mocha Choca.
Mientras navegaba por las secciones de Deviant Art en busca de algo de inspiración como de costumbre, encontré esta deliciosa plantilla para Blogger de 2 columnas inspirada en tonos propios del moca o el chocolate, mezclados con un gradiente de color verde tanto en su cabecera como en la linea inferior del pie de página.
Es un template que ofrece extraordinarias posibilidades de personalización y optimización mediante el código CSS, ya que utiliza el comando “repeat” en las imágenes de fondo que componen tanto el footer como el header del diseño. Este último, alcanza desde la parte superior de la página hasta el menú de navegación y la imagen de fondo tiene unas dimensiones de 2×310 píxeles sólamente.
En el blog de demostración del autor encontrarás las instrucciones para modificar la plantilla en función de tus necesidades, perfectamente explicadas con imágenes y descripciones.
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Angel
Tras 7 meses de ausencia en lo que al mundo de las plantillas se refiere, es un placer para mi publicar esta nueva plantilla para Blogger, adaptada del theme para WordPress Angel diseñado por Jai de Blogohblog. El template está formado por un menú de enlaces superior, un buscador y un sidebar principal con secciones específicas, anuncios de 125×125 y tabs, que se divide posteriormente en otras dos columnas.
Puedes descargar esta plantilla de forma gratuita bajo licencia Creative Commons Reconocimiento-No comercial, siempre y cuando mantengas los enlaces situados a pie de página hacia Zona Cerebral y Blogohblog y no la utilices con fines comerciales.
Descarga.
Edición.
Menú HTML. Accede al modo de edición HTML de la plantilla y modifica los enlaces que se encuentran en las listas <li> de la etiqueta <div id=’MainMenu’>, debajo de la etiqueta body. No olvides cambiar la dirección URL del enlace RSS por la del feed de tu blog.
Header. Unas líneas más abajo, se hallan tanto el título como la descripción del blog, delimitados respectivamente por los tags <h1> y <h2> dentro del <div id=’header’>. No olvides reemplazar también el enlace del título, además de su nombre.
Buscador. Cambia la dirección URL contenida en el código del formulario de búsqueda “form action“, por la de tu blog terminada en /search/ (importante). Por ejemplo: http://direcciónurldetublog.com/search/
Widgets. Si entras en el panel de edición de elementos de página en Blogger, observarás que el sidebar lateral se encuentra dividido en 3 secciones diferenciadas a través de las cuales puedes añadir los distintos widgets. Las dos últimas, corresponden a los dos sidebars inferiores del template. La primera sección es la que debes utilizar para añadir el texto introductorio, además de los diferentes elementos que están a tu disposición en los enlaces de descarga anteriores (Widgets y Script Tab).
Por tanto, tan sólo has de crear un nuevo elemento HTML/Javascript para cada uno de ellos, insertando los códigos, modificándolos según tus necesidades y colocando los widgets por orden: Sobre mi, Suscripción, Ads, Tabs. Los tabs están formados por títulos <h2> y listas de enlaces <li> fácilmente personalizables, aunque para que funcionen tienes que subir el script Tabber.js a algún servicio de alojamiento que te permita subir archivos, ya sea gratuito o de pago (por ejemplo, Google Pages). Hecho esto, dirígete al código HTML y añade la dirección URL en la que se encuentra tu script dentro del código situado justo antes de la etiqueta </head>, de forma que te quede así:
<script src='http://DIRECCIÓNDETUARCHIVO/tabber.js' type='text/javascript'/> <script type='text/javascript'> </script>
Entradas del blog. Para que el diseño de la plantilla sea exactamente igual que el del theme original, has de establecer las siguientes opciones en el panel de edición de entradas del blog (haz click sobre la imagen para ampliarla):
Footer RSS. Como su propio nombre indica, los enlaces de suscripción RSS de entradas y comentarios del footer o pie de página, se encuentran al final del código HTML en la etiqueta <div class=’footer’>. Por favor, recuerda los términos de la licencia Creative Commons en relación con los enlaces de reconocimiento por el trabajo realizado. Gracias!
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Blue Blog
Lo prometido es deuda, así que aquí os presento la adaptación del theme para WordPress Blue Blog diseñado por Kailoon y convertido en una plantilla para Blogger, formada por 3 columnas, un espacio para incluir la imagen del autor, una zona gestionada mediante tabs o etiquetas y un amplio conjunto de elementos decorativos en tonos azulados.
El código de esta plantilla adaptada se comparte de forma gratuita bajo licencia Creative Commons Reconocimiento-No comercial, por lo que el único requisito exigido para utilizarla es el mantenimiento de los enlaces situados en el pie de página del diseño, a modo de reconocimiento por el trabajo realizado.
Descarga.
Personalización.
Header. El título predeterminado que suele aparecer en las plantillas para Blogger, ha sido suprimido. En su lugar, el código correspondiente a la cabecera del blog se encuentra contenido en la etiqueta div, cuyo “id” es “header“. Dentro de ésta, tendrás que modificar la dirección y el nombre del título (blogname), la descripción (description) y el enlace de suscripción al feed RSS del blog (rss). Un par de líneas por debajo, se encuentra la lista de enlaces relacionada con los vínculos del menú de enlaces que se muestra en el blog, que puedes modificar a tu gusto.
Foto. Reemplaza la imagen del logo del blog de Kailoon por tu foto o por la imagen que desees, editando la dirección url del atributo background, dentro del bloque de código CSS cuyo id es #blogger.
Tabs y buscador. Antes de agregar ambos widgets, es necesario que descargues los Scripts jQuery y Tab disponibles en los enlaces de descarga. Posteriormente, deberás subirlos a alguna plataforma de alojamiento gratuito que te permita enlazarlos y hacerlos funcionar desde tu blog, como por ejemplo Google Pages. Una vez que los hayas subido, has de sustituir las direcciones de los Scripts en los códigos que se encuentran justo antes de la etiqueta </head> (al terminar los códigos CSS y antes del body), por aquellas en las que estén alojados los Scripts. Por ejemplo:
<script src='http://tusitio.com/jquery.js' type='text/javascript'/> <script src='http://tusitio.com/tab.js' type='text/javascript'/>
Los códigos del cuadro que funciona a través del script tab.js situado en el sidebar y del buscador, se encuentran en este archivo de texto. Descárgalo y accede a la sección de elementos de página de tu plantilla. Agrega un nuevo elemento HTML/Javascript en la primera sección del sidebar, es decir, en la que se encuentra en la parte superior de la columna y pega el código anterior, modificando los valores correspondientes a los títulos de cada fragmento (fragment 1, 2 y 3), así como los enlaces o los contenidos que desees insertar. Recuerda sustituir la dirección del buscador para que funcione correctamente por la de tu blog acabado en /search. Por ejemplo: http://DIRECCIÓNDETUBLOG/search.
Entradas del blog. Haz click en “Editar” en la sección de entradas del blog y selecciona las siguientes opciones:
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Revolution
El creador del conocido theme premium para WordPress Revolution, lanza por fin una versión gratuita basada de este fantástico diseño, que ahora también puedes disfrutar en tu blog con esta plantilla para Blogger.
Puedes descargar y utilizar esta plantilla bajo licencia Creative Commons Reconocimiento-No comercial, es decir, de forma gratuita siempre y cuando respetes los créditos situados en el pie de página del diseño.
Descarga
Personalización
Entra en el modo de edición HTML de la plantilla, activa la casilla “Expandir plantillas de artilugios” y sitúate en el código HTML que se encuentra bajo la etiqueta <body>.
Header. Introduce la dirección URL de tu blog en el vínculo del div con la clase “headerleft“, así como la dirección URL de tu imagen de título.
Feeds y Banner. En el interior del div con la clase “headerright“, sustituye los enlaces del feed RSS de entradas (feeds posts default) y de comentarios (feeds comments default) por los de tu blog. Un poco más abajo, verás un vínculo con el símbolo “#” y una imagen correspondiente al banner de anuncios patrocinados de 468×68 píxeles, en el que podrás añadir el enlace del anunciante y la imagen que desees.
Menú de enlaces. Desciende unas cuantas líneas a través de tu código y modifica los enlaces situados bajo la etiqueta con el ID “nav“.
Buscador. Inmediatamente después de la barra de navegación, dentro de la etiqueta “navbarright“, tan sólo tienes que alterar el campo del formulario de búsqueda “form action“, insertando la dirección URL de tu blog terminada en “/search“.
Sidebar. Si eliminas los widgets preinstalados en la plantilla, que seguramente te aparecerán vacíos al instalarla en tu blog, deberás aplicar los estilos CSS a cada uno de tus nuevos widgets para que aparezcan los iconos de categorías, archivos, usuarios, posts y comentarios en cada uno de ellos. Para hacerlo, sólo tienes que buscar el bloque de código HTML del sidebar (div l_sidebar o r_sidebar) y el widget (b:widget id=… title=…) al que pretendes aplicar el estilo CSS. Una vez que lo hayas encontrado, verás que hay un atributo que hace una llamada al contenido del widget con <data:content/>. Justo encima, debes sustituir el valor de la clase del div, con alguna de las clases correspondientes en función del icono que quieras que aparezca, y que están claramente identificadas en el código CSS bajo el título subrayado “Widgets” (categorias, blogroll, rentabiliza…)
Entradas del blog. Entra en la sección de edición de elementos de página en Blogger y edita el cuadro que contiene el formato de las entradas del blog, marcando las siguientes opciones que se muestran en la imagen:
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
Plantilla para Blogger Tiny Studio
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Tiny Studio es el nombre de este precioso theme para WordPress de 1 columna creado por Pelangi Petang (actualmente no disponible) que he decidido adaptar para convertirlo a Blogger. Teniendo encuenta alguna que otra petición y tras comprobar que aún no había publicado ninguna plantilla de estas características, consideré que este era el diseño ideal para hacerlo.
La plantilla se comparte bajo licencia Creative Commons. Esto significa que puedes descargarla de forma gratuita y utilizarla en cualquier blog cumpliendo estos requisitos: no la uses con fines exclusivamente comerciales y mantén intactos los enlaces del pie de página hacia Pelangi Petang y Zona Cerebral, como reconocimiento de los derechos de autor.
Descarga
Edicion
Header. Accede al modo de edición HTML en Blogger y sustituye la dirección url de la imagen que se encuentra entre paréntesis en el atributo “background” del ID #header, dentro del código CSS de la plantilla. La imagen tiene unas dimensiones de 530 × 115 píxeles.
Menu. En el código HTML de la plantilla, bajando unas líneas desde la etiqueta <body>, busca la etiqueta div con la clase “menu” y modifica tanto los valores expresados con el símbolo “#” como los anchor texts, insertando las direcciones url que consideres oportunas.
Fecha. Como puedes ver en la página de demostración, este diseño cuenta con un formato de fecha en los posts personalizado mediante una imagen de fondo y estructurado en un bloque de dos líneas. Para ajustar la fecha a este formato, entra en el panel de configuración de Blogger > Formato > Formato de cabecera de fecha y selecciona la penúltima opción. Por ejemplo: 18 febrero 2009
Últimos trabajos. Busca la etiqueta div con la clase “list” y reemplaza el texto delimitado por las etiquetas <p> y </p>. También puedes cambiar el título especificado por la etiqueta “h3″. Si no sabes que añadir en esta sección siempre puedes eliminarla, aunque te aconsejo que le eches un vistazo a este post sobre como insertar una galería personalizable de Flickr o este otro sobre como agregar un slideshow con posts destacados en Blogger.
Sidebar. El sidebar situado debajo de la sección anterior, está compuesto por un div con el id “box” y se encuentra dividido en dos secciones con las clases “leftbox” y “rightbox” respectivamente.
Etiquetas. En la parte más inferior de la plantilla tienes a tu disposición otro apartado totalmente personalizable para añadir cualquier cosa que desees, una nube de tags, una galería de imágenes, tu perfil de usuario… Para ello, busca el div con la clase “bottom” y altera lo que necesites, ya sea el título “h3″ o el contenido de texto “p”.
Footer. Desciende casi hasta el final del código HTML de la plantilla y edita los enlaces señalados con los símbolos “#” por los de tu blog, feed RSS y feed RSS de los comentarios, en caso de que quieras mantener esa estructura en el pie de página.
Entradas del blog. Para ajustar al máximo la apariencia de la plantilla al diseño original, dirígete al panel de edición de elementos de página y haz click en “Editar” en el elemento “Entradas del blog”, estableciendo los siguientes parámetros y alineaciones:
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!