26 septiembre 2010

Entendiendo, manipulando y personalizando los enlaces de las páginas estáticas

Como  ya muchos saben, blogger ha habilitado la función de añadir páginas estáticas a el blog.

¿Que son las páginas estáticas?
Son páginas independientes, que se diferencian de las entradas porque al crearlas no aparecen en tus entradas y para poder verlas necesitamos tener su enlace.

¿Cómo se hacen las páginas estáticas?
Estas páginas se pueden crear desde un panel similar al panel de edición de entradas, y luego, los títulos, que a su vez son enlaces a dichas páginas, son añadidas a un widget en la columna lateral de tu blog o a la sección del crosscol, según tu escojas.

¿Cómo edito a las páginas estáticas?
Hay varias formas y esto dependerá de lo que quieras cambiar, por ejemplo, si quieres editar los titulos y/o el contenido, tienes que ir a Creación de entradas ► Editar entradas,  y editar lo que desees, también lo puedes hacer accediendo a través de la edición rápida de la página, (con el símbolo del lápiz) al igual que lo haces con las entradas, claro, pensando que tienes habilitada la opción de edición rápida en tu blog.

Es posible editar el orden en que las páginas se muestren y seleccionar cual mostrar y cual no, por medio de el widget en el que estan colocadas, y esto lo haces en la sección diseño de elementos de la plantilla, o jalandolo desde tu blog. Para Cambiar el orden solo tienes que arrastrar los títulos de las páginas, y ubicarlos en el orden que quieras, y para mostrar cual se muestra y cual no, solo tienes que marcar la casilla correspondiente.

Como puedes ver es sencillo editarlas, ya que no es necesario ingresar a la sección de HTML, lo que es mucho mas cómodo y rápido.

¿Cómo puedo manipular la ubicación de los títulos (enlaces) de las páginas estáticas y cómo lo personalizo?
Si usmeamos en el código de la plantilla expandiendo artilugios, cuando hemos colocado las páginas en el crosscol, veremos lo siguiente:


<div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol'> <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section> </div>


Nota: Al ser colocadas en el sidebar-wrapper, el código es el mismo, simplemente cambia el id  del contenedor de las páginas, que en ese caso sería sidebar-wrapper.

Pero, ¿Qué es lo mas relevante que nos dice este código?
 
  • Primero, que las páginas estan ubicadas en una parte de la plantilla llamada : crosscol-wrapper, que no es más que una sección o envoltura, nombrada de ese modo y que generalmente en las plantillas originales de blogger, esta colocado entre la envoltura de la cabecera (header-wrapper) y la envoltura del contenido (content-wrapper).
  • Que los enlaces de las páginas, están el la sección identificada como crosscol y que es quien le da el espacio físico, por así llamarlo, para poder estar ahí, y que a su vez están dentro de el crosscol-wrapper.
Es decir tu puedes tener definido el crosscol-wrapper en tu plantilla : <div id='crosscol-wrapper' style='text-align:center'></div>,  pero si dentro de ella, no esta no esta una sección identificada de x ó y modo, no aparecerá el widget  (para poder agregar gadgets) en la parte de diseño de tu plantilla en donde estan los elementos de tu plantilla; en este caso la sección  del crosscol wrapper, esta identificada de este modo:

<b:section class='crosscol' id='crosscol'>


  • Que el ID, identificador de el Widget es Pagelist1,  y que el tipo es una lista de páginas, es por ello que tiene la etiqueta ul que ordena a la lista, y los elementos  li, que son los títulos de tus páginas.
  • Que los títulos de las páginas funcionan como enlaces ya que usan una etiqueta llamada <a> , que es que sirve para crear enlaces.
  • Que estas listas de elementos (títulos de las entradas) ó elementos li,  tienen una clase, llamada "selected", por lo cual es posible darles un estilo único  al momento en que son seleccionados y se permanece en ese enlace, por lo que, esto, representa una gran ventaja a la hora de crear el diseño de nuestro menú de navegación.

¿Menú de Navegación?, Si, menú de navegación, si te fijas es lo mismo, ya que contiene enlaces, que a su vez están listados.

Ya se puso interesante la cosa, al entender lo anterior, resulta muy sencillo poder darle el  estilo que quieras a estos enlaces, y también colocarlos donde a ti mas te convenga dentro de tu plantilla, incluso poder crear otra lista de páginas, para que en lugar de una, tengas 2 o 3, o las que necesites.

Recuerda que podemos tener hasta 10 páginas individuales, y además meter otros enlaces a estas listas, cosa que Rosa ya había explicado como hacer.

Bueno todo esto lo veremos por partes ya que es mucho para ponerlo en una sola entrada, así que lo que sigue, lo veremos en otro capítulo de la serie: Personalizando las páginas estáticas :D.

22 septiembre 2010

Vectores Gratis: Imágenes de Hojas de Cuaderno (papel)

vectores imagenes de hoja de cuaderno
Las imágenes de hojas de cuaderno son muy utilizadas en la creación de plantillas, en el digital scrapbooking, entre otros proyectos digitales. Pues aquí te tengo un sitio donde encontrarán muchas y de alta resolución, puedes usarlas tanto en proyectos personales como comerciales, la única restricción es que no se pueden redistribuir "tal y como son",  pues sólo pueden ser descargadas desde el sitio web que refiero.


vectores imagenes de hojas de cuaderno

Ve y llévatelas.

Enlace: Fuzzimo

21 septiembre 2010

Emoticones cupcake para tu blog

Hola, el otro día me entretuve un poco haciendo uno emoticones de cupcake, la mayoría son gif's animados, pensando en los que les encantanlas animaciones :D  los hice a partir de unos brushes que encontré en qbrushes, estan super, los puedes descargar gratis, luego haré una plantilla usándolos :D

Pronto haré una versión con los emoticones mas pequeños, tendré que hacer algunas mejoras en el color y en los bordes, la textura y el brillo, para que al cambiarlos de tamaño, se vean nítidos,es por eso que no me animé a ponerlos todavía en el script, para que se muestren de forma automática en las entradas y los comentarios, pero ya que haga los cambios lo haré y los compartiré con ustedes.

También tengo pensado hacer otros con diferentes formas, por ejemplo de flor, de osito panda, de corazón, de calavera etc.

Bueno, parece que hoy amanecí con ganas de hacer promesas, :D, parezco politica, jaja, mejor ahí les van los emoticones.




emoticon

emoticon

emoticon

emoticon

emoticon

emoticon

emoticon


emoticon



emoticon

Te recomiendo que los almacenes en tu propio servidor de almacenamiento de imágenes como photobucket, o picassa, actualmente tengo cuenta pro, pero no se hasta cuando seguré con esa cuenta y supero el límite de banda ancha de la cuenta gratuita.
Crédito por los brushes:
Lovesiren

14 septiembre 2010

Excelente botón traductor para tu blog, disponible en más de 50 idiomas

Si estás buscando añadir la opción de traducción de idiomas a tu blog, porque recibes visitas de distintos países, o bien, quieres hacer más accesible tu blog, definitivamente ésto te va a interesar.   

¿De qué se trata?

De un botón traductor, que le facilitará a tus usuarios traducir libremente tus publicaciones.

¿Quién la creó?

Jon Raasch, quien es un programador web especializado en la optimización de JavaScript, creó este botón para traducir el idioma de el contenido de blogs y/o páginas web, disponiendo un total se 52 idiomas. 52 idiomas, ¿te imaginas? ahora prácticamente cualquiera que ingrese a tu blog podrá leer el contenido de tu rinconcito. ¡Se acabó la barrera del idioma!.   

¿Cuáles son sus características?

Este botoncito, además de ser muy útil es muy flexible, ya que permite entre muchas otras cosas:
  • Seguimiento con google Analitics
  • Cambiar la imagen del botón
  • Cambiar las opciones de texto
  • Cambio de idiomas soportados
  • Permite la traduccion del contenido de forma selectiva (Puedes Seleccionar cierto contenido para que no sea traducido)
  •  y más...
Ahí mismo encontrarás la explicación completa y detallada, para cada una de tus preguntas con respecto a la personalización, y habilitación de otras características, y si no entiendes el idioma, por que esta en inglés, tradúcelo, que para eso está el botoncito (:   

¿Cómo lo pongo en mi blog?

Si lo quieres usar de inmediato, solo tienes que copiar y pegar el script que te facilitan, en la columna lateral de tu blog o bien en el lugar de tu plantilla donde quieras colocarlo y tu botón tendrá esta apariencia:
¿Cómo personalizo el botón?

En realidad, hay que sustituir el botón que ofrecen por uno propio, para ello, hay tres opciones según explica en la página. Yo usé la primera, ya que me parece muy fácil ya que se logra con CSS. A continuación lo pasos para su personsalización usando CSS.   

Paso 1.Copia este código (en una nota de tu compu), o en cualquier otro editor de texto, para que puedas trabajar con el.

#translate-this .translate-this-button {
background-image: url(image.jpg) !important;
width: 250px !important;
height: 50px !important;
}
Luego sustituye donde dice image.jpg por la URL de tu imagen, cambia los valores de width (ancho) y height (alto) según las dimensiones de tu botón.    

Paso 2. Luego, vas a pegar el código, en la la hoja de estilos de tu plantilla, antes de ]]></b:skin>  

Paso 3.Después, checa en vista previa para visualizar el nuevo botón y verificar que todo haya quedado bien en tu plantilla, (a veces pegando códigos borramos sin querer algo, o lo ponemos en el lugar equivocado), si todo luce bien,  guardas los cambios y listo.  

Nota: se supone que al hacer lo anterior, ya habrías colocado el script del botón traductor en la columna de tu blog. Aqui te dejo unos botones que he creado para este propósito:


Dimenciones de los dos bones: 250 X 36 pixeles.

Si quieres aventurarte a crear el propio diseño de tu botón, te dejo una página donde puedes encontrar los íconos de las banderas de todos los paises. Iconos de banderas.    

Si puedes, no olvides hacer una donación a este proyecto. Es muy bueno, apoyar este tipo de iniciativas que benefician tanto y a tantos ¿no lo crees?

Enlace:TranslateThisBottom

Texto con Sombra, cajas con sombra + hack para IE

Visistando la página de Lon Raasch, creador de TranslateThisButton, encontré un hack para lograr mostrar el sombreado del texto y cajas en IE.

Anteriormente les había dicho como agregar texto con sombra en cualquier parte del blog, ahora les puedo decir que el texto sombreado será visible también en Internet Explorer, What? ¿en Internet Explorer? sí, leíste bien, en Internet Explorer...pero, ¿cómo es  posible?, ¿acaso Internet Explorer se puso las pilas y ya traduce el código para la sombra de texto?

No, no se puso las pilas, ni tampoco traduce el código para dar sombra en el texto, por ahora; esto lo conseguiremos con un hack, que es el siguiente:

<!--[if IE]>
<style>
/* call this in IE only */
.texto con sombra {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(
color='#777777', Direction=135, Strength=5);  
    }
</style>
<![endif]-->
..y que deberás poner después de ]]></b:skin>

También, tienes que sustituir la parte que dice .texto con sombra por la parte de la plantilla que quieres dar sombra y hacerla visible en Internet Explorer, considerando que ya usaste el sombreado en esa misma parte(esto para que se vea igual en todos lo navegadores) usando la propiedad, y cambiar los valores.

Ejemplo, supongamos que quieres dar sombra al título de tu blog, para ello, agregaras el código anterior, dentro de los atributos de el tíitulo, en el código de tu plantilla.

Dependiendo la plantilla, el título se puede encontrar definido de varias formas pero comúnmente lo encuentras como  h1.title o #header h1,  a esa sección, vas a agregar la propiedad anterior, esto ya lo había dicho en la entrada  de Texto con sombra.

Luego, utilizarás este hack, para que el texto con sombra se vea en Internet Explorer.

