29 octubre 2016

CÓMO NO PERDERTE NADA EN FACEBOOK

 Hola a todos, perdón por haber estado tanto tiempo sin escribir pero no he podido con tanto examen. Pero pienso compensarlo con el tutorial que os traigo hoy.




Con el antiguo algoritmo de Facebook, debido al conocido EdgeRank y que muchas fan page no realizaban publicaciones de valor, no siempre sus seguidores veían las noticias.

El algoritmo edgerank se traduce a más interacciones de tus usuarios con tus publicaciones, más posibilidades tienes de que les sigan apareciendo tus novedades.

Una manera de arreglarlo era activando la opción “Recibir notificaciones” de dicha fan page.

Pero Facebook lo único que hacía era limitarse a anotar un numerito en la bola del mundo que tienes situada en la barra azul superior, y al hacer click sobre la bola, veías un “montón” de avisos.

sabes que no es lo mismo un aviso en la bola del mundo, que la publicación de tu fan page le aparezca directamente en su feed de noticias.

Pues bien, Facebook ha añadido una novedad muy importante: ahora eres tú quien controla las noticias de tu feed.


Con esta novedad tu eres el que elige lo que quieres ver.


Para activar este cambio, solo debes entrar en Facebook desde tu ordenador, ir a la barra superior azul y…
  • Hacer click sobre el triangulito que hay en el extremo derecho de la barra azul.
  • Bajar hasta donde dice “Preferencias de la sección de noticias” y hacer click.
  • En el menú que te sale pulsa la primera opción
  • Selecciona las personas/páginas/grupo que te interesen y dale aceptar.
Listo. Ahora te saldrán las primeras y no quedarán olvidadas en la bola del mundo. ;)

P,D: no os olvidéis de incluirme, así no os perderéis mis últimas novedades. Por cierto, esta es mi página de facebook:
https://www.facebook.com/Lovely-and-Crazy-Blogs-1840101836212673/?ref=bookmarks

Besos,


22 junio 2016

CÓMO PONER LOS COMENTARIOS RECIENTES EN EL LATERAL DE TU BLOG

Perdón por haber estado tanto tiempo sin escribir, pero con los exámenes, los trabajos y demás no he podido. Pero prometo compensar el tiempo perdido con el mega tutorial que te traigo hoy.


Pensaba hacer este tutorial con el programa de Way2blogging, pero al ir a revisarlo he visto que el servidor ha dejado de funcionar. Y he pensado, ¿ y ahora cómo lo hago?

Muy fácil, con un código HTML. En serio, me he comido un poco la cabeza para que funcione pero ya está operativo. Puedes verlo en el lateral del blog, basta con bajar un poquito.

Queda bien y puede ser un truco para obtener más comentarios en tu blog.


Te lo voy a explicar paso a paso:
  • Diseño
  • Añadir gadget
  • HTML/ Javascript



  • Pones el titulo que quieras: últimos comentarios, comentarios recientes...



  • Y pones este código:
