Tecnología

El Perro de Papel Idea guardada 5 veces
La valoración media de 1 personas es: Excelente

Botones para imprimir, enviar por correo y compartir por Whastapp tus entradas



Dicen que si no estás en las redes sociales no existes y en cierto modo es así, si el posicionamiento web no es tu punto fuerte, crear una comunidad activa y participativa siendo activa en tus redes sociales puede hacer crecer tu blog. Aunque Google es Google.

Esta semana he estado de cambios en el diseño del blog, me he centrado en simplificarlo al máximo y hacerlo todo más sencillo. Si te fijas, ahora puedes:

* Compartir mis entradas por correo electrónico.

* Imprimir los post o guardarlos como PDF en tu ordenador.

* Enviar el artículo que te gusta por whastapp a una amiga.

El tema de enviar las entradas del blog por whatsapp no termino de verlo... pero por probar no se pierde nada, ya te diré cómo me va. ¡Puede que me lleve una grata sorpresa! Como con el tema de los vídeos, a mí no me hacen gracia... pero hay que reconocer que están en pleno auge.

Esto es lo que vamos a hacer hoy:


Para los iconos he utilizado los de fontawesome, una tipografía de la que ya te hablé en ESTA ENTRADA y que puedes instalar en blogger en un par de minutos si todavía no lo has hecho.

El tema de configurar el diseño de los iconos te lo contaré brevemente porque en la entrada que acabo de enlazarte hablamos más a fondo sobre ello y sería repetir de nuevo lo mismo, así que te recomiendo echarle un vistazo ¿vale?

Vamos a empezar: primero, asegúrate de hacer una copia de seguridad de tu plantilla tal y como la tienes ahora, no vayamos a llevarnos un disgusto.

* Entra en PLANTILLA - pincha en el botón de arriba a la derecha: CREAR / RESTABLECER COPIA DE SEGURIDAD - DESCARGAR PLANTILLA COMPLETA.

Si te salta algún error mientras haces el tutorial, solo tienes que volver a cargar la copia de tu plantilla anterior desde la misma opción, así no tienes que preocuparte sin necesidad.

¿Ya tienes tu copia guardada? ¡Estupendo! Pues vamos allá.


Instalar Botón Whatsapp Entrada en Blogger

1.- Entra en PLANTILLA - EDITAR HTML

2.- Haz click en cualquier zona dentro del cuadro blanco del código, no te preocupes, es solo para activarlo y poder abrir el buscador.

3.- Pulsa las teclas Control (Ctrl) y la letra F a la vez. El buscador interno de la plantilla se abrirá en la zona superior izquierda dentro de la caja del código y pondrá SEARCH:

4.- Escribe dentro de la cajita del buscador: class=post-footer

Encontrarás dos, a nosotros nos interesa el segundo. Para saber si es correcto, puedes guiarte por la numeración de la regla gris de la izquierda.

Si has personalizado tus iconos de redes sociales, puede que encuentres el código justo debajo. Ve hasta el final, hasta encontrar: <div class=post-footer-line post-footer-line-1>

5.- Encima de <div class=post-footer-line post-footer-line-1> pega el siguiente fragmento de código:

<!-- Whatsapp -->
<div class=botwa>
<a data-action=share/whatsapp/share href=whatsapp://send?text=URL title=WhatsApp><i class=fa fa-phone/></a>
</div>

6.- Guarda los cambios y no te preocupes, todavía no hemos terminado.

7.- La parte resaltada en negrita, es el icono que he utilizado para Whatsapp:
<!-- Whatsapp -->
<div class=botwa>
<a data-action=share/whatsapp/share href=whatsapp://send?text=URL title=WhatsApp><i class=fa fa-phone/></a>
</div>

NOTA: Este botón solo funciona cuándo se accede desde un dispositivo móvil. Al hacer click encima, se abre la lista de contactos de Whatsapp para que tu lectora eliga a quién quiere enviarlo.
Instalar Botón Imprimir Entrada en Blogger

8.- Ahora vamos a por el botón de imprimir. Solo tienes que pegar este fragmento de código debajo del anterior:
<!-- Print -->
<div class=print>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<span style=background: url(#) left no-repeat; padding-left: 0x;><a href=javascript:window.print() title=imprimir><i class=fa fa-print/></a></span>
</b:if>
</div>

Te he marcado en negrita la parte que llama al icono que he usado.

9.- Y un trocito más. Busca: </head> y pega encima:
<style media=print type=text/css> header, #header-wrapper,
#header, .header, #crosscol-wrapper, #crosscol, .tabs-inner, aside, #sidebar, #sidebar-wrapper, .sidebar, .post-footer, footer, #footer-wrapper,
#footer, .footer, .date-header, #comments, .comments, #backlinks-container, .feed-links, #blog-pager, #navbar-iframe
{display:none}
#main-wrapper {width:95%; overflow:visible !important;}</style>

Este último fragmento indica a blogger qué NO imprimir. Te he marcado en negrita lo que no se imprimirá en el PDF de tu entrada.

NOTA: Este icono solo aparecerá en las entradas individuales, no en las entradas resumidas ni en las páginas. Tu lectora tiene que entrar a la entrada para poder imprimirla. No es cosa mía, funciona así.

Y no solo es para imprimir el artículo, también puede guardarlo como PDF en su ordenador para leerlo más tarde.


Instalar Botón Mandar por Correo en Blogger

10.- Y ya casi terminamos, vamos a añadir el sobre para enviar las entradas por correo electrónico. Pega debajo del código para imprimir el siguiente fragmento:
<!-- Email -->
<div class=em>
<b:if cond=data:top.showEmailButton>
<a class=fa fa-envelope expr:href=data:post.sharePostUrl + &quot;&amp;target=email&quot; expr:title=data:top.emailThisMsg target=_blank><span class=share-button-link-text><data:top.emailThisMsg/></span></a></b:if>
</div>

De nuevo tienes en negrita el icono que he usado, por si quieres cambiarlo. Recuerda apuntar el ID del icono que uses si decides utilizar otro para tenerlo en cuenta a la hora de personalizarlo.

Cuando tus lectoras hagan click encima, se abrirá una pantallita como esta para que puedan enviar tu artículo por correo electrónico a sus contactos:


Y esto es lo que recibirán los destinatarios en su bandeja de entrada:


¿No es genial? Este icono ya se encontraba entre los que aparecen por defecto en blogger, pero seguro que ahora llama mucho más la atención.


Alinear los Iconos Imprimir, Enviar y Compartir

El siguiente paso es englobar los tres códigos dentro de una nueva clase para poder alinearlos y organizarlos.

Tu código actual es:
<div align=center class=printem>
<!-- Whatsapp -->
<div class=botwa>
<a data-action=share/whatsapp/share href=whatsapp://send?text=URL title=WhatsApp><i class=fa fa-phone/></a>
</div>
<!-- Print -->
<div class=print>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<span style=background: url(#) left no-repeat; padding-left: 0x;><a href=javascript:window.print() title=imprimir><i class=fa fa-print/></a></span>
</b:if>
</div>
<!-- Email -->
<div class=em>
<b:if cond=data:top.showEmailButton>
<a class=fa fa-envelope expr:href=data:post.sharePostUrl + &quot;&amp;target=email&quot; expr:title=data:top.emailThisMsg target=_blank><span class=share-button-link-text><data:top.emailThisMsg/></span></a></b:if>
</div>
</div>

Te he marcado en negrita los dos trocitos que tienes que añadir. Así hemos creado la CLASE PRINTEM que engloba a los tres iconos. Pero todavía tenemos que darle forma.

Colorear los Nuevos Iconos

Vamos a empezar por lo más sencillo. Hacer que tus iconos se parezcan a los míos. Para eso necesitas volver de nuevo al apartado del CSS (Estilo) de tu plantilla.

1.- Abre de nuevo el buscador interno de la plantilla y busca: ]]></b:skin>

