Páginas

Recuperación de fotos antiguas: con el estilo retro de los años 50

Una idea estupenda para regalar estas Navidades
sorprende a tus familiares más queridos con un póster personalizado, creado exclusivamente para ti
 con esas fotos más antiguas...



Más ejemplos de fotos antiguas restauradas
>> AQUÍ <<

Cómo personalizar la descripción del blog en Blogger

Sí, porque cambiar por ejemplo el tipo de letra y color del título es fácil: es una de las opciones que aparecen en la opción "avanzado" del diseñador de plantilla de Blogger pero ¿y la descripción?
¿CÓMO PERSONALIZAR LA DESCRIPCIÓN DEL BLOG?
Cómo personalizar la descripción del blog en Blogger

Bueno... pues con un poquito de CSS ¡claro!Por ejemplo:

 ¿CÓMO CAMBIAR EL TIPO DE LETRA?
En este caso añadiendo esto:

.Header .description{
    font-family: 'Schoolbell';
    font-size: 26px;
    color:#c9a10b;
    font-weight: regular;
  } 

un código que te permite cambiar la fuente, su tamaño, el color

¿CÓMO CENTRAR LA DESCRIPCIÓN?
Por defecto, la descripción aparece a la izquierda (left) pero si la preferís centrada, entonces tendréis que añadir una línea más al código anterior:
 text-align: center
(si os gustase más a la derecha, entonces tendríais que poner right)

y por último
¿CÓMO VARIAR EL ESPACIO ENTRE EL TÍTULO Y LA DESCRIPCIÓN DEL BLOG?
Añadiendo estas otras dos líneas de código:

 margin-bottom: -15px !important;
    margin-top: -30px !important;


donde tendréis que ir probando con distintos valores: el primero de ellos define la distancia entre la descripción y el cuerpo del blog, y el segundo la distancia entre descripción y título.

Cómo personalizar la nube de etiquetas de Blogger

En mi opinión, el gadget de etiquetas o categorías de Blogger no puede faltar en un blog ¿por qué? Pues porque sirve a nuestros lectores para ver "de un plumazo" qué temas pueden encontrar en nuestra página, y además para finalmente acceder a ellos con un sólo 'clic'
Por eso, si no queremos prescindir de esta herramienta, lo mejor que podemos hacer es tratar de personalizarlo para que quede bien integrado con el resto del diseño. Y para ello hoy os traigo un par de trucos aplicables a la segunda de las opciones que nos ofrece Blogger
LA NUBE DE ETIQUETAS
Cómo personalizar la nube de etiquetas de Blogger

¿CÓMO CENTRAR EL TEXTO DE LA NUBE DE ETIQUETAS?
Y así conseguir que la nube realmente parezca una nube, ya sabéis que por defecto el texto sale justificado...

Para ello tendremos que entrar en 
plantilla > personalizar > avanzado > añadir CSS
y pegar esto:

/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}


¿CÓMO CAMBIAR EL COLOR Y LA FUENTE DE LAS ETIQUETAS?
El gadget genera distintas etiquetas con el formato .label-sizeX, siendo X un número del 1 al 5, de manera que las etiquetas que más se utilizan llevan un 5 y las que menos un 1, pasando por 2, 3 y 4 para los valores intermedios. Aprovechando esto podemos realzar con colores, tipos y tamaños de fuente distintos cada una de las etiquetas según su densidad ¿Cómo hacerlo? Pegando esto:

/* Etiquetas en nube centrada multicolor */
.cloud-label-widget-content {text-align: center;}
.label-size-1 a {color: #eee; font-size: 12px;}
.label-size-2 a {color: #996666; font-size: 14px;}
.label-size-3 a {color: #333; font-size: 18px;}
.label-size-4 a {color: #eee; font-size: 24px;}
.label-size-5 a {color: #990000; font-size: 30px;}


¿CÓMO ENMARCAR LAS ETIQUETAS?
Es decir, ponerlas dentro de unas cajitas rectangulares dispuestas unas al lado de las otras. Para ello el CSS que tendremos que añadir es este:

/* Etiquetas enmarcadas con efecto zoom */
.cloud-label-widget-content {
text-align: center;
}
.label-size a {
float:left;
display: block; 
margin: 2px 2px 0 0; 
padding: 4px; 
text-transform: uppercase; 
border: 1px solid #996666; 
text-decoration:none; 
font-size:12px; 
color:#666; 
background: #eee; 
-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;
}
.label-size a:hover { 
border: 1px solid #000; 
color: #000; 
background: #fff; 
text-decoration: none;
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);
-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s;transition: all .5s;
}


Retratos: de blanco y negro a color con efecto vintage

El antes y el después...




Cómo poner un formulario de contacto personalizado en una página de Blogger

Una de las opciones que te ofrece Blogger a la hora de diseñar tu web es insertar un gadget con un formulario de contacto en la sidebar. Pero... ¿y si no quieres poner una barra lateral? ¿Y si no quieres que ese formulario salga en todas las páginas?

No hay problema: en el post de hoy te explicamos cómo insertarlo en una única página estática y cómo personalizarlo...


Cómo poner un formulario de contacto personalizado en una página de Blogger



...paso a paso

Lo primero que debemos hacer es ir a diseño y añadir el gadget formulario de contacto de Blogger, para que nos aparezca ContactForm1 en el desplegable de widgets de la edición HTML de la plantilla del blog y así poder modificarlo a nuestro gusto.
Una vez localizado veremos todo este texto:

<b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        BLA, BLA, BLA
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>

  </b:widget>

Pues bien, lo que tenemos que hacer ahora es borrar la mayor parte de ese texto, concretamente todo lo que yo he marcado en negrilla.
Una vez hecho esto, lo siguiente es o bien ir a una página que ya tengamos creada y en la que queramos añadir el formulario al resto del contenido (por ejemplo en la página en la que habláis sobre vosotros), o bien crear una nueva exclusivamente para dicho formulario y a la que podemos poner como título "CONTACTO"
páginas > página nueva

A continuación la editamos en modo HTML y pegamos este otro código:

<div style="text-align: center;">
<br /></div>
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div style="text-align: center;">
<span style="font-size: large;">Nombre</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        </span></div>
</div>
<div style="text-align: center;">
<span style="font-size: large;">eMail *</span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        Mensaje *</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-size: large;"><span style="font-size: large;"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
        <input class="contact-form-button contact-form-button-submit" color:="" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /></span>
        </span></div>
</div>
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
<div style="text-align: center;">
<br /></div>
</form>
</div>

Le damos a "vista previa" y vemos cómo nos ha quedado. 
O mejor, para estar seguros de que funciona, la publicáis y probáis a enviar un mensaje.
¿Funciona? ¡Estupendo! Pues ahora vamos a ponerlo bonito...

¿CÓMO PERSONALIZAR EL FORMULARIO DE CONTACTO?
Añadiendo nuevos códigos esta vez en
plantilla > personalizar > avanzado > CSS
Códigos como por ejemplo estos: 

/* Formulario de Contacto
----------------------------------------------- */
/* Contenedor principal */
.contact-form-widget {
width:100%;
max-width: 1000px;
margin: 0 auto;
margin-bottom: 25px;
float: center;
padding: 10px;
background: #ffffff;
color: #000;
border: 1px solid #ffffff;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
/* Estilos de los campos */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
border-radius: 40px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
}
/* Campo del mensaje */
.contact-form-email-message {
padding: 5px;
border-radius: 5px;
}
/* Botón de enviar */
.contact-form-button-submit {
float: right;
width: 25%;
max-width: 35%;
height: auto;
background: #c5bc73;
padding: 2px 5px;
border-radius: 15px;
border: none;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #ffffff;
font-size: 13px;
font-family: 'syncopate', Helvetica, Arial, Sans-Serif;
font-weight: normal;
margin-bottom: 10px;
}
/* Botón de enviar al pasar el cursor */
.contact-form-button-submit:hover{
background: #444444;
border: none;
}

Que son los que corresponden al diseño de la imagen con que abríamos est post...

formulario de contacto personalizado en Blogger


 ...y con los que, como veis, podemos cambiarlo todo para adaptarlo al diseño de nuestro blog. Sólo hemos de fijarnos en a qué parte del formulario corresponde cada uno de los bloques de códigos y que yo os he señalado en negrita.
En concreto, nosotros por ejemplo hemos puesto a nuestro diseño una sombra en el contenedor principal ( box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);)y un ancho de 1000px (el ancho total del blog); también hemos redondeado los bordes de las casillas donde escribir el mensaje (border-radius: 5px;)y cambiado la letra. Finalmente, también hemos cambiado el color de fondo del botón de enviar (background: #c5bc73;)

Así que... sólo es cuestión de que os pongáis a ello con cuidadito y paciencia, e ir probando hasta dar con el diseño que más os guste ;)

(fuente: www.oloblogger.com )

DIY: 5 disfraces de Halloween para los niños

Sí, aún estáis a tiempo. Tomad nota porque se trata de cinco ideas muy, muy fáciles de hacer. Sólo tenéis que conseguir pinturas, algunos cartones y... ¡poco más!  Tomad nota:

IDEA, una bruja con cara de buena
Es muy fácil hacer un vestidito como este con un retal gris o negro y un cordón ¡ fijáos en los bolsillos de cuadros !


IDEA, el duende
Aprovechad cualquier vestido que tengáis en tonos pastel
personalizad unos botines o unas botas con unos cordones de colores o pegatinas con motivos florales 


¿lo más importante? las alas...


y el maquillaje: colorete a discrección, corrector de ojeras y el lápìz de ojos de mamá
 ¡ah! y si las ramitas del tocado os parecen un poco incómodas, prescindíd de ellas y poned unas flores secas



IDEA, el murciélago
Es raro que vistamos a nuestros niños con ropa negra de manera que si no tenéis un vestidido como este, podéis recurrir a unos leggings y un jersey tipo cisne...


lo que no pueden faltar son las orejas en pico y las alas...


bueno... y unas mejillas bien coloradotas: ya sabéis que a los vampiros les "rechifla" la sangre ;)



IDEA, la libélula
También en este caso podéis aprovechar cualquier vestido en tonos pastel o con estampado de flores...


...porque lo importante son las alas y la corona, todo de cartón y ¿por qué no? con un montón de purpurina dorada



IDEA, para los más traviesos: "Skeleton Skater"


una sudadera con capucha, un pantalón de chándal, unos deportivos... todo en negro; una "horrible" careta y quizá también...
¿unos guantes blancos con los huesos de la mano pintados en color negro?

Portfolio de diseños web: Le Fle en un 'clic'

Nuevo trabajo en nuestro portfolio de diseños web para profesionales y bloggers: la web de un equipo de profesores de francés nativos, en la que podremos aprender francés en un 'clic'...


diseños web, personalizacion de blogs en Blogger, Le Fle en un 'clic'


DESCRIPCIÓN DEL PROYECTO
Página WEB profesional con tienda de eBooks integrada, y un BLOG lleno de contenidos gratuitos de gran interés para todos los interesados por el aprendizaje de este idioma.

PACK ELEGIDO: Pack completo, consistente en
1º.- DISEÑO WEB: personalización de la plantilla "Simple" de Blogger, importación de contenidos de un blog anterior e instalación de dominio propio.

2º.- SERVICIOS DE DISEÑO GRAFICO: diseño de logotipo y tarjeta de visita, personalización de cabeceras de redes sociales (facebook, twitter y google+) y 2 portadas de eBooks.

Puedes realizar un "web tour" por esta página haciendo 'clic'
 >> AQUÍ <<

QUOTE POSTERS: Simone de Beauvoir

Nos gusta y nos inspira...
la escritora y filósofa francesa Simone de Beauvoir
Simone de Beauvoir color portrait in vintage polaroid frame
"No nacemos mujeres, 
nos convertimos en mujeres"


Simone de Beauvoir quotes, feminism and women, script typography free poster
diseño: Adarve Photocollage
D E S C A R G A nuestro diseño, imprímelo...


free printable poster, Simone de Beauvoir quote about feminism and women


O úsalo como fondo de pantalla para personalizar tu PC, tablet o móvil...


Fondo de pantalla para descargar gratis,en tres tamaños diferentes 
>>AQUÍ<<
Diseño tambien disponible en nuestra tienda de   RedBubble 
  
  
impreso en camisetas, sudaderas, estuches, relojes, mochilas, "tote bags", carcasas para móviles o tablets, y mucho más...

¡ visita nuestra tienda en RedBubble !

Montaje y personalización de fotolibros: "The Tide is High"

Aunque dicen que segundas partes no son buenas, lo que os traemos hoy es un nuevo fotolibro realizado con algunas de esas fotos que todos sacamos a nuestros niños en las vacaciones de verano.

Si en el fotolibro anterior nuestro protagonista nos contaba algunas curiosidades sobre las olas mientras simulaba hacer surf en la playa (ver) hoy le vemos tripulando un patín de agua, zambulléndose en el mar, explorando una "furna" y al final del día...
¿contemplando cómo sube la marea? 


Podéis ver todas las imágenes de este fotolibro 

>> AQUÍ << 

en un video que hemos subido a nuestro canal de

Cómo poner un buscador personalizado en Blogger

Cómo poner un buscador personalizado en Blogger


El método más sencillo es este: añadir un gadget de HTML / javascript en la pantalla de diseño el blog.
El texto que tendremos que añadir es este



<style>
#search-box {
    position: relative;
    width: 100%;
    margin: 0;
}
#search-form {
    height: 20px;
    border: 1px solid #ababab;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #ffffff;
    overflow: hidden;
}
#search-text {
    font-family: "Courier New"; 
    font-size: 14px;
    color: #222222;
    border-width: 0;
    background: transparent;
}
#search-box input[type="text"] {
    width: 100%;
    padding: 12px 0 12px 1em;
    color: #222222;
    outline: none;
}
#search-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 22px;
    width: 80px;
    font-family: "Courier New";
    font-size: 14px;
    color: #222222;
    text-align: center;
    line-height: 20px;
    border-width: 0;
    background-color: #ebebeb;
    -webkit-border-radius: 1px 1px 1px 1px;
    -moz-border-radius: 1px 1px 1px 1px;
    border-radius: 1px 1px 1px 1px;
    cursor: pointer;
}
</style>
<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
    <input id='search-text' name='q' placeholder='' type='text'/>
    <button id='search-button' type='submit'><span>BUSCAR</span></button>
  </form>