<style type="text/css">
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:250px;font-size:12px;font-family:Trebuchet;color:#888;background:#transparent;margin-top:9px;padding:10px 7px 5px;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li a:hover{color:#5390ad;background:#transparent}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;padding:1px 3px;color:#75d7ff;background:#transparent;display:block;font-size:16px;line-height:1.4}
.latest_recent_comments span{display:none}
</style>
<script type='text/javascript'>
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 z=z||5,2=2||1E,p=p||18,7=7||"17://14.13.6/-11-V/U-1y/1t/1b/12/10.w",x=x||" X &1d;",k="l"===m k?!0:k,n="l"===m n?!1:n,9="l"===m 9?!0:9,K="l"===m K?!1:9;16 M(h){8 c;c=\'<E B="M">\';A(8 e=0;e<z;e++){8 f,g,a,d;15(e==h.F.G.o)1c;c+="<H>";8 b=h.F.G[e];A(d=0;d<b.r.o;d++)"S"==b.r[d].T&&(f=b.r[d].y);A(d=0;d<b.v.o;d++)g=b.v[d].W.$t,a=b.v[d].Y$Z.I;-1!=a.3("/J/")?a=a.q("/J/","/s"+2+"-c/"):-1!=a.3("/D/")?a=a.q("/D/","/s"+2+"-c/"):-1!=a.3("/L-c/")&&0!=a.3("j:")?a="j:"+a.q("/L-c/","/s"+2+"-c/"):-1!=a.3("u.6/i/1a-N.C")?a="j://1.O.P.6/-1e/1f/1g/1h-1i/s"+2+"/1j.w":-1!=a.3("u.6/i/1k-N.C")?a="j://4.O.P.6/-1l/1m/1n/1o/s"+2+"/1p.w":-1!=a.3("u.6/i/1q.C")&&(a=-1!=7.3("1r.6")?7+"&s="+2:7);!0==k&&(d=!0==9?"1s":"",c+=\'<Q B="1u \'+d+\'"><i B="\'+d+\'" I="\'+a+\'" 1v="\'+g+\'" 1w="\'+2+\'" 1x="\'+2+\'"/></Q>\');c+="<R>"+g+"</R>";b=b.1z.$t.q(/(<([^>]+)>)/1A,"");""!=b&&b.o>p&&(b=b.1B(0,p),b+="&1C;",!0==n&&(b+=\'<a y="\'+f+\'">\'+x+"</a>"));c+=\'<a y="\'+f+\'">\'+b+"</a>";c+="</H>"}c+="</E>";1D.19(c)};',62,103,'||avatarSize|indexOf|||com|defaultAvatar|var|roundAvatar|||||||||img|http|showAvatar|undefined|typeof|showMorelink|length|characters|replace|link|||blogblog|author|png|moreLinktext|href|numComments|for|class|gif|s220|ul|feed|entry|li|src|s1600|hideCredits|s512|latest_recent_comments|rounded|bp|blogspot|div|span|alternate|rel|UPb7SL|32nw|name|More|gd|image|personal|5YeC_6|s80|googleusercontent|lh5|if|function|https|40|write|b16|QJRpUV7G9bc|break|raquo|NAMZejK41So|T0evV0_SSUI|AAAAAAAACso|ol6|PKkZipA|md_blogger_logo|openid16|k0U7v1WpNRs|T0euKMHQi_I|AAAAAAAACsg|DNqzinhvxt4|md_openid_logo|blank|gravatar|avatarRound|AAAAAAAABWE|avatarImage|alt|width|height|uGXI|content|ig|substring|hellip|document|34'.split('|'),0,{}))
</script>
<script type="text/javascript" src="http://lovelyandcrazi.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

NOTA:

En naranja pones la URL de tu blog. ( o a lo mejor sale gris si es un enlace ya visitado).
Rojo tamaño de la letra del comentario.
Amarillo la fuente en la que quieres que esté escrito.
Verde, color de la letra del comentario
Azul, color del nombre del usuario que dejó el comentario.
Morado, tamaño del nombre del usuario.


¿Ves que fácil?

Ahora puedes dejarme un comentario para ver tu carita ahí :)

¡¡Espero que te haya gustado!!

Besos,


01 abril 2016

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 ;)






28 marzo 2016

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:




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,


24 marzo 2016

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,





04 febrero 2016

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,


31 enero 2016

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,


27 enero 2016

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,

23 enero 2016

CÓMO NUMERAR LOS COMENTARIOS EN BLOGGER

Esto es básicamente para que cada comentario lleve su númerito según el orden de escritura. Si alguien responde luego a un comentario que está más arriba por ejemplo, se re-enumeran.

Ej:

1.Blanca
2.Celia
3.María

Si yo respondiera por ejemplo a Blanca:

1.Blanca
   2.Cristina (respuesta)
3.Celia
4. María

Lo único que tienes que hacer para que a partir de ahora te salgan numerados, es añadir esto en CSS:

.comment-thread ol{
counter-reset: contarcomentarios;
}
.comment-thread ol ol {
counter-reset: contarbis;
}
.comment-header:before {
content: counter(contarcomentarios,decimal)".";
counter-increment: contarcomentarios;
float: left;
padding-right: 4px;
}

Espero que te sea útil.

Besos,


19 enero 2016

CÓMO PONER EL TÍTULO DEL POST AL LADO DE LA FECHA EN EL BLOG

Es muy fácil.

Básicamente lo único que tienes que hacer es mover el título un poco. Un poco hacia la derecha, y un poco para arriba....

¡Ya lo tienes al lado de la fecha!



Tras hacer eso me quedaba muy cerca el texto del post así que le he puesto un poco de espacio entre la fecha/título del post y el texto del propio post.

Para hacer estas tres cositas, añades en CSS:


h3.post-title { /*pdb*/

margin-top: -50px !important;
margin-left: 70px !important;
margin-bottom: 35px !important;
}

Puedes ajustar los valores (números) a lo que necesites, ya que dependerá de la fuente que uses y otras cosas.

He hecho el ejemplo en mi blog personal y como me gustaba el resultado se lo voy a dejar así. Por si te interesa este es mi blog personal ;)
Si te quieres hacer seguidor@ o comentar algo... eres bienvenid@.

Espero que lo uses.

Besos,


15 enero 2016

CÓMO CAMBIAR LA FUENTE DE LOS COMENTARIOS


Lo que tienes que hacer es pensar qué fuente quieres poner, y añadir en CSS:
 
.comments-content .comment-content {
font-family: Impact; /*pdb*/
}
Sustituyendo Impact por el nombre de la fuente que quieras.

Para que este post no sea tan corto, voy a contarte cómo cambiar, en lugar del texto de los comentarios, lo que es el usuario, es decir, el nombre que sale justo encima del comentario. Sería:

.comments-content .user {

font-family: Impact; /*pdb*/
}
Ya sabes, lo rosita lo cambias por la fuente que quieras.
Espero que te haya gustado. ;)

Besos,

12 enero 2016

CÓMO PONER UN FORMULARIO DE CONTACTO EN EL BLOG


Yo te voy a proponer esta opción porque es la que uso y la que considero más fácil, pero si te gusta otra opción en Google hay muchas.

  • Entras en Foxyform.
  • Y en la zona de la derecha, donde dice Sus opciones (paso 1: configuración) eliges qué casillas quieres que muestre:


Por defecto te vienen marcadas Apellido e E-mail.

  • Pero verás que si pinchas en Mostrar más opciones, puedes elegir otras cosas también. Puedes poner por ejemplo Nombre, E-mail y Asunto por ejemplo. 
  • Además ves que puedes marcar a la derecha si es un campo obligatorio o no.
  • Entonces pasas al Paso 2: Personalización. Ahí puedes cambiar los colores, la fuente y el tamaño de la fuente también.
  • Y ya el paso 3 es meter tu dirección de correo electrónico.
Porque lo que pasará es que cada vez que alguien rellena tu formulario, automáticamente recibes un email. No como en Google Docs por ejemplo, que se van a una hoja de cálculo.

  • Escribes el código captcha anti-spam.
  • Y pinchas en Crear formulario.
  • Entonces te sale esto:

  • Y ya lo único que tienes que hacer es copiar ese código y pegarlo en tu página del blog.
  • Lo pegas en la vista HTML, y cuando lo publiques, se verá (en la vista Redactar no se ve, verás que pone foxyform).
Nota: por defecto viene un poco estrecho. Fijate que pone 350 px.

Pues sin más, en la vista HTML una vez de que lo has pegado, le pones un valor un poco mayor. 500 o lo que quieras.

Espero que te sea útil.

Besos,



08 enero 2016

CÓMO PONER LA FECHA REDONDEADA EN BLOGGER

Esto puede darle a tu blog un toque bastante especial.

Tienes que añadir en CSS:

.date-header span {
padding:23px 7px 23px 7px;
border-radius: 100px;
/*pb*/
}

Nota: 

A) Eso sí, el padding ese es el que te he puesto de ejemplo, pero necesitarás cambiarlo dependiendo del tamaño de tu fuente.

Es decir, si la fecha la tienes con una fuente más grande, necesitarás un círculo más grande, y por tanto deberás ajustar el padding.

El primer número (23 px en el ejemplo) es el margen/espacio que le das arriba. Es decir, una fecha con el primer número a 20 o 30 y los demás a cero, aparecerá con color por arriba pero no en el resto de los lados.

El segundo valor es el de la derecha. El siguiente el de abajo. Y el último el margen de la izquierda.

Entonces, para que sea un círculo perfecto, obviamente arriba y abajo debes ponerle el mismo valor, o sino no será un círculo. Y a un lado y al otro lo mismo.

B) Y luego el 100% es lo que lo redondea del todo. Piensa que la fecha por defecto, si le pones color de fondo, es cuadradita.

A 0% es totalmente cuadrada y basándote en eso puedes ir probando diferentes opciones hasta encontrar tu redondel. ;)

Si te queda muy pegado al título del post sólo tienes que usar también este código, poniéndolo justo debajo pero con al menos 2 intros de separación.

h3.post-title {
padding-top:1em;
/*pb*/
}

Puedes cambiar el 1em por un valor mayor o menor dependiendo de si quieres darle más o menos espacio entre el círculo y el título del post.

Además también le puedes dar valores decimales, no sólo números enteros. (0.5em)

Espero que te haya gustado.

Besos,


04 enero 2016

CÓMO AÑADIR UN BORDE ALREDEDOR DE LA COLUMNA EN BLOGGER

Lo advierto, hay blogs que quedan mejor sin el pero si te gusta y consideras que tu blog es menos soso con esto pos se lo pones y listo. Yo sólo te lo digo por si no quieres tener un blog muy recargado. 

Te lo voy a explicar paso por paso para que no te pierdas:
  • Plantilla
  • Editar HTML
  • Y buscas pulsando (ctrl + f) (dentro del cuadro de los códigos, no fuera)
content-outer

Un poco más abajo verás que pone:

margin-bottom: 1px;
}

Esto sería un ejemplo, no es el definitivo. Sólo te digo que son en total 4 líneas pero no te apures, que es muy fácil.

border-right: 7px solid #000000

Ahora te lo explicaré paso a paso para que lo entiendas y puedas hacer tu misma tu código.

Quiere decir que me va a salir una línea de 7px de ancho en la derecha de la columna y en color negro.

1) border-right:

Significa obviamente que es el borde de la derecha.

En las siguientes líneas, una detrás de otra, deberías ir añadiendo los siguiente bordes.

Como la primera dice right (derecha).
La siguiente línea será igual pero diciendo left (izquierda).
La siguiente top (superior) - aunque si tienes barrita de Blogger arriba no hace falta.
Y la siguiente bottom (inferior).

2) 7px

Es el ancho de la línea. Obviamente cuanto mayor sea el número que le pongas, más gordita se verá la línea y viceversa.

3) solid

Quiere decir que es una línea sólida. Puedes cambiar esto por otras cosas.

En realidad se pueden poner bastantes cosas, pero yo recomiendo que si vas a poner un borde sea:

solid (línea lisa)
dashed (con guiones)
dotted (con puntitos)
double (doble)

4) #0000000

Es el color de la línea. Esto ya lo conoces. Y ya he explicado en post anteriores cómo saber el color que quieres. No lo repito porque es un tostón repetir siempre lo que ya he explicado varias veces. No te lo tomes a mal pero tienes que comprender que después de haberlo mencionado varias veces yo pienso que ya deberías saber cómo se hace.

Esto sería un modelo ya hecho. Ay, pillinas ;) cómo sé que algunas no os habéis enterado y que queréis un modelo para copiar y modificar a vuestro gusto. Pos no pasa nada porque aquí está vuestra solución.

border-right: 3px solid #fdb8b6;
border-left: 3px solid #fdb8b6;
border-top: 3px solid #fdb8b6;
border-bottom: 3px solid #fdb8b6;

No quites los puntos y comas porque si no el código no vale nada y no te sale.

Puedes ir probando diferentes combinaciones e ir dando a Vista previa hasta que tengas el reborde como te guste.

  • Y una vez que ya te has decidido le das a guardar plantilla y listo.
Como ves es increíblemente fácil tener un diseño bonito y con apariencia profesional una vez de que has aprendido los básicos.

Besos,

Related Posts Plugin for WordPress, Blogger... Light Pink Pointer