Hoy vamos a contaros como podemos poner iconos sociales en nuestro blog, para compartir nuestras entradas de forma rápida.
Como siempre antes de realizar cualquier cambio en nuestra plantilla tenemos que hacer una copia de seguridad para que luego no tengamos sustos.
Puedes ver como se hace paso a paso en este post.
Tenemos dos formas de ponerla en la parte superior de nuestra entrada o en la parte inferior.
Una vez la tengamos nos vamos a :
Tema > Editar Html
Elegimos si es la parte posterior justo debajo del titulo de nuestra entrada tenemos que buscar este código.
<div class='post-header'><div class='post-header-line-1'/>
Si por el contrario lo queremos en el footer de la entrada tenemos que buscar este otro.
<div class='post-footer'><div class='post-footer-line post-footer-line-1'>
En todo caso te saldrá dos veces este código pero usaremos la segunda ya que la primera es la de móviles.
Elige entre los diferentes estilos que tenemos.
Caja sencilla
ver código
ver código
<b:if cond='data:blog.pageType == "item"'>
<div id='botones'>
<table border='0'>
<tr>
<td align='left'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:107px; height:20px;'/></td><td align='center'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></td><td align='right'><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Twittear</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table></div><style type='text/css'>table{border-collapse:separate;margin:0 0 1.5em;width:100%}#botones {border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;height:40px;line-height:40px;margin:10px 0}</style></b:if>
<b:if cond='data:blog.pageType == "item"'><div id='botones'> <table border='0'> <tr>
<td align='left'><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:107px; height:20px;'/></td><td align='center'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></td><td align='right'><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Twittear</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td></tr>
</table></div><style type='text/css'>table{border-collapse:separate;margin:0 0 1.5em;width:100%}#botones {border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;height:40px;line-height:40px;margin:10px 0}</style></b:if>
Caja sencilla al lateral de la entrada
ver código
ver código
<b:if cond='data:blog.pageType == "item"'>
<div id='botones'>
<table border="0"><tr>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:79px; height:60px'/></td>
</tr><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr><tr>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr> </table></div>
<style type='text/css'>#botones{float:left;position:relative;width:90px;background:#fff;height:220px;margin-top:0px;z-index:1000;}</style></b:if>
<b:if cond='data:blog.pageType == "item"'><div id='botones'> <table border="0"><tr>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=box_count&show_faces=false&width=73&height=63&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:79px; height:60px'/></td></tr><tr> <td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td> </tr><tr> <td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr> </table></div>
<style type='text/css'>#botones{float:left;position:relative;width:90px;background:#fff;height:220px;margin-top:0px;z-index:1000;}</style></b:if>
Iconos para compartir en facebook, google+ ,witter , pinterest
Estos iconos son de un diseño muy atractivo, y ligeros de carga.
Abren otra ventana POP up! para compartir el enlace y después de haber echo esto se cierran, Copia el siguiente codigo.
Iconos con efecto sombra y redondeo
ver código
ver código
<b:if cond='data:blog.pageType == "item"'>
<div id='botones-para-compartir'>
<a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIc3uqxpZSG13o20hyphenhyphenzGm2uL9JmsAJU2vCo8e7xq5y9UQuz2YPQOzRd13K0pSPOJwFt8mPd5L3mIyrGW5eTDmBUmu9AKQiCFbwdYBlZGLTmPTKBbwknstaQn8hd3YIvLi7cS3Y8l7mTnQ/s320/facebook.png' title='compartir en facebook' width='32'/></a>
<a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM0SZ1oW3ZTkC268K7h-bgY5O0QcTdHpRVxrUURF9XRTlVZxL9_D67cbiO5JA-6oxPjBi2fNvplCzwUA2ELBgHqSC_9FUTnqlLHM9BqW_wqXWzz0ls2mqxyqOEJ2OznaRm2v94Gh-YpEY/s1600/Google%252B+alt.png' title='compartir en google+' width='32'/></a>
<a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxgk_0DkRde1qp4eVsSusKeutZZRzmjEwunrG49OazzyzVUVFhMqUWcE5woTVPW4Q0mG3YA33R6vQz8Xhzxx2gElIoZV_6UvVAtv7O4_QmeGdO89DKHSRP5f8x82EtZ0Zz0U566LdWyw/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a>
<a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_23VXYFm03910j1BGMexRZzhsL9Kk8np-_JK6l4__uCbxcMH6PtEPD-G2iY-2zdNWdQcG7XJHOyUeYxOvpUJB3yejffjUno2Kt3X48VHhAdyC-jldqXBMZwzyyBTmm27mSajL5U40TI/s1600/twitter.png' title='compartir en twitter' width='32'/></a>
<style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* tamaño y color de la sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>
<a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVte7rX-D7EXDMTSRGoljSvxd-vt7lY0_Y0Ff1nD0QSYmYPezdUByu3XfQv3W3aqtTXwdeLhptQnRRkQ1fdQSMpPyh0Ok-nRBydT2agqW8-i4psQlHLfjviXDnsn83idUTgl6NfJnkh8/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
<b:if cond='data:blog.pageType == "item"'><div id='botones-para-compartir'>
<a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIc3uqxpZSG13o20hyphenhyphenzGm2uL9JmsAJU2vCo8e7xq5y9UQuz2YPQOzRd13K0pSPOJwFt8mPd5L3mIyrGW5eTDmBUmu9AKQiCFbwdYBlZGLTmPTKBbwknstaQn8hd3YIvLi7cS3Y8l7mTnQ/s320/facebook.png' title='compartir en facebook' width='32'/></a><a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM0SZ1oW3ZTkC268K7h-bgY5O0QcTdHpRVxrUURF9XRTlVZxL9_D67cbiO5JA-6oxPjBi2fNvplCzwUA2ELBgHqSC_9FUTnqlLHM9BqW_wqXWzz0ls2mqxyqOEJ2OznaRm2v94Gh-YpEY/s1600/Google%252B+alt.png' title='compartir en google+' width='32'/></a>
<a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWxgk_0DkRde1qp4eVsSusKeutZZRzmjEwunrG49OazzyzVUVFhMqUWcE5woTVPW4Q0mG3YA33R6vQz8Xhzxx2gElIoZV_6UvVAtv7O4_QmeGdO89DKHSRP5f8x82EtZ0Zz0U566LdWyw/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a><a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_23VXYFm03910j1BGMexRZzhsL9Kk8np-_JK6l4__uCbxcMH6PtEPD-G2iY-2zdNWdQcG7XJHOyUeYxOvpUJB3yejffjUno2Kt3X48VHhAdyC-jldqXBMZwzyyBTmm27mSajL5U40TI/s1600/twitter.png' title='compartir en twitter' width='32'/></a><style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* tamaño y color de la sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if><a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVte7rX-D7EXDMTSRGoljSvxd-vt7lY0_Y0Ff1nD0QSYmYPezdUByu3XfQv3W3aqtTXwdeLhptQnRRkQ1fdQSMpPyh0Ok-nRBydT2agqW8-i4psQlHLfjviXDnsn83idUTgl6NfJnkh8/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
Iconos circulares efecto giro
Abren otra ventana POP up! para compartir el enlace y después de haber echo esto se cierran,
ver código
ver código
<b:if cond='data:blog.pageType == "item"'> <div id='botones-para-compartir'> <a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZzLVCyPPtlKDzM7_4aY8aByXYWIbK7Z_wk5baNqHlI4uPNsgIXqH2ZbHzhlUyiAq_KH-0wS0Jnlbvo9ECzrArY5MJLTVIwQLC62WRcbrVt3cDbM0YNhqf9JBUoBQn4Lm34QbDns3faCY/s1600/facebook-long.png' title='compartir en facebook' width='40'/></a> <a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEY1nnxT1ZG_GjeIkufP3aigA4NU-ToFbvHI8BcTYY7Quz2DaE-2ng3U8_kFkTNhnCdzasl8oXF94ZalQhBEOnGAvSseN1pY7Ko6lXSlxAjME870gY-XvxmP8Z3sqt_cPdL9GrufRjmbQ/s1600/google-long.png' title='compartir en google+' width='40'/></a> <a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUK5B4XxkTgR3jzGe5_fJG8mCtwM1d-PFpQuGgYXMP2sONTEkEtdcPTL3Eo7Bte4gy3oK_FGJA7_CUjnMEQx3p1o-JwjNIsfK7LLE3wYz5fiLnYN-Vjx1AJEY1hZ4Ou7G2spmlxINvYfg/s1600/twitter-long.png' title='compartir en twitter' width='40'/></a> <a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHX2xtAkblxisRMWxOQ6bHJXIGTy33DeUzKCmiQ7SpGpr-IkI7VC2VFTEM-5Pkbr6v3zwfEYQFYLIkdrqYdq3pZkEx7sUUazRfrGovJoi6rtaD4fen1JiAuuDVGVbn-zHRtrYD0GvLKT8/s1600/pinterest-long.png' title='compartir en pinterest' width='40'/></a> <a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7baUDCC8zIft76Q5W4ZhmsDQNlMwXxJKYw_NyZ-FoNomHCOFGKUvOdxW61GE3-_x5gGMxctNf6e7tqpIp5MA61NmB0fcJH2eeS5i4VBOZP0v6Qnc23OHIAdT8Hbd6fAlq-zqtgyBY-A/s1600/linkedin-long.png' title='compartir en likedin' width='40'/></a></div> <style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>
<b:if cond='data:blog.pageType == "item"'> <div id='botones-para-compartir'> <a expr:onclick='"window.open(\"http://www.facebook.com/sharer.php?u=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZzLVCyPPtlKDzM7_4aY8aByXYWIbK7Z_wk5baNqHlI4uPNsgIXqH2ZbHzhlUyiAq_KH-0wS0Jnlbvo9ECzrArY5MJLTVIwQLC62WRcbrVt3cDbM0YNhqf9JBUoBQn4Lm34QbDns3faCY/s1600/facebook-long.png' title='compartir en facebook' width='40'/></a> <a expr:onclick='"window.open(\"https://plus.google.com/share?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEY1nnxT1ZG_GjeIkufP3aigA4NU-ToFbvHI8BcTYY7Quz2DaE-2ng3U8_kFkTNhnCdzasl8oXF94ZalQhBEOnGAvSseN1pY7Ko6lXSlxAjME870gY-XvxmP8Z3sqt_cPdL9GrufRjmbQ/s1600/google-long.png' title='compartir en google+' width='40'/></a> <a expr:onclick='"window.open(\"http://twitter.com/home?status=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUK5B4XxkTgR3jzGe5_fJG8mCtwM1d-PFpQuGgYXMP2sONTEkEtdcPTL3Eo7Bte4gy3oK_FGJA7_CUjnMEQx3p1o-JwjNIsfK7LLE3wYz5fiLnYN-Vjx1AJEY1hZ4Ou7G2spmlxINvYfg/s1600/twitter-long.png' title='compartir en twitter' width='40'/></a> <a expr:onclick='"window.open(\"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHX2xtAkblxisRMWxOQ6bHJXIGTy33DeUzKCmiQ7SpGpr-IkI7VC2VFTEM-5Pkbr6v3zwfEYQFYLIkdrqYdq3pZkEx7sUUazRfrGovJoi6rtaD4fen1JiAuuDVGVbn-zHRtrYD0GvLKT8/s1600/pinterest-long.png' title='compartir en pinterest' width='40'/></a> <a expr:onclick='"window.open(\"https://www.linkedin.com/shareArticle?mini=" + data:post.url + "\",\"gplusshare\",\"toolbar=0,status=0,width=548,height=325\");"' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7baUDCC8zIft76Q5W4ZhmsDQNlMwXxJKYw_NyZ-FoNomHCOFGKUvOdxW61GE3-_x5gGMxctNf6e7tqpIp5MA61NmB0fcJH2eeS5i4VBOZP0v6Qnc23OHIAdT8Hbd6fAlq-zqtgyBY-A/s1600/linkedin-long.png' title='compartir en likedin' width='40'/></a></div> <style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>
Nota:
Pega el código que elijas entre la primera y segunda linea
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos