Ultimos posts del blog de JCS

Actualizaciones cada 720 minutos.

sábado, 19 de diciembre de 2009

Íconos de Redes Sociales personalizados


Publicado en:

Si buscas otra alternativa con mejor diseño (gracias a Elpotro) de las que ya vimos (I y II) para poner los iconos de las redes sociales para compartir y difundir el contenido de tu blog puedes optar por lo siguiente:



1) Vamos a Diseño
2) Edición de HTML
3) Buscamos </head> (tecleamos Ctrl + F para buscar más rápido)
4) Antes de </head> pegamos el siguiente código:

<!-- Iconos redes sociales -->
<style type='text/css'>
.pushbutton a:hover{
position: relative;
top: 1px; left: 1px;
outline:none;
}
.bookmark table{
background-color:#000911;
border:1px hidden gray;
padding:10px;
}
.bookmark td{
font-size: 1em;
text-align: center;
vertical-align: middle;
color: #CCCCCC;
}
.bookmark img{
vertical-align: middle;
}
</style>
<!-- Fin Iconos redes sociales -->

5) Ahora buscamos <p class='post-footer-line post-footer-line-3'/>

Dependiendo de nuestra plantilla no nos aparecerá y deberemos buscar en su lugar por <div class='post-footer-line post-footer-line-3'/>
6) Justo debajo pegaremos el siguiente código:

<!-- Iconos redes sociales -->

<p align='left' class='post-footer'>
<td style='vertical-align:middle' valign='middle' width='15%'><div>Compártelo:</div></td><span class='pushbutton'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img188.imageshack.us/img188/5378/delicioushx9.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img src='http://img10.imageshack.us/img10/9247/bitacoras.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' target='_blank'><img src='http://img188.imageshack.us/img188/9284/rssf.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img46.imageshack.us/img46/5803/digggn.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img34.imageshack.us/img34/2607/googlez.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img207.imageshack.us/img207/6710/yahooweb.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://www.technorati.com/faves?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img231.imageshack.us/img231/4666/technorati.gif' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img207.imageshack.us/img207/3607/meneame.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img36.imageshack.us/img36/4478/fresquiam.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://www.blogmemes.com/post.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img189.imageshack.us/img189/2158/blogmemes.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://www.neodiario.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img189.imageshack.us/img189/9827/neodiario.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://enchilame.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img41.imageshack.us/img41/517/enchilame.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://twitter.com/home/?status=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img60.imageshack.us/img60/2700/twitterq.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img26.imageshack.us/img26/2134/liverww.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img8.imageshack.us/img8/8239/myspacexhm.png' style='border:0px; padding:2px' valign='bottom'/></a></span><span class='pushbutton'><a expr:href='"http://facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img src='http://img170.imageshack.us/img170/3513/facebooko.png' style='border:0px; padding:2px' valign='bottom'/></a></span></p>
<!-- Fin Iconos redes sociales -->

Por defecto vienen los marcadores de del.icio.us, RSS, Digg, Google, Bitacoras, Yahoo, Technorati, Meneame, Frequi, Blogmemes, Neodiario, Enchilame, Twitter, Live, My Space y Facebook.

Comparte el artículo con todos

Algo parecido:

Sin comentarios para "Íconos de Redes Sociales personalizados"

Publicar un comentario