Mil Trucos Blogger

Sexy Bookmarks Mejorado para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hace poco implemente nuevos botones para compartir,y ya han sido varios los lectores que me han preguntado como hice para agregar estos botones,pues bien aqui esta el tutorial.

Estos botones se llaman Sexy Bookmarks y la version que les traigo hoy es nueva y entre las nuevas caracteristicas estan:

  • Efecto deslizante con JQuery al desplegar nuevos botones.
  • Nuevos botones, entre los cuales podemos ver: LinkedIn, Google Buzz, Digg, Reddit, Technorati, del.icio.us, MySpace, StumbleUpon, etc.
  • Mejor apariencia y estilo, ahora son más sexy.


Para agregar estos botones vas a Diseño,Edicion HTML,Expandir plantillas de artilugios y antes de ]]></b:skin> pega lo siguiente:

/* 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 }

Ahora antes de pega lo </head> siguiente :

<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>

Por ultimo busca la siguiente linea:

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y debajo de ella pega lo siguiente:

<!-- 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='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://bitacoras.com/anotaciones/&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; @HayderJuvinao&quot;' rel='nofollow' title='Twittea esto!'>Twittea esto!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en Facebook'>Compartir en Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + 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='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Recomendar en Yahoo!'>Recomendar en Yahoo!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en Linkedin'>Compartir en Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en Technorati'>Compartir en Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Ingresar esto en Script &amp; Style'>Ingresar esto en Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Publicar en MySpace'>Publicar en MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en Blinklist'>Compartir en Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en FriendFeed'>Compartir en FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + 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.todoblogger.com/' title='Trucos para blogs de Blogger y WordPress'>Todo Blogger</a></strong></div>
</center>
<br/>
<br/>
<!-- Fin Sexy-Bookmarks -->

Para finalizar reemplaza DIRECCIÓN-FEED por la URL de tu FEED y @HayderJuvinao por tu usuario de Twitter y guarda los cambios.

Via/TodoBlogger

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

44 Comentarios

  1. Anonymous Anonymous
    septiembre 29, 2011    

    Hola, soy @vivavalve de taringa!, me podrías contestar un MP qe te mande.

    Saludos!

  2. septiembre 29, 2011    

    Anónimo (vivavalve) ya te respondi el mp

  3. Anonymous Anonymous
    septiembre 29, 2011    

    Soy @vivavalve mandamela a lo que te pedí porque necesitaría empezar a trabajar.

    SaLUDOS!

  4. septiembre 29, 2011    

    Hola,gcias x tanto realmente descubri tu pag hace muy poquito y aplique cositas las cuales mejoraron mi blog esteticamente,..AHORA QUERIA PEDIRTE ALGO!! si miras mi blog unos detalles los cuales me superan en la palantilla,donde tengo la cabecera no cuadra bien! y ese logitoamarillo q tengo puesto (no se como sacarlo!),y cuando se accede al post de descarga esta desentrado..se podra meter mano?! ahi 🙂 una pequeña ayuda?! gcias salu2

    http://kissmar.blogspot.com/
    Marcelo–> kissmar.71@hotmail.com
    Facebook Marcelo Ruiz

  5. septiembre 30, 2011    

    KISSMAR yo veo tus post centrados,y con respecto al logo amarillo sigue los siguiente pasos:

    Ve a Diseño,Edicion HTML,Expandir plantillas de artilugios y buscas la siguiente URL y borrala

    http://4.bp.blogspot.com/-VKqd5HjZVH4/Tnsv_E4-TII/AAAAAAAANFY/mSBCFTIX1d4/s1180/__________ok.jpg

    Guardas los cambios y listo.

  6. septiembre 30, 2011    

    vivavalve ya te respondi por MP ten un poco de paciencia por favor.. 😀

  7. septiembre 30, 2011    

    Este comentario ha sido eliminado por el autor.

  8. septiembre 30, 2011    

    Este comentario ha sido eliminado por el autor.

  9. septiembre 30, 2011    

    YA LO SAQUE MI AMIGO!!!! gcias me distes lucides y busque la direccion de ese logo en mi plantilla je!! mil gcias!!!

  10. septiembre 30, 2011    

    otra molestia! 🙂 como hago para que se me vean mas posteos en la pagina principal o se visualisarlos se me ven 40 o 41 posteos quisiera unos 20 mas como se peuede lograr? gcias d antemano y gcias x tu tiempo!!
    Saludos

  11. septiembre 30, 2011    

    KISSMAR que bueno que mi guia te haya ayudado y bueno con respecto a la nueva peticion Ve a Diseño,Elementos de pagina,Entradas del blog y enla parte de arriba dice lo siguiente:

    Opciones de la página principal
    Número de entradas en la página principal: AQUI PONES EL NUMERO DE ENTRADAS QUE QUIERAS QUE SE VEAN EN LA PAGINA PRINCIPAL..

    :zombie::zombie:

  12. septiembre 30, 2011    

    jaja gcias,me figuran 200! entradas y no dias con entradas,y solo se ven 40 CUACK!! raro! sera la plantilla q no lo acepta? gcias

  13. Anonymous Anonymous
    septiembre 30, 2011    

    apenas me estoy dando cuenta que tines otro dominio .info muy bueno sigue asi juvinao, ya implemente el Sexy Bookmarks en mi blog y seve muy bien saludos 🙂

  14. septiembre 30, 2011    

    KISSMAR no es cuestion de la plantilla,Blogger autoregula la cantidad de entradas mostradas en la pagina de inicio.

    Anónimo jaja hace poco cambie el dominio y este si es pago,gracias y saludos 😛

  15. septiembre 30, 2011    

    Hola, necesito un reproductor como el de Windows Media Player que se usa para transmitir radio, que reciba una ip y un puerto nada más que reciba vídeo.

    Alguien conoce Alguno. Busco desesperado

  16. septiembre 30, 2011    

    gcias Ju! sos un capo!! tengo muchas preguntas pero no quiero joder!! tanto!!! saludos

  17. octubre 1, 2011    

    ufff, esta impresionante-!!!

    pero ya tengo unos y por lo mientras me quedo con esos…

    saludos muy buenas entradas
    +1

  18. octubre 1, 2011    

    Hola olle te quería preguntar ¿como haces tus contenedores donde pones los codigos HTML? te agradeceria que me dijeras como. SALUDOS!!!!

  19. octubre 1, 2011    

    KISSMAR gracias amigo ya sabes cuando quieras estoy para ayudarte.

    EGPP Gruops esto es posible hacerlo pero dame un poco de tiempo..

  20. octubre 1, 2011    

    Chiknaui.Mikistli Joel Molina Reyes bueno amigo usalos cuando quieras.

    Blosk Sánchez si quieres te hago un tutorial sobre el tema,te parece 😛

  21. octubre 1, 2011    

    Bueno esta bien, como a ti se te haga más cómodo,lo que pasa es que tengo un blog donde creo yo no deben faltar los contenedores y por eso los necesito. Esperare el Tutorial (espero sea pronto y gracias)

    :alaba:

    ¡¡¡SALUDOS DESDE MÉXICO!!!

  22. octubre 1, 2011    

    Blosk Sánchez claro lo hare lo mas pronto posible

  23. octubre 1, 2011    

    porque cambiaste a info XD jajajaja no mentiras….XD
    es mas comercial muy bien Juvinao Abrazos desde Colombia-cali VEE!

  24. octubre 1, 2011    

    Jorge Luis si amigo es mucho mejor que el dominio anterrior..

    Saludos tambien desde Colombia

  25. octubre 1, 2011    

    oye como hago para colocar un widget con los blogs recomendados?

  26. octubre 2, 2011    

    srdiario ve a diseño,elementos de pagina,añadir gadget,Lista de blogs,alli añade las URLS de los blogs a recomendar y listo 😀

  27. octubre 2, 2011    

    Hola Juv !! como apago esta radiooo!!! en mi blog ahhh!! je! t dejo el codigo…

    gracias seguire pasando hacer preguntontas je!!!

  28. Anonymous Anonymous
    octubre 2, 2011    

    juvi soy vivavalve,la necesito urgente

  29. octubre 2, 2011    

    KISSMAR deja la url de tu blog para poder ayudarte..

    vivavalve te la enviare apenas pueda ok

  30. octubre 3, 2011    

    OK Juv gcias.
    http://kissmar.blogspot.com/
    Saludos

  31. Anonymous Anonymous
    octubre 3, 2011    

    juvi, decime como se llama la busco en BloggerTemplates si esta.

    (SOY vivavalve)

  32. octubre 3, 2011    

    vivavalve ya estoy buscando una nueva plantilla,apenas haga el cambio de plantilla te paso la mia ok 😛

    Saludos

  33. octubre 3, 2011    

    KISSMAR yo no veo ni escucho ningun radio en tu blog

  34. octubre 4, 2011    

    Juv la saque x q me vuele loco!!,hoy las pongo todo el dia son 2 para hacerle favor a unos amigos,muy uena musica del genero de mi blog melodic rock,hard rock.. gcias saludos

  35. octubre 4, 2011    

    KISSMAR saludos

  36. octubre 4, 2011    

    ya esta amigo!! 🙂 como saco estoo!! jajaja

  37. octubre 5, 2011    

    KISSMAR por favor se mas claro con tus peticiones,no te entiendo :idiot:

  38. Anonymous Anonymous
    octubre 6, 2011    

    Muy buen Aporte 🙂

  39. octubre 6, 2011    

    Anónimo (comentario 38) que bueno que te haya gustado 😀

  40. octubre 6, 2011    

    Perdon juv,lo que quiero es silenciar desde el codigo html la radio,para cuando cargue mi blog no se encienda automaticamente! la misma.:crying:

  41. octubre 6, 2011    

    KISSMAR yo entre a este blog http://kissmar.blogspot.com/ y no veo ninguna radio,de todas formas para eliminar o modificar la radio deberas ir a Diseño > Elementos de la página > Buscas alli el gadget de la radio cambias lo que dice AutoStart=True por AutoStart=False.

    Bueno espero haberte ayudado :]

  42. octubre 24, 2011    

    Hola, ¿de que forma puedo colocar el SexyBookmarks solo en las entradas?, de forma que no aparezca en los resumenes de la pagina de inicio.

    Gracias, estupenda pagina, me esta ayudando muchisimo¡¡

  43. octubre 24, 2011    

    Vitamins Protein para que aparezcan los botones solo en las entradas debes poner lo siguiente al principio del codigo <b:if cond=’data:blog.pageType == “item”‘> y al final pones </b:if> y listo.

  44. noviembre 30, 2011    

    cuando dices debajo, a que te refieres?¿ nunca pude entender eso!..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo