Creando share buttons animados
Posteado el 27. Nov, 2010 por tuto in Jquery
En este link podrás ver el demo de como quedarán los botones animados con Jquery que te enseñaremos en este tutorial
PASO 1
Creamos una carpeta nueva llamada siguenos, dentro de la cual creamos una carpeta nueva con el nombre de imag donde vamos a colocar las imágenes que vamos a utilizar en este tutorial.
PASO 2
Vamos a Adobe Dreanweaver y creamos un nuevo documento HTML.
PASO 3
Debajo de la etiqueta vamos a copiar el siguiente código html4strict.
PASO 4
Con el comando Ctrl + S guardamos nuestro documento con el nombre siguenos.html
PASO 5
Vamos al menú File – New y creamos un nuevo documento CSS.
PASO 6
Dentro del documento copiamos el siguiente código CSS.
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
/* Simple page reset */
margin:0px;
padding:0px;
}
body{
/* Setting default text color, background and a font stack */
color:#eeeeee;
font-size:13px;
background: #1b232a;
font-family:Arial, Helvetica, sans-serif;
}
/* The code for the share box starts here: */
#share{
/* The share box container */
width:500px;
background:#292929;
height:220px;
margin:60px auto;
overflow:hidden;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}
#share-label{
/* The image on the right */
background:url(../img/siguenos.png) no-repeat 50% 50%;
float:left;
height:220px;
width:200px;
}
#stage{
/* This is where the animation takes place */
position:relative;
border-right:1px solid #DDDDDD;
width:290px;
height:220px;
background:white;
float:left;
border-bottom-left-radius:12px;
border-top-left-radius:12px;
-moz-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;
-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px;
}
.btn{
/* This class is assigned to every share button */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}
.bcontent{
/* Positioned inside the .btn container */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
/* Individual rules for every share button */
.flikcr{ background:url(../img/sflick.png) no-repeat -4px bottom;}
.rss{ background:url(../img/srss.png) no-repeat -4px bottom;}
.facebook{ background:url(../img/sfacebook.png) no-repeat -5px bottom;}
.twitter{ background:url(../img/stwitter.png) no-repeat -5px bottom;}
.youtube{ background:url(../img/syoutube.png) no-repeat -7px bottom;}
.thanksto{
position:absolute;
bottom:2px;
right:71px;
font-size:10px;
width: 115px;
}
.thanksto a,.thanksto a:visited{
color:#BBB;
}
/* Customizing the facebook share button */
span.fb_share_no_count {
display:block;
}
span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}
span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}
/* The styles below are only necessary for the demo page */
h1{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:36px;
font-weight:normal;
margin-bottom:15px;
}
h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:normal;
padding-right:140px;
right:0;
text-align:right;
text-transform:uppercase;
top:15px;
}
.clear{
clear:both;
}
#main{
/* The main container */
margin:15px auto;
text-align:center;
width:865px;
position:relative;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
p{
/* The tut info on the bottom of the page */
padding:10px;
text-align:center;
}
PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css
PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.
PASO 9
Por ultimo creamos una carpeta llamada js dentro de la carpeta siguenos y copiamos los archivos js que adjunto en este tutorial.
PASO 10
Listo ya tenemos nuestro rotador de imágenes.
Descarga el editable de Share buttons Jquery
Marta
20. Apr, 2011
enlace roto a la descarga ( pagina no encontrada. Muchas gracias
creativo
20. Apr, 2011
Marta ya arreglamos el link de descarga.
Saludos