Marcadores Sociales Flotantes con la opción de cerrar

Ya he posteado en otras entradas trucos de marcadores sociales flotantes, pero el truco de hoy tiene un par de cosas interesantes respecto a los otros:

Un estilo nuevo basado en nuevos atributos CSS, y se la da al lector la opción de cerrar la barra que contiene los marcadores sociales, lo que hace que sea menos molesto para el lector.


El truco se ve de la siguiente manera:

Puede ver un Demo de este truco en el siguiente blog de pruebas.

Para agregar este truco busca la etiqueta <body> y debajo de ella pega lo siguiente:

<div id=’fb-root’/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/es_LA/all.js#xfbml=1”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

Ahora entra a Diseño, Añadir Gadget, HTML/JavaScript y pega allí lo siguiente:

<style type=”text/css”>
#menudesli {
background-color: #00FFFF; /* Color de fondo */
width: 75px;
padding-top:5px;
padding-bottom:25px;
text-align: center;
/* POSICION FLOTANTE */
position:fixed !important;
right:5%;  /* Esto decide Izquierda o derecha 5% */
top:200px;  /* Distancia de arriba para abajo */
z-index:10 !important
/* POSICION FLOTANTE */
/* REDONDEADO */
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
/* REDONDEADO */
  border:-color: #000000; /* Color de borde */
  border-width: 2px;
  border-style: solid;
}
</style>
<div id=”light” class=”white_content”>
<div class=”menudesli” id=”menudesli”>

<a href = “javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’none’;document.getElementById(‘fade’).style.display=’none'”><img src=”http://3.bp.blogspot.com/-_0qFToAh1VM/UVtBehic5GI/AAAAAAAAHBE/y8k-BUg54PE/s1600/cerr.png” border=”0″/></a>
<a href=”http://blogger.el-foro.com/t2-barra-deslizante-botones-compartir-opcion-cerrar” target=”_blank”><img src=”http://1.bp.blogspot.com/-QnTbXSOlL7Y/UWHw4hJVPSI/AAAAAAAAHM0/LrRlbgyyN2M/s1600/Gadgets.png” border=”0″></a>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”75″ data-show-faces=”false” data-font=”arial”></div>
<a href=”https://twitter.com/share” class=”twitter-share-button” data-lang=”es” data-count=”vertical”>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>
<div class=”g-plusone” data-size=”tall”>
</div>

Ahora solo guarda los cambios y a disfrutar de este excelente truco se ha dicho 😉
Espero que les haya servido este tutorial y sigan visitando Mil Trucos Blogger.
0
Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *