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


44 commentarios

Anonymous · septiembre 29, 2011 a las 3:56 pm

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

Saludos!

Juvinao · septiembre 29, 2011 a las 4:03 pm

Anónimo (vivavalve) ya te respondi el mp

Anonymous · septiembre 29, 2011 a las 9:19 pm

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

SaLUDOS!

KISSMAR · septiembre 29, 2011 a las 9:27 pm

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

Juvinao · septiembre 30, 2011 a las 1:31 pm

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.

Juvinao · septiembre 30, 2011 a las 1:32 pm

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

Juvinao · septiembre 30, 2011 a las 1:34 pm

Este comentario ha sido eliminado por el autor.

KISSMAR · septiembre 30, 2011 a las 3:06 pm

Este comentario ha sido eliminado por el autor.

KISSMAR · septiembre 30, 2011 a las 3:10 pm

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

KISSMAR · septiembre 30, 2011 a las 3:13 pm

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

Juvinao · septiembre 30, 2011 a las 3:58 pm

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:

KISSMAR · septiembre 30, 2011 a las 4:30 pm

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

Anonymous · septiembre 30, 2011 a las 6:29 pm

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 🙂

Juvinao · septiembre 30, 2011 a las 7:27 pm

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 😛

EGPP Gruops · septiembre 30, 2011 a las 10:09 pm

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

KISSMAR · septiembre 30, 2011 a las 11:24 pm

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

Chiknaui.Mikistli Joel Molina Reyes · octubre 1, 2011 a las 4:06 am

ufff, esta impresionante-!!!

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

saludos muy buenas entradas
+1

Blosk Sánchez · octubre 1, 2011 a las 12:21 pm

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

Juvinao · octubre 1, 2011 a las 5:52 pm

KISSMAR gracias amigo ya sabes cuando quieras estoy para ayudarte.

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

Juvinao · octubre 1, 2011 a las 5:54 pm

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

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

Blosk Sánchez · octubre 1, 2011 a las 6:14 pm

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

Juvinao · octubre 1, 2011 a las 6:23 pm

Blosk Sánchez claro lo hare lo mas pronto posible

Jorge Luis · octubre 1, 2011 a las 6:25 pm

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

Juvinao · octubre 1, 2011 a las 6:33 pm

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

Saludos tambien desde Colombia

srdiario · octubre 1, 2011 a las 8:57 pm

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

Juvinao · octubre 2, 2011 a las 12:56 pm

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 😀

KISSMAR · octubre 2, 2011 a las 7:50 pm

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

gracias seguire pasando hacer preguntontas je!!!

Anonymous · octubre 2, 2011 a las 10:37 pm

juvi soy vivavalve,la necesito urgente

Juvinao · octubre 2, 2011 a las 11:04 pm

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

vivavalve te la enviare apenas pueda ok

KISSMAR · octubre 3, 2011 a las 4:50 pm

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

Anonymous · octubre 3, 2011 a las 6:08 pm

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

(SOY vivavalve)

Juvinao · octubre 3, 2011 a las 10:39 pm

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

Saludos

Juvinao · octubre 3, 2011 a las 10:52 pm

KISSMAR yo no veo ni escucho ningun radio en tu blog

KISSMAR · octubre 4, 2011 a las 12:43 pm

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

Juvinao · octubre 4, 2011 a las 3:11 pm

KISSMAR saludos

KISSMAR · octubre 4, 2011 a las 10:34 pm

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

Juvinao · octubre 5, 2011 a las 2:04 pm

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

Anonymous · octubre 6, 2011 a las 7:39 am

Muy buen Aporte 🙂

Juvinao · octubre 6, 2011 a las 3:09 pm

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

KISSMAR · octubre 6, 2011 a las 6:16 pm

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:

Juvinao · octubre 6, 2011 a las 7:27 pm

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

Vitamins Protein · octubre 24, 2011 a las 12:29 pm

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

Juvinao · octubre 24, 2011 a las 3:11 pm

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.

Administrador@ · noviembre 30, 2011 a las 7:25 pm

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 *