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
    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 ?
    Citar Citar  

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

  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
    Citar Citar  

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

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

    Citar Citar  

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

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

  9. exelente! . gracias
    Citar Citar  

  10. #10
    Registro
    27-julio-2014
    Ubicación
    アルゼンチン
    Mensajes
    3.865
    Cita Iniciado por ninjamex Ver Mensaje
    exelente! . gracias
    Por qué lloraba jajajaj, muchas gracias por el tutorial compañero
    Citar Citar  

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
  •