2.- Justo encima pega:
.fa-envelope {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #000000 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}
.fa-envelope:hover {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #ffffff !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}

.fa-print {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #000000 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #F5AEC1;
border: 1px solid #F5AEC1;
text-align: center;
}
.fa-print:hover {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #ffffff !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #F5AEC1;
border: 1px solid #F5AEC1;
text-align: center;
}

.fa-phone {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #000000 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}

.fa-phone:hover {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #ffffff !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}

3.- Te cuento que es cada color:

ENVIAR POR CORREO

.fa-envelope {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #000000 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}
.fa-envelope:hover {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #ffffff !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}

Este fragmento es el que hace aparecer el color de fondo del icono del sobre (envelope) y hace que cambie de color al pasar el ratón por encima (envelope:hover). Recuerda que si has utilizado otro icono, tienes que cambiar la palabra envelope por la tuya en los dos fragmentos.

Te he marcado en negrita las partes que puedes modificar:

color: color del icono.
background-color: color de fondo.
border: color del borde.

En los siguientes botones, los códigos a modificar sirven para lo mismo:

BOTÓN IMPRIMIR
.fa-print {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #000000 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #F5AEC1;
border: 1px solid #F5AEC1;
text-align: center;
}
.fa-print:hover {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #ffffff !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #F5AEC1;
border: 1px solid #F5AEC1;
text-align: center;
}

BOTÓN ENVIAR POR WHATSAPP
.fa-phone {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #000000 !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}

.fa-phone:hover {
padding-top: 7px;
padding-left: 3px;
padding-right: 3px;
font-size: 15px !important;
color: #ffffff !important;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
width: 20px;
height: 20px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #99cccc;
border: 1px solid #99cccc;
text-align: center;
}

En el siguiente enlace puedes jugar con diferentes gamas cromáticas si no tienes muy claro que colores utilizar, aunque te recomiendo que uses los que ya tengas establecidos como tus colores corporativos. Ya sabes, por eso de reforzar la imagen de marca:

Códigos colores HEX



ORGANIZAR LOS BOTONES

Y, por último, vamos a organizar la colocación de nuestros nuevos botones gracias a la nueva clase PRINTEM que creamos al instalarlos.

Seguimos en la parte del CSS, dónde hemos cambiado los colores. Justo debajo de los tres códigos que acabamos de trabajar, pega:
.printem {
margin:10px auto 20px;
text-align:center;

}

.printem .print, .printem .em, .printem .botwa {
width: 100px;
overflow:hidden;
zoom: 1;
*display: inline;
display: inline-block;
vertical-align: top;
}
.printem .print {
width: 60px;
}

.printem .em {
width: 60px;
}

.printem .botwa {
width: 60px;
}

Este trocito hace que tus iconos se vean de forma horizontal y aparezcan correctamente ordenados. Si has utilizado otros distintos, tal vez tengas que modificar los diferentes width que aparecen en los tres últimos:

IMPRIMIR:
.printem .print {
width: 60px;
}

EMAIL:
.printem .em {
width: 60px;
}

WHATSAPP:
.printem .botwa {
width: 60px;
}

Ahora solo queda guardar los cambios, comprobar que todo está correcto y... ¿te has fijado que los diferentes botones aparecen en tu página principal, al final de cada entrada?

Pues hay un truquito para solucionarlo. He preparado un pdf con los pasos a seguir que puedes descargar compartiendo esta entrada en tu red social favorita desde el siguiente botón:

QUIERO DESCARGAR EL PDF


BONUS:

¿Quieres añadirlos también al inicio de tus entradas, debajo del título, como yo?

Es una buena idea por varios motivos:

Puede que tu lectora no pueda leerlo en ese momento, así puede entrar y sin tener que bajar hasta el final, usar cualquiera de las tres funcionalidades: enviárselo por whatsapp, correo electrónico o imprimirlo.

Tal vez sea una visita recurrente que ya ha leído tu entrada y quiere enviársela a una amiga, si los iconos aparecen al inicio del artículo, no tendrá que volver a bajar hasta el final.

Te recuerdo que siempre hay que facilitar cualquier tipo de acción a tus visitas, por lo que facilitarles la tarea de compartir un artículo que ellas ya han leído o quieren leer después ¡es una idea genial!

Y no tardarás nada:

1.- Abre el buscador interno de tu Plantilla HTML y busca: <div class=post-header-line-1/>

2.- Encontrarás dos, a nosotras nos interesa el segundo, como cuándo los instalamos en el footer.

3.- Cuándo encuentres la línea de código, pega justo debajo la nueva clase que creamos. La mía es esta:

<div align=left class=printem>
<!-- Whatsapp -->
<div class=botwa>
<a data-action=share/whatsapp/share href=whatsapp://send?text=URL title=WhatsApp><i class=fa fa-phone/></a>
</div>
<!-- Print -->
<div class=print>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<span style=background: url(#) left no-repeat; padding-left: 0x;><a href=javascript:window.print() title=imprimir><i class=fa fa-print/></a></span>
</b:if>
</div>
<!-- Email -->
<div class=em>
<b:if cond=data:top.showEmailButton>
<a class=fa fa-envelope expr:href=data:post.sharePostUrl + &quot;&amp;target=email&quot; expr:title=data:top.emailThisMsg target=_blank><span class=share-button-link-text><data:top.emailThisMsg/></span></a></b:if>
</div>
</div>

Pero si variaste los IDs de los iconos, tendrás que modificarlos por los tuyos o copiar y pegar tu código PRINTEM.

4.- Guarda los cambios ¡y listo! Ya tienes tus iconos de compartir colocados al incio de tus entradas para facilitar la vida a tus lectoras.


¿Qué te ha parecido? Un poco largo, pero siguiendo los pasos despacito, ¡seguro que lo has conseguido! Si lo has hecho, déjame el enlace a tu blog para pasar a verlo en comentarios ¿vale?





Fuente: este post proviene de El Perro de Papel, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Envía una notificación de una presunta infracción de derechos. También puedes hacerlo a través de nuestro formulario de contacto.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

general medios sociales promocionar tu blog

Cómo poner otros botones para compartir en el blog

Os habréis dado cuenta ya que los iconos para compartir que trae Blogger, son bastante pequeñitos y discretos: Por eso yo los cambié hace ya tiempo por otros que pasan un pelín menos desapercibidos: Tampoco quiero ser "pesada" y poner unos gigantescos, pero esos me parece que se ven lo suficientemente bien como para "recordar" a la gente que pueden compartir mi post en las re ...

internet blog básico ...

Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla. Y eso es lo que voy a compartir contigo hoy. ¡Verás que es m ...

general social

Cómo poner botones para redes sociales al final de tus entradas

Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado. Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.¿Qué son los botones para las redes sociales en un Blog?: Los componentes oficiales o no oficiales de las distinta ...

general social

Personaliza los fragmentos de tus entradas para compartir en las redes sociales

Siempre que se comparte una entrada en una red social se muestra un pequeño fragmento de resumen del contenido que se va a compartir. Normalmente, se suele presentar un título, una imagen y una "entradilla" o parte del texto que conforma la entrada. Esta composición del contenido es conocida como "fragmento" y es primordial para que el mensaje luzca atractivo en las redes socia ...

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

internet avanzado blog ...

Tutorial Blogger: imagen detrás del menú en Blogger

Uno de los tutoriales más visitados del blog es: Cómo personalizar el menú de páginas de blogger Puedes leerlo aquí: Repasar el Tutorial En ese tutorial vemos como personalizar el código que nos da blogger paso a paso, analizamos cada fragmento y vamos poniendo los colores y tipos de letra a juego con el resto del diseño. Y una de las dudas que me han preguntado tanto en el blog como por email es: ...

propuestas

Cómo crear un menú a pantalla completa para tu Blog

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...