Mil Trucos Blogger

Marcadores Sociales con efecto de Opacidad y TipTip

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

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.

0
Shares

Relacionados...

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

16 Comentarios

  1. May May
    febrero 15, 2012    

    Este comentario ha sido eliminado por el autor.

  2. Anonymous Anonymous
    febrero 15, 2012    

    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:

    • febrero 15, 2012    

      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 May
      febrero 15, 2012    

      Este comentario ha sido eliminado por el autor.

  3. febrero 15, 2012    

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

    • febrero 16, 2012    

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

  4. Anonymous Anonymous
    febrero 18, 2012    

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

    • febrero 19, 2012    

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

  5. febrero 26, 2012    

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

  6. febrero 26, 2012    

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

    • febrero 27, 2012    

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

    • marzo 13, 2012    

      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.

    • marzo 13, 2012    

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

    • marzo 13, 2012    

      Que dices?? si????

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

      Como lo llevas???

      MUCHAS GRACIAS POR TU INTERES!

  7. agosto 17, 2012    

    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

    • agosto 20, 2012    

      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 😎

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