Marcadores Sociales deslizantes, con Opacidad, y Tip Tip

---

Hace poco recorriendo blogs de tutoriales descubri dos tipos de ''Marcadores Sociales'' (botones para compartir) que me gustrón mucho. El problema era que no sabia cual de los dos elegir para mi Blog.
Asi que, decidi combinarlos y crear estos.



Como pueden ver, los marcadores que combine son de Ciudad Blogger y Way2Blogging.
Aca pueden ver un demo ► http://jen-ledger-oficial-blog.blogspot.com. (Vayan a un post, al pie de la entrada encuentran el Marcador Social)





Primero lo que vamos a hacer es seguir los pasos del el post de ''Ciudad Blogger''.   
Nos dirijimos a Diseño - Edición de HTML Expandir plantillas de artilugios y buscamos la etiqueta:

</head>

Y justo antes pegamos el script:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery("#msg-compartir").click(function(event) {
event.preventDefault();
jQuery("#btns-compartir").slideToggle();
});
});
</script>

Y ahora antes de ]]></b:skin> agregamos el CSS:


/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del triángulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}
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 buscamos la linea:

<div class='post-footer'>

Y justo arriba pegamos lo siguiente:

<b:if cond='data:blog.pageType == "item"'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>
<center>
<b:if cond='data:blog.pageType == "item"'>
    <ul class='way2blogging-social' id='way2blogging-cssanime'>
    <li class='way2blogging-facebook'>
    <a  expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u="  + data:post.url + "&t=" + 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='"http://twitter.com/home?status="  + data:post.title + " -- " + data:post.url '  rel='nofollow' title='Tweet  This!'><strong>Twitter</strong></a>
    </li>
    <li class='way2blogging-googlebuzz'>
    <a  expr:href='"http://www.google.com/buzz/post?url=" +  data:post.url + "&imageurl="' rel='nofollow'  title='Post on GoogleBuzz'><strong>Google  Buzz</strong></a>
    </li>
    <li class='way2blogging-stumbleupon'>
    <a  expr:href='"http://www.stumbleupon.com/submit?url=" +  data:post.url + "&title=" + 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='"http://digg.com/submit?phase=2&url="  + data:post.url + "&title=" + data:post.title  ' rel='nofollow' title='Digg  this!'><strong>Digg</strong></a>
    </li>
    <li class='way2blogging-delicious'>
    <a expr:href='"http://delicious.com/post?url=" +  data:post.url + "&title=" + data:post.title '  rel='nofollow' title='Share this on  del.icio.us'><strong>Delicious</strong></a>
    </li>
    <li class='way2blogging-linkedin'>
    <a  expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="  + data:post.url + "&title=" + data:post.title  + "&summary=&source="' rel='nofollow'  title='Share this on  LinkedIn'><strong>LinkedIn</strong></a>
    </li>
    <li class='way2blogging-reddit'>
    <a expr:href='"http://reddit.com/submit?url=" +  data:post.url + "&title=" + data:post.title '  rel='nofollow' title='Share this on  Reddit'><strong>Reddit</strong></a>
    </li>
    <li class='way2blogging-technorati'>
    <a  expr:href='"http://technorati.com/faves?add=" +  data:post.url ' rel='nofollow' title='Share this on  Technorati'><strong>Technorati</strong></a>
    </li>
    </ul>
    </b:if>
</div>
</center>
</b:if>



Recuerda que:
►Tal vez no funcione con todos los servidores.
►Sólo será visible en las entradas individuales, NO en la portada.
►La burbuja está hecha con CSS3, así que si usas un navegador viejo como Internet Explorer 8 sólo verás un rectángulo.

Cualquier duda u opinion, deja tu comentario