Muchos conocerán el famoso plugin para WordPress llamado Sexy Bookmarks, que consiste en unos marcadores sociales muy bonitos que se situan luego de cada artículo. Éstos nos ayudan a ganar enlaces entrantes hacia nuestros artículos desde las distintas redes sociales y agregadores.
Me han preguntado como hacer para agregar Sexy Bookmarks en Blogger, y es lo que hoy voy a explicarles. Primero les quiero mostrar un ejemplo de Sexy Bookmarks en Blogger que pueden ver en mi blog de pruebas. Sigan los siguientes pasos:
[1] Vamos a Diseño > Edición de HTML y marcamos la casilla Expandir plantillas de artilugios.
[2] Vamos a buscar la parte que dice ]]</b:skin> y pegamos lo siguiente antes de ella:
/* Sexy-Bookmarks
———————————————–*/div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url(‘http://www.todoblogger.com/wp-content/uploads/2011/07/sexytrans.png’) !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-bitacoras, .sexy-googlebuzz, .sexy-meneame, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url(‘http://www.todoblogger.com/wp-content/uploads/2011/07/sprite.png’) no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-bitacoras{background-position:-4690px bottom !important}
.sexy-bitacoras:hover{background-position:-4690px top !important}
.sexy-googlebuzz{background-position:-6160px bottom !important}
.sexy-googlebuzz:hover{background-position:-6160px top !important}
.sexy-meneame{background-position:-4620px bottom !important}
.sexy-meneame:hover{background-position:-4620px top !important}
.sexy-link{ font-size: 11px; margin-left:25px; float:left; }
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none }
[3] Ahora vamos a buscar la etiqueta </head> y pegamos antes el siguiente código, el cual realizará el efecto deslizante.
<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>
<script type=’text/javascript’>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(‘.sexy-bookmarks a.external’).attr(«target», «_blank»);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(‘.sexy-bookmarks’).height();
var sexyFullHeight=jQuery(‘.sexy-bookmarks ul.socials’).height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery(‘.sexy-bookmarks-expand’).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+’px’
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+’px’
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(‘.sexy-bookmarks-center’)) {
var sexyFullWidth=jQuery(‘.sexy-bookmarks’).width();
var sexyBookmarkWidth=jQuery(‘.sexy-bookmarks:first ul.socials li’).width();
var sexyBookmarkCount=jQuery(‘.sexy-bookmarks:first ul.socials li’).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(‘.sexy-bookmarks-center’).css(‘margin-left’, sexyLeftMargin+’px’);
}
});
</script>
[4] Por último vamos a buscar esto (puede ser un poco distinto):
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
Y vamos a pegar debajo de este código el siguiente HTML:
<!– Inicio Sexy-Bookmarks –>
<br/>
<center>
<div class=’sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love’ style=’margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;’>
<ul class=’socials’>
<li class=’sexy-delicious’><a class=’external’ expr:href=’"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Comparte esto en del.icio.us’>Comparte esto en del.icio.us</a></li>
<li class=’sexy-digg’><a class=’external’ expr:href=’"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Dale un digg esto!’>Dale un digg esto!</a></li>
<li class=’sexy-stumbleupon’><a class=’external’ expr:href=’"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Comparte esto en StumbleUpon’>Comparte esto en StumbleUpon</a></li>
<li class=’sexy-reddit’><a class=’external’ expr:href=’"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Comparte esto en Reddit’>Comparte esto en Reddit</a></li>
<li class=’sexy-googlebuzz’><a class=’external’ expr:href='»http://www.google.com/buzz/post?url=»+ data:post.url ‘ rel=’nofollow’ title=’Comparte esto en Reddit’>Comparte esto en Reddit</a></li>
<li class=’sexy-bitacoras’><a class=’external’ expr:href=’"http://bitacoras.com/anotaciones/"+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Comparte esto en Reddit’>Comparte esto en Reddit</a></li>
<li class=’sexy-meneame’><a class=’external’ expr:href='»http://meneame.net/submit.php?url=» + data:post.url’ rel=’nofollow’ title=’Comparte esto en Reddit’>Comparte esto en Reddit</a></li>
<li class=’sexy-google’><a class=’external’ expr:href=’"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Agrega esto a los marcadores de Google’>Agrega esto a los marcadores de Google</a></li>
<li class=’sexy-twitter’><a class=’external’ expr:href=’"http://twitter.com/home?status=Reading: " + data:blog.title + " – " + data:post.url + " @CObloggers"’ rel=’nofollow’ title=’Twittea esto!’>Twittea esto!</a></li>
<li class=’sexy-facebook’><a class=’external’ expr:href=’"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Compartir en Facebook’>Compartir en Facebook</a></li>
<li class=’sexy-mixx’><a class=’external’ expr:href=’"http://www.mixx.com/submit?page_url=" + data:post.url’ rel=’nofollow’ title=’Compartir en Mixx’>Compartir en Mixx</a></li>
<li class=’sexy-comfeed’><a class=’external’ href=’DIRECCIÓN-FEED‘ rel=’nofollow’ title=’Suscribirse’>Suscribirse</a></li>
<li class=’sexy-yahoobuzz’><a class=’external’ expr:href=’"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url’ rel=’nofollow’ title=’Recomendar en Yahoo!’>Recomendar en Yahoo!</a></li>
<li class=’sexy-linkedin’><a class=’external’ expr:href=’"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Compartir en Linkedin’>Compartir en Linkedin</a></li>
<li class=’sexy-designfloat’><a class=’external’ expr:href=’"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Ingresa esto en DesignFloat’>Ingresa esto en DesignFloat</a></li>
<li class=’sexy-technorati’><a class=’external’ expr:href=’"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Compartir en Technorati’>Compartir en Technorati</a></li>
<li class=’sexy-scriptstyle’><a class=’external’ expr:href=’"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Ingresar esto en Script & Style’>Ingresar esto en Script & Style</a></li>
<li class=’sexy-myspace’><a class=’external’ expr:href=’"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Publicar en MySpace’>Publicar en MySpace</a></li>
<li class=’sexy-blinklist’><a class=’external’ expr:href=’"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Compartir en Blinklist’>Compartir en Blinklist</a></li>
<li class=’sexy-friendfeed’><a class=’external’ expr:href=’"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Compartir en FriendFeed’>Compartir en FriendFeed</a></li>
<li class=’sexy-newsvine’><a class=’external’ expr:href=’"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title’ rel=’nofollow’ title=’Envía esto en Newsvine’>Envía esto en Newsvine</a></li>
</ul>
<div style=’clear:both;’/>
</div>
<div class=’sexy-link’> Marcadores por: <strong><a href=’http://www.comunidadbloggers.com/’ title=’Trucos para blogs de Blogger y WordPress’>Todo Blogger</a></strong></div>
</center>
<br/>
<br/>
<!– Fin Sexy-Bookmarks –>
Debemos sustituir lo que dice DIRECCIÓN-FEED por obviamente la URL de nuestro Feed, y también lo que dice @JCObloggers por su usuario de Twitter.
Nota: Al final del código agregué un enlace pequeño al sitio, les agradecería que lo dejaran, es para darle un poco más de vida al sitio, así que gracias de antemano.
Te recomendamos:
Guia SEO para principiantes I . Consejos y trucos de redacción SEOjunio 29, 2010
Que tan rapida es tu pagina web?julio 23, 2010
Sitemaps: un archivo, varios tipos de contenidojulio 15, 2010
Poner Borde a las Imágenes de nuestros Post en Bloggeragosto 10, 2010
Nube de etiquetas movimientojunio 8, 2011
Frases en tú blog vía Wikiquotejunio 1, 2011
Pues he hecho todo lo que pone aqui y no me aparece la barra, que he podido o que puede haber pasado ???
cual es tu blog¿? estas seguro de que has seguido bien lo pasos¿?
Pues acabo de probar una tercera vez y nada, no funciona :S, la primera vez no iba porque por lo visto se borraron al expandir la pagina, la segunda estaba todo bien puesto pero no aparecia nada, a la tercera vez he eliminado la plantilla entera y la he puesto de nuevo y he probado y sigue sin funciona :s
este es mi blog: http://pppoolli.blogspot.com/ es un blog para pruebas antes d ponerlo en el mio de verdad.
la verdad esq me gustaria mucho esa barra pues llevo tras ella un tiempo xD