</div>


¿CÓMO PERSONALIZAR ESTE GADGET DE BÚSQUEDA?
Pues simplemente teniendo en cuenta que width 100% sirve para que el buscador ocupe todo el ancho de la sidebar.

La "search-form" es la casilla donde escribir el texto a buscar, y el "search-button" es el botón para iniciar la búsqueda. Ambos podemos personalizarlos: cambiando los colores de fondo en sus respectivos "background-color", modificando la altura de las casillas cambiando el número de píxeles que pongamos en sus respectivos "height" o haciendo que las esquinas sean más o menos redondeadas variando el número de "border-radius".

También podemos cambiar el grosor, el color y la forma de dichos bordes variando los valores en border="1px" solid #ababab y así, si por ejemplo quisiéramos poner un borde de puntos, en lugar de solid escribiríamos dotted. Para cambiar el color, obviamente, podríamos un código html diferente después de #


Por último, para cambiar el tipo de letra del cuadro de búsqueda, tendríamos que sustituir el nombre de la fuente donde dice
font-family: "Courier New";



(fuente: http://www.creativemindly.com/2013/02/buscadores-personalizados-para-blogger.html )

QUOTE POSTERS: "venga, seamos felices!"

Nos gusta y nos inspira...


motivational happines quote poster in pink and turquoise color palette
fotografía: Vogue

"
Venga, seamos felices"
posters con frases motivantes sobre la felicidad, tipografía
diseño: Adarve Photocollage
D E S C A R G A nuestro diseño, imprímelo...


free printable poster, motivational quote about happiness


O úsalo como fondo de pantalla para personalizar tu PC, tablet o móvil...


finternational day of happiness free wallpaper
Fondo de pantalla para descargar gratis,en tres tamaños diferentes 
>>AQUÍ<<


Diseño tambien disponible en nuestra tienda de   RedBubble 
  
  
  
impreso en camisetas, sudaderas, estuches, relojes, mochilas, "tote bags", carcasas para móviles o tablets, y mucho más...
customized mobile cases with motivational quotes and beautiful types

¡ visita nuestra tienda en RedBubble !