Marcadores Sociales con efecto de Opacidad y TipTip

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.