- 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:
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='"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 + " [MENTION=1509]Joaco[/MENTION]Basci"' rel='nofollow' title='Twittea esto!'>Twittea esto!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"[url]http://www.facebook.com/share.php?u="+[/url] data:post.url + "&title=" + 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='"[B]Enlace eliminado[/B] + data:post.url' rel='nofollow' title='Recomendar en Yahoo!'>Recomendar en Yahoo!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"[url]http://www.linkedin.com/shareArticle?mini=true&url="+[/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='"[B]Enlace eliminado[/B] 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='"[B]Enlace eliminado[/B] data:post.url + "&title=" + data:post.title' rel='nofollow' title='Compartir en Technorati'>Compartir en Technorati</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"[url]http://www.myspace.com/Modules/PostTo/Pages/?u=http"+[/url] data:post.url + "&title=" + 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:
