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='"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 + " @HayderJuvinao"' 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.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