17 abril 2015

¡Imagen Nueva en el Blog!

Tenía tiempo queriendo trabajar en el nuevo diseño del blog y hoy después de varias horas de trabajo, ¡tengo imagen nueva! ¡Al fin se respira un aire nuevo por aquí! ☺

Para ser honesta, casi termino no teniéndolo ya que empecé por convertir responsive la plantilla que tenía anteriormente. Habiéndolo hecho y estando probándola en las herramientas de desarrollo de Chrome me dije: ¿Cómo está éso de que vas a seguir con el mismo diseño? ...si ya tenía planes de cambiarlo hace tiempo...

Así que, en ese momento, decidí no esperar más y volverlo prioridad absoluta y ponerme a trabajar en ello al 100% dedicando todo mi tiempo libre disponible.

El diseño de la plantilla es responsive. Éso quiere decir que van a cambiar ligeramente como se muestran los elementos en la plantilla, con el fin de que puedan ser vistos cómodamente en los distintos dispositivos tanto de escritorio como móviles.





He comprobado el resultado desde las herramientas de desarrollo de Chrome, y usando una de mis herramientas favoritas: http://quirktools.com. También en mis dispositivos móviles, sin embargo, no estoy exenta a que se me haya pasado algo, así que agradezco enormemente que me hagas llegar cualquier observación sobre algún bug o error, con el fin de corregirlo.

Espero que puedas navegar cómodamente en el contenido, esa es la idea. Cualquier sugerencia o comentario que favorezca el uso del blog no dudes en hacérmela llegar. ¡Gracias!.



Los colores

Los colores principales que componen la plantilla son los siguientes.



Color web de izquierda a derecha:  #414141, #F66, #005970, #F6F6F6, #FEFEFE.

Algunos acentos con el color de fondo:  #CFF5FE


Compatibilidad

Internet Explorer 9+, Google Chrome, Firefox y principales navegadores modernos.


Créditos y Agradecimientos

Quiero agradecer enormemente el hecho de que otros nos faciliten la tarea en el desarrollo de nuestras ideas ahorrándonos tiempo y más trabajo.

Sigo usando el script de Oloblogger para el resumen automático de las entradas que con algunos pequeños cambios, se adapta bien a lo que buscaba. Además, es más rápido y eficiente que otros scripts que circulan por ahí, según algunas herramientas que uso.

Utilizo la fuente Roboto servida desde Google Fonts API.

Utilizo también Animate CSS para algunas animaciones.

También quiero aprovechar para agradecer a Codrops y CSS Tricks, sitios en los que he aprendido varios hacks y técnicas que me fueron muy útiles en el proceso de desarrollo del diseño de mi plantilla.

Por supuesto también agradezco y muchísimo al mismísimo Blogger, que gracias a su tecnología es posible tener un sistema sencillo para poder administrar los contenidos del blog y facilita la inclusión y exclusión de gadgets y otros elementos.


Lo que sigue

Estaré trabajando en algunos detalles, por ejemplo la página de error 404, la página de formulario de contacto, entre otras páginas que aun tengo pendientes.

Voy a buscar la forma de mejorar el rendimiento del blog al usar la fuente roboto, que descargo desde la librería de fuentes de Google. Ya que al usarla me baja el puntaje en pagespeed bastante...

Y ¡qué siga la fiesta! que yo tengo muchas ganas de bailar ;)

¿Te gusta la nueva imagen del blog? No dudes en hacerme llegar tus comentarios, ya sean públicos o privados con el fin de mejorar y ofrecerte una navegación cómoda. ¡Recibe un abrazo fuerte!
en Seguir leyendo
14 marzo 2015

5 Estilos Minimalistas para las Frases Tuiteables + Tip para Crear Frases Tuiteables sin usar Click To Tweet

Ya había prometido algunos estilos para las frases tuiteables, así que antes de pasar a otro tema y dejar ésto en el baúl del olvido, lo comparto hoy para que puedas usar alguno que te guste si es que estás creando frases tuiteables en el blog.

Cómo usarlo
Simplemente pones el CSS del estilo que elijas, en sustitución al otro código CSS que mencionaba en el paso previo.

Recuerda que el CSS sólo hay que ponerlo una vez en tu plantilla, y lo haces desde el Diseñador de plantillas, yendo a Avanzado > Añadir CSS.

Puedes editar a tu gusto el CSS. He resaltado de azul algunos valores que pueden interesarte, como color de bordes, color de fondo, etc. Si quieres mover el icono del pajarito verticalmente (hacerlo más para abajo o menos) busca: 40% y edita ese valor, entre más alto sea más se va a ir para abajo.

Almacena la imagen del pajarito por ti mismo, y sustituye su URL que he resaltado de verde. Si no sabes como obtener la URL de la imagen que almacenas desde Blogger, échale un vistazo a esta entrada.

Siéntete libre de enviar cualquiera de las frases a Twitter y no necesitas mantener la mención.


Estilo 1: Boxy

Nunca pierdas la esperanza y en los momentos difíciles busca alivio en Dios.Tuitéalo



.frase{display:inline-block;width:90%;margin:10px;border:3px solid #4a4a4a/*color del borde*/;padding:18px 20px 5px;overflow:hidden}.frase a{display:block;float:right;color:#2B3437;margin:25px 0 12px 0;padding:0 25px 0 0;background:url(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}



Estilo 2: Cielito

No esperes más y conviértete en el creador de tu propio destino.Tuitéalo



.frase{display:inline-block;width:90%;background-color:#DDF7F0;margin:10px;border:1px solid #D4E9E4;padding:18px 20px 10px;overflow:hidden;}.frase a{display:block;float:right;color:#2B3437;margin:25px 0 15px 0;padding:0 25px 0 0;background:url(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}



Estilo 3: Paralelo

Dios te dio la vida para que seas feliz, pero también te dio la libertad para elegirlo. Elige ser feliz.Tuitéalo



.frase{display:inline-block;width:90%;margin:10px;border-top:2px solid #151515;border-bottom:2px solid #151515;padding:18px 20px 8px;overflow:hidden;}.frase a{display:block;width:97%;text-align:right;margin:10px 0 0 0;padding:0 25px 0 0;color:#2B3737;background:url(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}



Estilo 4: Clear

Define tu meta. Si sabes lo que quieres difícilmente perderás el camino. Tuitéalo



.frase{border:1px solid #dadada; display:inline-block;margin:5px;overflow: hidden;padding:18px 20px 8px;width:90%;}.frase a{display:block;float:right;color:#2B3437;margin:30px 0 10px 0;padding:0 25px 0 0;background:url(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png) no-repeat 100% 40%;text-decoration:none;}


Estilo 5: Dramático

Solo hay dos opciones: hacer las cosas o hacer las cosas bien. Tú eliges.Tuitéalo




.frase{position:relative;padding:20px 20px 8px;display:inline-block;background-color:#4a4a4a;color:#fff;}
.frase:before{content:"";position:absolute;left:0;bottom:-16px;width:0;height:0;border-style:solid;border-width:18px 18px 0 0;border-color:#4a4a4a transparent transparent transparent;}.frase a{display:block;float:right;margin:25px 0 15px 0;padding:0 28px 0 0;background:url(http://4.bp.blogspot.com/-zdDGkrKyR7U/VPd5XEcHn2I/AAAAAAAARhY/Pbi44bZ_E5s/s320/Twitter_logo_white.png) no-repeat 100% 60%;text-decoration:none;color:#87def1;}


Para este último estilo, si quieres cambiar el color de fondo de la burbuja, solo edita los valores #4a4a4a que aparece dos veces en el CSS.

Guía para editar el CSS. Los valores se pueden editar. 
En ".frase"  definimos la apariencia del contenedor o cajita de la frase(que es por medio de una clase). En ".frase a" definimos la apariencia del enlace.
Ejemplos de propiedades y valores usados:
color:#4a4a4a; la propiedad color define el color del texto. El valor en este caso es #4a4a4a.
border-color:#4a4a4a; la propiedad "border-color" sirve para definir el color del borde, en este caso el valor es #4a4a4a.
border:1px solid #dadada La propiedad "border" define el grosor del borde (1px) el estilo (solid) y el color: (#dadada). Si quisiera el borde punteado, en lugar de "solid", sería: "dotted". Si lo quisieras discontinuo, en lugar de "dotted" sería: "dashed".
background-color:#4a4a4a; La propiedad "background-color" sirve para definir el color de fondo. En este caso el valor es: #4a4a4a.

Para editar los colores consulta una tabla de colores web. Todo el CSS es válido y ya está comprimido. Dejé el ";" en el último valor de cada regla (aunque no es necesario) para evitar problemas si es que alguien no se da cuenta, si agrega más propiedades.


Tip: Crear una frase tuiteable usando la URI de Twitter

Como ya lo había explicado, para crear la frase tuiteable requerimos de la herramienta de click to tweet, para poder crear un enlace que contenga el enlace al respectivo post. Éso facilita la tarea, y no hay que editar nada.

Pues bien, si quieres crear la frase tuiteable sin usar la herramienta, también lo puedes hacer. Así que ya no dependerás del servicio, uno nunca sabe cuando esos servicios puedan retirarse. Solo usa la siguiente linea para crear el enlace que enviará una frase a Twitter, incluyendo tu nombre de usuario para que se haga la mención.

https://twitter.com/intent/tweet?text=Aquí_va_la_frase+URL_DE_LA_ENTRADA+@Nombre_de_usuario

Edita los datos como se indica en el texto que he resaltado de color amarillo. Donde dice: "Nombre de usuario", pones tu nombre de usuario de Twitter.

Esa URI creada la colocarás donde dice: "Dirección Web" al usar la herramienta "Enlace" del editor de entradas de Blogger.

No olvides "probar el enlace" para verificar que funcione correctamente, antes de publicar la entrada ;)

Y solo para que puedas probar por ti mismo que funciona, he aquí una frase tuiteable que he creado, sin usar la herramienta Click to Tweet, que a diferencia de las anteriores, si incluye el enlace a la entrada:

Creer que es posible, es el primer paso para lograr lo que te propongas.Tuitéalo


¿Qué te parece? ¿Te gusta la idea de crear la frase tuiteable sin usar Click to tweet?

 ¡Feliz fin de semana! ;)
en Seguir leyendo
11 marzo 2015

Perfil de los Autores del blog Personalizado debajo de la Entrada (2 o más Autores)

En este tutorial, voy a explicar paso a paso cómo poner el perfil de los autores personalizado y te será útil si en tu blog participan dos o más autores, y si has actualizado tu perfil de Blogger al de Google+.

Ya antes había escrito un tutorial, que es útil si el blog solo tiene un autor, así que si ése es tu caso y no lo has visto, te invito a que le eches un vistazo ;)

Al igual que el susodicho tutorial, en éste personalizamos el elemento: "perfil del autor", agregando iconos de redes sociales y manipulamos su apariencia volviéndolo más moderno y vistoso. El ancho está declarado en porcentaje por lo tanto puede adaptarse en una plantilla con diseño responsive.

El perfil del autor luce como puedes ver a continuación:

Cuadro de perfil de Karla

Para verlo en acción, échale un vistazo a la demostración ;)
Nota: hay cambios en el color del nombre y bloque superior de la cajita.

¿Listo(a) para empezar? veamos cómo lograrlo ;)

Pasos

  1. Activar la opción que hace que aparezca el perfil del autor en las entradas.
    Primero, necesitas activar la casilla que dice: "Mostrar el perfil del autor debajo de la entrada" desde las opciones de configuración de las entradas, a las que accedes yendo a "Diseño", y luego haces click en "Editar", en la sección que dice: "Entradas del blog".

    Parte de Configuracion de entradas de Blogger
    No olvides guardar el cambio al activar la casilla. Hecho lo anterior, el perfil del autor "debe aparecer" debajo de las entradas, mostrando la fotografía, el nombre, y la introducción  para cada autor, datos que se obtienen desde el perfil de Google+, como se muestra en la siguiente imagen.

    Cuadro de autor nativo de Blogger
  2. Agregar a la plantilla el CSS que necesitas para que el perfil aparezca con la "apariencia" que definimos, incluyendo los botones de redes sociales.
    Ve a Plantilla > Personalizar > Avanzado >Añadir CSS, luego, agrega el siguiente CSS y guardas el cambio en "Aplicar al blog".Tendrás que usar alguna tecla como la barra espaciadora, para que se habilite el botón que dice "Aplicar al blog" y puedas guardar lo que agregaste usando dicho botón.

    .author-profile{overflow:hidden;background:#fafafa;display:block;width:100%;position:relative;bottom:0;left:0;margin:20px 5px 0 0;padding:0 14px 20px}.descripcion{font-size:15px;display:block;margin:2px 3px 20px}.descripcion a{color:#0E7C94}.img_perfil{background:#fafafa;position:relative;z-index:2;top:20px;float:none;display:block;width:85px;height:85px;border-radius:50%;margin:0 auto;padding:3px}.author-profile:before{height:70px;width:100%;display:block;content:"";position:absolute;right:0;top:0;background:#333}.img_perfil img{border:none;width:85px;height:85px;border-radius:50%}.nombre_autor{float:none;text-align:center;display:block;font-size:16px;text-transform:uppercase;margin:28px 0 15px}.redes-so{width:100%;margin:0 auto 8px!important;padding:0!important;text-align:center}.so-perfil{display:inline-block;height:40px;width:185px;padding:0!important}.so-perfil li{list-style:none;float:left;border:none;margin:7px;padding:0}.so-perfil li a{background:url(http://1.bp.blogspot.com/-CRmHitffnxM/UwlzeQgT8aI/AAAAAAAAPsI/2L3UklpLbOA/s1600/redes-sociales.png) no-repeat 0 0;display:block;position:relative;width:32px;height:32px;margin:0;padding:0}.so-perfil li a.twitter{background-position:0 0}.so-perfil li a.googlep{background-position:-37px 0}.so-perfil li a.facebook{background-position:-74px 0}.so-perfil li a.pinterest{background-position:-111px 0}.so-perfil li a span{background:#2c2c2c;position:absolute;top:-50px;left:50%;margin-left:-66px;width:122px;height:auto;opacity:0;text-align:center;color:#fff;white-space:nowrap;font-size:12px;transition:all .25s ease-in-out;padding:5px}.so-perfil li a
    span:before{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #2c2c2c}.so-perfil li a:hover span{opacity:1;top:-35px;text-decoration:none}

  3. Editar/Copiar el código del perfil del autor, para que aparezcan los botones de redes sociales respectivamente según el autor.
    Es sencillo, solo tienes que introducir dentro del código el nombre del autor donde se indica, exactamente igual como aparece en Google+, y la URL de la página de cada red social, según indico en el código. Para obtener la URL de la página de cada red social, dirígete a cada una de ellas y cópiala de la barra de direcciones del navegador.

    He separado el código necesario, primero, cuando son dos los autores y el segundo que servirá cuando son 3 o más autores.

    Código que necesitas cuando son 2 autores

    Haz click sobre el código en las partes que hay que editar, según se indica en el texto. Una vez que termines lo copias para ponerlo en tu plantilla, o si lo prefinieres cópialo todo y lo editas desde el editor HTML (ya que ahí aparecerá de colores). Como creas que será más fácil para ti.

    Donde dice: Karla Castañeda vas a poner el nombre, tal y como aparece en el perfil de Google+, de cualquiera de los dos autores del blog. Luego abajo colocas las URLs de cada red social que corresponden a ése autor, y que he resaltado de color naranja.

    Después en el bloque de código que esta debajo del comentario:<!-- Las redes sociales del autor 2 -->, sustituyes los datos que se indican y que corresponden para el otro autor del blog.

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.authorAboutMe'><div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><b:if cond='data:post.authorPhoto.url'><div class='img_perfil'><img expr:src='data:post.authorPhoto.url' itemprop='image' width='50'/></div> </b:if><div><a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><span class='nombre_autor' itemprop='name'><data:post.author/></span></a></div><span class='descripcion' itemprop='description'><data:post.authorAboutMe/></span>
    <b:if cond='data:post.author == &quot;Karla Castañeda&quot;'>
    <div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_PAGINA_DE_TWITER'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_DE_PAGINA_DE_FACEBOOK'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_DE_PAGINA_DE_GOOGLE_PLUS'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_DE_PAGINA_DE_PINTEREST'><span>Sígueme en Pinterest</span></a></li></ul></div><b:else/>
    <!-- Las redes sociales del Autor 2 -->
    <div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_DE_PAGINA_DE_TWITTER_AUTOR2'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_DE_PAGINA_DE_FACEBOOK_AUTOR2'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_DE_PAGINA_DE_GOOGLE_PLUS_AUTOR2'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_DE_PAGINA_DE_PINTEREST_AUTOR2'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if></div></b:if></b:if>


    Textualmente el código anterior podríamos traducirlo así:  Si y solo si el blog tiene habilitado el perfil del autor y si el usuario está en una página de entrada (se tienen que cumplir ambas condiciones), se mostrará la imagen del perfil, el nombre y la descripción del autor en Google+ respectivamente, si el autor es: "Karla Castañeda" (y que en tu caso sería el de uno de los dos autores), entonces se mostrarán los iconos de redes sociales de Twitter, Facebook, Google+ y pinterest con sus respectivos enlaces, si no es karla Castañeda, se mostrarán los iconos de redes sociales de Twitter, Facebook, Google+ y Pinterest con los otros enlaces configurados, en el cuadro del otro autor.

    Código que necesitas cuando son 3 autores

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.authorAboutMe'><div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><b:if cond='data:post.authorPhoto.url'><div class='img_perfil'><img expr:src='data:post.authorPhoto.url' itemprop='image' width='50'/></div> </b:if><div><a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><span class='nombre_autor' itemprop='name'><data:post.author/></span></a></div><span class='descripcion' itemprop='description'><data:post.authorAboutMe/></span>
    <!-- Autor 1 --><b:if cond='data:post.author == &quot;
    Nombre_Autor1&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor1'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor1'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor1'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor1'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if>
    <!-- Autor 2 --><b:if cond='data:post.author == &quot;Nombre_Autor2&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor2'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor2'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor2'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor2'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if>
    <!-- Autor 3 --><b:if cond='data:post.author == &quot;Nombre_Autor3&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor3'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor3'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor3'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor3'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if></div></b:if></b:if> 


    El código anterior servirá para mostrar el perfil de 3 autores. He resaltado de distintos colores la parte que corresponde a los iconos de redes sociales para cada autor, para que puedas identificarlos fácilmente. Tienes que poner el nombre del autor donde se indica y la URL de cada red social de cada autor respectivamente. He resaltado dentro de los bloques de color gris claro (casi blanco) el texto que hay que sustituir en cada parte del código que corresponde a un autor. Por ejemplo, donde dice: Nombre_Autor1, tienes que sustituir ese texto por el nombre del primer autor (puede ser cualquiera de los tres), y el nombre debe aparecer exactamente igual como figura en Google+. Donde dice: URL_Facebook_Autor2, tienes que poner la URL de la página de Facebook del segundo autor. Donde dice: URL_Pinterest_Autor3, habrá que poner la URL de la página de Pinterest del tercer autor y así sucesivamente. Asegúrate se sustituir todos los datos que se indican y no eliminar ningún caracter ;)

    Si son más de tres autores, tienes que repetir:

    <!-- Autor X --><b:if cond='data:post.author == &quot;Nombre_Autor_X&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor_X'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor_X'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor_X'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor_X'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if> 

    Antés de: </div></b:if></b:if> que aparece al final del código (para los tres autores). Puse la "X" solo para representar a un autor siguiente.
  4. Poner el código a la plantilla. Ve a Plantilla > Editar HTML, y activa el buscador del editor, haciendo click dentro del editor, cuidando no mover nada, después, pulsa las teclas Ctrl + F simultáneamente, y cuando aparezca el buscador, pon ésto en el campo: <b:if cond='data:post.authorAboutMe'> y pulsa enter, para que el editor te lleve a esa parte.

    Una vez que el editor te envíe a esa linea de código, y que en la imagen de abajo aparece con fondo amarillo, selecciona todo el código del perfil, tal y como se muestra en la imagen, y cámbialo por el código que te facilité en el paso 3, y que ya editaste (o puedes editarlo desde el editor si te parece más fácil) pero, ponlo exactamente "antes" de </b:includable>. Hacemos ésto para que el perfil del autor no aparezca en la sección: "post-footer" definida por Blogger, y que generalmente tiene fondo de color. En otras palabras "sacamos" al perfil de esa sección.

    Editor HTML de Blogger
  5. Evitar que el Tooltip aparezca en Internet Explorer 8 y versiones anteriores. Luego usando de nuevo el buscador del editor, localiza: </head>
    y "antes" de esa linea pon ésto: <!--[if lte IE 8]><style type="text/css">.so-perfil li a span{top:-9999px;left:-9999px;}</style><![endif]-->
    Esa linea es un comentario condicional exclusivo para Internet Explorer versión 8 y anteriores, ahí ponemos el CSS que necesitamos para quitar el tooltip (búrbuja que aparece al poner el puntero del ratón sobre cada icono), ya que Internet Explorer 8 no soporta la transparencia, que es fundamental para que el tooltip funcione. Haciendo ésto evitamos usar: "filter: alpha(opacity=x)" que no pasa la validación de tu código CSS, ya que solo es un hack para IE8 y versiones anteriores.
  6. Guardar los cambios. Verifica en vista previa y aunque no verás el cuadro del perfil, ya que éste aparece al ingresar a la entrada, te asegurarás de que todo se vea bien en tu plantilla, y de ser así, guardas los cambios en "Guardar plantilla".

¡Y listo! ya tendrás funcionando el cuadro del perfil que mostrará los datos de cada autor respectivamente ;)

Personalizar colores de la cajita del perfil

1. Cambiar fondo gris obscuro de la parte superior del contenedor. Localiza esta parte del CSS del paso 2: #333 y cámbialo por el color web que quieras. Para ello consulta una tabla de colores o puedes usar la extensión de colorzilla de la que ya te había hablado antes desde Google+.

2. El fondo del cuadro. (Es gris claro) Localiza esta parte en el CSS que facilito en el paso 2: #fafafa (aparece dos veces y debe quedar igual) y cámbialo por el color web que quieras.

Siéntete libre de comentar cualquier duda o sugerencia, aquí en el blog para poder ver el comentario (por favor no en las demostraciones porque no las veo)

Espero sea útil ;)
en Seguir leyendo
28 febrero 2015

