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, é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:#f6fffd;margin:10px;border:1px solid #e3fbf5;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! ;)

11 marzo 2015

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

¡Hola qué tal! En este totorial, 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 ;)

Antes de empezar con el tutorial te recomiendo descargar tu plantilla. Para ello, ve a: "Plantilla" y descarga la plantilla con el botón que dice: "Crear/ Restablecer copia de seguridad". 


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 navegación 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 el bloque 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 bloque del código. Por ejemplo, donde dice: Nombre_Autor1, tienes que sustituir ése 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 ;)

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.

24 febrero 2015

Blogger ya no Permitirá Contenido para Adultos en los Blogs

cartel de censurado


ACTUALIZACIÓN: Blogger seguirá permitiendo contenido para adultos, siempre y cuando el blog se marque correctamente y se apegue a su política de contenido para adultos.

Se nos informa desde Blogger, que se han hecho cambios en las políticas del contenido para adultos que se comparte desde el blog, como por ejemplo, imágenes, videos o representaciones gráficas de desnudos o actividades sexuales explícitas.

A partir del 23 de marzo ya no se podrá compartir públicamente todo ese material, excepto en los casos donde su uso sea con fines meramente educativos, artísticos, científicos, o para documentales.


Los Cambios que verás en tus blogs activos

Si el blog no ha publicado ninguna imagen de las mencionadas o videos de contenido sexual, el blog no tendrá ningún cambio.

Si por el contrario has publicado el material descrito anteriormente, tu blog pasará a ser privado a partir del 23 de marzo. Por lo tanto solo el propietario, el adminitrador o los administradores podrán acceder a él, así como las personas que estén invitadas.


Como afectará a los nuevos blogs

Si el blog es creado después del 23 de marzo del presente año y se publica material para adultos, éste puede ser eliminado o Blogger (Google) podría tomar otras medidas.

Para ampliar esta  información visita  la página del centro de ayuda de Blogger, donde explican estas políticas.

Si tienes alguna pregunta, inquietud o preocupación al respecto, no dudes en acudir al foro de ayuda de Blogger y plantearlas.


¿Qué te parecen estas nuevas resoluciones? ¿Crees que tu blog vulnera estas políticas?
03 febrero 2015

Cómo Crear Frases Tuiteables en las Entradas del Blog. Explicado paso a paso

Portada

Probablemente hayas visto que algunos blogs muestran ciertos textos o mensajes en las entradas, que pueden ser tuiteados o dicho de manera simple: "enviados a Twitter". A estos mensajes se les conoce comúnmente como "frases tuiteables".


Cómo pueden beneficiarte
Las frases o mensajes tuiteables pueden tener un impacto positivo en el tráfico de tu blog; usándolas aumentamos las posibilidades de que se comparta nuestra entrada.

Con ellas estás invitando a los usuarios de tu blog a que compartan el contenido de una manera más original que la de compartirlo usando un botón.

Así pues mientras un lector lee tu entrada, podrá tuitear algo que le guste o con lo que se sienta identificado, interesado, inspirado o que simplemente considere útil para otros.

Al crear una frase, puedes jugar con las palabras, buscando transmitir una idea que refleje la esencia de la entrada, una parte relevante de ella, o crear un mensaje alusivo a ésta que incite o motive a tus lectores a compartirlo.

Como tendrás la oportunidad de crear distintas frases en la entrada, habrá también más posibilidades de que a un usuario le guste alguna y la comparta.

Es por éso que es muy importante crear mensajes que transmitan bien una idea que interese y motive a quienes estarán expuestos a éstos, buscando que además resalten dentro de la entrada.

Otra posibilidad es que, un solo usuario pudiera enviar no solo uno, sino ¡varios tweets de una misma entrada!, multiplicando así las probabilidades de que alguien se interese desde Twitter y visite tu blog.

En lo personal me he sentido atraída por ciertas frases que he leído en otros blogs, de hecho he compartido varias de ellas, así que puedo dar fe de que sí funcionan.

Definitivamente poner frases tuiteables te ayudarán a promocionar tu contenido, ¿quieres probarlo por ti mismo?


