Miss Lavanda

Personaliza tu plantilla blogger móvil, lección 2

82 comentarios:
Buenísimos días a todos!!

Después del sorteazo de ayer (todavía no os habéis apuntado??) retomamos el curso en el que nos encontramos inmersos, y hoy, vamos a darle más caña.


Lecciones anteriores:

PERSONALIZAR LA PÁGINA DE ENTRADAS RESUMIDAS
Esta es, la página principal y las siguientes, para guiarnos mejor a lo largo del curso, voy a usar el blog que tengo de demos. Con lo que hicimos el día anterior, nuestra plantilla tendrá este aspecto (variando en colores, estilo de la fecha...):


• Lo primero que nos nos gusta nada, es la barra superior, porque no está ajustada a la pantalla y por tanto no sirve para nada. La podemos quitar, usando este código CSS:

.mobile #barra-superior{display:none;}

*NOTA: todo esto es asumiendo que habéis usado el tutorial de este blog para ponerla, sino, reemplazad el ID por el correspondiente, siempre poniendo delante el .mobile

También la podemos ajustar, o crear otros menús (por si no usarais el menú de página de blogger), todo esto lo veremos en lecciones posteriores.

Por este mismo motivo, si no os gusta el menú de páginas de blogger, también podéis ocultarlo, para después poner otro. Se hace así:

.mobile #PageList1 {display:none;}

• Una vez la hemos quitado, el otro problema viene siendo la cabecera. En el caso de este blog, es texto y no imagen. Para hacerlo más pequeño usamos este otro código:

.mobile .Header h1{
font-size:20px; /*Ajustamos al tamaño*/
}

Mirad la diferencia:


En el caso de que uséis una imagen, no habréis tenido que tener ningún problema ;) Pero en una lección aprenderemos a poner una diferente. Si no usáis cabecera, como yo misma, no os aparece; de ahí que veamos la alternativa ;)

Hecho esto, ya nos podemos poner a modificar el resto del diseño.

• Para poner la flechita que lleva al post de otro color:

.mobile-index-arrow{
color:#000000; /*Sustituidlo por el color que queráis*/
}

• Para cambiar el estilo de la fecha. Éste tendrá el aspecto que le habéis dado en vuestra plantilla, pero si queréis modificarlo para ponerlo más pequeño o por cualquier otro motivo debéis usar este código:

.mobile .date-header span{
font: normal normal 10px Arial; /*Tamaño y tipografía*/
color:#cccccc; /*Color*/
 text-transform:uppercase; /*Para que esté en mayúsculas, borrad la línea si no lo queréis*/
letter-spacing:0px; /*Para que no haya espaciado entre caracteres, borrad la línea si no lo queréis*/
}

.mobile .date-header{
margin-bottom:-10px; /*Para ajustar el espacio entre la fecha y el título del post*/
}

• Para cambiar el estilo del título:

.mobile h3.post-title a, .mobile h3 {
margin: 0;
width:100%;
text-align:left; /*center, para que esté centrado; right para que esté a la derecha*/
font: normal normal 13px Arial; /*Tamaño y tipografía*/
color:#333333; /*Color*/
letter-spacing:1px; /*Espaciado entre caracteres, borrad la línea si no lo queréis*/
text-transform:uppercase; /*Para que esté en mayúsculas, borrad la línea si no lo queréis*/ 
padding-top: 10px; /*Ajustar el espacio entre el título y la fecha*/
padding-bottom: 10px; /*ajustar el espacio entre el título y el resto de la entrada resumida*/
}

• Para cambiar el estilo del enlace a los comentarios:

.mobile .comment-link{
text-transform:uppercase; /*Para que esté en mayúsculas, borrad la línea si no lo queréis*/
color:#333333; /*Color*/
font: normal normal 12px Arial; /*Tamaño y tipografía*/
letter-spacing:1px; /*Espaciado entre caracteres, borrad la línea si no lo queréis*/
}

.mobile-index-comment{
padding-top: 10px; /*Ajustar el espacio entre el link de comentarios y el resto de la entrada resumida*/
padding-bottom: 10px; /*ajustar el espacio el link de comentarios y el final */
text-align:left; /*center, para que esté centrado; right para que esté a la derecha*/
}

Para ocultar o modificar el enlace 'Ver versión web'. Yo lo mantengo por si alguien le apatece verlo según es mi blog, o para acceder a Google Friend Connect, pero si no queréis que aparezca, ponéis esto y listo:

.mobile-desktop-link{display: none;}

Y para cambiar su apariencia:

.mobile-desktop-link a{
color:#333333; /*Color*/
font: normal normal 13px Arial; /*Tamaño y tipografía*/
text-transform:uppercase; /*Para que esté en mayúsculas, borrad la línea si no lo queréis*/
letter-spacing:1px; /*Espaciado entre caracteres, borrad la línea si no lo queréis*/
}

Hecho todo esto, vuestra plantilla móvil habrá dado ya un buen cambio no es cierto? :D

PERSONALIZAR LA PÁGINA DE UN POST
Aquí los cambios que vamos a hacer son más bien pocos, porque tampoco hace falta mucho.

Ajustar las imágnes al ancho del dispositivo para ello usamos este código:

.mobile .post img{width:100%; height:auto;}

• También podemos modificar el estilo del título (sin que cambie el de las entradas resumidas):

.mobile h3.post-title {
font: normal normal 12px Arial; /*Tamaño y tipografía*/
text-align:left; /*center, para que esté centrado; right para que esté a la derecha*/
border:1px solid #333333; /*Estilo del borde (ya sabéis que se puede desglosar ;)*/
margin-top:10px; /*Ajustar distancia entre el título y la fecha(si estuviera arriba)*/
margin-bottom: 10px; /*Ajustar distancia entre el título y el cuerpo de la entrada*/
}

Y esto ha sido todo por hoy :D La próxima semana, veremos cómo colocar los gadgets y ajustarlos fácilmente ;)

Si tenéis cualquier duda escribidla en los comentarios, que ya sabéis que haremos una entrada especial para dudas al final del curso.

Pasad un día muuuy bueno! Besotes! Laura

PD: si me habéis escrito tardaré unos días en responder ;)

¡Sígueme y no te pierdas nada!

Polabox Amor, el mejor regalo para San Valentín + SORTEO CHUPI

17 comentarios:
Muy buenos días lavanderos!!

Nos ponemos ya en modo San Valentín ON y lo hacemos por todo lo alto, gracias a los chicos de Polabox y su Polabox Amor, una caja llena de recuerdos bonitos impresos en fotos en formato pola.


Polabox es un servicio de impresión de fotografías, que podéis elegir de vuestras redes sociales, dropbox o subir desde vuestro propio ordenador, y que cuentan con una estética bien bonita y retro

Para este San Valentín, Polabox ha preparado una cajita edición limitada, que podéis llenar de vuestras fotos más románticas o de aquellas que os hacen revivir momentos especiales. No me digáis que no es perfecta!


Podréis escoger 30 fotos y además incluye una sorpresa extra en su interior :) Si lleváis aquí algún tiempo, sabréis que probé Polabox el año pasado y que quedé encantada con el servicio; ahora mi habitación está llena de polas por todos los rincones.



Tanto si es para vosotros, como si lo usáis para regalar, Polabox es la elección perfecta, y más si os encanta la fotografía. Un regalo original, y lo mejor de todo, personalizado ;) Además cuentan con un servicio de atención al cliente estupendo y una calidad de 10!

En esta ocasión, Polabox, me ha cedido una cajita Polabox Amor, para sortear entre todos vosotros, que la última vez sé que os encantó, y a mí me encantó que os encantara (valga la redundancia).

SORTEO POLABOX AMOR
Para participar, debéis seguir los siguientes pasos:
• Rellenar el formulario que encontraréis al final (clic aquí si no os aparece)
• Compartir el cartel que os he dejado en mi facebook para la ocasión*

*Si no usáis facebook, u os apetece compartirlo mucho más, también podéis hacerlo retwitteando el cartel desde mi twitter o instagram, junto con los hashtag #polabox #sorteopolaboxamorML

El sorteo estará activo desde hoy mismo ahora mismo, hasta el lunes de la próxima semana, o sea el 2 de febrero a las 20:00h, en ese momento compartiré por facebook y twitter el ganador. ¡Muchísima suerte a todos!



Espero que os haya gustado mucho este nuevo producto de Polabox y el sorteo que hemos preparado ;) Si no queréis perderos nada de nada de Polabox, podéis seguirlos en su facebook. Y no os quedéis con las ganas de tener vuestros productos Polabox, podéis conseguirlos en su web ;)

PD: este post sigue mi código de confianza :D

Después de esta sorpresica ;) Mañana retomamos el curso para aprender a personalizar la plantilla móvil, a las 8h la tenéis por aquí.

Un besote gordo! Pasad un día genial! Laura

¡Sígueme y no te pierdas nada!

Domingos Molones: Tu Cocina Te Llama

4 comentarios:
Muy buenos días domingueros!

Bienvenidos todos a un nuevo domingo molón, esta vez de la mano de Sam, su cocina, y su blog 'Tu Cocina Te Llama'. Esperamos las dos que os guste mucho y que llenéis vuestros recetarios de nuevas recetas bien ricas ;)

¡HOLA!
Estoy alucinada, no me creo que esté aquí, hablando a los lavanderos. Esta oportunidad que nos ofrece Laura es súper generosa y le estoy muy agradecida

Me llamo Samanta, pero llamadme Sam, que estamos en familia. Aquí había escrito que estaba en paro, pero lo he tenido que cambiar porque hace una semana empecé a trabajar y estoy muy contenta.

Mi blog, Tu Cocina Te Llama, nació hace ahora un año, con la excusa de tener algo que hacer. Estaba en paro y acababa de casarme. Tras organizar mi boda mi tiempo se había quedado "vacío". Empecé a ocupar ese tiempo cocinando antes de abrir el blog, pero tambien me hacia falta una excusa para hacer recetas nuevas y así nació.

Gracias a mi participación en un montón de retos de cocina, este blog me ha llevado a conocer a un montón de compañeras blogueras geniales, algunas incluso se han convertido en amigas de verdad ¿Existe algo más genial que eso?

Como veréis, las fotos son mi asignatura pendiente, pero creo que lo compenso con el sabor o por lo menos lo intento. Me gustaría destacar dos recetas fáciles y dos recetas de "mezclas curiosas", que creo que son lo que caracteriza a mi blog:

Concentrado para Masala Chai: Un té muy de moda que podéis hacer fácilmente en casa y muy personalizable


Auténticos Donuts Americanos: ¿Esto es una receta fácil? ¡Pues si! Si sigues los pasos, no tendrás ninguna dificultad para hacerlos


Hummus de Guacamole: Esto no tiene más misterio, el propio nombre lo indica, pero ¿a que nunca se te hubiera ocurrido mezclar estos dos aperitivos?


Palomitas con Dulce de Leche: Una palabra: pruébalo


Ha sido un placer estar este rato con vosotros y me gustaría añadir una nota. Como he dicho al principio, acabo de empezar un nuevo trabajo. Espero estar pronto activa al 100% de nuevo y traer nuevas mezclas curiosas, recetas fáciles y cositas ricas

¡Besotes!

Lo dicho, esperamos que os haya gustado mucho. ¿Conocíais ya a Sam y su blog? ¿Qué os ha parecido?

Nosotros nos vemos mañana, y no va a ser con una nueva lección del curso para personalizar nuestra plantilla móvil (eso será el martes), sino con un sorteo muuuy chachi, no digo más :P aunque os dejaré pistas por instagram :P

Pasad un domingo muy bueno! Besotes!! Laura

¡Sígueme y no te pierdas nada!

Pequeños Grandes Artesanos VI

5 comentarios:
Buenos días de viernes!!

¿Estáis todos preparados para conocer a las 5 artesanas de hoy? Pues aquí os dejo sus preciosidades hechas a mano junto con sus blogs y facebooks para que no las perdáis de vista ;)


MARABOHO
por Patricia


Hola, me llamo Patricia y soy la creadora de Maraboho.
Maraboho es una firma de joyitas y complementos de estilo boho hechos a mano. Cada pieza es única (de algunas sólo disponemos de 1 unidad), podemos personalizarla al gusto del cliente y están hechas con materiales de muy buena calidad, aunque hemos intentado ajustar los precios lo máximo posible consiguiendo diseños muy personales a precios muy competitivos. 

Siempre hablo en plural porque toda esta aventura la comparto con mi chico, aunque la imagen visible de la empresa sea la mía. Soy blogger desde hace casi 2 años y, aunque básicamente lo que publico en el blog son mis outfits diarios, también me gusta mucho compartir mis descubrimientos, mis viajes, mis reflexiones,… dado el nombre del blog, me gusta decir que es como mi “cuaderno de bitácora”.

Sólo llevamos dos meses activos y estamos encantados con la acogida que hemos tenido. De momento sólo contamos con 2 plataformas de venta que son Instagram (a través de nuestro correo electrónico: infomaraboho@gmail.com) y mi blog personal  en el que incluyo a Maraboho en la mayoría de mis outfits para que mis seguidores puedan hacerse una idea de cómo queda puesta cada cosa y cómo pueden combinarlas. También disponemos de un catálogo con nuestra primera colección que puede solicitarse sin ningún compromiso a través de nuestro correo.


Actualmente nos encontramos inmersos en el diseño y creación de nuestra segunda colección de cara a la temporada P/V-15 aunque nos mantenemos activos en ambas plataformas donde no dejaremos de adelantar cosas.

VISITA SU BLOG VISITA SU FACEBOOK VISITA SU INSTAGRAM

LA MAR DE GUAPA


La Mar de guapa es packaging creativo con productos handmade, para chicas reversibles, guapas por dentro y por fuera. 

Con nuestra colección de productos queremos dar alegría a los looks tristes y aburridos , queremos que los lunes sean menos lunes, que todos te miren o que digas que eres la mar de moderna, todo esto con una sonrisa en los labios, que es, lo que nosotras sentimos cuando preparamos un pack E de La Mar de Guapa.


La Mar de Guapa, es una colección de productos elaborados con tela, en un pack la mar de bonito, que saca sonrisas, de esas que enamoran. Collares molones, pulseras que visten muñecas modernas, monederos muy apañados o bolsos aptos para verbenas con amigos, son nuestros productos que junto con nuestras cajas , con textos divertidos y molones forman esto que llamamos La Mar de Guapa.

VISITA SU WEB VISITA SU SHOP VISITA SU FACEBOOK


EL ESTUDIO ROSA
por MªÁngeles


Hola me llamo Mª Ángeles, vivo en Alicante, y me dedico a la ilustración y encuadernación artesanal. Esto último surgió como complemento a mis trabajos de ilustración, cuando he querido presentar mis trabajos me gusta que estén en un entorno bonito y con los mejores materiales, así que poco a poco, con unas clases e investigando comencé a realizar mis álbumes, libros, libretas...



Si necesitas a alguien para que solucione la papelería de la comunión de tu hijo/a, un bautizo, cumpleaños, sorprender a alguien con un bonito regalo único y personalizado o auto regalarte alguna cosa, aquí estoy.

VISITA SU BLOG VISITA SU FACEBOOK

AMAKUYI
por Amaia


Amakuyi es un blog en el que tienen cabida todas las pequeñas cosas con las que disfruto, desconecto y me hacen feliz.

Desde muy chiquitina, mientras mis hermanos veian pelis de vaqueros, yo me entretenía horas y horas pintando, haciendo pequeñas manualidades, trasteando con mis manos... Siempre me han encantado las manualidades, las cosas bonitas, la cocina, la repostería y disfrutaba a tope haciéndolo y viendo a los de casa disfrutar con ello. Hace ya algo más de un año, decidí dar el salto e intentar a través de un blog que todo esto no se quedara dentro de la familia y los amigos y más personas pudieran disfrutar de ello.

Así nació Amakuyi y se fue convirtiendo en un escaparate de lo que soy, lo que hago, lo que siento y con lo que disfruto a tope.
Muchas de las entradas son de cocina, repostería, reflexiones, música y una parte muy importante del blog está dedicada a las manualidades que voy haciendo poco a poco y en las que explico a través de tutoriales el proceso para llevarlas a cabo. 


Como sé, que todo el mundo no tiene el tiempo ni las ganas de ponerse manos a la obra...pues yo lo hago por ellos si se ponen en contacto conmigo a través del blog o del correo electrónico.

VISITA SU BLOG

FLORITURAS


Florituras es una marca artesanal que destaca por una amplia gama en bisutería y complementos, donde te ofrecemos una gran variedad de pulseras, pendientes, anillos, pañuelos, colgantes, llaveros…Todos ellos realizados con una amplia gama de materiales de primera calidad, entre los que destacamos el Zamak, un material hipoalergénico y de fácil limpieza, el cuál lo puedes disfrutar tanto bañado en plata como en bronce combinado con una amplia gama de colores y tamaños de cuero, hilos de seda, caucho, antelina, perlas, swarosvki, minerales...

Entre nuestras creaciones destacamos los "abalorios pintados a mano" con diseños propios y personalizados para cada uno de nuestros clientes.


Nuestros productos siguen las últimas tendencias de moda, procuramos estar al día cada temporada. Nos consideramos una marca de confianza y calidad.

VISITA SU FACEBOOK

Espero que os hayan gustado mucho las artesanas de hoy ;) Y no olvidéis de visitarlas y contarles vuestras impresiones :D

Nos vemos el domingo molón ;) Un besazo muy fuerte y feliz día! Laura

¡Sígueme y no te pierdas nada!

Tutorial Blogger: Cómo poner una página de error 404 personalizada

37 comentarios:
Muy buenos días lavanderos!!

