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.


13 commentarios

C18 · octubre 15, 2013 a las 9:50 pm

no lo tendras para wordpress ? exelente iconos

Yao Ming · octubre 15, 2013 a las 10:32 pm

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

Team frases de cumple · octubre 16, 2013 a las 8:34 am

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

Inma · octubre 29, 2013 a las 7:12 pm

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

Juvinao · octubre 30, 2013 a las 3:21 pm

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

Inma · octubre 31, 2013 a las 9:57 am

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.

Juvinao · octubre 31, 2013 a las 3:52 pm

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

Yoyo · noviembre 3, 2013 a las 4:23 pm

muy bueno excelente enhorabuna

ed_villamizar · noviembre 4, 2013 a las 2:42 pm

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

    Blueli · noviembre 19, 2013 a las 5:02 pm

    Yo sufrí el mismo problema!

    Hayder Juvinao · noviembre 22, 2013 a las 10:16 pm

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

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

    Saludos

Demetrio · agosto 9, 2016 a las 9:47 pm

Muchas gracias amigo, lo pondré en practica.

    Juvinao · septiembre 3, 2016 a las 8:46 pm

    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 *