Botones para compartir y Sharebar inferior (Responsive) Botones para compartir y Sharebar inferior (Responsive)
Botones para compartir y Sharebar inferior (Responsive)
Página 1 de 3 123 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 23
  1. #1
    Registro
    04-abril-2010
    Ubicación
    Mexico DF
    Edad
    25
    Mensajes
    200
    Botones para compartir y Sharebar inferior (Responsive)
    Hace un par de días publique un tutorial para añadir botones para compartir y una Sharebar Responsive sin plugin para wordpress, varios usuarios preguntaron por lo mismo para Blogger y me di a la tarea de revisar el código, ahora les comparto la versión para Blogger, la cual es aún más fácil de instalar.

    Primeramente mostramos lo que obtendrán con este tutorial:

    Post normal
    post1.jpg
    Post Responsive
    Post2.png
    Sharebar
    barra1.jpg
    Responsive 1
    barra2.jpg
    Responsive 2

    barra3.jpg
    barra4.jpg

    Esta vez solo bastara con copiar y pegar el código

    Vamos a nuestro panel de Blogger a plantilla y editar código HTML

    Paso 1: Añadimos el siguiente css:
    Código:
    /*Sharebar*/
    .sharesimple{width:100%;margin-top:10px;margin-bottom:10px;}
    .sharesimple ul{margin:0;padding:0;}
    .share-buttons{list-style: none;}
    .share-buttons li{display: inline;}
    .sharebar{width:100%;height:50px;background-image:url("http://3.bp.blogspot.com/-7UwIEPsFmyk/VHzopPW15UI/AAAAAAAAADw/O1knmI7bAbU/s1600/sharebarfondo.png");z-index:100;position:fixed;bottom:0px;}
    .sharebarsimple{width:80%;margin-top:0px;margin-bottom:0px;margin:0 auto;z-index:1000;position:relative;}
    .sharebarsimple ul{margin:0;padding:0;}
    .sharebarbuttons{list-style: none;}
    .sharebarbuttons li{display: inline;}
    .sharetitle{Font-weight:700;color:#fff;font-size:30px;display:inline;float:left;margin-right:10px;margin-top:5px;}
      media screen and (max-width:550px){
    .sharesimple{text-align:center;}
    .sharetitle{display:none}
    .sharebarsimple{width:100%;text-align:center;}
    }
    Paso 2: Buscamos la ubicación en donde queremos los botones para compartir y pegamos el siguiente código:
    Código:
    <h3>Compartir</h3>
     <div class="sharesimple">
    								 <ul class="share-buttons">
    	<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://3.bp.blogspot.com/-3u0ysg1-Vlw/VHzoonfaKkI/AAAAAAAAADU/A3qfCo_2ipM/s1600/facebook.png'/></a></li>
    	<li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-Fo0N7vY7Kvk/VHzopRoV-pI/AAAAAAAAADo/yLqRsrHkCUc/s1600/twitter.png'/></a></li>
    <li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-87Fx_-fVp8g/VHzoosXSpUI/AAAAAAAAADc/uUWxXceTZiU/s1600/gplus.png'/></a></li>
    <li><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel="nofollow" title="Compartir en Pinterest"><img src='http://3.bp.blogspot.com/-WrPp_bArJl8/VHzoooj-2YI/AAAAAAAAADY/9l_uLqO9QEI/s1600/pinterest.png'/></a></li>
    <li><a href="http://www.tumblr.com/share" title="Compartir en Tumblr" rel="nofollow" target="_blank" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src='http://1.bp.blogspot.com/-j8QTuZIrU1g/VHzopWDho_I/AAAAAAAAADk/MnL4WejS3wo/s1600/tumblr.png'/></a></li>
    </ul>
    </div>
    Paso 3: Nos colocamos en el footer o incluso debajo de la etiqueta <body> y colocamos el siguiente código:
    Código:
    <div class="sharebar"><div class="sharebarsimple"><div class="sharetitle">Compartir</div><ul class="sharebarbuttons">
    	<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Facebook" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://3.bp.blogspot.com/-3u0ysg1-Vlw/VHzoonfaKkI/AAAAAAAAADU/A3qfCo_2ipM/s1600/facebook.png'/></a></li>
    	<li><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Twitter" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-Fo0N7vY7Kvk/VHzopRoV-pI/AAAAAAAAADo/yLqRsrHkCUc/s1600/twitter.png'/></a></li>
    <li><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' target="_blank" rel="nofollow" title="Compartir en Google+" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;" ><img src='http://1.bp.blogspot.com/-87Fx_-fVp8g/VHzoosXSpUI/AAAAAAAAADc/uUWxXceTZiU/s1600/gplus.png'/></a></li>
    <li><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel="nofollow" title="Compartir en Pinterest"><img src='http://3.bp.blogspot.com/-WrPp_bArJl8/VHzoooj-2YI/AAAAAAAAADY/9l_uLqO9QEI/s1600/pinterest.png'/></a></li>
    <li><a href="http://www.tumblr.com/share" title="Compartir en Tumblr" rel="nofollow" target="_blank" onclick="window.open(this.href, 'mywin','left=20,top=20,width=500,height=500,scrollbars=1,toolbar=0,resizable=0'); return false;"><img src='http://1.bp.blogspot.com/-j8QTuZIrU1g/VHzopWDho_I/AAAAAAAAADk/MnL4WejS3wo/s1600/tumblr.png'/></a></li>
    </ul></div></div>
    Paso 4: Guardamos y listo.

    *Nota: El botón de Twitter de la Sharebar tiene un detalle y es que este no obtiene el nombre del post, solo la url, si alguien nos puede ayudar a corregirlo que comparta la solución, el botón que va en los post no tiene problema.

  2. #2
    Una pregunta si quiero que salga dentro de cada entrada como podría buscar ?

  3. #3
    Registro
    07-diciembre-2011
    Ubicación
    Chile
    Mensajes
    3.111
    tienes algún demo? gracias

  4. #4
    Registro
    04-abril-2010
    Ubicación
    Mexico DF
    Edad
    25
    Mensajes
    200
    Cita Iniciado por luismaster2009 Ver Mensaje
    Una pregunta si quiero que salga dentro de cada entrada como podría buscar ?
    Depende del tema, ya que si es personalizado puede que cambie la estructura, sin embargo busca algo como "post-body" y acomodalo, puedes realizar pruebas si no conoces bien el codigo y dejaro en donde te guste
    Saludos

    - - - Actualizado - - -

    Cita Iniciado por Ignacio Ver Mensaje
    tienes algún demo? gracias
    Te he enviado el demo por privado

  5. #5
    buen tutorial lo pongo es favoritos para verlo mas tarde con mas calma

  6. #6
    Se ve muy bueno el tutorial, muchas gracias por compartirlo


  7. #7
    Registro
    06-abril-2009
    Ubicación
    Mexicali, Mexico
    Edad
    31
    Mensajes
    12.920
    Muchas gracias por el aporte

  8. #8
    Registro
    19-septiembre-2013
    Ubicación
    España
    Edad
    27
    Mensajes
    16
    gracias por el tutorial

  9. exelente! . gracias

  10. #10
    Registro
    27-julio-2014
    Ubicación
    Córdoba, Argentina.
    Mensajes
    3.922
    Botones para compartir y Sharebar inferior (Responsive)
    Cita Iniciado por ninjamex Ver Mensaje
    exelente! . gracias
    Por qué lloraba jajajaj, muchas gracias por el tutorial compañero

Página 1 de 3 123 ÚltimoÚltimo

Temas similares

  1. Tutorial: Botones para compartir y Sharebar inferior (Responsive) sin plugin
    En una respuesta a un post compartí con ustedes el código que utilizo en mis blogs para los botones para compartir sin hacer uso de scripts...
    Respuestas: 44
    Último mensaje: 08-ago-2015
  2. Botones para compartir
    Antes tenía botones dinámicos al final de cada post para compartir, de los que te cuentan el número de clicks, pero al ver que pesaban más y...
    Respuestas: 1
    Último mensaje: 10-may-2012
  3. Pop up con botones para compartir
    He visto en este blog Mikotube Singles una ventana emergente estilo popup en la que al ejecutar una entrada aparece dicha ventana con botones para...
    Respuestas: 0
    Último mensaje: 24-oct-2011
  4. Botones para compartir
    Hia. ¿Qué sistema, hack o add-on se emplea en vBHispano para que aparezcan en la parte superior derecha los botones para compartir en Facebook,...
    Respuestas: 3
    Último mensaje: 19-dic-2010

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •