[blogger]Boton compartir flotante

[Junni]

Hola, este tutorial esmi primero que publico, se trata de poner un boton que oculta y muestra "BOTONES DE COMPARTIR", mediante una imagen puesta en la parte lateral derecha del blog.

• DEMOSTRACIÓN

Lo aplique en mi blog, alli pueden ver el resulttado.

Paso # 1:

• Diseño
• Ediciób HTML
• Antes del ]]></b:skin>, agregar el siguiente CSS:

/* BOTON COMPARTIR*/ .barrightblogger { background: url('http://i41.servimg.com/u/f41/14/81/87/53/compar10.png'); background-repeat: no-repeat; width:47px; height:200px; position:fixed; right:0px; top:200px; z-index:1000;} .barrightbloggerc { background-repeat: no-repeat; width:130px; height:230px; position:fixed; right:0px; top:200px; z-index:1100;} .barconteblogger { margin:12px 0 0 47px

• Lo que que esta en rojo es la posición o altura de la imagen y de los botones compartir. (puedes colocarlo a tu gusto o dejarlo como esta.)

Paso # 2:

• Apreta Control +F y busca la siguiente linea: </body> y justo antes de esa linea pegar el siguiente codigo:

<!-- BOTON COMPARTIR--> <div class='barrightblogger' onmouseout='this.className=&apos;barrightblogger&a pos;' onmouseover='this.className=&apos;barrightbloggerc &apos;'><div class='barconteblogger'> <center> <a class='twitter-share-button' data-count='vertical' data-lang='es' data-url='http://TU-URL-DE-TU-BLOG.blogspot.com' data-via='NOMBRE O NICK DE TU TWIITER' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> <br/> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?locale=es_ES&amp;href=http%3A%2F%2FNOMBRE-DE-TU-BLOG.blogspot.com&amp;send=false&amp;layout=box_count &amp;width=85&amp;show_faces=false&amp;action=like &amp;colorscheme=light&amp;font=verdana&amp;height =65' style='border:none; overflow:hidden; width:85px; height:65px;'/> <br/> <g:plusone 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> </center> </div></div> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'es'} </script> <!-- BOTON COMPATIR -->

1. Edita todo lo que esta en negrita (rojo), por tus datos correspondientes.
2. Si ya tienes puesto el script para visualizar el boton Google+1, entonces ya no es necesario que pongas el codigo de color verde, caso contrario dejalo como esta.

Codigo adaptado por: BloggiWeb (yo soy bloggiweb: Junni jejeºxD) Tutorial hecho por: BloggiWeb

Referencias: Compatidisimo loseasi.blogspot.com

Bueno gracias a esas referencia pude hacer este tutorial, pues les recomiendo que lo visiten, son muy buenos blogs. gracias

[baduser]

por favor compañero evita el spam, lee las normas del foro y modifica tu firma, no esta permitido publicitar paginas o blogs personales.