Lo que haremos

Agregaremos un enlace que diga: "Tuitear ésto a Twitter", "Twittear a Twitter"  o "Envíalo a Twitter" o cualquier otro texto que haga una llamada a la acción para que se comparta la frase o mensaje que hayamos creado para tal fin, siguiendo las directrices para el uso en publicidad o materiales de marketing de Twitter, cuando usemos el texto "Twittear".

Si se pone el icono del pajarito de Twitter junto al enlace para que la frase luzca más atractiva, podremos entonces omitir la palabra "Twitter" ya que el pajarito por sí solo denota su marca.

Es cierto, suena hasta cierto punto redundante "Twittear a Twitter", sería el equivalente a "Enviar a Twitter", pero según leía en las pautas y usos de la marca de Twitter, al usar el término "Twittear" se debe incluir una referencia directa a Twitter, ya que ese término es propio de la marca. Así lo entiendo. Si tienes la certeza de que no aplica para la Web, por favor házmelo saber.

¿Quieres ver en acción una frase tuiteable?, a continuación te muestro una:

Genera más visitas al blog creando frases tuiteables en las entradas.Tuitear ésto a Twitter



He ideado la forma que creo será más sencilla para ti de lograr ésto, y te lo voy a explicar paso a paso, aunque por supuesto estoy abierta a tus sugerencias o ideas que puedan agilizar más la tarea. ¿List@ para empezar?


Lo que necesitarás:

  • La frase o frases para la entrada. Hay que tener en cuenta es la longitud del texto. Éste, no deberá exceder los 140 caracteres que permite Twitter, aunque la herramienta que usaremos nos avisará ésto. 
  • Usar el generador de enlaces click to Tweet, herramienta que nos permitirá crear los enlaces que incluirán la frase o mensaje  + el enlace a la entrada en cuestión.
  • La herramienta "Enlace" del editor de entradas de Blogger para crear el enlace que acompañara la frase.
  • Un poco de CSS para personalizar la apariencia de nuestra frase (opcional pero recomendado) y que yo te facilitaré.

Pasos para crear la frase tuiteable


Paso previo (solo se hace una vez). Agregar el CSS para que la frase tenga una "apariencia personalizada". Aparecerá como se puede ver abajo al finalizar los pasos. 

Agrega el CSS que a continuación te muestro, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. Luego haces click en "Aplicar al blog", para que se guarde.

.frase{display:inline-block;width:90%;margin:10px;border:1px solid #d1d1d1;padding:20px;overflow:hidden;box-shadow:0 0 1px 1px rgba(230,230,230,1);border-radius:5px;}.frase a{display:block;float:right;margin:10px 0 0 0;padding:0 27px 0 0;background:url(http://4.bp.blogspot.com/-cw5u5O933NY/VM7qP2HS8RI/AAAAAAAAQwY/2jyWZs0xO6o/s1600/twitter-bird.png)no-repeat center right;text-decoration:none;}

  1. Obtener la URL de la entrada donde pondrás la(s) Frase(s).

    Ve al editor de Entradas de Blogger
    y crea el título de la entrada donde pondrás la frase o mensajes tuiteables. Es muy importante este paso, ya que de él depende la creación del enlace de la entrada si es que no vas a personalizarlo. Este enlace aparecerá en el tweet, así conseguiremos el tráfico desde Twitter. También tienes que tener lista tu (s) frase (s).
    Luego dirígete a la opción que dice: "Enlaces", situado a la derecha donde están las opciones de configuración de la entrada y copia la URL de la entrada que Blogger genera automáticamente, o bien, primero personalízala y después la copias. Si optas por ésto último, no será necesario tener bien definido el título de la entrada, y podrás editarlo si lo quieres, sin afectar la URL de la entrada.

    Configuracion de enlaces del panel de blogger
  2. Crear el enlace con Click to Tweet

    Ahora lo que haremos es generar el enlace que enviará al usuario a la página de Twitter para que la frase sea tuiteada:

    Ve a la página de Click to Tweet.

    En el campo, agrega primero la frase o mensaje, luego, pon la URL que copiaste desde el editor de entradas, finalmente agrega si deseas, tu nombre de usuario de Twitter (Vía @nombre_ de_usuario). Puedes ver el orden de los elementos con la siguiente imagen:

    panel de creacion de enlaces de Clicktotweet

    Notas: Estoy recomendándote el creador básico de enlaces, ya que, según nos dicen, no existe un límite en la creación de enlaces, sin embargo ten en cuenta que estos enlaces no incluirán estadísticas en el propio sitio*. Puedes también acortar la URL de la entrada, usando el acortador de URLs de Google, de ese todo el tweet será más compacto.

    Haz click en Generate New Link y copia la URL generada
    . También puedes probar el enlace desde ahí. ¡Bien hecho!, hasta aquí, ya habrás conseguido la URL que nos interesa para poner el enlace. Ahora lo que sigue es poner el enlace junto con la frase ;)
  3. Poner la frase junto con el enlace

    Dirígete de nuevo al editor de entradas con la entrada en cuestión, y pon la frase o mensaje donde deseas que aparezca en tu entrada.

    Enseguida de la frase o mensaje, tienes que poner el enlace, para ellos usarás la herramienta del editor "Enlace", y  ahí colocarás la URL que generaste en Click to Tweet y además debes poner "el texto que mostrará el enlace". Prueba el enlace para asegurarte que se abra la ventana con la página de Twitter, lista para ser enviada.

    Opciones de configuracion de un enlace del panel de entradas

    Hecho lo anterior, lo que resta es poner las frase junto con el enlace dentro de la cajita o contenedor (div). Ésto lo hacemos para que el CSS se aplique, y la frase tuiteable se muestre personalizada, tal y como puedes ver en el resultado. Para ello, desde el editor de entradas haz click en HTML (enseguida de Redactar) y estando ahí pon el código resaltado de naranja "envolviendo" la frase y el enlace, como a continuación se muestra:

    <div class="frase">
    Aprende a crear frases tuiteables para generar más tráfico a tu blog. <a href="http:http://ctt.ec/1tgd3">Tuitear ésto</a>
    </div>


    Nota:Ten en cuenta que lo que se muestra dentro del código de naranja es el ejemplo con el que estamos trabajando. Ahí dentro debe estar tu frase junto al fragmento de código del enlace (<a href...).

    ¡Y listo, ya habrás creado la frase tuiteable personalizada!
El resultado sería algo como ésto:

Aprende a crear frases tuiteables para generar más tráfico a tu blog.Tuitear ésto



Crear plantilla de entradas para tener listo el código HTML que Necesito para las Frases (opcional)

Hay una forma sencilla de hacer aparecer automáticamente el código HTML que necesitas para que la frase se muestre presonalizada, cada vez que vayas a crear una entrada.

Es una funcionalidad de Blogger de la que ya te había hablado antes llamada: "Plantilla de las entradas".

Para Acceder a ella, desde tu panel, tienes que ir a Configuración > Entradas y Comentarios.

Ahí en el campo,  pones el código HTML y éste aparecerá cada vez que crees una nueva entrada.
<div class="frase">
</div>


Configuracion de la Plantilla para entradas de Blogger

Debes guardas el cambio en Guardar configuración y listo.

Después,cada vez que ingreses a una entrada verás ese código si accedes al HTML de la entrada. Cada vez que lo necesites lo copias y lo pones en la frase, como explicaba en el paso 3, de ese modo se aplicará el estilo que definimos con el CSS en el paso previo.

Si no vas a poner frases en la entrada, simplemente lo eliminas.

Actualización 02/28/2015
: A continuación te dejo un video tutorial que he creado para que puedas apoyarte si es que tienes una duda sobre alguno de los pasos. Aún así si algo no quedo claro no dudes en comentarlo ;)




En la siguiente entrada compartiré contigo varios estilos para que puedas usar en las frases. ¿Qué piensas?   

¿Te gusta la idea de crear frases en tus entradas? No dudes en compartir tu opinión o experiencias.

Créditos
Icono de Twitter: versión reducida del Pájaro de Twitter.