Cómo agregar Widget deWhatsapp Compartir en Blogger
Ya tenemos claro, que podemos compartir nuestras entradas en cualquier red social.ya sea desde la misma entrada o desde el widget que tengamos instalado tal y como explicamos en este post.
Poner un Like Box en nuestro blog
Pero realmente ¿cuantos blogs disponen de poder compartir nuestras entradas en whatsapp?
Y eso que whatsapp, es una de la mayor red social utilizada y que mas usuarios tiene.
Agregar widget de compartir nuestro post a Whatsapp
Con este widget, ayudaremos a nuestro blog a impulsar nuestro trafico de visitas.
que whatsapp,
Puede ver una vista previa en vivo del widget que se encuentra justo debajo.
COMPARTIR ESTE:
Nota :
El botón real sólo aparecerá en el móvil y las tabletas (tamaño de pantalla 768px). Hemos mostrado el botón sólo para la demostración en el escritorio.
Inicio Paso-1 ( Añadir CSS ) /*
El botón real sólo aparecerá en el móvil y las tabletas (tamaño de pantalla 768px). Hemos mostrado el botón sólo para la demostración en el escritorio.
Inicio Paso-1 ( Añadir CSS ) /*
Antes de editar te recomendamos que realices una copia de seguridad de tu plantilla, de modo que todo salga mal, todavÃa tienes tu diseño de blog seguro.
Puedes verlo paso a paso en este post.
Paso 1 ( Añadir CSS )
Ahora nos vamos aTema< Editar HTML y buscamos
]]> </ b: skin>.
Justo encima pegamos el siguiente código.
/* ######## Social Sharing Widget By Sorabloggingtips.com ######################### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a span {
display: none;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
}
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a span {
display: none;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}
.share-art .wat-art{background:#25d266;display:none;}
.share-art .wat-art:hover{background:rgba(37, 210, 102, 0.73)}
@media only screen and (max-width: 768px) {
.share-art .wat-art{display:inline-block;}
}
Paso 2 ( Añadir HTML )
Ahora buscamos la etiqueta <data: post.body /> y, justo debajo, pegue la siguiente codificación HTML.
En caso de que no encuentres <data: post.body /> , puedes pegarlo justo debajo de <div class = 'post-footer'> o <div class = 'post-footer-line post-footer-line -1 '> </ div> .
<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>
<h8 class='share-title'>Share This:</h8>
<div class='share-art'>
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>
</div>
</div>
<div style='clear:both'/>
</b:if>
<div class='share-box'>
<h8 class='share-title'>Share This:</h8>
<div class='share-art'>
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>
<whatsapp expr:href='data:post.url' expr:text='data:post.title'/>
<a class='wat-art' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a>
</div>
</div>
<div style='clear:both'/>
</b:if>
Nota :
Si desea mostrar el widget en cada página (Página de inicio, página de postposición, página de Ãndice, página de búsqueda, página de archivo, etc.) A continuación, elimine las lÃneas marcadas en rojo del código anterior.
Si desea mostrar el widget en cada página (Página de inicio, página de postposición, página de Ãndice, página de búsqueda, página de archivo, etc.) A continuación, elimine las lÃneas marcadas en rojo del código anterior.
Cambiamos los link que se muestran por los de nuestras paginas.
Paso 3 ( Añadir Fontawesome )
El widget funciona en los iconos fontawesome, por lo que para hacer que el trabajo del widget que usted tiene que instalar fontawesome en su blog, Para hacerlo.
En la plantilla, busque la etiqueta </ head> y justo encima de ella pegue la siguiente codificación HTML.
<link href = 'https: //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel = 'hoja de estilo' />
Y ya lo tenemos.
Mira tu blog para ver que se ha instalado todo bien.
0 Comentarios
En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias