Una de las primeras cosas que me preguntaron cuando cambi� de plantilla fue c?mo poner el bot?n que aparece al final y que al presionarlo aparecen los botones para compartir el blog.
Ya saben que no me guardo nada y todo se los comparto, as? que en esta entrada vamos a ver c?mo poner esos botones para promocionar el blog.
Ya saben que no me guardo nada y todo se los comparto, as? que en esta entrada vamos a ver c?mo poner esos botones para promocionar el blog.
Se trata de un bot?n flotante que al presionarlo aparecer? un contenedor con un efecto de desvanecimiento y en �l, los botones de Facebook, Twitter y +1.
Con ellos podremos compartir la portada del blog, pues no s?lo hay que promocionar las entradas sino tambi�n el blog en general.
El efecto de desvanecimiento lo lograremos con Scriptaculous y Prototype, as? que quien use jQuery tendr? que hacer unos cambios para que ambas librer?as puedan funcionar al mismo tiempo.
La instalaci?n de estos botones es bastante sencilla, primero entra en la Edici?n HTML de la plantilla y antes de ]]></b:skin> agrega estos estilos:
#botones-like {Ahora antes de </head> pega este c?digo; si ya lo tuvieras no hace falta ponerlo otra vez:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
background-color: #eee; /* Color de fondo del bot?n */
padding: 5px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-size: 10pt; /* Tama?o del texto */
color: #999999; /* Color del texto */
text-align: center;
position:fixed;
bottom:5px;
right:30px;
}
#expandirBotones{
background:#eee; /* Color de fondo del contenedor */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 6px #696969;
-moz-box-shadow: 0px 0px 6px #696969;
box-shadow: 0px 0px 6px #696969;
position:fixed;
bottom:40px;
right:30px;
}
<script src='http://www.google.com/jsapi'></script>Luego pega antes de </body> lo siguiente:
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<a href='javascript:Void(0)' onclick='Effect.toggle('expandirBotones','appear'); return false' style='text-decoration:none;'><div id='botones-like'>¡Recomienda este blog!</div></a>
<table border='0' id='expandirBotones' style='display:none'>
<tr>
<td><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http://nombre-de-mi-blog.blogspot.com&layout=box_count&show_faces=false&width=72&height=63&action=like&font=tahoma&colorscheme=light' style='border:none; overflow:hidden; width:72px; height:63px'></iframe></td>
<td><g:plusone href='http://nombre-de-mi-blog.blogspot.com' size='tall'/><script type='text/javascript'>
window.___gcfg = {lang: 'es'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></td>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' data-text='Me ha gustado este blog, seguro a ti tambi�n te gustar?:' data-url='http://nombre-de-mi-blog.blogspot.com' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr>
</table>
Cambia la direcci?n de tu blog donde se indica, as? como el mensaje que aparecer? en Twitter y listo.
En color verde puedes cambiar algunos aspectos del dise?o, b?sicamente ser? el color de fondo y de texto.
El bot?n para compartir el blog aparecer? en todas las entradas, si deseas que aparezca s?lo en la portada tendr?s que encerrar el ?ltimo c?digo con la condicional que le corresponde.
Recuerda que no compartir? las entradas del blog, sino el blog en general. Si buscas botones para compartir las entradas puedes ver algunas opciones en la secci?n de Facebook.
Si ya estuvieras usando el bot?n +1 de Google entonces no har? falta repetir el c?digo del script, as? que busca esta l?nea todas las veces que la tengas y elim?nala:
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>S?lo dejaremos el script que hemos puesto en este c?digo, excepto si has decido poner los botones s?lo en la portada, si as? fuera entonces no har? falta quitar esa l?nea salvo algunas excepciones.
ACTUALIZACI?N: En Internet Explorer el bot?n de Facebook no se ve bien cuando se agrega de esta forma.
No comments:
Post a Comment