Separa tus entradas con un divisor

Hola! :)

Mucho tiempo sin postear pero aquí estamos ^^. En este tuto podremos ver como separar nuestras entradas con un divisor/separador. Será bastante sencillo y fácil así que ¿Por qué no lo intentan? aquí les dejo una previa:

Agrega tooltip estilo fade en tu blog

Hola ♥

Esta vez nuestro tutorial trata sobre Cómo añadir tooltip a nuestro blog y es, además de fácil, muy bonito para nuestros blogs o páginas. Pero...

¿Qué es el tooltip?

El tooltip (Heramienta de información) es mayormente utilizado para especificar información adicional acerca de algo cuando el puntero pasa sobre el texto/elemento. 

Pasa sobre mi

Aquí puedes notar el mensaje adicional

Crea un menu con imágen

♥ • Hola • ♥

El siguiente tutorial será  bastante breve. Esta vez crearemos nuestro propio menu y que tiene esa pinta cute . Se trata de este menú:

Inicio Sobre míWattpad

¿Te gustó? ¡Entonces a por ello!

Crea tu propio mensaje de bienvenida en Blogger

Hola♥

Otra vez con un nuevo tutorial muy fácil y rápido. 

¿Como añadir un cuadro de bienvenida? pues es muy fácil y lo editaremos de una forma bonita y kawaii. ¿Comenzamos?

Descarga Photoscape [Español]

Hey♥

Aprende a como descargar este buenísimo programa de edición.

¿Te interesa?

Crea estilos para photoshop

Hola ♥ ¡Nuevo tutorial!

Esta vez aprenderemos a crear nuestros propios styles / estilos para photoshop [sí u.u] de esta manera podrán crear los suyos con un poco de su ''personalidad'' y ''estilo'' a la hora de utilizarlos en sus gráficos.

Sean creativo/as y llenos de entusiasmo, utilicen recursos e ideas hasta que al final obtengan este ''estilo'' esperado. 

Sin más charla ¡Comenzamos!

Agregale un fondo al título de los posts

Hola de nuevo :D

En el anterior tutorial les hablé sobre añadirle fondo pero a los títulos del Sidebar Agrega un fondo a los títulos del sidebar, Ahora le colocaremos un fondo al título del post.

Para ello nos iremos primero a Plantilla → Editar HTML → CTRL + F → Buscamos h3.post-title, .comments h4 { .

Nota: Si poseen otra plantilla pueden intentar buscar .post h3 {  

Segundo, borramos lo que se encuentra debajo del código anterior y copiamos y pegamos lo siguiente:

Agrega fondo en los títulos del sidebar

¡Hola chico/as!

Este tutorial será bastante fácil. Se trata de agregar un fondo [ya sea un color o una imagen] a los títulos del sidebar de sus blogs.

Se trata de esto:

Bien, entonces... ¡Comencemos!

Añade una caja/bloque con texto en Blogger

¡Feliz domingo!

Este pequeño y corto tutorial se trata de añadir un bloque o cuadro con texto a nuestras entradas. Pueden utilizarse en donde y cuando ustedes quieran, además es personalizable. Aquí les muestro:

♣ Daydream Tutorials ♣

También pueden personalizarlos de una forma más sencilla y utilizarla como encabezado de algún subtítulo:

Destaca lo que quieras y personalizalo a tu gusto.

O también puedes utilizar esta caja para añadir algún código, aviso, destacar algo... ¡Tu lo personalizas!

Copia aquí

Diseña tu portada [Photoscape] → Modo Sencillo/Simple

Hey ♥

Seguimos con los tutoriales de Wattpad, esta vez utilizaremos algunos recursos png's y una imágen a elección de ustedes. Las medidas que utilizaremos en este tutorial serán de 600x1000. Si aun no sabes más acerca de las medidas de la portada puedes visitar el post m e d i d a s w a t t p a d para saber más.

¡Comencemos!

Medidas de Wattpad

Hey! ♥

Estamos en la primera parte de ῾Como Diseñar Tu Propia Portada en Wattpad᾽ y con lo que primero he deseado comenzar es con el tema de las medidas. 

¿Por qué es tan importante?

Pues les digo que, Wattpad es un sitio para fans, pero hay ciertos límites a la hora de que subas tu portada toda hecha y perfeccionada y es que cuando la subes desde tu ordenador, las medidas que seleccionaste —sean mas anchas de los límites o no— Wattpad recortará tanto el ancho como el alto de tu portada. Claro, esto solo se direcciona a las portadas hechas con una anchura/altura sobrepasada de los límites, pero si haz llevado las reglas te he de apostar a que no tendrás ningún problema con este tema.

Bien, ¡Comencemos!

Diseña la portada de tu propio libro en Wattpad

Diseñar la portada de tu libro en Wattpad suele ser algo complicado, no para todos pero sí para la mayoría que desea reflejar con exactitud la idea en su portada. Hay que admitir que la herramienta más necesaria a la hora de crearla es claramente la inspiración, algo que no siempre se tiene en ese momento cuando ya tienes todas tus imágenes y gráficos, pero lamentablemente no sabes cómo, o qué hacer con éstas.

¡Pues ya no!

En esta serie de tutoriales que les iré mostrando en distintas partes les servirán como ejemplo u ayuda para crear las suyas. Podrán observar las distintas formas de hacerlas en los editores fotográficos como

PhotoshopRecomendado

PhotoscapeMuy facil de usar, recomendado para trabajos mas simples y practicos. Además pueds utilizar otros pero en nuestro caso usaremos estos dos.

Bien... ¡Suerte!

Medidas y programas de edición

→ Medidas de wattpad

→ Programas de edicón online

→ Programas de edición offline

Diseña tu portada en Photoscape

→Diseña tu portada Wattpad →Con imágenes

→Diseña tu portada Wattpad →Modo sencillo

→

 Diseña tu portada en Photoshop

→

→

→

Tips

→

Crea tu propio cursor [Photoscape]

Hello 

He querido postearles este pequeño tutorial sobre como diseñar nuestro propio cursor de una manera bastante fácil y creativa. Personalízalo a tu gusto y añadelo a tu blog / página.

Bien, comencemos.

Pasos;

1♦ Abrimos Photoscape.

 [pueden además utilizar otros como gimp, o simplemente uno online como pixlr, picmonkey...]

2♦ Seleccionamos la imagen (PNG) que deseamos utilizar.

3♦ En inicio pinchamos sobre el botón Redimensionar;

4♦ Para poder dar la forma de un cursor el tamaño de la imágen debe ser pequeño, en mi caso utilizo las medidas 50x50 pero Photoscape las enlaza cuando se trata de una imágen por lo que la altura suele cambiar;

 

Esto es opcional puesto que si deseleccionan ''Conservar relación de aspecto'' Photoscape no podrá enlazarlas.

5♦ Luego de haber convertido nuestra imagen en una bastante pequeña necesitaremos formar nuestro arrow o flecha. Presiona CTRL + 0 para acercar más la imagen de forma que puedas ubicar la flecha.

Para crearla pinchas en el recuadro que aparece en objetos y trazas un cuadrado del color de tu preferencia. La razón por la que lo trazé fuera del fondo no es mas por el simple hecho de que, así se me falicitarán las cosas al girar el objeto.

6♦ Como les expliqué arriba ↑ debemos girar el objeto justo en la esquina de la imagen, por tal razón dejé el suficiente espacio para poder hacerlo de una forma satisfactoria;

7♦ Finalmente pinchamos en Objeto + fotos → Combinar fotos con objetos. Con las teclas CTRL + Alt + 0 volveremos a la imagen con su tamaño original.

Este es el resultado:

— ♥

Diseña tu propia portada de tu libro | Wattpad [Photoscape]

¡Hola! ¿Cómo les va? 

Bueno, estuve pensado desde varios días sobre si hacer este pequeño tutorial, hasta que finalmente accedí hacerlo. Primeramente, comenzaré con lo básico ya luego les mostraré otras ideas que podrán utilizar en sus portadas, realmente será algo bastante fácil puesto que no utilizaremos demasiados elementos (Png's, texto 3D, viñetas, estilos, sombras, texturas...) sino que será de una forma sencilla y llamativa.

En este caso utilizaremos el programa Photoscape; es bastante práctico el uso de este programa puesto que a diferencia de los demás programas de edición, este contiene las herramientas necesarias y de forma fácil podemos utilizarlas.





Pasos;


1♦  Abrimos nuestro Photoscape.

2♦ Pinchamos en Menu → Nueva foto → seleccionamos las medidas establecidas;

 

*Si utilizamos estas medidas el resultado será mucho mejor, puesto que las medidas establecidas por Wattpad no son convincentes a la hora de editar, [ se los digo por experiencia ] y mucho menos cuando nuestro —increíble— resultado se estropee a la hora de haberlo cargado a Wattpad.

*Las medidas que establece Wattpad son 256x400 pero no es nada recomendable usarlas, de tal forma, es mejor que utilicen las medidas 640x1000 o si desean pueden multiplicar las medidas de Wattpad por [ 2 ] quedando unas medidas de 512x800.

3♦ Elegimos nuestra imagen y la colocamos en nuestro fondo de trabajo;

*Debemos de tomar en cuenta el tamaño de nuestra imagen que en mi caso, la imagen que escogí como puede notarse tiene mas pixeles tanto de altura como de ancho que nuestro fondo de la portada. Realmente lo que quiero que aparezca es el centro de mi imágen por lo que la coloco de forma que —empareje— junto con el fondo.

*Si pinchamos —luego de haber posicionado nuestra imagen— en el botón Foto + Objetos → Combinar fotos con el objeto; el programa inmediatamente cortará la imagen de modo que solo quede lo especificado.

4♦ Añadir efectos a la imágen (brillo, contraste, intensidad...)

Ya luego de haber seleccionado nuestra imágen y recortarla, e hora de añadir efectos. Para ello nos dirijimos a inicio → Brillo, color.

*Los efectos varían segun los colores que tengan sus imagenes ya que en mi caso está la utilización de colores oscuros (negro, gris, blanco...) como han de haber notado.

*Pueden además añadirle filtros, solo no se excedan puesto que lo más importante es que sea visible, tanto la imágen que proyecte la temática de dicha historia y el título de ésta por supuesto.

5♦ Añadir texto a nuestra portada;

Si queremos añadir el titulo en nuestra portada debemos tener en cuenta que: 

♠El tamaño realmente importa, a la hora de encontrar dicha historia el título debe tener un tamaño normal para ser visto por el lector [ esto es algo que todos ya han de saber ].

♠Si nuestra imagen es oscura o predomina mas el color negro debemos pensar en utilizar color claros, llamativos pero no se excedan, en mi caso siempre suelo utilizar blanco sobre una capa gris [no muy oscuro] solo para resaltar.

♠Si nuestra imagen posee colores llamativos o colores claros [rosa, violeta, azul o celeste, blanco] deben de saber que el uso de colores mas oscuros y llamativos es la mejor opción. Por ejemplo si su imagen contiene colores como el rosa fucsia, verde, azul, naranja u violeta. Deberan utilizar colores oscuros pero que no los arruine como el negro, en el caso de un azul oscuro la utilización de un color mas claro estaria bien.

♠Si queremos colocar el título debemos de pensar en colocarlo en un lugar donde no cubra nuestra imagen puesto que ésta no será visible, 

♠Es mejor utilizar fonts que no sean demaciado curvas; en caso de que utilices ese tipo de letra [Como está el caso de hand write o como se conocen las letras de caligrafía, cursivas, etc] deberás comprender que tiene que estar visible para el lector. Puedes guiarte de las fonts [Times New Roman, Arial...] Si necesitas encontrar una a tu gusto puedes visitar d a f o n t .

 

¡Listo! 

Haz acabado tu portada de una forma sencilla y rápida. 

El siguiente tutorial será algo mas diferente, diseñaremos nuestra propia portada solo con texto y gráficos en photoscape.

Añade un buscador personalizado a tu blog

 

¿Cómo están?

Esta vez les mostraré un ''Buscador personalizado'' algo que muchos han estado utilizando en sus blogs y que talves muchos sepan.

Se trata de esto;

 

Como ves puedes personalizarlo tanto como gustes, añadirle GIFs y cambiar los colores.

♥                 ♥              ♥

Pasos;

Diseño >> Añadir HTML/Javascript  >> Copiar y pegar el codigo:

<center>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMTJLXmcbR4wMRIs7eN1rN081pewg_FZEXQfr2jNHMiYgqDuQJWSSFoXbrmKTpzsmelFqg0OughKVkk6EVkgbMQ9088snsd_pccnLAxXil-plZ3hVVDnfCa1poMbFa5Vbio60jI4YOJpo/s1600/serch.png" />

<form action="/search" method="get"> <img src="http://sl.glitter-graphics.net/pub/1825/1825664m44ia9h5vr.gif"/> <input type="text" name="q" value="" style="width:160px; height:19px; background-color:#ffffff; color: #ffaad5; font-size: 11px; border: 1px double #ffaad5;border-radius:5px;box-shadow: 0 0 0.4em #ffaad5 , 0 0 0.4em#ffaad5;" /> <img src="http://sl.glitter-graphics.net/pub/1825/1825664m44ia9h5vr.gif" />

<br />

<br />

<input type="submit" value="buscar" style="font-size: 12px; background-color:#ffffff; color: #ffaad5; border: 1px dashed #ffaad5;border-radius:5px;" /></form></center>

Indicaciones;

Morado: Url de la imagen que usaras ya sea la que diga busqueda. Rosa: Color de sombra de la barra. Azul; Color borde del cuadro buscar Celeste; color fondo del boton buscar. Naranja: URL de los gifs.

Guardas y listo.

♥♥♥

Aquí algunas imagenes para usarlas en el tuto ;

http://i65.tinypic.com/b3jrti.png

http://i65.tinypic.com/1zoupvc.jpg

http://i68.tinypic.com/10xd0r7.png

Si quieres más puedes visitar ''Recursos'' en el menú del blog.

Personaliza las barras de desplazamiento de tu blog

 

¡Hey! 

Aprende a como personalizar las barras de desplazamiento de tu blog, cambiales el color, anchura e incluso editalas como desees.

Primero les muestro un ejemplo aquí abajo;

 

En estos la barrita es más fina y por consecuencia el ''Fondo'' también.

 

¡Comencemos!

 Pasos;

Diseño  Plantilla  Editar HTML

Con CTRL + F buscamos el código;

]]></b:skin>

ya encontrado pegan justo arriba;

::-webkit-scrollbar {
height: 12px;
width: 15px;
background: #febeba;
}

::-webkit-scrollbar-thumb {
background: #00BFFF;
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
}

Que al final quedaría algo así;

  

Indicaciones;

Rojo: ancho y alto del fondo de la barra de desplazamiento.

Verde: color del fondo de la barra.

Azul: color de la barra.

 Violeta: dimensiones de tu barra { según los valores que elijas podrás definir qué tan fino o ancho desees tu barra de desplazamiento }

Das vista previa y guardas tu resultado :)