Tutorial: Botones Sexy Bookmarks

JoseChirinos

Curioso
Verificación en dos pasos desactivada
Desde
16 Jun 2012
Mensajes
3
Buenas. estube buscando en el foro y no vi ningun tema como este y me gusto y lo quiero compartir ya que es muy popular y se ve muy bien en nuestro bloggers, aqui les dejo un pequeño tutoria de como poner estos botones.

Que tienen estos botones?
- Efecto deslizante con JQuery al desplegar los botones.
- Estos son los botones: LinkedIn, Google Buzz, Digg, Reddit, Technorati, del.icio.us, MySpace, StumbleUpon, etc.


Para agregar estos botónes a tu blog, sigue los pasos tal cual como lo explicare a continuacion:​

1er Paso: Vamos a Diseño > Edición de HTML y marcamos la casilla Expandir plantillas de artilugios.

2do Paso: buscaremos la parte que dice ]]></b:skin> y pegamos el codigo siguiente antes de ]]</b:skin>.


HTML:
/* 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://img83.xooimage.com/files/7/c/b/sexytrans-359f337.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://img85.xooimage.com/files/e/3/6/sprite-359f38a.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 }

3er Paso: Buscamos la siguiente etiqueta </head> y pegamos antes el siguiente código, (este codigo realizara el efecto deslizante de los botones.

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

4to Paso: Ya casi terminamos ahora buscamos algo parecido al siguiente codigo (puede cambiar dependiendo de la plantilla):

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

5To Paso: Para finalizar Debajo del codigo anterior pegamos el siguiente codigo HTML:

HTML:
<!-- Aqui Comienza  -->
<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='&quot;http://www.google.com/buzz/post?url=&quot;+ 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='&quot;http://meneame.net/submit.php?url=&quot; + 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; [MENTION=1509]Joaco[/MENTION]Basci&quot;' rel='nofollow' title='Twittea esto!'>Twittea esto!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;[url]http://www.facebook.com/share.php?u=&quot;+[/url] data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en Facebook'>Compartir en Facebook</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;[url]http://buzz.yahoo.com/submit/?submitUrl=&quot;[/url] + data:post.url' rel='nofollow' title='Recomendar en Yahoo!'>Recomendar en Yahoo!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;[url]http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+[/url] 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;[url]http://www.designfloat.com/submit.php?url=&quot;+[/url] 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;[url]http://technorati.com/faves?add=&quot;+[/url] data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Compartir en Technorati'>Compartir en Technorati</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;[url]http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+[/url] data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Publicar en MySpace'>Publicar en MySpace</a></li>
</ul>
<div style='clear:both;'/>
</div>
</center>

<!-- Aqui Termina -->

Listo. si siguieron todo los pasos no tendran problema con el codigo aparte de que es sensillo le da un toque a tu blog. Saludos
 
Última edición:

Carlos Arreola

Admin
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.459
Tema aprobado y agregado al listado de tutoriales.
 

sebap04

Épsilon
Verificación en dos pasos desactivada
Desde
5 Abr 2011
Mensajes
968
Gracias por el tutorial. Yo lo tengo pero directamente con el plugin Sexy Bookmarks Shareaholic y va muy bien.....
 

Joaco

Ni
Verificación en dos pasos desactivada
Desde
4 Feb 2010
Mensajes
3.949
Gracias por el tutorial. Yo lo tengo pero directamente con el plugin Sexy Bookmarks Shareaholic y va muy bien.....

En este caso es un tutorial para Blogger, en donde no es posible instalar todo con un plugin como en Wordpress.
 

sebap04

Épsilon
Verificación en dos pasos desactivada
Desde
5 Abr 2011
Mensajes
968
En este caso es un tutorial para Blogger, en donde no es posible instalar todo con un plugin como en Wordpress.

Ah. No sabía. No uso blogger y pensé que era similar.

Gracias :)
 

raveny

Dseda
Verificación en dos pasos desactivada
Desde
27 Nov 2010
Mensajes
1.174
Muchas gracias por compartir el tutorial.
Saludos.
 

serra2012

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
3 Abr 2012
Mensajes
111
funciona :) gracias por compartir, me gustaron mucho
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba