Tutorial: Mini toolbar flotante fijo redes sociales para Blogger

unadisco

Préstamo
Gamma
SEO
Verificación en dos pasos desactivada
Desde
7 Ene 2013
Mensajes
281
Hola a todos hoy tengo un mini script lo compartire es simple, fácil de implementar en su blogger, como también en su pagina web, sea Wordspress, Joomla, o cualquier tipo de web, ayuda bastante a la hora de cuando unos de nuestros visitantes lean una de nuestras entradas, les sera muy fácil dar Me gusta, Twittearle, o también compartirle en Google+.

Lo hice yo no soy profesional, pero me gusta compartir :rolleyes:
Si tienen dudas escriban en mi blog, ya que quizás con lo que tengo que hacer en mi blog no pueda responderlas por aquí.

DEMO: Clic Aqui

FUNCIONES
Este se vera en la parte de abajo de nuestro blog, centrado, es semi transparente para que no estorbe la lectura de nuestros visitantes y al final que terminen y si les gusto compartirán en sus redes sociales.

HTML:
<script><!--document.write(unescape("%3Cstyle%3E%0A%20%20%20%20%20%20.div_Content%7B%0Awidth%3A400px%3B%0Aheight%3A500px%3B%0Aposition%3Afixed%3B%0Atop%3A97%25%3B%0Aleft%3A50%25%3B%0Amargin-left%3A%20-200px%3B%0Amargin-top%3A%200px%3B%0Abackground%3Aurl%28%29%20center%20no-repeat%20transparent%3B%0A%09%7D%0A%3C/style%3E%0A%3Cdiv%20class%3D%22div_Content%22%3E%0A%0A%0A%0A%0A%0A%0A%0A%0A%3Ctable%20width%3D%22401%22%20border%3D%220%22%20cellspacing%3D%220%22%20cellpadding%3D%220%22%20background%3D%22http%3A//3.bp.blogspot.com/-INIdAxRGpQg/UUVOnFGv6iI/AAAAAAAAGdw/0PGqIiwU4Aw/s1600/botones.png%22%3E%0A%20%20%3Ctr%3E%0A%20%20%20%20%3Ctd%3E%3Cdiv%20align%3D%22center%22%3E%3Cdiv%20class%3D%22fb-like%22%20data-send%3D%22false%22%20data-layout%3D%22button_count%22%20data-width%3D%2250%22%20data-show-faces%3D%22false%22%3E%3C/div%3E%3C/div%3E%3C/td%3E%0A%20%20%20%20%3Ctd%3E%3Cdiv%20align%3D%22center%22%3E%3Ca%20href%3D%22https%3A//twitter.com/share%22%20class%3D%22twitter-share-button%22%20data-via%3D%22wwwUnadiscocom%22%20data-lang%3D%22es%22%3ETwittear%3C/a%3E%0A%3Cscript%3E%21function%28d%2Cs%2Cid%29%7Bvar%20js%2Cfjs%3Dd.getElementsByTagName%28s%29%5B0%5D%3Bif%28%21d.getElementById%28id%29%29%7Bjs%3Dd.createElement%28s%29%3Bjs.id%3Did%3Bjs.src%3D%22//platform.twitter.com/widgets.js%22%3Bfjs.parentNode.insertBefore%28js%2Cfjs%29%3B%7D%7D%28document%2C%22script%22%2C%22twitter-wjs%22%29%3B%3C/script%3E%3C/div%3E%3C/td%3E%0A%20%20%20%20%3Ctd%3E%3Cdiv%20align%3D%22center%22%3E%3C%21--%20Inserta%20esta%20etiqueta%20donde%20quieras%20que%20aparezca%20Bot%F3n%20+1.%20--%3E%0A%3Cdiv%20class%3D%22g-plusone%22%20data-size%3D%22small%22%3E%3C/div%3E%0A%0A%3C%21--%20Inserta%20esta%20etiqueta%20despu%E9s%20de%20la%20%FAltima%20etiqueta%20de%20Bot%F3n%20+1.%20--%3E%0A%3Cscript%20type%3D%22text/javascript%22%3E%0A%20%20window.___gcfg%20%3D%20%7Blang%3A%20%27es%27%7D%3B%0A%0A%20%20%28function%28%29%20%7B%0A%20%20%20%20var%20po%20%3D%20document.createElement%28%27script%27%29%3B%20po.type%20%3D%20%27text/javascript%27%3B%20po.async%20%3D%20true%3B%0A%20%20%20%20po.src%20%3D%20%27https%3A//apis.google.com/js/plusone.js%27%3B%0A%20%20%20%20var%20s%20%3D%20document.getElementsByTagName%28%27script%27%29%5B0%5D%3B%20s.parentNode.insertBefore%28po%2C%20s%29%3B%0A%20%20%7D%29%28%29%3B%0A%3C/script%3E%3C/div%3E%3C/td%3E%0A%20%20%3C/tr%3E%0A%3C/table%3E%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%0A%3C/div%3E"));</script>


IMPLEMENTAR EN BLOG
1.-Blogger - Diseño - Añadir un gadget - HTML/Javascript
2.-Copiar el código en el cuadro de código.

Pueden copiar en cualquier parte o posicion del gadget, funcionara en el Portal, entradas y demas partes de su blog.
 

Adjuntos

  • Mini+toolbar+flotante+fijo+redes+sociales+para+blogger+.jpg
    Mini+toolbar+flotante+fijo+redes+sociales+para+blogger+.jpg
    3,4 KB · Visitas: 126

unadisco

Préstamo
Gamma
SEO
Verificación en dos pasos desactivada
Desde
7 Ene 2013
Mensajes
281
Barra deslizante botones compartir opcion cerrar

Lo siento si pueden eliminar este tema, que lo eliminen este gadget tiene bastantes errores.
 

Adjuntos

  • blogger-el-foro-barra-delizable.png
    blogger-el-foro-barra-delizable.png
    3,6 KB · Visitas: 112

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba