Consejos Blogger: 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.

El Tutorial:

Paso 1: Añadiendo los estilos:

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/AVvXsEj3DXq88lDnaXUe6t8nTG-NRdY34f2GZp_vvQMylb1hGc8ldrbswkDVCc-TEOFF4D3_qeUG4Rq3fiL6TtTbCKBA8uVMsQmM5oEolRpAzOUUFfsAqNhzEyFRikt7m3PWo_PBsVk2SN_k4T0/s1600/twitter.png) 0 -32px no-repeat;
float:left;
}

.primericono:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3DXq88lDnaXUe6t8nTG-NRdY34f2GZp_vvQMylb1hGc8ldrbswkDVCc-TEOFF4D3_qeUG4Rq3fiL6TtTbCKBA8uVMsQmM5oEolRpAzOUUFfsAqNhzEyFRikt7m3PWo_PBsVk2SN_k4T0/s1600/twitter.png) 0 0px no-repeat;
}

.segundoicono{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18ApUTo8ZhtVnzJ5v0MsUa7Q2AhXuGUbvL6eMH6r7vZNcOz3y_9bMjOfGCiP9j29DlALI-BviwDLZrSKtCbLtrFHMTMe0DmyehOCgNmtmqL_p0W_60A1kMS5h-1jNj-s_k9LKFgS47zk/s1600/facebook.png) 0 -32px no-repeat;
float:left;
}

.segundoicono:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18ApUTo8ZhtVnzJ5v0MsUa7Q2AhXuGUbvL6eMH6r7vZNcOz3y_9bMjOfGCiP9j29DlALI-BviwDLZrSKtCbLtrFHMTMe0DmyehOCgNmtmqL_p0W_60A1kMS5h-1jNj-s_k9LKFgS47zk/s1600/facebook.png) 0 0px no-repeat;
}
.tercericono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnaUO7E77KOTjiuxisACvjvV-mvut0RDjVSM0ELO6BAc8KTAw62T49KbXUIbSmU3wGpyL6h87ZiLyTZ-XtT0oMsCdXN8A9aX_1bnnZsUVANHnE1q8RXYQ78GMA5RFVreiLHLQIQMcf0Gs/s1600/blogger.png) 0 -32px no-repeat;
float:left;
}

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

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

.cuartoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5gVmC41My3gJMbPtOggWMtqbmQh0jnlQUmU6JmD3JgXKKbpM7lIUUKUVDhMe5O6-n76KTbPYU-o-qsHEPe64y3LUTrmYMgTi3dw9Y7n5ohPcdGg_yzXXBaHVohMO2yt_plyL8oJBak8/s1600/myspace.png) 0 0px no-repeat;
}

.quintoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRM06GowOdAce5hFfitew4GKwvj-iaE68sH9DmEOsJ2cpDNPxX-URl9_u-l_gYLrgSEUJCeU_noLFzYuwHb6ax9uXw1Xn6h241lqws8Q7MAZhVaRUspOcIkwDAh0ByUQqFRaKy08F6HQ/s1600/delicious.png) 0 -32px no-repeat;
float:left;
}

.quintoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRM06GowOdAce5hFfitew4GKwvj-iaE68sH9DmEOsJ2cpDNPxX-URl9_u-l_gYLrgSEUJCeU_noLFzYuwHb6ax9uXw1Xn6h241lqws8Q7MAZhVaRUspOcIkwDAh0ByUQqFRaKy08F6HQ/s1600/delicious.png) 0 0px no-repeat;
}

.sextoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaE_PgTwtO4CUvK3y14azzQrcAQ-CcRzDPHHjqXQaO08wrBnJ2s8g8w2nMUJN0B1cBwhuekXHYBwZ_vXbFMZXtuKHmoXC6lgdViszgRu6d31S8KzargOy1VUdLT_EQqQp7Ev6Q3GpFmY/s1600/yahoo.png) 0 -32px no-repeat;
float:left;
}

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

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

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

}

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

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

}

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

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

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

.decimoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsy39i0aMuTRmTkMnZ5D2aC5iEK7nEqZ0Ji9peLyFviqcmiHO7DyP7qbnUBZ9cUFxoaCGr5OQCMcPruMF04xT8ui1YkTdDRuOkF1WRGB2OOHVqj4VYMNN4Qg-Qz3sXJrIE3oK_8GmC8o0/s1600/technorati.png) 0 0px no-repeat;

}

.undecimoicono{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht3_w_fbhSL73nBI9mCF4nzedY9tstswmAp-dNZLXszfIunlYQp9uA71bJbWuQgbeJC-_CMyqddlCof1_0WefvL0Wx14W6vVuCx-CYrhyNPdy-2FOHbqzFTjPcrUc9_JoBF0LRN-yRaFs/s1600/bitacoras.png) 0 -32px no-repeat;
float:left;
}

.undecimoicono:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht3_w_fbhSL73nBI9mCF4nzedY9tstswmAp-dNZLXszfIunlYQp9uA71bJbWuQgbeJC-_CMyqddlCof1_0WefvL0Wx14W6vVuCx-CYrhyNPdy-2FOHbqzFTjPcrUc9_JoBF0LRN-yRaFs/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 == "item"'>
<div id="marcadores-sociales">

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

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

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

<a class="social-css-iconos cuartoicono" expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + 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 + "&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 + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Yahoo!'></a>

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

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

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

<a class="social-css-iconos decimoicono" expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + 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.

Importante:

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.

Actualización:

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

Consejos Blogger

viernes, 28 de octubre de 2011

Marcadores sociales con efecto para Blogger

No hay comentarios:

Publicar un comentario

Datos personales