Bienvenido a Namespec !
Un sitio dedicado al desarrollo web y a la creatividad que trae consigo. Se expondrán temas de interés en la invención de elementos webs, como también se crearan tutoriales, ayudas, e incluso guias avanzadas de como solventarse en el fabuloso mundo del Internet.
Nosotros
Creador de varios sitios webs alojados en distintos hosting y dominios. Sus comienzos fueron en Pwg, desarrollando el año 2008 el sitio de...
Leer MásText Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia.
MoreText Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia.
MoreNamespec - Se original, se tu mismo
divfixed
Tutorial para crear contenedor fijo en pantalla
Conseguir script de botones de facebook u otra red social
Para conseguir los botones existen plugins en cada página que brinda los servicios, aqui te dejare algunos links:
about.twitter.com/es/resources/buttons#tweet
developers.facebook.com/docs/plugins/like-button
y si deseas más de otras redes, busca en google:
RED SOCIAL + BOTON
Ejemplo : Google Button
Colocar el contenedor fijo en la pantalla
Para esto creamos un div, donde a este le daremos características CSS, y asi podremos obtener el resultado deseado. Este sería el texto que tendriamos que colocar por encima de la página en el editor de diseño. Tiene que estar despues de la etiqueta body.
<body> <!------- EL CODIGO DE ABAJO SE COLOCA POR ENCIMA DE LA PÁGINA Y DESPUES DE LA ETIQUETA BODY -->
<div id="fb-root"></div>
<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/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="columna_social">
<div class="fb-like" data-href="URL DE TU PAGINA DE FACEBOOK A COLOCAR ME GUSTA" data-width="ANCHO DEL BOTON" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
<!-- SI DESEAS MAS BOTONES TIENES QUE AGREGARLOS AQUI DESPUES DE ESTE DIV -->
</div>
</div>
Y aqui esta el codigo CSS:
fb-like{
margin: 5px auto;
}
#columna_social {
background-color: #EBE9EA; <!-- COLOR DE FONDO -->
border: 1px solid #D2D2D2; <!--Bordes-->
border-radius: 8px 8px 8px 8px; <!--Bordes redondeados-->
float: left; <!-- Donde la imagen estara flotando puede ser cualquier punto cardinal, tanto izquierda o derecha -->
position: fixed; <!-- Esto es lo que determina que al mover el scroll, la imagen quedara fija-->
min-height: 225px; <!-- Mínimo de altura-->
margin-bottom: 10px; <!-- Margen con el botton o la parte inferior del elemento-->
margin-right: 10px; <!-- Margen izquierda-->
overflow: hidden; <!-- es la barra del scroll que tu subes y bajas en este caso esta oculta-->
text-align: center; <!-- Texto centrado-->
width: 200px; <!-- puedes modificar el ancho-->
margin: 5px; <!-- el margen-->
z-index:10000; <!-- Para que este arriba de todo el contenido de tu web -->
-webkit-transition: .3s all; <!-- un regalo mio para que tengas mejor estilo, es un efecto -->
-moz-transition: .3s all;
}
El resultado seria como este:
Si deseas agregarle mas botones, o incluso imagenes, o textos, puedes hacerlo como si fuera un contenedor cualquiera. La magia lo hace el CSS, donde determina que siempre el contenedor estara fijo y flotando en la posición que tu quieras.
Pronto podrás ver espectaculares tutoriales sobre CSS3.
Atte: Namespec
Text Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia.