Los marcadores sociales son un aspecto importante de tu blog ya que con ellos los lectores comparten en sus redes sociales los articulos que son de su agrado. Aunque ya he publicado varios marcadores sociales ninguno supera en calidad y belleza a los marcadores que os traigo hoy.

Los Marcadores Sociales vienen con efecto de Opacidad y TipTip,el  TipTip es un sistema de tooltips el cual permite mejorar los tooltips normales.

Vista Previa de los marcadores.

 Para agregar estos marcadores ve a la Edición HTML-Expandir Plantillas de Artilugio y antes de ]]></b:skin> pega lo siguiente:

ul.way2blogging-social { padding:0;list-style:none; margin:15px auto !important;display:inline-block;width:100%; text-align:center;}
ul.way2blogging-social li { padding:0;display:inline-block; background-repeat:no-repeat; }
ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://1.bp.blogspot.com/-g7iysrErmVQ/Tzt2z_deDEI/AAAAAAAAE-Q/glYbzMAsd_k/s000/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://1.bp.blogspot.com/-X5zmTGbE78I/Tzt20D1asxI/AAAAAAAAE-Y/ovkCBF7yt1I/s000/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://1.bp.blogspot.com/-el-xYhf5mlU/Tzt20USD-AI/AAAAAAAAE-g/L9dZNcxVwOs/s000/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://3.bp.blogspot.com/-EBDiqP13hhQ/Tzt20eie_ZI/AAAAAAAAE-o/5xonEYjdmbA/s000/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("http://4.bp.blogspot.com/-Ehx0v-Z5oqc/Tzt20uB4WSI/AAAAAAAAE-w/7U5Z5iuZk6M/s000/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://4.bp.blogspot.com/-9vbIFSJhWXc/Tzt20j5q8wI/AAAAAAAAE-4/3WDG8LYQ6xQ/s000/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://2.bp.blogspot.com/-urRLmxRJ_zM/Tzt205EvoNI/AAAAAAAAE_A/vl6SzWnqOnA/s000/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://1.bp.blogspot.com/-SQCcz1DFS6s/Tzt20xzEhQI/AAAAAAAAE_I/U_f-xJYpmEI/s000/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://3.bp.blogspot.com/-V68yZAYqCvE/Tzt21Gsdt3I/AAAAAAAAE_Q/Xg-qbtrF3fk/s000/way2blogging-technorati.png"); }
#way2blogging-cssanime:hover li { opacity:0.2; }
#way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#way2blogging-cssanime li:hover { opacity:1; }
#way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }

Ahora busca la siguiente linea:

<div class='post-footer'>

Y pega debajo de ella lo siguiente:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <ul class='way2blogging-social' id='way2blogging-cssanime'>
    <li class='way2blogging-facebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
    </li>
    <li class='way2blogging-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
    </li>
    <li class='way2blogging-googlebuzz'>
    <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
    </li>
    <li class='way2blogging-stumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
    </li>
    <li class='way2blogging-digg'>
    <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
    </li>
    <li class='way2blogging-delicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
    </li>
    <li class='way2blogging-linkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
    </li>
    <li class='way2blogging-reddit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
    </li>
    <li class='way2blogging-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
    </li>
    </ul>
    </b:if>

Por ultimo guardas los cambios y listo. El codigo es de way2bloggin sin embargo he modificado un poco el codigo con tal de hacerlo mas ligero.

El truco esta basado en CSS3 por lo que es muy ligero asi que no te preocupes que no va a sobrecargar el blog.


16 comentarios

May · febrero 15, 2012 a las 4:51 pm

Este comentario ha sido eliminado por el autor.

Anonymous · febrero 15, 2012 a las 4:52 pm

Es Excelente amigo, lo aplicare en el blog, y lo recomendare!, ya que me puedo comunicar contigo, por favor, me dirias como poner la felcha que tienes en tublog, que va hacia arriba? Saludos :globo:

    Juvinao · febrero 15, 2012 a las 5:08 pm

    Amigo añade el siguiente código antes de ]]></b:skin>:

    #topcontrol {top:20px;right:20px;}
    #topcontrol img {opacity:0.5;}
    #topcontrol img:hover {opacity:1;}

    Ahora el siguiente antes de </head>

    <script src=’http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Recursos%20del%20Blog/UPDATES/scrolling-ab.js’ type=’text/javascript’></script>

    Ya con eso bastara.

    May · febrero 15, 2012 a las 5:18 pm

    Este comentario ha sido eliminado por el autor.

Dryken · febrero 15, 2012 a las 9:10 pm

Que gadget más original, me gusta como se ve. Gran aporte compa! 😀

    Juvinao · febrero 16, 2012 a las 3:16 pm

    Gracias compa de verdad que tu comentario me da mucha alegria 😀

Anonymous · febrero 18, 2012 a las 9:09 pm

Hola… muy lindos los marcadores, pero le puedes agregar más servicios?? como por ej yahoo, blogger, etc.

    Juvinao · febrero 19, 2012 a las 2:28 pm

    La proxima vez que haga marcadores sociales tendre en cuenta estos servicios 😀

Sergio · febrero 26, 2012 a las 2:46 am

Y el botón de google+, como podría incluirlo?? Muchas gracias 😀

Sergio · febrero 26, 2012 a las 10:29 pm

Hola!!!

Mi web es la siguiente, http://www.acidozitrico.com y si os fijáis dentro de las entradas, he modificado vuestro código de tal forma que queda como lo que podéis ver en el blog. Pero ahora quiero incluir el enlace a google plus y no hay manera, no soy capaz… necesito ayuda! Tan solo consigo colocarlo, pero no alinearlo con el resto…

Me podéis echar un cable? POR FAVOR!!!

    Juvinao · febrero 27, 2012 a las 3:09 pm

    Sergio en cuanto tenga tiempo resolvere tu problema,por lo que parece no es nada grave :blaf:

    Sergio · marzo 13, 2012 a las 8:34 am

    Muchas gracias Juvinao, espero noticias tuyas lo más breve posible!

    😀

    Si te sirve de ayuda, creo que el problema está en el código de google+…los otros están bien.

    Juvinao · marzo 13, 2012 a las 3:38 pm

    Sergio ya estoy haciendo unos nuevos marcadores y voy a incluir los servicios que pides.Saludos :]

    Sergio · marzo 13, 2012 a las 11:21 pm

    Que dices?? si????

    Ostia que bien!! Muchas gracias!! Pues en cuanto lo tengas, me avisas eh!

    Como lo llevas???

    MUCHAS GRACIAS POR TU INTERES!

Dark Eyed Soul · agosto 17, 2012 a las 8:21 pm

no entiendo eso de antes de ]]> pega lo siguiente.. porque no lo pones ya directamente porque es un embole… pon tutoriales de youtube aqui en tu pagia.. como poner cada cosa.. para algunos y me incluyo estamos inuciando con blogger y no somos expertos en red.. por lo tanto no somos tan eficientes como otros y si quieres llegar a ellos (nosotro) pon tutoriales que nos puedan ayudar.. o pon todo el codigo junto.. Gracias

    Juvinao · agosto 20, 2012 a las 8:41 pm

    No lo puedo poner como un solo bloque porque van en distintas partes del blog y no te van a funcionar.

    En cuanto a los videos no lo habia pensado pero talvez empiece a hacer videos.

    Dark saludos 😎

Responder a Juvinao Cancelar la respuesta

Marcador de posición del avatar

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