Marcadores sociales con efecto para Blogger

Gracias a las transiciones CSS3 y a la técnica de CSS Sprites he conseguido crear estos llamativos marcadores sociales para Blogger. Anteriormente vimos la forma de insertar unos marcadores básicos, pero estos están un poco mejor elaborados y se verán más llamativos en sus blogs.

Vista previa de los bookmarks:

En esta entrada los marcadores NO tienen función ya que estos trabajan con el atributo expr y en una entrada es imposible de añadir.

En "Diseño | Edición HTML" deberás buscar la siguiente línea:

]]></b:skin>

Arriba de ésta pega el siguiente código:

#marcadores-sociales {
width:420px;
border:1px solid #d2d2d2;
background:#2facd6;
padding:4px;
height:40px;
margin:0 auto;
}
.social-css-iconos {
width:32px;
height:32px;
margin:3px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition:0.5s;
transition: 0.5s;
cursor:pointer;
}

.primericono{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6IwZ_XQ7sANydiFULVkDZWjBGcEu_yevk6voK_iGGnshmmIhHCoKQOC-D-zBYbLtZ9jBT4cxY4ronVV1Y1RkfRFTh7d2ro8Js-mtSdHYwNDOgnRNRUxt2u_Pqqadls66_GZhUGJpWKM/s1600/twitter.png) 0 -32px no-repeat;
float:left;
}

.primericono:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6IwZ_XQ7sANydiFULVkDZWjBGcEu_yevk6voK_iGGnshmmIhHCoKQOC-D-zBYbLtZ9jBT4cxY4ronVV1Y1RkfRFTh7d2ro8Js-mtSdHYwNDOgnRNRUxt2u_Pqqadls66_GZhUGJpWKM/s1600/twitter.png) 0 0px no-repeat;
}

.segundoicono{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy59CVBQ768N9V-BJKJajHV2beXKuuEd7S463ja5AzRhe0lJU_6kEFJ5oRif0iA630D3G82vwQVqxiXap7A8Kl52lweaekNmqMNVcICz8V36O0CiivFdAoxDw7N2PCGeePYxAN-YrsoJQ/s1600/facebook.png) 0 -32px no-repeat;
float:left;
}

.segundoicono:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy59CVBQ768N9V-BJKJajHV2beXKuuEd7S463ja5AzRhe0lJU_6kEFJ5oRif0iA630D3G82vwQVqxiXap7A8Kl52lweaekNmqMNVcICz8V36O0CiivFdAoxDw7N2PCGeePYxAN-YrsoJQ/s1600/facebook.png) 0 0px no-repeat;
}
.tercericono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4lDYuV0P4MxrzffNBKPR2nTCELju_LsMIsIBSwxbLlEKRqfV71XWERQvM3UaAeWUH7q9NtX5lZ4VsKzc2d0Xjsk3sGj1hYBW6qcXI5Yxv7y2sU69X3cGvcjMd7RvEy4jadrjMFBTvWBA/s1600/blogger.png) 0 -32px no-repeat;
float:left;
}

.tercericono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4lDYuV0P4MxrzffNBKPR2nTCELju_LsMIsIBSwxbLlEKRqfV71XWERQvM3UaAeWUH7q9NtX5lZ4VsKzc2d0Xjsk3sGj1hYBW6qcXI5Yxv7y2sU69X3cGvcjMd7RvEy4jadrjMFBTvWBA/s1600/blogger.png) 0 0px no-repeat;
}

.cuartoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6aSkhaF0IVWnDA1PAveE8xNm0RX2aPRzlI_TltppB0_UnrDPMPQPYerHX60WCCY8lamgEO-SrPOJ8jU8uzmVQQArA72F8Bv3CfKfPdw35aqflGwGK2agHzSRZPjx5CeV-spG8wy7HgpQ/s1600/myspace.png) 0 -32px no-repeat;
float:left;
}

.cuartoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6aSkhaF0IVWnDA1PAveE8xNm0RX2aPRzlI_TltppB0_UnrDPMPQPYerHX60WCCY8lamgEO-SrPOJ8jU8uzmVQQArA72F8Bv3CfKfPdw35aqflGwGK2agHzSRZPjx5CeV-spG8wy7HgpQ/s1600/myspace.png) 0 0px no-repeat;
}

.quintoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisf_OQzGA0JXM7oQE2H8EaWcFR1vJrYrm-e_5rH-maYm1XL-MfgsNyjv74iH7W4LX0dIc_CBz1sR_TIPFTzsdQQQVQTAEyhMxlUQQ-VS-RzKRtCIiheVa8cKTCS1s7KN12R6s1SOj78Xs/s1600/delicious.png) 0 -32px no-repeat;
float:left;
}

.quintoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisf_OQzGA0JXM7oQE2H8EaWcFR1vJrYrm-e_5rH-maYm1XL-MfgsNyjv74iH7W4LX0dIc_CBz1sR_TIPFTzsdQQQVQTAEyhMxlUQQ-VS-RzKRtCIiheVa8cKTCS1s7KN12R6s1SOj78Xs/s1600/delicious.png) 0 0px no-repeat;
}

.sextoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCmG5-aFvpUi22cjO3GVHVfJ-9H2aUZkhV1ZHBZN782blQA-ihcSPFPfBAajZoCcr-PrC3zUsD3GGlKgTWuclBhiICbFOYR5rj7f0UCnQlHyl73nOktY8xCOLP85EdydJbzjUuEYpwHkY/s1600/yahoo.png) 0 -32px no-repeat;
float:left;
}

.sextoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCmG5-aFvpUi22cjO3GVHVfJ-9H2aUZkhV1ZHBZN782blQA-ihcSPFPfBAajZoCcr-PrC3zUsD3GGlKgTWuclBhiICbFOYR5rj7f0UCnQlHyl73nOktY8xCOLP85EdydJbzjUuEYpwHkY/s1600/yahoo.png) 0 0px no-repeat;
}

.septimoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYQclb2AZbwCVyM6usg6JcFRliY2qCIAsChhcmdPnZ97rBewv3ZYsAZp9hShBgtj3kbiIcbO4Bps-zq2bVWHn61C0fYVtnHcDS9JyY9nh-QW9uMy3GUpD8BOeTrvz9QRJkifBekU0baPI/s1600/stumbleupon.png) 0 -32px no-repeat;
float:left;
}

.septimoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYQclb2AZbwCVyM6usg6JcFRliY2qCIAsChhcmdPnZ97rBewv3ZYsAZp9hShBgtj3kbiIcbO4Bps-zq2bVWHn61C0fYVtnHcDS9JyY9nh-QW9uMy3GUpD8BOeTrvz9QRJkifBekU0baPI/s1600/stumbleupon.png) 0 0px no-repeat;

}

.octavoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pA7NKeMs-VS9ocmNKu4mEl7K4Uil0xRSZ-vjdl8H2Lydjn6hydcXW8vRzL963yPNNjf5UN9LXb8T5DoH6xHHWCU0GZ7TsQieQFX8fUW8bQyMQNAS1ovCjp2KLZP-J_dyvQe2T_TCQi0/s1600/reddit.png) 0 -32px no-repeat;
float:left;
}

.octavoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pA7NKeMs-VS9ocmNKu4mEl7K4Uil0xRSZ-vjdl8H2Lydjn6hydcXW8vRzL963yPNNjf5UN9LXb8T5DoH6xHHWCU0GZ7TsQieQFX8fUW8bQyMQNAS1ovCjp2KLZP-J_dyvQe2T_TCQi0/s1600/reddit.png) 0 0px no-repeat;

}

.novenoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinBGGttEMdoStNE89Lfru0aML_Bq-w72AE7BBtrHZqIxM834EsUvD1Dxsva243s6emNrGIo9t4WJhpOUjjFybfNZvuoGq7myKuZS7ZrhNA9OOXVQ6TDAz2bH7eMxzAJ9q9WwhtvNmaKJ0/s1600/digg.png) 0 -32px no-repeat;
float:left;
}

.novenoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinBGGttEMdoStNE89Lfru0aML_Bq-w72AE7BBtrHZqIxM834EsUvD1Dxsva243s6emNrGIo9t4WJhpOUjjFybfNZvuoGq7myKuZS7ZrhNA9OOXVQ6TDAz2bH7eMxzAJ9q9WwhtvNmaKJ0/s1600/digg.png) 0 0px no-repeat;
}


.decimoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54hnxpiLNXvxevIvUpPQg-GjQOp6kiVBRigO4kibFLtu-HiFh0Tq7sQagwOUfGaHDsGPXfvHI70ZVfctKCwyp3OTx6ArDvuELpV6IbfBR6uMNkpGzsk73naNsblr9sHJvd-9qYhsWbUE/s1600/technorati.png) 0 -32px no-repeat;
float:left;
}

.decimoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi54hnxpiLNXvxevIvUpPQg-GjQOp6kiVBRigO4kibFLtu-HiFh0Tq7sQagwOUfGaHDsGPXfvHI70ZVfctKCwyp3OTx6ArDvuELpV6IbfBR6uMNkpGzsk73naNsblr9sHJvd-9qYhsWbUE/s1600/technorati.png) 0 0px no-repeat;

}


.undecimoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuW_VvmOoFXwgrDSi4UkpUWuMPmxyXTYlwZNvA0bUnNDqC8AbKJUQ-zphvQlMlpWojUh9dUBPETWam1A6_6qW-DEYF-7E7Ju9OOxv1rrVqp_qgMxBgMDsvPt0ZI8VZqgMiR7WXbX71d8/s1600/bitacoras.png) 0 -32px no-repeat;
float:left;
}

.undecimoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuW_VvmOoFXwgrDSi4UkpUWuMPmxyXTYlwZNvA0bUnNDqC8AbKJUQ-zphvQlMlpWojUh9dUBPETWam1A6_6qW-DEYF-7E7Ju9OOxv1rrVqp_qgMxBgMDsvPt0ZI8VZqgMiR7WXbX71d8/s1600/bitacoras.png) 0 0px no-repeat;
}

Guarda los cambios y listo.

Paso 2: Añadiendo los marcadores:

Marca ahora la casilla "Expandir plantillas de artilugios". En donde deberás buscar la siguiente línea en tu plantilla:

<div class='post-footer-line post-footer-line-1'>

Debajo de ésta pega el siguiente código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="marcadores-sociales">

<a class="social-css-iconos primericono" expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='Twittear'></a>

<a class="social-css-iconos segundoicono" expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartir en Facebook'></a>

<a class="social-css-iconos tercericono" expr:href='&quot;http://www.blogger.com/blog_this.pyra?t&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=1&quot;' rel='nofollow' target='_blank' title='Compartir en Blogger'></a>

<a class="social-css-iconos cuartoicono" expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Compartir en Myspace'></a>

<a class="social-css-iconos quintoicono" expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Delicious'></a>

<a class="social-css-iconos sextoicono" expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?url" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Yahoo!'></a>

<a class="social-css-iconos septimoicono" expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumbleupon'></a>

<a class="social-css-iconos octavoicono" expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'></a>

<a class="social-css-iconos novenoicono" expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This'></a>

<a class="social-css-iconos decimoicono" expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Technorati'></a>

<a class="social-css-iconos undecimoicono" expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' rel="nofollow" target="_blank" title="Votar en Bitácoras"></a>

</div> </b:if>

Guarda los cambios y listo.


La estructura de un ícono es así:

Si deseas crear un nuevo marcador deberás conocer cómo trabaja la red social o servicio a integrar, y además será necesario asignar una clase con los valores de posición del sprite. Si no puedes insertar otro servicio puedes mencionarlo en algún comentario y yo mismo integro los marcadores.


He incluído un nuevo botón (Bitácoras), así que es necesario reemplazar los códigos por los actualizados para evitar conflictos.