blog

Personalizar gadget de entradas populares

¡Qué emoción! Hay 28 personas que han opinado, anímate y deja tú un comentario.
blog

Hacer un menú de imágenes con efecto hover

¡Qué emoción! Hay 17 personas que han opinado, anímate y deja tú un comentario.
acuarela

Clipart flores acuarela y cartelitos bonitos

¡Qué emoción! Hay 17 personas que han opinado, anímate y deja tú un comentario.
blog

Cómo hacer un menú con imágenes

¡Qué emoción! Hay 11 personas que han opinado, anímate y deja tú un comentario.
blog

Freebies: Ramas y laureles

¡Qué emoción! Hay 15 personas que han opinado, anímate y deja tú un comentario.
archivo del blog

Personalizar el widget de Archivo del blog

¡Qué emoción! Hay 24 personas que han opinado, anímate y deja tú un comentario.
blog

Cómo poner fondo al gadget de seguidores

¡Qué emoción! Hay 20 personas que han opinado, anímate y deja tú un comentario.
blog

Diseñar separadores para las entradas del blogger

¡Qué emoción! Hay 26 personas que han opinado, anímate y deja tú un comentario.
Mostrando las entradas con la etiqueta blog. Mostrar todas las entradas
Mostrando las entradas con la etiqueta blog. Mostrar todas las entradas

31.5.15

Personalizar gadget de entradas populares

Hola amigos! Bonita semana para todos, en el tutorial de hoy vamos aprender a personalizar el gadget de post populares de blogger, son 4 ejemplos: en el ejemplo #1 y #2 tiene efecto hover, el cual cambia de color cada cuadro cuando pasamos el puntero del mouse sobre él.
Para colocarlos vamos al css del blog y pegamos el código modificando todas las variables a nuestro gusto, las lineas del código tiene una corta explicación para saber qué acción es la que realizan.

leer más ....
Share to Facebook Share to Pinterest
Publicadas por a la/s 28 comentarios:
Etiquetas: , , , , , , ,

15.5.15

Hacer un menú de imágenes con efecto hover

leer más ....
Share to Facebook Share to Pinterest
Publicadas por a la/s 17 comentarios:
Etiquetas: , , , ,

11.5.15

Clipart flores acuarela y cartelitos bonitos

Hola! Bonito dia para todos :)
Que falta me hace estar por acá y compartir con ustedes lo que más me gusta hacer :) ando volviendo poco a poco al mundo 2.0 después de dos semanas algo feas  estuve mal de salud y no podía ni sentarme enfrente de la pc porque me mareaba uff.. Feo, feo :( en fin, ahora estoy muy feliz de estar aquí ♥
Hace un tiempo inicie a practicar con Photoshop y todo fue porque me encantan el efecto acuarela, quería hacer mis propios diseños así que me he puesto hacer unos cuantos clipart para levantar los ánimos y este es el resultado, espero les guste.










imagen
Share to Facebook Share to Pinterest
Publicadas por a la/s 17 comentarios:
Etiquetas: , , , , , , , , ,

16.4.15

Cómo hacer un menú con imágenes

Hola, hola! 
Que tal va la semana? Muy rápido verdad?
Yo sigo medio desaparecida ya que ahora ando metiendo acelerador en varios cositas para avanzar poco a poco en lo que estoy trabajo y es que siento que no avanzo nada y hago mucho pfff.. Pero bueno ni modo, lento pero seguro.
En este día les traigo un tutorial muy útil a la hora de hacer un menú con imágenes, varias me preguntaron como hice el indice de todos mis posts asi que les explico paso a paso para tener un menú muy bonito♥

Lo que vamos a necesitar:
1. Código → VER CÓDIGO AQUÍ
2. Imágenes bonitas (Todas las imágenes deben de tener el mismo tamaño)
2. URL de cada imagen
3. URL de la página que deseamos que nos lleve al hacerle clic en cada  imagen

1. El código: Luego de descargar el código deben de copiarlo y pegarlo en un documento de word para que sea más fácil editarlo.
Los datos que están de color debemos de cambiar:
- Dirección web
- Nombre
- URL de la imagen
- Texto 
- Texto

(Esta es una parte del código) 
<td><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="DIRECCION WEB" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Nombre" border="0" src="URL DE LA IMAGEN" width="220" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">♥ TEXTO♥ <br />
- ♦ TEXTO♦ -</td></tr>
</tbody></table>

</td>


Luego de cambiar los datos en todo el código, vamos a nuestro editor de blogger y en la vista HTML pegamos el código. 


 El código consta de poner tres imágenes en cuadros del mismo tamaño en linea recta, si pegan el código tal cual como esta en la hoja sin cambiar los datos  este es el resultado pero recuerden que debemos de  regresar a → redactar para ir viendo como va quedando


Luego de cambiar todos los datos así debe de quedar nuestro post en vista → redactar



y listo! Es un poco trabajoso estar reemplazando los datos del código pero el resultado es muy, muy bonito.
NOTA: El código solo coloca tres imágenes, si vamos a utilizar varias imagenes debemos de copiar y pegar el código las veces necesarias

Que les parece este menú? lo van a colocar en su blog?


Nos vemos al próximo post , un abrazo♥

Share to Facebook Share to Pinterest
Publicadas por a la/s 11 comentarios:
Etiquetas: , , , ,

2.3.15

Freebies: Ramas y laureles


Hola, bonita semana para todos ♥
El día de hoy es día de freebies! Ya tenia algo abandonada esta sección así que voy a volver a las andadas de los freebies. Como ya leyeron en el cartelito este post contiene 40 imágenes de laureles y ramas en 5 colores y ocho modelos con fondo transparente para que puedan usarlo prácticamente en todo lo que quieran. Son ideales para hacer cartelitos, scrap, invitaciones, diapositivas en fin cualquier cosa.
Aparte de esto quiero contarles que voy a estar publicando todo los lunes, ya que el tiempo no me da a más, como ya lo he dicho en muchas oportunidades estoy trabajando en un proyecto personal que requiere de mi todo el tiempo es como mi bebe jeje y por ahora es mi prioridad.



D E S C A R G A R

A que son bonitos? espero les gusten y sobre todo les sea útil. Nos vemos en la siguiente semana :) Un abrazo enorme y les deseo una semana llena de cosas bonitas ♥ Dios los bendiga.

Share to Facebook Share to Pinterest
Publicadas por a la/s 15 comentarios:
Etiquetas: , , , , , , , , ,

17.2.15

Personalizar el widget de Archivo del blog

Hola, hola! Bonita semana, un gusto estar por acá de nuevo con todos ustedes :D, muchas gracias por visitar el blog, comentarlo y suscribirse ¡Que emoción ya casi somo 300! Gracias a todos ♥
Y para celebrarlo les traigo un pedazo de tutorial muy bonito, eso sii es un poco largo ! No tanto en pasos si no que en código pero van a ver que esta fácil y el resultado esta divino. 
Se trata de cambiar el widget de archivo del blog a un calendario, este nos muestra los meses y nos marca los dias que hemos publicado. Si ven mi calendario se pueden dar cuenta que casi no tengo día fijo para publicar (que verguenza jaja) 
* Un plus de este calendario es que si le dan clic a cualquier dia que aparece en rojo  este nos lleva al post publicado en esa fecha ♥

leer más ....
Share to Facebook Share to Pinterest
Publicadas por a la/s 24 comentarios:
Etiquetas: , , , , ,

11.2.15

Cómo poner fondo al gadget de seguidores

Hola, hola! 
Que tal están? espero que muy bien ♥
Hoy vamos a ver un tutorial para el gadget de seguidores muy fácil y con un resultado muy bonito!

Para poder realizar este tutorial se debe de tener instalado el gadget de seguidores

1. Vamos a plantilla → Edital HTML
2. Buscamos (para buscar Ctrl+f) < /b:skin>
3. Antes de < /b:skin> pegar el siguiente código

#Followers1 .widget-content{height:auto;width:auto;background-image:url(URL DEL FONDO);repeat; repeat; padding: 5px;border: 1px dashed #000000 ;border-radius: 8px;}

