Mil Trucos Blogger

Marcadores sociales de Mil Trucos Blogger para tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Varios usuarios me han pedido que comparta el estilo de mis marcadores sociales y como bien saben que aquí en Mil Trucos Blogger todo se comparte pues he decidido compartir contigo el estilo de los marcadores sociales de Mil Trucos Blogger.

Los marcadores sociales se ven de la siguiente manera:


Para agregar estos espectaculares marcadores sociales a tu blog ve a Plantilla, , Editar HTML, y busca lo siguiente:

 <b:skin>...</b:skin>

Allí das clic en la flecha que aparece al lado de este código y busca la etiqueta  ]]></b:skin> y arriba de esta añade lo siguiente:

/* Share button by miltrucosblogger.info----------------------------------------------- */
.share-buttons li { list-style: none; float: left; padding-right: 20px; padding-bottom: 10px; } .sharetitle { float: left; font-size: 51px; font-weight: 900; text-transform: uppercase; line-height: 60px; padding-right: 10px; color: #2aa4cf; } .sharetitle2 { float: left; margin-left: -112px; margin-top: 50px; font-size: 20px; text-transform: uppercase; font-weight: 900; Color: #8a8c8e; } .sharetitle3 img { float: left; padding-right: 20px; padding-left: 10px; padding-top: 5px; } .share-buttons { padding-top: 20px; }
.like-cm{margin-top:15px;width:10px;height:10px;background:url(http://lh6.ggpht.com/-smRIL9DaITs/UM9cIp-I8bI/AAAAAAAABeM/wAw1Z1sgj78/s10/like.png) no-repeat}
#social img:hover {opacity: 0.6;}

Ahora busca la siguiente linea:

<div class='post-footer-line post-footer-line-3'>
Debajo de la siguiente linea pega lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-buttons'>
<div class='sharetitle'>Te Gusta?</div> <div class='sharetitle2'>Compartelo</div><div class='sharetitle3'><img src='http://2.bp.blogspot.com/-4ApGF_JO_qk/UTnLsoO4CaI/AAAAAAAAAl0/P6iiO0wsj6o/s1600/racka1.png'/></div>
<li><a class='twitter-share-button' data-count='vertical' data-related='' data-via='mtrucosblogger' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a></li>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:70px; height:62px;'/></li>
 <li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone expr:href='data:post.url' size='tall'/> </li>
  </div>
</b:if>

Para finalizar das clic en Guardar Plantilla y listo hemos terminado.

Espero que te haya gustado este magnifico truco y sigue visitando Mil Trucos Blogger para encontrar los mejores recursos y trucos para tu blog.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

13 Comentarios

  1. C18 C18
    octubre 15, 2013    

    no lo tendras para wordpress ? exelente iconos

  2. octubre 15, 2013    

    Quedó perfecto en mi blog 😀 sinceramente…… GRACIAS! → http://bit.ly/1fAS95p

  3. octubre 16, 2013    

    Hola disculpa como logras poner esas entradas relacionadas en 2 filas de 3 columnas ?

  4. Inma Inma
    octubre 29, 2013    

    Hola, pues yo no sé ponerlo en mi blog, debo de ser muy torpe. Me gustaría saber a qué le llamas plantilla, ahí creo que me equivoco y no me sale. Gracias por tu blog, me ha ayudado mucho

  5. Juvinao Juvinao
    octubre 30, 2013    

    Inma tienes que entrar al escritorio de Blogger y en la opción de Plantilla debes dar clic, luego de esto sigues los pasos que explico en la entrada.

    Si quieres me puedes enviar la plantilla de tu blog y yo con mucho gusto le añado los botones.

    Mi correo es miltrucosblogger@msn.com

    @Inma Saludos

  6. Inma Inma
    octubre 31, 2013    

    Hola, por fin lo he entendido y lo he colocado, estoy feliz!!! graciasss
    Me ha quedado el icono de Google+ en otra línea, no sé dónde fallé, pero lo dejo así, me encantaaaa..

    Y también me encanta tu blog, maravilloso, lo tengo entre mis favoritos, explicas todo fácil y bien, mi blog ha mejorado. Te mando el link para que lo veas.

    elrincondemisdesvarios.blogspot.com

    Ahhh y otra cosa, esos botones solo se ponen en las entradas más leídas, ¿Es así o me he equivocado en algo?

    Gracias por ofrecerte, eres de verdad un encanto.

  7. Juvinao Juvinao
    octubre 31, 2013    

    Inma que bueno que le hayas puesto los botones a tu blog, estos botones aparecen en todas las entradas de tu blog.

    Por cierto me ha encantado tu blog, lo seguiré visitando.

    Saludos

  8. Yoyo Yoyo
    noviembre 3, 2013    

    muy bueno excelente enhorabuna

  9. ed_villamizar ed_villamizar
    noviembre 4, 2013    

    Hola necesito ayuda, los botones me aparecen verticalmente y no horizontal..

    • noviembre 19, 2013    

      Yo sufrí el mismo problema!

    • noviembre 22, 2013    

      Agregaron correctamente la primera parte del código (el CSS) ?

      Por favor dejen la URL de sus blogs para poder revisarlos.

      Saludos

  10. agosto 9, 2016    

    Muchas gracias amigo, lo pondré en practica.

    • Juvinao Juvinao
      septiembre 3, 2016    

      Hola Demetrio, gracias por comentar 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo