Ya tengo lista la primer versión de la plantilla Cocinando con Adela que ya te había mencionado antes, es una plantilla pensada en blogs de cocina, puedes personalizar la imagen de la cabecera con tu logo, con una imagen propia, o bien no poner ninguna.
También es una plantilla versátil como la plantilla Versatile, ya que podrás cambiar los fondos de ciertos elementos, como el color de fondo del menú, fondo de la galería de imágenes miniaturas de tus entradas populares, etc, desde el Diseñador de Plantillas, de ese modo, la plantilla tendrá una apariencia diferente cada vez que lo quieras, y podrás darle tu toque personal fácilmente, sin ingresar a la edición de HTML de la plantilla, así que a divertirse ;)
Para Ingresar al Diseñador de Plantillas, necesitas ir a Plantilla > Personalizar > Avanzado y desde ahí hacer los cambios que desees.
Características
- Plantilla de 2 columnas
- Menú desplegable
- Resumen automático en las entradas
- Buscador Integrado en el header
- Mucho espacio para colocar gadgets
- Sección especial para agregar banner publicitario el el heaer de 468x60 pixeles
- Secciones especiales para agregar banners de 125x125 pixeles (agregas gadget de imagen y pones el enlace)
- Sección especial para mostrar tres gadgets de forma alterna
- Sección especial para mostrar galería de imágenes en miniatura del gadget de Entradas populares
- Tres columnas adicionales en el Footer
Tendrás mucho espacio para colocar gadgets, como puedes ver en la imagen:
Como Personalizar la imagen de la cabecera o header
Lo puedes hacer de dos maneras, la primera, es colocar una imagen en el #outer-wrapper, en donde actualmente muestra esa imagen de los sartencitos que puse en la demostración, la ventaja de ponerla ahí, a diferencia de subirla desde Diseño en la sección de la cabecera, es que la imagen puedes ser tan grande "de alto" como desees, ya que no está limitada al alto del header. En cuanto al ancho, no debería superar los 990 pixeles que tiene definido. Te recomiendo usar como fondo la imagen del body (el pattern), en el editor que uses, o bien usar una imagen con fondo transparente.
La otra forma, es ir a Diseño y subir la imágen que quieras desde la sección de la cabecera, donde puedes elegir que se muestre en lugar del título y la descripción, debajo de estos etc. Puedes mover dicha imagen por medio del #header-inner.
Como editar el Menú de navegación
Esta es la estructura que tiene el menú desplegable, y que necesitas que editar, he resaltado de rojo lo que necesitas cambiar:
<!-- Empieza Menú Desplegable -->
<div class='nav'>
<ul class='menu' id='menu'>
<li class='nodiv'><a class='nodiv' expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li>
<a class='desplegable' href='#'>Entradas</a>
<ul>
<li><a href='#'>Ensaladas</a></li>
<li><a href='#'>Aderesos</a></li>
<li class='submenu'>
<a href='#'>Sopas »</a>
<ul>
<li class='noborder'><a href='#'>Sopas 1</a></li>
<li><a href='#'>Sopas 2</a></li>
<li><a href='#'>Sopas 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Platillos</a>
<ul>
<li><a href='#'>Platillo 1</a></li>
<li><a href='#'>Platillo 2</a></li>
<li><a href='#'>Platillo 3</a></li>
<li class='submenu'>
<a href='#'>Guisos »</a>
<ul>
<li class='noborder'><a href='#'>Guiso 1</a></li>
<li><a href='#'>Guiso 2</a></li>
<li><a href='#'>Guiso 3</a></li>
<li><a href='#'>Guiso 4</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Postres</a>
<ul>
<li><a href='#'>Panes</a></li>
<li><a href='#'>Pasteles</a></li>
<li><a href='#'>Helados</a></li>
<li><a href='#'>Galletas</a></li>
<li><a href='#'>Gelatinas</a></li>
</ul>
</li>
<li>
<a href='#'>Otras</a>
<ul>
<li><a href='#'>Otras 1</a></li>
<li><a href='#'>Otras 2</a></li>
<li><a href='#'>Otras 3</a></li>
</ul>
</li>
<li>
<a class='last' href='#'>Favoritos</a>
<ul>
<li><a href='#'>Favorito 1</a></li>
<li><a href='#'>Favorito 2</a></li>
<li><a href='#'>Favorito 3</a></li>
<li><a href='#'>Favorito 4</a></li>
</ul>
</li>
</ul>
Ya deje el menú con algunos textos para los enlaces que tendrás que editar, poniendo tus propios textos y la dirección web a donde quieres que se dirija al hacer click sobre este.
Simplemente sigue cada linea de código y dentro de la linea debe estar el texto y la dirección web.
Ejemplo:
<li><a href='#'>Favorito 1</a></li>
<li><a href='#'>Favorito 1</a></li>
Donde esta la almohadilla '#' pones el enlace en sustitución a este, recuerda quitar la almohadilla de otro modo no funcionará, sólo debe estar el enlace.
Y donde dice Favorito 1, pones el texto del enlace.
Cómo configurar la fecha de los posts
Necesitas ir a Configuracion > Idioma y Formato (en la nueva interfaz) y en Formato hora, seleccionarla como se muestra en la imagen:
*Varía según la fecha actual.
Cómo agregar los banners publicitarios
Sólo necestitas agregar la imagen en el gadget de "Imagen" en las secciones correspondientes, y agregar el enlace para dicha imagen en la configuración.Cómo agregar últimas entradas con miniatura
Desde diseño, haz click en el gadget de Lista de Blogs y agrega el siguiente enlace de forma repetitiva, cambiando el número marcado de rojo cada vez que agregues el enlace, (el primer enlace 1, luego 2, después 3...) cada enlace sirve para que se muestre una entrada, y vas a poner tantos enlaces como entradas quieras mostrar.http://Nombreblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1Deberás configurarlo para que muestre el titulo y la imagen miniatura. Todas mostrarán el enlace a la entrada que dice: "Ver artículo".
Configurar el gadget de entradas populares (galería de miniaturas) para que muestre el tooltip
Necesitas configurar el gadget de entradas populares, para que muestre solamente la miniatura, no marques la casilla del fragmento, de ese modo se verá el tooltip con el título de la entrada.Cómo mostrar la Evaluación de Estrellas
Para agregarlo, solo necesitas ir al Diseño de la plantilla y hacer click en la sección de la Entradas y marcar la casilla para que se muestre:
Ahora, lo que sigue es, compartir esas ricas recetas!!
Créditos:
Javascript del menú desarrollado por: scriptiny
De nuevo me encanta la plantilla!!!! Completísima!!!
ResponderSuprimir¡Me encantó Karlita!. De paso te doy mis facilidades, y bendición para todos tus allegados en estas vísperas de la navidad, y sobre todo muchas gracias por todas las cosas hermosas que nos compartís desde que iniciaste tu genial portal web. ¡Muchos besos!
ResponderSuprimirHola Lianxio!, muchas gracias por tu comentario :)
ResponderSuprimirEspero que te la pases muy bien esta Noche Buena y Feliz Navidad!!
Hola Sweet Muse!, ya te extrañaba por aquí :)
ResponderSuprimirQuerida, muchísimas gracias por tus buenos deseos, espero lo mismo para ti y quienes te rodean, un abrazo fuerte y que Dios te bendiga :)
Feliz Navidad!!
Aww!! me encanta Karla,me la guardo ^^
ResponderSuprimirGracias por compartir tanto,que tengas unas felices fiestas mi niña.
Besotes!! ;))
Woooow! Lástima que no me haya dado de momento por hacer un blog de recetas, sino ya sabes que plantilla tendría jaja! Son geniales tus themes en serio, cada día me sorprendes más! Un besito y Feliz Navidad!
ResponderSuprimirHola Isabella, muchas gracias, espero que la sigas pasando super en esta temporada de fiestas :)
ResponderSuprimirUn abrazote :D
Pues si te animas iRe,me avisas, sobre todo si son recetas de postres, ya que las cositas dulces son mi gran debilidad :D
Muchísimas gracias, un abrazo fuerte y que te la estés pasando super en esta temporada de fiestas.
Nice theme thanks a lot :)
ResponderSuprimirYou're welcome Yasin, Happy new year!! :D
ResponderSuprimirI love this theme but can't get it to upload without errors. Could you please help me? I even translated it but that didn't seem to work either.
ResponderSuprimirHi T2E,
SuprimirJust follow this instructions:
How to install the template
1. Download the template.
2. Go to "Template" (using the new interface) clik on the "Backup/Restore" option.
3.Upload the template from a file on your hard drive. (the XML file).
Have a great weekend :)
Hola Karla,
ResponderSuprimirMe encanta este blog!
He puesto esta maravillosa plantilla en mi blog "cocinaconbeyka.blogspot.com", y resulta que me da un pequeño error de composición, y las entradas salen un poco movidas en la página principal, es decir, deja un hueco enmedio sin entrada...¿qué podría hacer?
Mil gracias!!
¿Qué te parece Beyka si me das la dirección del blog para ver lo que me dices?, o si lo prefieres, toma una captura, y márcarlo con un óvalo o círculo en paint ;)
SuprimirClaro :) La dirección es la que te indicaba arriba:
Suprimirwww.cocinaconbeyka.blogspot.com
Y aquí la imagen de lo que sucede:
http://i43.tinypic.com/211jqth.png
En rojo lo que está mal, es decir, que debería aparecer la última entrada en el espacio de arriba, y éste aparece en blanco.
En verde está lo que pienso yo que es el fallo, y es que en la entrada de la izquierda el cuadrito es más grande, supongo que por los carácteres permitidos por el leer más :S
Muchas gracias!!
Disculpa Karla,
SuprimirNo me preguntes cómo pero ya lo he arreglado...he abierto las dos entradas que salían juntas, las marcadas en verde. La de la derecha tenía la imagen alineada a la izquierda y el texto empezaba al lado de la imagen, pero tenía puesto < br > hasta que llegaba debajo, para que no quedase así.. he centrado la imagen y he borrado los espacios y ahora sale bien. Pero no me explico por qué.
De todas formas, muchas gracias por todo: por tu atención, por las molestias, por la plantilla y por tu magnífico blog :)
Este comentario ha sido eliminado por el autor.
ResponderSuprimirEste comentario ha sido eliminado por el autor.
ResponderSuprimirHola, que bien esta tu plantilla. Mira que he buscado y la tuya es una de las mejores que he visto en cuanto a flexibilidad y habilidad de modificarla. Gracias, me ha encantado todo el codigo, super bien organizado y muy bien documentado.
ResponderSuprimirMuchas gracias Vanguard Women, me da mucho gusto que hayas encontrado algo que te guste, cualquier cosa, ya sabes, aquí ando ;)
SuprimirKarla no se si te llego mi mensaje anterior. Tengo el problema de que si tengo una foto en el post en el sumario de la pagina principal la foto no se alinea bien con el texto y entonces lo empuja hacia abajo y no queda bien, se distorcionan los demas elementos puedes echarle un vistazo y decirme que es lo que pasa. Gracias.
ResponderSuprimirhttp://mujeresvanguard.blogspot.com/
Hola Vanguard Women,
Suprimir¿A qué mensaje te refieres?
Entiendo lo que me dices, es una limitación de la plantilla, ya que las entradas que aparecen una enseguida de la otra se logra sólo con CSS (sin usar Javascript). La plantilla está pensada en blogs que siempre muestren imágenes, y en ese caso no habrá problemas.
Se puede arreglar, pero también tendrá la limitación de que todos los posts tendrán la misma altura. para ello hay que ir a la edición de HTML de la entrada, y con la ayuda de ctrl F, buscar:
.post {
...
/*height: 390px;*/
...
Esa parte que resalté de negrita es la altura, elimina la barrita diagonal y el asterisco, al principio y al final de dicha linea, para que se lea la altura. (así como está pasa como comentario y no se interpreta).
Otra opción es agregar al script una imagen por defecto para que en caso de no haberla esta aparezca, el asunto ahí es que si muchas entradas no tienen imagen, se va a ver la imagen por defecto repetida muchas veces.
Espero sea útil. Buen día ;)
Si me funciono, gracias. Reduje el height a 350 y cambie el top the readmore y funciono.
ResponderSuprimirExcelente Vanguard Women, puedes editar el valor según necesites ;)
SuprimirHay un plugin para jQuery, que evita que pase eso (que se separen los contenedores del post), sin necesidad de agregar un alto al contenedor, y quedan como mosaico, de hecho lo estoy usando en una plantilla que casi termino.
Saludos ;)
Hola Karla, perdona que te moleste... He intentado solucionar mi duda por internet pero no encuentro nada que me ayude, y empiezo a pensar que no es posible hacer lo que pretendo...
ResponderSuprimirMe gustaría saber si hay alguna manera de que las miniaturas de las entradas, en la página principal, estén redimensionadas. Es decir, según el código, la imagen se "recorta" a partir de un porcentaje. Pero como algunas de mis fotos no son de muy buena calidad se ven mal, y me gustaría redimensionarlas, para que salieran igual, recortadas, pero más pequeñas. Algo parecido a lo que hace el gadget de entradas populares... ¿sería posible hacer algo así?
Muchas gracias de antemano. Un abrazo ^^
Claro que se puede Beyka, echa un vistazo a este post de Oloblogger, ese script te recortará la imagen, en lugar de redimensionarla ;)
Suprimirhttp://www.oloblogger.com/2010/10/sumarios-automaticos-casi-definitivo.html
Suerte :)
Hola de nuevo, Karla ^^
SuprimirCreo que me has entendido al revés, ya que yo justamente pretendo que se redimensionen en lugar de recortar, ya que sólo recortando las imágenes me salen borrosas. Por eso creí que redimensionándolas se podrían ver más nítidas.
Mi idea, que creo que es imposible, era poner un código que redimensionara la imagen a un 50%, y después recortase sobre esa segunda imagen. Ya que así se verá más parte de la imagen en la página principal y saldrán menos borrosas.
Gracias :)
Con ese script que te menciono, la imagen se va a recortar y no se va a ver borrosa es decir, no pierde calidad, yo lo uso. Sólo configuras el ancho y alto de la imagen y la sección de la foto que quieres que se muestre, es como cuando recortas una imagen en un editor de imágenes, ¿me explico?;... aunque si no te interesa el resumen automático en los posts, y quieres mostrarlos completos desde la página principal, tal vez no te convenga.
SuprimirBueno, echa un vistazo con Gem@blog, Ciudad Blogger, y Vagabundia, no sé si ellos hayan publicado algo que se adapte a lo que buscas.
Suerte :)
De acuerdo, lo voy a probar ^^
SuprimirMuchas gracias! Y enhorabuena de nuevo por este blog y por ofrecer tan buenos consejos y tanta ayuda. Un abrazo.
De nada Beyka, suerte ;)
SuprimirHola Karla como estas? espero que bien. Hace un ratito encontré tu plantilla y no dude en adquirirla. El tema es que tengo un problemita con las entradas, recién puse tu plantilla y por eso se ve un poco desorganizado, pero las entradas como podrás ver salen lineas de código y no entiendo mucho porque me pasa esto? podrás darte una vueltita y comentarme? Desde ya muchas gracias
ResponderSuprimirHola,
SuprimirEntiendo, se puede arreglar, si pones el mismo alto en los posts, para ello hay que ir a la edición de HTML de la entrada, y con la ayuda de ctrl F, buscar:
.post {
...
/*height: 390px;*/
...
Esa parte que resalté de negrita es la altura, elimina la barrita diagonal y el asterisco, al principio y al final de dicha linea, para que se lea la altura. (así como está pasa como comentario y no se interpreta).
Otra opción es usar un plugin que funciona con jquery, para que no se separen de forma irregular los post que están abajo, cuando tienen diferentes altos; puedes ver el ejemplo en esta plantilla en la que estoy trabajando:
http://masonry-c.blogspot.com/
Voy a considerar si agrego el plugin, pensando en que ya usa jQuery la plantilla, para que los posts no se vean del mismo alto y tan alineados ;)
Hola Karla, felicidades por esta plantilla, está de lujo y me gustaría utilizarla en mi blog de cine, sin embargo al probarla en un blog de pruebas me da un error: En la página principal hay un par de entradas que no muestran la imagen del post.
ResponderSuprimirAquí puedes verlo: http://i.imgur.com/5SurP.png
Y mi blog de pruebas:http://pruebasdeguiacinefila.blogspot.mx/
¿Por qué crees que pase eso? Espero que me puedas ayudar a resolverlo.
¡Saludos y gracias de nuevo!
Hola Zosesbnv, el problema que origina eso, son los paréntesis que usas en las imágenes al nombrarlas, cuando guardes una imagen, te recomiendo guardarla solo usando guiones ;)
ResponderSuprimirSabes, si ves el Demo, verás que estoy actualizando la plantilla, centré el contenido, etc. Quiero quitar el script de resumen automático, agregar masonry el plugin que use en la plantilla nueva "fashionista", para no definir el alto del post, de ese modo, pueden flotar sin problemas y guardar los espacios entre si de forma asimétrica...
Puedes cambiar los colores desde el diseñador de plantillas.
¡Excelente! Nunca me hubiera imaginado que eso era lo que causa el problema. Muchas gracias.
ResponderSuprimirRespecto a la nueva versión, estaré esperando con ansias a que la termines para probarla. Si puedo sugerir algo, me parece que la zona de comentarios de la plantilla está algo descuidada, un fondo para los comentarios estaría muy bien.
¡Saludos y gracias por todo! n.n
Gracias Zosesbnv, tiene razón, acabo de habilitar los comentarios anidados y no le he aplicado ningún estilo definitivamente haré algo al respecto ;)
SuprimirBuen día :D
Hola, me gustó mucho tu plantilla y estoy pensando en usarla en algún Blog. Te explico lo que quiero hacer a ver si me podés ayudar un poco:
ResponderSuprimirQuiero que en la Página Principal se vea una sola entrada, y más grande, hasta ahí voy bien. Pero también quiero que se vea allí mismo una imagen y un texto debajo. También pude hacerlo, pero el texto aparece sin formato ninguno, es decir, yo quiero que desde la página principal se vea mi texto con negritas, subrayados, etc., etc.
Tenés idea de cómo puedo lograrlo?
muchas gracias y felicitaciones por todo tu trabajo
Olvidé decirte que esta plantilla la tengo pendiente de actualizar, espero mañana tener tiempo para hacerlo :)
SuprimirEste comentario ha sido eliminado por el autor.
ResponderSuprimirMe olvidé de decirte que el botón de Ver Más no lo necesito. Lo que quiero es que en la página principal me muestre la entrada directamente. Muchas gracias.
ResponderSuprimirHola prieto, para aparezca una sola entrada es fácil, solo necesitas, configurarlo en el panel de Blogger, yendo a configuración > Entradas y comentarios, y en Mostrar un máximo de, seleccionar el número de entradas que deseas mostrar.
SuprimirPara que aparezcan las entradas sin el resumen automático, hay que hacer muchos cambios, habrá que quitar el script que lo hace, los estilos del enlace para ingresar a la entrada, los estilos de los posts, etc, deja veo si agrego una versión como la que buscas, o también puedes buscar otra plantilla que se adapte más a tus necesidades, si quieres, echa un vistazo a Btemplates ;)