Ej. para mostrar sombra en el texto en el título del blog en IE.Solo tienes que agregar el siguiente código en tu plantilla, después de ]]></b:skin>
<!--[if IE]>
<style>
/* call this in IE only */
h1.title {
zoom: 1;
filter: progid:DXImageTransform.Microsoft.Shadow(
color='#777777', Direction=135, Strength=5);  
    }
</style>
<![endif]-->
Variables para los valores

Puedes cambiar los valores del color para cambiar el color de la sombra, direction , para la dirección de la sombra, que es es en grados y gira tomando en cuenta las manecillas de el reloj con punto de partida desde las 12, y de Strength que es la fuerza de la sombra (amplitud).
    Recuerda, el código anterior sirve para que se vea el sombreado en el título de tu blog en IE, considerando por supuesto que así este definido en tu plantilla, si no, busca como lo tienes definido y sustitúyelo.

    Nota: Para dar sombreado en varias partes de la plantilla a la vez, deberás declarar que parte quieres sombrear, y separar cada una de ellas con una coma.

    Ejemplo:

    h1 title, .sidebar h2, .post title {el código del hack...}

    Cajas con Sombra

    ¿Sabias que es posible agregar sombra a las cajas o contenedores ?, esto es posible gracias a una propiedad CSS3, las sombras se muestran al estilo photoshop en todo lo que sea un contenedor, ya sea de imagen o de texto.
    Para lograr esto, solo agregarás el siguiente código:

    .mi-caja-con-sombra {
         -moz-box-shadow: 2px 2px 4px #777;
         -webkit-box-shadow: 2px 2px 4px #777;
          box-shadow: 2px 2px 4px #777;
    }


    Puedes agregar sombras a prácticamente todo lo que sea una caja, por ejemplo:
    • Imágenes de tus posts
    • Una galeria de imágenes
    • Envoltura de tu plantilla
    • Widgets de tus columnas etc., etc.…
    Una vez que lo conseguiste, claro para Firefox, Google Chrome y otros navegadores modernos, pensarás, ¿y qué con IE?

    Solución: El hack es el mismo que en el de sombra en el texto, y de la misma forma deberás agregar el nombre de la parte que quieres poner sombra en la caja, para que funcione.

    Puedes ver todo funcionando en esta plantilla de demostración.


    Nota: Para evitar problemas con los filtros es recomendable usar una sola vez el hack para IE y ahí mismo poner todas las partes a las que quieres agregar sombra.

    Observación y conclusión:
    Como puedes ver,  es posible visualizar las sombras en practicamente todos los navegadores y gracias al hack que te mostre, es posible lograrlo en Internet explorer, sin embargo, y si ustedes lo notaron en el demo, los bordes  de el texto sombreado se ven un poco rugosos y dentados (ojalá se pudiera poner anti-alias, como en photoshop), y esto es mas notorio en las letras que presentan inclinación, por lo que te recomiendo tomarlo en cuenta.

    Afortunadamente, las cajas sombreadas no presentan ningun problema :-) por lo que su uso queda ampliamente recomendado..

    Fuente: Jon Raasch Blog.

    11 septiembre 2010

    Primer sorteo de fondo para Twitter "Comenta para Ganar"

    Estas buscando un fondo para Twitter con un diseño único y personalizado con tu nombre o nombre de tu blog, bueno entonces esto te va a interesar, solo deja tu comentario diciendome que te interesa y hare un sorteo con los nombres de los participantes.

    Bases e instrucciones:

    • Solo debes dejar un comentario
    • Se sorteará entre los participantes el día 25 de septiembre del presente año
    • Publicaré los resultados en una entrada
    • El sorteo lo haré por medio de Sortea2

    Así que no esperes, comenta y gana.

    06 septiembre 2010

    Cómo Agregar un fondo a la imagen principal de tu entrada

    ¿Quieres agregar una imagen de fondo a la imagen principal de tus entradas?

                                    Antes
    Ejemplo fondo para imagen en el post
                                   Después
    Ejemplo fondo para imagen en el post
    Esto que voy a mostrarte, es aplicable para quienes usan el resumen automático en las entradas, en donde se utiliza una medida definida para la imagen principal que es mostrada en la entrada.

    Gema en su blog http://gemablog-.blogspot.com/2009/03/resumen-en-todos-los-post.html explica muy bien como instalar el resumen automático en tus entradas.

    Bueno, esto se me ocurrió, en parte, ahora que he aprendido mas sobre el uso de condicionamientos; normalmente si ponemos una imagen en el fondo del post declarada de la siguiente forma:

    .post img { background: url(imagen.gif); }

    La imagen de fondo que uses, se mostrará siempre en todas las imágenes que tengas en tus entradas, lo que tiene sus limitaciones, ya que no todas son del mismo tamaño, y la imagen que uses como fondo a veces no quedará bien, a menos de que te preocupes por poner imágenes del mismo tamaño en todos tus posts, o pongas una imagen que se repita.

    Para lograr que se muestre la imagen de fondo en la imagen principal de tu entrada harás lo siguiente:

    Paso 1. Hacer la imagen de fondo que quieres usar, esto lo conseguirás con photoshop o con Paint.Net.

    Recuerda que deberás hacer la imagen, tomando en cuenta las dimenciones de la imagen que tienes definida en el script que usas para el resumen de entradas, estas, estan declararadas así:
    ej.:
    img_thumb_height = 130;
    img_thumb_width = 180;

    Paso 2. Luego, sube la imagen a un sitio de almacenamiento de imágenes como photobucket o en blogger, ya que necesitas la URL (dirección)de la imagen.

    Ya que tengas la url de la imagen, sustituyela en donde dice: imagen.gif en el siguiente código:

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    .post-body img {
    background: url(imagen.gif) no-repeat left top;
    padding:22px 22px 25px 25px;
    }
    </style>
    </b:if>

    Paso 3. Luego, dirígete a la Edición de HTML y pega el código anterior depués de ]]></b:skin> 

    Checa en vista previa, para verificar que se vea la imagen, si se ve incompleta, ajusta los valores en donde dice padding, esto para agregar mas espacio, y se muestre completa tu imagen, recordando que estos valores se muestran en el siguiente orden:

    padding: 22px,22px,15px,25px;
    padding: arriba, derecha, abajo, izquierda;

    Paso 4.Una vez que hayas logrado ubicarla perfectamente Guardas los cambios y listo.

    Con esto lograrás que la imagen se muestre solamente en la página principal.

    Puedes ver funcionando esto, en la plantilla Papel azul.

    En ese caso yo use la imagen de fondo que mide: 164 X154 pixeles.
    y la imagen en el resumen de entradas la tengo definido así:
    img_thumb_height = 110;
    img_thumb_width = 120;

    :) Luego, voy a hacer varias imágenes para que puedas usar para este próposito, por lo pronto te dejo esta:
    Fondo para imagen


    No olvides Suscribirte a mi blog para recibir todas mis actualizaciones e información sobre plantillas nuevas.

    04 septiembre 2010

    Personalizar la viñetas de las listas de tus entradas usando una imagen

    Cuando ordenamos textos mediante una lista desde el panel de edición de entradas de Blogger, usando la herramienta de lista de viñetas, que se puede reconocer por el siguiente ícono: lista de vinetas, cada elemento de la lista se muestra con el puntito negro que no a todos nos gusta. A ese puntito se le llama viñeta. Es posible cambiar dicho puntito pora que se vea cuadradito, o con forma de disco, si usamos otros valores para la viñeta. Por ejemplo:

    Para que la viñeta luzca como un cuadrado, usaríamos éste CSS:
    .post ul{ list-style-type:square;}
    Y el resultado seréa éste:
    • Elemento uno
    • Elemento dos
    Para que la viñeta luzca como un circulito, usaríamos éste CSS:
    .post ul{ list-style-type:circle;}
    Y el resultado sería éste:
    • Elemento uno
    • Elemento dos

    También podemos usar una imagen, que remplazará al puntito que por defecto tiene cada elemento de la lista, lo cual permitirá darle más presentación a las listas, agregando atractivo visual y adaptarlos al diseño de la plantilla. Dicho en términos coloquiales: todo se verá más mono y combinadito.

    Bien, ahora veamos cómo remplazar la viñeta de cada elemento de la lista con una imagen:

    Paso 1. Copia el código y pégalo en una nota de tu computadora (notepad) para que desde ahí puedas editarlo:
    .post ul{
    list-style-image: url(imagen.gif);
    }
    Luego, sustituye imagen.gif por la URL de la imagen que deseas usar.

    Paso 2. Ve a Plantilla ► Personalizar ► Avanzado y en Añadir CSS pegas el código anterior.

    Paso 3. Guarda los cambios en Aplicar al blog. ¡Así de fácil y rápido!

    ¡Lo lograste! , ahora cada vez que hagas listas en tus entradas, usando la opción de lista con viñetas se mostrará la imagen que pusiste.

    Recuerda: Para crear las listas, debes usar la lista con viñetas que viene integrada en tu panel de edición de entradas, incluso en Gmail, Windows Live Writer, entre otros programas o editores lo tienen integrado. Es así como se añadirá automáticamente la imagen en cada uno de los elementos de la lista una vez que hayas agregado el código CSS con la imagen.

    Lista con vinetas del panel de edicion de entradas de Blogger

     
    Estas son algunas imágenes que puedes usar para este propósito, si te gusta alguna, solo haz clic sobre ella y la copias.

    ¡Ah!, y para quienes les gustan los gifs animados hice también un corazón que late, ¡aahh, qué romántico!

    Imágenes de fondo Transparente:
    • Estrella azul
    • estrella morada
    • estrella rosa
    • mariposamorada 


    Imágenes de fondo Blanco
    • Estrellaazul
    • estrellamorada
    • estrellarosa
    • flechanegra
    • mariposaazul
    • mariposamorada


    Gif Animado:




    Por supuesto estos son sólo unos ejemplos. Puedes encontrar muchísimas imágenes en https://www.iconfinder.com/search/?q=bullet.

    Nota: De preferencia almacena la (s) imágen(es) tu mismo en Blogger, subiendo la imagen desde una entrada que guardes como borrador, o en una entrada de un blog de pruebas.

    Espero que te sea útil.

    Referencias:

    02 septiembre 2010

    Introduciendo la plantilla para Blogger: Mis Recetas Secretas


    Hola que tal, aquí les tengo una nueva propuesta para vestir a su blog, ideal para un blog de cocina, esta es mi primer plantilla que hago con el diseño específicamente para este tipo de blogs, en donde podrás compartir  tus deliciosas recetas, :-) espero que les guste.

    DEMO       BAJARLA

    Características:
    • Plantillas de 2 columnas
    • 3 columnas adicionales en el footer
    • Menú de Navegación que puedes configurar
    • Menú en el top que también puedes configurar
    • Icono de RSS integrado el header
    • Buscador Interno
    • Resumen automático en las entradas
    • Tabla con pestañas para poner 3 widgets
    • Comentarios Personalizados, destacando el comentario del Autor.
    Si vas a la demostración de la plantilla, y navegas por los enlaces del menú de navegación, podrás ver que en el link seleccionado se abre la pestaña, tenia idea de crear este efecto y gracias al genial  JMiur de Vagabundia,  lo logré, es muy buena onda, y tiene mucha experiencia y conocimiento, lo recomiendo ampliamente, bueno, volviendo a lo de los los enlaces del Menú de Navegación, estos están creados para hacer 4 categorías base en tus recetas, mas el de Inicio por supuesto.

    Como lograr el efecto de la pestaña abierta  y mostrar las entradas sin la columna lateral.

    Para que funcione el truco de la "pestaña abierta" en el link seleccionado, y se muestren “solo las entradas sin la columna lateral”,  tienes que poner etiquetas a tus recetas, nombrándolas con una o mas de esas categorías,(Entradas, Platillos, Postres y Favoritos).

    • Entradas ( que pueden ser caldillos, sopas, ensaladas) 
    •  Platillos  (que serian Guisados, horneados etc.) 
    •  Postres  (pasteles, panes etc..) 
    •  Favoritos (las recetas favoritas)

    ¿Si me explico? tienes que poner las etiquetas: - Entradas, platillos postres o Favoritos- (según la receta)  a todas tus recetas.

    Nota: Si tu no quieres estas categorías, las puedes cambiar, por las que tu decidas más convenientes para tu blog, yo me base en un libro de recetas que tengo, que las muestra de ese modo y me pareció muy fácil y ordenado, pero tu decides.

    Los efectos se logran por medio de condicionales, y éste es el código:

    <!-- Estilos para MENU de NAVEGACION -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.pageName == &quot;Entradas&quot;'>
        <style>
    #header-wrapper {
    background-image: url(http://4.bp.blogspot.com/_yCA1gGtzYzo/THv9evTY3xI/AAAAAAAADdc/fLFLl4n5HXg/s800/entradas.jpg);
    }
    a#menuEntradas {color:#d78306 !important; font-weight:bold;!important}
    #main{
    width:700px;
    padding:0 15px 0 20px;
    }
    #sidebar-wrapper {
    width: 0px;
    visibility:hidden;
    display:none;
    }
    </style>
    </b:if>
    <b:if cond='data:blog.pageName == &quot;Platillos&quot;'>
        <style>
    #header-wrapper {background-image: url(http://4.bp.blogspot.com/_yCA1gGtzYzo/THv9l2vfBZI/AAAAAAAADdk/WIg10kZD8tw/s800/platillos.jpg);
    }
    a#menuPlatillos {color:#d78306 !important; font-weight:bold!important;}
    #main{
    width:700px;
    padding:0 15px 0 20px;
    }
    #sidebar-wrapper {
    width: 0px;
    visibility:hidden;
    display:none;
    }
    </style>
      </b:if>
    <b:if cond='data:blog.pageName == &quot;Postres&quot;'>
        <style>
    #header-wrapper {background-image: url(http://1.bp.blogspot.com/_yCA1gGtzYzo/THv9rTjy0eI/AAAAAAAADds/KFiP1WWBXSo/s800/postres.jpg);
    }
    a#menuPostres {color:#d78306 !important; font-weight:bold !important;}
    #main{
    width:700px;
    padding:0 15px 0 20px;
    }
    #sidebar-wrapper {
    width: 0px;
    visibility:hidden;
    display:none;
    }
    </style>
    </b:if>
    <b:if cond='data:blog.pageName == &quot;Favoritos&quot;'>
        <style>
    #header-wrapper {background-image: url(http://2.bp.blogspot.com/_yCA1gGtzYzo/THv92Vrn5cI/AAAAAAAADd0/WDNKgmotDtM/s800/favs.jpg);
    }
    a#menuFavs {color:#d78306 !important; font-weight:bold!important;}
    #main{
    width:700px;
    padding:0 15px 0 20px;
    }
    #sidebar-wrapper {
    width:0px;
    visibility:hidden;
    display:none;
    }
    </style>
      </b:if>
        </b:if>
    <!--  FIN Estilos para MENU de NAVEGACION –>

    Si te fijas dentro del código están nombradas las categorías o etiquetas ( Entradas, Platillos, Postres, Favoritos) , si los dejas con ese nombre, lo único que tienes que hacer es poner esas etiquetas respectivamente a tus recetas, como ya lo dije anteriormente.

    Si los nombras de otro modo, tienes que sustituir esas categorias, al igual que en el Menú de Navegación, respectivamente.

    Nota: Es necesario escribir las etiquetas igual para que funcione, (tanto en el código como en las etiquetas de la entradas)  ya que se identifican mayúsculas de minúsculas.

    Como activar los Enlaces del menú de Navegación
    Para que funcione el Menú de navegación, tienes que editar el siguiente código:
    <!-- MENU DE NAVEGACION -->
    <div id='menu'>
    <ul> <li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
      <li><a href='#' id='menuEntradas'>Entradas</a></li>
      <li><a href='#' id='menuPlatillos'>Platillos</a></li>
       <li><a href='#' id='menuPostres'>Postres</a></li>
        <li><a href='#' id='menuFavs'>Favoritos</a></li></ul>
    </div>
    <!-- FIN MENU DE NAVEGACION –>
    Tienes que sustituir los gatitos # por los enlaces que se muestran al ir a cada etiqueta respectivamente (Entradas, Platillos, Postres y Favoritos) o como los hayas nombrado, si te decidiste por otros.

    El enlace sería algo como esto:

    http://cocinandoconblogger.blogspot.com/search/label/Postres

    Hecho lo anterior, ya funcionarán, los dos truquillos respectivamente, si tienes dudas no dudes en preguntrar .

    Como instalar el buscador Interno

    Ahora te diré como instalar el Buscador Interno:

    Solo tienes que pegar en la columna lateral en la parte que mas te guste el siguiente código:

    <form action='TU_URL_AQUI/search'  method='get'>
    <input type="text" class="searchbox" name="q" value="Buscar" onfocus="if (this.value == &quot;Buscar&quot;) this.value = &quot;&quot;;" value="Buscar" name="as_q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Buscar&quot;;" />
        </form>

    Luego, sustituir donde dice TU_URL_AQUI , por la URL de tu blog, guardas los cambios y listo.

    :-) Lo hice de este modo para que tu decidas donde ponerlo.


    Como lograr el efecto del cambio de estilos al estar en el link sobre mi:

    Para que se vea el cambio en los estilos, cuando entras al link de Sobre mi, en la plantilla, tiene que agregar el siguiente código, después de: ]]></b:skin> (lo puedes poner después de que terminan los estilos para el truco del menú de navegación, que explique anteriormente)
    <b:if cond='data:blog.url == &quot;http://cocinandoconblogger.blogspot.com/2010/08/sobre-mi.html&quot;'>
    <style>
    #header-wrapper {background-image: url(http://1.bp.blogspot.com/_yCA1gGtzYzo/THwLlwQDxbI/AAAAAAAADeU/x4mFfSR8ce4/s800/sop.jpg);}
    #sidebar-wrapper {
    width: 0px;
    visibility: hidden;
    display:none;}
    #main {
    width:700px;
    padding:0 15px 0 15px;
    }
    #menu{
    width: 0px;
    visibility: hidden;
    display: none;
    }
    #menu li a{
    display: none !important;
    visibility:hidden;
    width:0px;
    }
    </style>
    </b:if>

    Vas a crear un post con tus datos, puedes agregar una foto si quieres, poner mas estilos etc., y vas a copiar el enlace que aparece en la barra de direcciones al entrar al post,  el enlace de la plantilla del DEMO es este:

    http://cocinandoconblogger.blogspot.com/2010/08/sobre-mi.html

    Luego vas a sustituir tu enlace por el que tengo marcado de rojo.

     Nota: También puedes hacer lo mismo, con el link de contacto.

    Para personalizar los enlaces del top por los propios, puedes seguir las instrucciones de la plantilla Fantasía Nocturna, específicamente donde dice: instrucciones para personalizar el menú de navegación.


    Tabla de Pestañas
    La tabla de pestañas que puedes ver, es muy útil ya que ahorra espacio, y puedes mostrar tres widgets de tu preferencia, esos son los últimos tres widgets que aparecen en el diseño de la  plantilla de la columna lateral.

    Parece mucho por hacer, pero no es tanto, practicamente es copiar y pegar, además vale la pena, tu plantilla se verá organizada y muy mona, ¿no lo crees?

    Probado en: IE6, IE7, IE8, Firefox, Google Chrome.

    Créditos:
    Imágenes de cocina: MDesings.
    Brushes Florales: Yasny Chan.

    Importante: Hacer esta plantilla, representa horas de trabajo, por favor respeta los créditos, recuerda que es una plantilla gratuita.

    Recuerda que puedes criticar o comentar. Me gustan los comentarios  :-)