domingo, 6 de marzo de 2011

Agregar Sexy Bookmarks en Blogger

Este grandioso widget trabaja en muchos blogs, permite a los usuarios difundir tu trabajo en distintas redes sociales, y a su vez,  permite mejorar un poco la apariencia del blog, es un gadget bastante atractivo y elegante.

El resultado es el siguiente:


¿Cómo instalar Sexy Bookmarks en Blogger?:

Paso 1: Instalando los botones:


Primero, vamos a ''Diseño/Edición HTML'', en donde marcaremos :


En donde buscarás el siguiente código:
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Debajo de este, deberás pegar el siguiente:
<b:if cond='data:blog.pageType == "item"'>

<br/>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-rss'><a href='URL DE TUS FEEDS' target='_blank' title='Subscribete al RSS'/></li>
<li class='sexy-meneame'><a expr:href='&quot; http://meneame.net/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Meneame'/></li>
<li class='sexy-apezz'><a expr:href='&quot; http://apezz.com/submit.html?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Apezz'/></li>
<li class='sexy-bitacoras'><a expr:href='&quot; http://bitacoras.com/anotaciones/&quot; + data:post.url' target='_blank' title='Bitacoras'/></li>
<li class='sexy-enchilame'><a expr:href='&quot; http://enchilame.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enchilame'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'/></li>
<li class='sexy-mail'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enviaselo a un amigo'/></li>
</ul>
<span class='sexy-rightside'/></div>
</b:if>

Recuerda reemplazar URL DE TUS FEEDS por la dirección de tus Feeds.

Paso 2: Aplicando el estilo a los botones:

Ahora buscaremos la siguiente valor en la plantilla:
]]></b:skin>
Sobre éste pegarás el siguiente código:

/* Sexy-Bookmarks css
-----------------------------------------------*/

div.sexy-bookmarks {
height:54px;
background:url('http://1.bp.blogspot.com/-FTRTTk3Kb1I/TaNIv7SVwGI/AAAAAAAAAt4/qq3LoRT_44E/s1600/icons.png');
position:relative;
width:400px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://1.bp.blogspot.com/-FTRTTk3Kb1I/TaNIv7SVwGI/AAAAAAAAAt4/qq3LoRT_44E/s1600/icons.png') no-repeat right bottom;
position:absolute;
right:-5px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.sexy-rss, .sexy-rss:hover, .sexy-meneame, .sexy-meneame:hover, .sexy-apezz, .sexy-apezz:hover, .sexy-bitacoras, .sexy-bitacoras:hover, .sexy-enchilame, .sexy-enchilame:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-mail, .sexy-mail:hover {
background:url('http://1.bp.blogspot.com/-FTRTTk3Kb1I/TaNIv7SVwGI/AAAAAAAAAt4/qq3LoRT_44E/s1600/icons.png') no-repeat !important;
}

.sexy-rss {
background-position:left top !important;
}
.sexy-rss:hover {
background-position:left bottom !important;
}
.sexy-meneame {
background-position:-50px top !important;
}
.sexy-meneame:hover {
background-position:-50px bottom !important;
}
.sexy-apezz {
background-position:-100px top !important;
}
.sexy-apezz:hover {
background-position:-100px bottom !important;
}
.sexy-bitacoras {
background-position:-150px top !important;
}
.sexy-bitacoras:hover {
background-position:-150px bottom !important;
}
.sexy-enchilame {
background-position:-200px top !important;
}
.sexy-enchilame:hover {
background-position:-200px bottom !important;
}
.sexy-facebook {
background-position:-250px top !important;
}
.sexy-facebook:hover {
background-position:-250px bottom !important;
}
.sexy-twitter {
background-position:-300px top !important;
}
.sexy-twitter:hover {
background-position:-300px bottom !important;
}
.sexy-mail {
background-position:-350px top !important;
}
.sexy-mail:hover {
background-position:-350px bottom !important;
}

Guardaremos los cambios y listo:

No hay comentarios:

Publicar un comentario