Hoy vamos a aprender a poner una página de error personalizada, y no, no es la que nos ofrece blogger por defecto. Es una mucho más resultona, y con buscador y todo ;) La página de error personalizada es importatísima en el SEO (clic aquí para más consejos de posicionamiento), por eso, es conveniente tenerla.

como-poner-pagina-error-404-personalizada-blogger

Si habéis quitado el típico mensaje de "Mostrando entradas para la etiqueta..." (clic aquí para saber hacerlo) y alguna persona se mete sin querer a una página que no existe, la página de error no aparece, es decir, se queda en blanco.

Como yo lo tengo quitado, necesitaba tener una página 404 personalizada, no quería que mi blog se quedara en blanco, y he aquí el resultado:


Si no habéis quitado el mensaje este, no pasa nada, os voy a enseñar también a hacer que no aparezca sólo en la página de error, de forma que el "Mostrando entradas..." siga visible.

¡Vamos a por el tutorial!

AÑADIR EL HTML
Vamos a Plantilla → Editar HTML (recordad hacer la copia de seguridad!!) y buscamos lo siguiente:

<b:if cond='data:mobile == &quot;false&quot;'>

Justo debajo, vamos a pegar esto:

<!-- Inicio- Pagina error 404  -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='pagina-error'>
<h1>404</h1>
<h3>No se ha encontrado la página :(</h3>
<p>Introduce a continuación lo que buscabas:</p>
  <div id='caja-buscar-error'>
<form action='/search' id='buscar-error' method='get'>
  <input name='q' placeholder='' size='40' type='text'/>
</form>
  </div>
  <p>O regresa a la <a expr:href='data:blog.homepageUrl'>página de inicio</a></p>
</div>
</b:if>
<!-- Fin- Pagina error 404  -->

• Todo lo que está en color verde es el texto de la página y que si queréis, podéis reemplazar por lo que os apetezca. Podéis guiaros a la hora de hacerlo comparándolo con el pantallazo que os he dejado de mi página de error.

AÑADIR EL CSS
Lo podemos añadir directamente en la plantilla (clic aquí para saber cómo hacerlo), o ir a Plantilla → Editar → Avanzado → Añadir CSS (obviamente no podréis previsualizar el resultado). El código que debemos copiar y pegar es este (como siempre, de color aquello que podéis personalizar):

/* Pagina 404 personalizada
------------------------------------- */
#pagina-error {
  width:400px;
  text-align:center;
  margin:20px auto;
  margin-top:100px;
}
#pagina-error h1 { /*Texto (en el ejemplo "404")*/
  font: normal normal 60px Arial; /*Tamaño y tipografía*/
  color: #000000; /*Color*/
  text-transform:uppercase; /*Para que esté en mayúsculas, si no lo queréis, borrad la línea*/
}
#pagina-error h3 { /*Texto de debajo del 404*/
  font: normal normal 16px Arial;  /*Tamaño y tipografía*/
  color: #000000; /*Color*/
}
#pagina-error p { /*El resto del texto*/
  font: normal normal 12px Lora;  /*Tamaño y tipografía*/
  color:#000000; /*Color*/
  margin-top:5px;
  border-top:1px solid #333333; /*Estilo del borde superior, si no lo queréis, borrad la línea*/
  padding-top:10px;
}
#caja-buscar-error {
  margin:0;
  padding:15px 0;
  width:auto;
  overflow:hidden;
}
#buscar-error input[type="text"] {
  border: 2px solid #000000; /*Estilo del borde del buscador*/
  width: 180px;
  padding: 7px;
  font: normal normal 12px Arial; /*Tamaño y tipografía del texto que se introduce para buscar*/
}

Para ver el resultado del tutorial, cogéis la URL de vuestro blog y detrás ponéis cualquier cosa por ejemplo, para mi blog: www.misslavanda.es/hfhfhf

CÓMO OCULTAR EL MENSAJE QUE TRAE POR DEFECTO BLOGGER
Lo dicho, si no habéis eliminado el mensaje de "Mostrando entradas..", entonces también os saldrá uno para la página de error. Es un poco cutre, así que mejor quitarlo. Para ello vamos a Plantilla → Editar HTML y buscamos esto:

/head

Justo encima pegamos esto:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
.status-msg-wrap{display:none;}
</style>
</b:if>

Y hale lo tenemos listo, mensaje por defecto eliminado y página de error 404 personalizada ;)

Espero que os haya gustado mucho el tutorial y ya sabéis, compartidlo si pensáis que puede serle útil a otras personas ;)

Pasad un día chachi!! besotes! Laura

¡Sígueme y no te pierdas nada!