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/>
</b:if>
<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='" http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Meneame'/></li>
<li class='sexy-apezz'><a expr:href='" http://apezz.com/submit.html?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Apezz'/></li>
<li class='sexy-bitacoras'><a expr:href='" http://bitacoras.com/anotaciones/" + data:post.url' target='_blank' title='Bitacoras'/></li>
<li class='sexy-enchilame'><a expr:href='" http://enchilame.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enchilame'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Facebook'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Twitter'/></li>
<li class='sexy-mail'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviaselo a un amigo'/></li>
</ul>
<span class='sexy-rightside'/></div>
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