998POW Tu mejor opción en recursos para blog: diseño

Ciudadanos! en este regreso a el CSS Y SCRIPT aprenderás como añadir una barra de botones de redes sociales con un efecto poco conocido como lo es el parecido al 'slider', este efecto puede que te parezca asombroso, quizás un poco nuevo o quizás no, pero de lo que si estoy seguro es que no se vera nada mal en tu sitio, aplicable para Blogger, Wordpress entre otros, incluyendo documentos Html. Cabe destacar la importancia de el diseñador de dichos botones o iconos sociales: 'Designil' en Codepen.

Estos botones lo forman iconos de redes sociales claro está, que se posicionan de forma vertical y que al cursar por ellos se vera el efecto slider de el botón cambiando de posición y mostrando una cantidad manual de lo que refiere a 'seguidores' en cada red social prevista.

La muestra vale más que mil palabras, a continuación en la demo lo podrás visualizar por ti mismo:

DEMO

Lo incorporaremos en tu Blog, y estos seran los pasos que deberas seguir en esta plataforma:

1- Ir a Blogger.
2- Luego a Plantilla.
3- Y a Editar HTML
4- Presionar las teclas Ctrl+f y buscar la etiqueta: ]]></b:skin> .
5- Pegar antes de dicha etiqueta el siguiente código CSS:

.social {
  border-radius: 30px;
  position: relative;
  width: 150px;
  height: 32px;
  box-shadow: inset -1px 1px 1px 0px rgba(0, 0, 0, 0.2);
  display: inline-block;
}

.social .count {
  width: 58px;
  height: 31px;
  background: url(http://i83.photobucket.com/albums/j295/woratana/bubble.png) no-repeat;
  position: absolute;
  top: 0;
  right: -65px;
  line-height: 31px;
  text-align: center;
  text-indent: 8px;
  font-weight: bold;
  font-size: 14px;
  color: #868686;
}

.social span {
  font-size: 12px;
  color: #fff;
  line-height: 30px;
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  margin-left: 30px;
  text-align: center;
  width: 120px;
}

.social .button {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  left: 0;
}

#twitter.social {
  background: #55d4ff;
}

#twitter .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/twitter.png) 5px 5px no-repeat;
  border: 1px solid #53d4ff;
}

#facebook.social {
  background: #354970;
}

#facebook .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/facebook.png) 5px 5px no-repeat;
  border: 1px solid #354970;
}

#rss.social {
  background: #db6610;
}

#rss .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/rss.png) 5px 5px no-repeat;
  border: 1px solid #db6610;
}

#googleplus.social {
  background: #383638;
}

#googleplus .button {
  background: #fff url(http://i83.photobucket.com/albums/j295/woratana/googleplus.png) 5px 5px no-repeat;
  border: 1px solid #383638;
}

Ahora añade el SCRIPT antes de la Etiqueta </HEAD>

$('.sociallink').hover(
     function() {
      // Set Hover Color
      social_id = $(this).find('.social').attr('id');
      switch(social_id)
      {
        case 'twitter':
          new_textcolor = '#55d4ff';
          new_text = 'Twitter friends';
          break;
        case 'facebook':
          new_textcolor = '#354970';
          new_text = 'Facebook friends';
          break;
        case 'dribbble':
          new_textcolor = '#b73567';
          new_text = 'Facebook friends';
          break;
        case 'rss':
          new_textcolor = '#db6610';
          new_text = 'RSS Subscribers';
          break;
        case 'googleplus':
          new_textcolor = '#383638';
          new_text = 'Google+ friends';
          break;
        case 'forrst':
          new_textcolor = '#315c23';
          new_text = 'Forrst friends';
          break;
      }

$(this).find('.button').stop().animate({
        'left': '119px'
      }, 700);
       $(this).find('span').stop().animate({
         'margin-left': '5px',
         'color': new_textcolor
       }, 500);
       $(this).find('.social').stop().animate({
         backgroundColor: '#fcfcfc'
       }, 500);

$(this).find('span').text(new_text);

$(this).find('.count').stop().fadeIn("slow");

},
    function(){
      social_id = $(this).find('.social').attr('id');
      switch(social_id)
      {
        case 'twitter':
          new_bgcolor = '#55d4ff';
          new_text = 'Follow on Twitter';
          break;
        case 'facebook':
          new_bgcolor = '#354970';
          new_text = 'Follow on Facebook';
          break;
        case 'dribbble':
          new_bgcolor = '#b73567';
          new_text = 'Follow on Dribbble';
          break;
        case 'rss':
          new_bgcolor = '#db6610';
          new_text = 'Subscribe via RSS';
          break;
        case 'googleplus':
          new_bgcolor = '#383638';
          new_text = 'Follow on Google+';
          break;
        case 'forrst':
          new_bgcolor = '#315c23';
          new_text = 'Follow on Forrst';
          break;
      }

$(this).find('.button').stop().animate({
        'left': '0'
        }, 700);
      $(this).find('span').stop().animate({
         'margin-left': '30px',
        'color': '#ffffff'
       }, 600);
      $(this).find('.social').stop().animate({
         backgroundColor: new_bgcolor
       }, 500);

$(this).find('span').text(new_text);

$(this).find('.count').stop().fadeOut("slow");
    });
}); 
</script>

Y por ultimo queda añadir el HTML quien será la estructura de dicha barra vertical, solo constaría de ir a una entrada o mejor, podría ponerse en el Sidebar o footer de tu Sitio, Lo más claro seria que sea un lugar donde se visualice de mejor manera estos increíbles botones...

Codigo HTML:

<div class="wrap">
<a href="https://twitter.com/998pow" class="sociallink">
  <div id="twitter" class="social" style="background-color: rgb(85, 212, 255);">
    <div class="button" style="left: 0px;">
</div>
<span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguir en Twitter</span>
    <div class="count" style="display: none; opacity: 1;">
160</div>
</div>
</a>
<br />
<br />
<a href="https://www.facebook.com/CrappoES" class="sociallink">
  <div id="facebook" class="social" style="background-color: rgb(53, 73, 112);">
    <div class="button" style="left: 0px;">
</div>
<span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguir en Facebook</span>
    <div class="count" style="display: none; opacity: 1;">
2615</div>
</div>
</a>
<br />
<br />
<a href="http://feeds.feedburner.com/998pow/TgZy" class="sociallink">
  <div id="rss" class="social" style="background-color: rgb(219, 102, 16);">
    <div class="button" style="left: 0px;">
</div>
<span style="color: rgb(255, 255, 255); margin-left: 30px;">Suscribe vía RSS</span>
    <div class="count" style="display: none; opacity: 1;">
33</div>
</div>
</a>
<br />
<br />
<a href="https://plus.google.com/+998powBlogspot998pow" class="sociallink">
  <div id="googleplus" class="social" style="background-color: rgb(56, 54, 56);">
    <div class="button" style="left: 0px;">
</div>
<span style="color: rgb(255, 255, 255); margin-left: 30px;">Seguir en Google+</span>
    <div class="count" style="display: none; opacity: 1;">
5</div>
</div>
</a>
<br />
<br />
</div>

Hay que resaltar que en el codigo html hay que cambiar mis redes sociales por la de ustedes y de igual manera el número de seguidores que está posea.

Recuerda también: Si ya tienes la línea de Jquery, omitir ese paso.

Y eso ha sido todo ciudadanos, ya tendrás en tu sitio una barra vertical con botones iconos de redes sociales diferente y muy atractiva ;)

¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!.
¡Comenta como te ha ido!.

NUEVO, VERSIÓN 7

El sitio web se ah actualizado a lo que seria ya la versión 7 (siete) procedente de la versión 6, este cambio viene a la necesidad de un estilodiferente.

como anteriormente mencionamos la versión 6 se baso en la totalidad de cambios que el sitio web, tubo un 100% de personalización lo cual hizo de 998pow una plantilla totalmente original y única.

Ahora la versión 7 hablando un poco más afondo con los puntos que se cambiaron y lo nuevo:

-En Plantilla:

Cambios en Menu, Portada, Wrapper, Sidebar, Footer {estilos}.

El background de cada estilo: se han cambiado el estilo a lo que seria un nuevo "color".
El Border: el estilo {border} ha sido sustituidos en unos cuantos casos.
El Border-radius: el estilo {border-radius} has sido sustituidos y eliminados para darle una nueva personalización a los que seria el antiguo "borde nube".
El Width (Ancho): Se ha cambiado el width que tenia en la antigua versión haciendo de este mas ancho para una mayor cavidad, se ha puesto este estilo en muchos casos.
Compatibilidad: se ha eliminado un total de 80% de la incompatibilidad en Firefox y IE, un 100% compatible con Google Ghrome.

Paseate hay más...

Contenido:

998pow se ha convertido en una web fan del Real Madrid, publicamos noticias sobre ellos y partidos en vivo!.
+CodigosCSS +Codigos HTML
Publicaciones en fb, activo post diarios.
Formulario de Contacto.

Ojo pero aun falta:

Imagen del Fondo (Nueva)
Aun falta más contenido que sera publicado constantemente.

¿Exelente el Cambio?

Mira la versión 6

Mira la versión 7 [Actual]

sábado, 14 de noviembre de 2015

Botones sociales con efecto Slider

jueves, 20 de agosto de 2015

Introducción | Intro | 998POW Inc. 2015

sábado, 10 de agosto de 2013

Nuevo, versión 7

lunes, 29 de julio de 2013

Centro de Ayuda / paginas web

¡VISITA MI NUEVA WEB!

GANA DINERO EN PTC

Busca por la pagina

Gana dinero en internet:

Nuevo Contador

Tags

Popular Posts