Tiene que quedar así:
***Borrar donde dice URL DEL FONDO y colocar la URL de nuestro fondo
Damos clic en guardar plantilla
y nos quedará asi.
Podemos cambiar todos los elementos del código para lograr que el el gadget de seguidores se mire mas bonito y combine con nuestro blog.

Vamos a desglosarlo y explicarlo:

#Followers1 .widget-content{height:auto;width:auto;background-image:url(URL DEL FONDO);repeat; repeat; padding: 5px;border: 1px dashed #000000 ;border-radius: 8px;}

**URL DEL FONDO: Aquí tenemos que colocar la url de nuestro fondo
** Padding: Controla el ancho y el largo del gadget de seguidores 
**Border: nos indica el borde y **Dashed el estilo del borde 
**#000000: Indica el color del borde
**Border -radius: Indica el borde de las 4 esquinas del fondo

Estilos de border
dotted: Borde con lineas punteadas.
dashed: Borde con líneas rayadas.
solid : Borde con líneas sólidas. 
double: Borde con lineas dobles.
groove: Borde que se verá estriado.
ridge: Borde que se verá encrestado.
inset: Borde que con la línea biselada. 
outset: Borde con la línea biselada al lado contrario.
  • Al final lo he dejado así, pero ustedes lo dejarán como mejor les guste ♥
  • Recuerden colocar un fondo en tonos suave respetando los colores de su blog!


Hemos finalizado el tutorial , que te ha parecido? Lo compartes en las redes sociales!! 

Share to Facebook Share to Pinterest
Publicadas por a la/s 20 comentarios:
Etiquetas: , , , , , , ,

9.2.15

Diseñar separadores para las entradas del blogger


Hola, hola ♥
Que tal están amigos? espero que muy bien y muy bendecidos. Gracias a Dios por una nueva semana que nos da :D
Iniciamos esta linda semana con un tutorial muy, muy fácil pero muy resulton a la hora de diseñar separadores de entradas para nuestro blogs. Este tutorial va dedicado a todos mis alumnos de la Escuelita Virtual ya que vamos por la cuarta clase y esta guía es ideal para los temas que estamos viendo. 
Asi que sin más vamos al tutorial.

1. Vamos a PicMonkey y damos clic en Desing → luego clic en Custom



Escribimos la medidas que va a llevar nuestro separador, yo utilizo 700 x 25 pero pueden usar las medidas que quieran, damos clic en → Make it!


2. Vemos que al lado izquierdo aparece un cuadro de → Canvas Color, damos un clic en → Transparent Canvas y asi vamos a lograr que nuestro separador sea transparente ( esta parte es opcional , si tu blog es de fondo blanco puedes diseñar tu separador en un fondo blanco)


3. Ahora viene lo divertido, iniciamos a diseñar nuestro separadores. PicMonkey nos ofrece varias cositas bonitas para hacer este tipo de separadores, corazones, lineas, flores....





Solo es cuestión de usar nuestra imaginación  y creatividad de seguro salen diseños muy chulos ♥
  • * Cuando esten por guardar su separador recuerden hacerlo siempre en formato PNG asi la resolución sera mucho mejor y este formato permite imágenes con fondos transparentes.
  •  * Recuerden que pueden usar varios elementos fuera de PicMonkey dando clic en → Your Own


























A que fue muy fácil y divertido ? a mi me encanta hacer este tipo de cositas :D ... Disfruto mucho hacer tutoriales cuando ando inspirada....
Y ustedes se animan y hacen sus propios diseños? Si se animan me los mandan por correo y los colocó en este post ♥

Les dejo acá los tutoriales anteriores que hemos realizado en PicMonkey
--  Cómo hacer etiquetas en PicMonkey

DESCARGAR SEPARADORES

Felicidades a la ganadora del Diseño de blog de moda y belleza


Share to Facebook Share to Pinterest
Publicadas por a la/s 26 comentarios:
Etiquetas: , , , , , ,
Suscribirse a: Entradas (Atom)