Blogger Seguirá Permitiendo Contenido para Adultos

Después de habernos informado sobre los cambios en la política de contenido para adultos, Blogger revierte su política argumentando que tal cambio «afectaría a quienes publican material sexualmente explícito con el fin de "expresar" sus identidades» y considerando también la antigüedad de algunos usuarios que publican ese tipo de contenido. Ésto debido a la enorme cantidad de comentarios que recibieron en el foro de Blogger sobre la nueva política que ya no tiene vigor.

Sin embargo, advierten que seguirán vigilando el cumplimento de su politica de contenido y que el contenido para adultos deberá ser marcado como tal.

Cómo marcar contenido para adultos en el blog


Si en tu blog publicas contenido para adulto, tal y como se debía hacer en el pasado, deberás "marcarlo como contenido para adultos" para que los usuario tengan conocimiento de ello antes de acceder al blog, ya que de no hacerlo, estarías incumplimiento con la política de contenido de Blogger.

Para ello, vas a la pestaña Configuración > Otros y ahí verás la opción que dice: Contenido para adultos. Tendrás que seleccionar "" y guardar el cambio en Guardar configuración.

Panel de Blogger mostrando configuracion de contenido para adultos

Hecho lo anterior, cada vez que alguien trate de acceder a tu blog, verá una página con una advertencia diciendo que se publica contenido para adultos y deberá aceptar para poder ingresar al blog.

pagina de advertencia contenido para adultos


Otra cosa importante que debes saber si publicas este tipo de contenido es que no puedes monetizar tu blog, ya sea mostrando anuncios o enlaces a sitios con pornografía comercial, ya que estarías vulnerando su política de contenido y tu blog puede ser eliminado.

en Seguir leyendo