CÓMO DISEÑAR TU BLOG Y ENAMORAR A TUS LECTORES

¿Sabías que una persona cuando entra en tu blog tarda menos de 5 segundos en evaluarlo y decidir si sigue leyéndolo? En ese tiempo se centran casi exclusivamente en el diseño de tu sitio web.

Admítelo, todas hemos juzgado alguna vez a X(algo) por su portada, y tus lectores van ha hacer lo mismo con tu blog.

Además, un buen diseño transmite sensación de profesionalidad y fiabilidad a tus lectores. Y ya puestos a pensar, tu también quieres un blog bonito y a tu gusto que enamore a tus lectores.

Porque piensalo bien, ¿  seguirías leyendo un blog con un diseño cutre salchichero ? Yo no, y tú creo que tampoco.

Por eso es muy pero que muy importante tener un buen diseño en tu blog.

 

Últimamente están muy de moda las plantillas que se instalan con un código HTML en el blog y que conllevan el gasto de dinero correspondiente. Que si puedes permitírtelas, pues bien por ti, ya tienes un diseño muy bonito en el que has invertido tu dinero.

El inconveniente es que luego no puedes cambiar nada del diseño ni hacer ningún tutorial de Internet porque la plantilla queda tanto cambiada como inservible.

Por eso lo mejor es diseñarlo tu misma, así le das tu toque personal y sabes exactamente lo que has tocado. Además, es muy divertido ;)

Basta con buscar inspiración en Internet y la creatividad te llegará...

Una vez que ya he explicado por qué es importante el diseño de tu blog, veremos unos tips para tener un buen diseño:

• Elegir una plantilla, yo te recomiendo la plantilla simple, es la más fácil de personalizar y con la que mejores resultados se obtienen. Es la que siempre uso.
• Elegir un fondo que no sea uno de los que nos ofrece blogger, que no digo que estén mal, pero los puede tener iguales un mogollón de gente y de lo que se trata es de tener un diseño único. Si no encuentras por Internet uno que te guste, te lo puedes diseñar tu misma.
• Diseñar una buena cabecera en vez de tener el título y la descripción. Da sensación de profesionalidad. (Otro día te hago un tutorial explicando como poner tu cabecera).
• Elegir bien las fuentes y colores de tu blog. No elijas colores muy chillones para las letras de tus entradas, dificultan la vista y son muy molestas. Para saber cómo escribir correctamente tus entradas puedes leer este post y para saber que sentimientos inspira cada color puedes leer este otro post que seguro te ayudará a elegir tus colores clave.
• Diseñar los cartelitos para vuestras entradas, vuestros iconos de seguimiento, los titulillos de vuestros gadgets...
• Comprueba que tu diseño es responsive, es decir, que se adapta a móviles y demás. Miralo en la sección plantilla.
• Las imágenes, mejor si son tuyas y si las has sacado de otro sitio, menciona la fuente que eso Google lo tiene en cuenta ;) y no te olvides de dimensionarlas a un tamaño aceptable. Esto también te lo contaré en futuros posts.
• Dale tu toque personal a todo tu blog, eso luego demuestra que ese sitio es fiable.
• CUIDADO CON LA PUBLICIDAD, es odiosa y molesta, si decides ponerla que sea pequeña o en una esquinita en la que no dificulte la lectura.

Espero que te sirvan estos pequeños trucos y puedas ponerlos en práctica si todavía no lo has hecho.

Y recuerda que diseñar un blog no es tan díficil, basta con saber los básicos y partiendo de ahí ir diseñando todo tu blog.

Besos,

P.D: dentro de nada sacaré el curso de iniciación para blogueras en pdf y gratis, todavía no te puedo desvelar nada pero te aseguro que merecerá la pena la espera ;)

FREEBIES: BOTONES PIN IT PARA TU BLOG

Aquí están tal y como te prometí los botones pin it para tu blog, para aplicar el tutorial del otro día, hay 3 modelos en diferentes colores:


Este es el primer modelo:

Descargar

Este es el segundo modelo:

 

Descargar 

Este es el tercer modelo:

Descargar


Cada enlace te llevará a la carpeta correspondiente de cada modelo, en Google drive. Buscas el que te guste, le das y en la nueva ventana que te saldrá le das al icono de descargar. Arriba hay una barra negra y para bajarte algo solo hay que darle a la flecha que señala hacia abajo.

Si por algún motivo no te funciona el enlace, puedes bajarte las imágenes directamente de mi blog (guardar imagen como...) y luego con un editor gráfico o una captura de pantalla recortar el que necesites.

Están en fondo transparente, así que no te preocupes por el margen blanco. Si eso, lo puedes arreglar tú con el editor o me lo dices a mí. Y te lo envío editado y listo para usar.

Si no te funciona de ninguna de las maneras anteriormente explicadas, me lo preguntas via mail y te mando el que necesites.

Cualquier duda me la preguntas por comentarios o via mail. Si tienes dudas muy gordas, que no sabes que hacer, me lo sugieres por el formulario de petición de tutoriales blogger o lo que es lo mismo, la página de contacto.

Espero que te sean muy útiles, besos,

CÓMO PONER EL BOTÓN DE PIN IT (PINTEREST) EN BLOGGER

Esto es algo a lo que le vas a sacar mucho partido. Lo he simplificado lo más que he podido para que no tengas que comerte mucho la cabeza.

 

Te voy a enseñar como puedes poner el botón de pin it que quieras en tus fotos de blogger. Puedes diseñarlo tu misma con cualquier editor gráfico como picmonkey, gimp..... O también puedes usar los diseñados por mí en el próximo post que publicaré ;)

Pues bien, una vez dicho esto vayamos paso por paso:

• Plantilla
• Editar HTML
• Pinchas dentro del cuadro y luego abres el cuadro de búsqueda pulsando al mismo tiempo las teclas ctrl y f. 
• Escribes en el cuadro </body> y le das a enter. Te saldrá coloreada porque es la línea que has buscado.
• Justo encima pegas el siguiente código:

<!-- Inicio - Botón Pin it -->

<script>

//<![CDATA[

var bs_pinButtonURL = "URL donde está la imagen";

var bs_pinButtonPos = "topright";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>

// This Pinterest Hover Button is brought to you by bloggersentral.com.

// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.

// Feel free to use and share, but please keep this notice intact.

</script>

<!--Fin - Botón Pin it -->

Sólo hay que cambiar lo resaltado en azul y verde:

• Lo azul es la URL de la imagen. Basta con cogerla y subirla a un post borrador, luego pinchar con el botón derecho encima de la foto y darle a copiar la ruta del enlace. Luego sustituyes eso por lo que hay en azul y listo.
• Lo verde es la ubicación del botón dentro de la imagen. Aquí esta puesto en la esquina superior derecha, pero puedes cambiarlo al sitio que quieras:

center: centro de la imagen

topleft: arriba a la izquierda

bottomright: abajo a la derecha

bottomleft: abajo a la izquierda

• Guardar plantilla.

Y esto es todo, ¿ a que es fácil ? Si te ha gustado y te es útil no te olvides de comentar y compartirlo en tus redes sociales, me harías muy feliz.

Ahora ya lo tienes más fácil todavía para que la gente pinee tus posts, ya que si no tienen el botón instalado en su barra de marcadores podrán hacerlo directamente desde tu blog.

Por cierto, si no lo ves es porque hay que pasar el ratón por encima. Pero en mi opinión si que se ve porque mientras estás bajando por la página alguna vez que otra pasarás el ratón por encima de la foto, digo yo.

Ten en cuenta que este botón es para tus lectoras. Es decir, independientemente de que tengas cuenta o no, uses Pinterest o no, este botón es para que tus lectoras, las que sí usen Pinterest, puedan pinear cosas desde tu blog.

Aunque también puedes pinear tus post en un tablero con el nombre de tu blog, así lo promocionas por pinterest.

Viendo lo fácil que te lo pongo, no tienes por que buscar en internet estas cosas. En internet la información no siempre es fiable, esta actualizada ni lo explican tan bien como yo. Así que ya sabes que aquí lo encontrarás todo muy bien explicado.

 

Y si alguien quiere aprender a hacer algo, aquí está el formulario de petición de Tutoriales Blogger. Podrás usar el formulario para decirme qué necesitas aprender y yo procuraré publicar sobre ello para que no tengas que buscar por ahí y que todo te de problemas... :)

No te olvides de que cualquiera está invitad@ a hacer un post invitado, me lo sugieres por correo: crisaisa2014@gmail.com y lo hablamos ;)

Besos,

CÓMO HACER QUE LAS FOTOS DE TU BLOG SE VUELVAN MÁS CLARITAS AL PASAR EL RATÓN POR ENCIMA

Esto es algo que he visto en muchos blogs y hoy te traigo el modo de hacerlo.

Es básicamente un código de CSS. Este código es para todas las fotos del post, así en general, no hay excepciones.

• Plantilla - personalizar - avanzado - añadir CSS
• Y añades este código:

.post-body img:hover {
opacity:0.5;
}

Cambiando el numerito 0.5 por lo que quieras.

0.1 hará que prácticamente no se vea la foto de debajo.

Y 0.9 hará que apenas se aclare.

Es básicamente que vayas probando pasando  el ratón por encima hasta encontrar la intensidad de aclarado que te guste. ;)

• Aplicar al blog, y listo.;)

Besos,

CÓMO PONER UN FONDO TRAS EL MENÚ DE PÁGINAS

Este efecto lo puedes ver claramente en el menú de páginas de mi blog. Esos circulitos rosas de fondo. Pues bien con este tutorial puedes poner la imagen que quieras.

Necesitas tener lo que es la "base" del fondo, y al igual que con los fondos de los blogs, ha de ser "seamless". O sea, tienes que tener en cuenta que se va a repetir. Puedes buscar en google imágenes hasta encontrar el que te guste.

Luego añades en CSS:

.tabs-inner .widget ul {
background: url(URL fondo) repeat-x;
height: 45px;
/*pdb*/
}

Poniendo en el paréntesis la URL de la imagen que vas a usar como fondo, y cambiando el 45 (altura) por el alto de tu imagen. Para saber la URL de una imagen yo la subo en una entrada borrador, luego pinchas en ella con el botón derecho del ratón y le das a copiar la ruta del enlace. Despúes lo pegas en el paréntesis ese sustituyendo (URL fondo) por lo que hayas copiado.

Si no quieres que se repita (porque no es un patrón seamless o porque te resulta más fácil diseñarlo así), deberás ponerle también el ancho de lo que mide (donde dice width).

Lo único que tienes que tener en cuenta que entonces si cambias un día el ancho del blog, deberás repetirlo, mientras que de la otra manera puedes cambiarlo y seguiría quedando bien.

Es probable además que debas ajustarlo un poco, moviéndolo hacia derecha o izquierda. Yo ya he puesto margin-left en el código para moverlo un poco, pero deberás cambiar el -40 por lo que necesites:

.tabs-inner .widget ul {
background: url() repeat-x;
height: 49px;
width: 943px;
margin-left: -40px;
/*pdb*/
}

Usa el segundo código sólo en caso de que la imagen no sea un patrón seamless. Osea todo el rato el mismo patrón, no se si me entiendes. No es lo mismo un fondo de estampado zebra que la foto de alguien. Espero que con esto me entiendas. El fondo zebra sería un fondo seamless. ok?

Espero que te haya gustado.

Besos,

CÓMO CAMBIAR EL CURSOR DEL BLOG

La forma más fácil y rápida es ir a una página que te los proporciona. Ellos hacen todo y tu sólo copias un codiguito.

• Vas a: cursors4u
• Buscas a través de sus categorías el cursor que te gusta
• Y pinchas en él, para que te lleve a la página de ese cursor en concreto. 
• Y ahí pinchas en la pestaña que pone Blogger/Blogspot

• Entonces ahí seleccionas y copias todo el texto de la SEGUNDA cajita. No la que ves justo ahí, sino la que está un poco más abajo, donde dice New Blogger/Blogspot interface.
• Vas a la plantilla HTML y bajas hasta el final del todo, ya que hay que pegarlo justo antes de la etiqueta </html>
• Guardas y ya está.

Como sabes en internet hay muchas más páginas como esta, con sus propios cursores y tutoriales para ponerlos. Pero yo he usado esta y por eso te la explico aquí.

Besos,