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>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script type='text/javascript'> $(document).ready(function() { $('.count').hide(); $('.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 ;)

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

read more

 Ciudadanos! en este regreso al los SCRIPTS aprenderemos a colocar un efecto que no se vera mal en tu sitio web o Blog, se trata de una caída o desplazamiento de copos de nieve desde la parte superior de tu sitio, y la cual además cumple con seguir a tu cursor 'eso sí' sin estorbar el contenido para el cual los visitantes han de entrar.

 La incorporación es muy sencilla y básica. Aquí te presento un ejemplo de este efecto, al presionar 'demo' espera al rededor de menos de un minuto y balancea tu cursor hasta que dicho efecto se haga presente.

DEMO

 
Ok muy fácil incorporarlo, aquí te ayudaremos. Sigan los pasos correspondientes:

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

<script type="text/javascript"> //<![CDATA[ // Nieve en el blog /** @license DHTML Snowstorm! JavaScript-based Snow for web pages -------------------------------------------------------- Version 1.42.20111120 (Previous rev: 1.41.20101113) Copyright (c) 2007, Scott Schiller. All rights reserved. Code provided under the BSD License: http://schillmania.com/projects/snowstorm/license.txt */ var snowStorm=function(e,d){function g(a,d){isNaN(d)&&(d=0);return Math.random()*a+d}function o(){e.setTimeout(function(){a.start(true)},20);a.events.remove(i?d:e,"mousemove",o)}function r(){if(!a.excludeMobile||!s)a.freezeOnBlur?a.events.add(i?d:e,"mousemove",o):o();a.events.remove(e,"load",r)}this.flakesMax=128;this.flakesMaxActive=64;this.animationInterval=40;this.excludeMobile=true;this.flakeBottom=null;this.followMouse=true;this.snowColor="#ffffff";this.snowCharacter="•";this.snowStick=true; this.targetElement=null;this.useMeltEffect=true;this.usePositionFixed=this.useTwinkleEffect=false;this.freezeOnBlur=true;this.flakeRightOffset=this.flakeLeftOffset=0;this.flakeHeight=this.flakeWidth=8;this.vMaxX=5;this.vMaxY=4;this.zIndex=0;var a=this,y=this,i=navigator.userAgent.match(/msie/i),z=navigator.userAgent.match(/msie 6/i),A=navigator.appVersion.match(/windows 98/i),s=navigator.userAgent.match(/mobile/i),B=i&&d.compatMode==="BackCompat",t=s||B||z,h=null,k=null,j=null,m=null,u=null,v=null, p=1,n=false,q;a:{try{d.createElement("div").style.opacity="0.5"}catch(C){q=false;break a}q=true}var w=false,x=d.createDocumentFragment();this.timers=[];this.flakes=[];this.active=this.disabled=false;this.meltFrameCount=20;this.meltFrames=[];this.events=function(){function a(b){var b=f.call(b),c=b.length;l?(b[1]="on"+b[1],c>3&&b.pop()):c===3&&b.push(false);return b}function d(a,c){var e=a.shift(),f=[b[c]];if(l)e[f](a[0],a[1]);else e[f].apply(e,a)}var l=!e.addEventListener&&e.attachEvent,f=Array.prototype.slice, b={add:l?"attachEvent":"addEventListener",remove:l?"detachEvent":"removeEventListener"};return{add:function(){d(a(arguments),"add")},remove:function(){d(a(arguments),"remove")}}}();this.randomizeWind=function(){var c;c=g(a.vMaxX,0.2);u=parseInt(g(2),10)===1?c*-1:c;v=g(a.vMaxY,0.2);if(this.flakes)for(c=0;c<this.flakes.length;c++)this.flakes[c].active&&this.flakes[c].setVelocities()};this.scrollHandler=function(){var c;m=a.flakeBottom?0:parseInt(e.scrollY||d.documentElement.scrollTop||d.body.scrollTop, 10);isNaN(m)&&(m=0);if(!n&&!a.flakeBottom&&a.flakes)for(c=a.flakes.length;c--;)a.flakes[c].active===0&&a.flakes[c].stick()};this.resizeHandler=function(){e.innerWidth||e.innerHeight?(h=e.innerWidth-(!i?16:16)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:e.innerHeight):(h=(d.documentElement.clientWidth||d.body.clientWidth||d.body.scrollWidth)-(!i?8:0)-a.flakeRightOffset,j=a.flakeBottom?a.flakeBottom:d.documentElement.clientHeight||d.body.clientHeight||d.body.scrollHeight);k=parseInt(h/2,10)};this.resizeHandlerAlt= function(){h=a.targetElement.offsetLeft+a.targetElement.offsetWidth-a.flakeRightOffset;j=a.flakeBottom?a.flakeBottom:a.targetElement.offsetTop+a.targetElement.offsetHeight;k=parseInt(h/2,10)};this.freeze=function(){var c;if(a.disabled)return false;else a.disabled=1;for(c=a.timers.length;c--;)clearInterval(a.timers[c])};this.resume=function(){if(a.disabled)a.disabled=0;else return false;a.timerInit()};this.toggleSnow=function(){a.flakes.length?(a.active=!a.active,a.active?(a.show(),a.resume()):(a.stop(), a.freeze())):a.start()};this.stop=function(){var c;this.freeze();for(c=this.flakes.length;c--;)this.flakes[c].o.style.display="none";a.events.remove(e,"scroll",a.scrollHandler);a.events.remove(e,"resize",a.resizeHandler);a.freezeOnBlur&&(i?(a.events.remove(d,"focusout",a.freeze),a.events.remove(d,"focusin",a.resume)):(a.events.remove(e,"blur",a.freeze),a.events.remove(e,"focus",a.resume)))};this.show=function(){var a;for(a=this.flakes.length;a--;)this.flakes[a].o.style.display="block"};this.SnowFlake= function(a,e,l,f){var b=this;this.type=e;this.x=l||parseInt(g(h-20),10);this.y=!isNaN(f)?f:-g(j)-12;this.vY=this.vX=null;this.vAmpTypes=[1,1.2,1.4,1.6,1.8];this.vAmp=this.vAmpTypes[this.type];this.melting=false;this.meltFrameCount=a.meltFrameCount;this.meltFrames=a.meltFrames;this.twinkleFrame=this.meltFrame=0;this.active=1;this.fontSize=10+this.type/5*10;this.o=d.createElement("div");this.o.innerHTML=a.snowCharacter;this.o.style.color=a.snowColor;this.o.style.position=n?"fixed":"absolute";this.o.style.width= a.flakeWidth+"px";this.o.style.height=a.flakeHeight+"px";this.o.style.fontFamily="arial,verdana";this.o.style.overflow="hidden";this.o.style.fontWeight="normal";this.o.style.zIndex=a.zIndex;x.appendChild(this.o);this.refresh=function(){if(isNaN(b.x)||isNaN(b.y))return false;b.o.style.left=b.x+"px";b.o.style.top=b.y+"px"};this.stick=function(){t||a.targetElement!==d.documentElement&&a.targetElement!==d.body?b.o.style.top=j+m-a.flakeHeight+"px":a.flakeBottom?b.o.style.top=a.flakeBottom+"px":(b.o.style.display= "none",b.o.style.top="auto",b.o.style.bottom="0px",b.o.style.position="fixed",b.o.style.display="block")};this.vCheck=function(){if(b.vX>=0&&b.vX<0.2)b.vX=0.2;else if(b.vX<0&&b.vX>-0.2)b.vX=-0.2;if(b.vY>=0&&b.vY<0.2)b.vY=0.2};this.move=function(){var d=b.vX*p;b.x+=d;b.y+=b.vY*b.vAmp;if(b.x>=h||h-b.x<a.flakeWidth)b.x=0;else if(d<0&&b.x-a.flakeLeftOffset<-a.flakeWidth)b.x=h-a.flakeWidth-1;b.refresh();if(j+m-b.y<a.flakeHeight)b.active=0,a.snowStick?b.stick():b.recycle();else{if(a.useMeltEffect&&b.active&& b.type<3&&!b.melting&&Math.random()>0.998)b.melting=true,b.melt();if(a.useTwinkleEffect)if(b.twinkleFrame)b.twinkleFrame--,b.o.style.visibility=b.twinkleFrame&&b.twinkleFrame%2===0?"hidden":"visible";else if(Math.random()>0.9)b.twinkleFrame=parseInt(Math.random()*20,10)}};this.animate=function(){b.move()};this.setVelocities=function(){b.vX=u+g(a.vMaxX*0.12,0.1);b.vY=v+g(a.vMaxY*0.12,0.1)};this.setOpacity=function(a,b){if(!q)return false;a.style.opacity=b};this.melt=function(){!a.useMeltEffect||!b.melting? b.recycle():b.meltFrame<b.meltFrameCount?(b.meltFrame++,b.setOpacity(b.o,b.meltFrames[b.meltFrame]),b.o.style.fontSize=b.fontSize-b.fontSize*(b.meltFrame/b.meltFrameCount)+"px",b.o.style.lineHeight=a.flakeHeight+2+a.flakeHeight*0.75*(b.meltFrame/b.meltFrameCount)+"px"):b.recycle()};this.recycle=function(){b.o.style.display="none";b.o.style.position=n?"fixed":"absolute";b.o.style.bottom="auto";b.setVelocities();b.vCheck();b.meltFrame=0;b.melting=false;b.setOpacity(b.o,1);b.o.style.padding="0px";b.o.style.margin= "0px";b.o.style.fontSize=b.fontSize+"px";b.o.style.lineHeight=a.flakeHeight+2+"px";b.o.style.textAlign="center";b.o.style.verticalAlign="baseline";b.x=parseInt(g(h-a.flakeWidth-20),10);b.y=parseInt(g(j)*-1,10)-a.flakeHeight;b.refresh();b.o.style.display="block";b.active=1};this.recycle();this.refresh()};this.snow=function(){for(var c=0,d=0,e=0,f=null,f=a.flakes.length;f--;)a.flakes[f].active===1?(a.flakes[f].move(),c++):a.flakes[f].active===0?d++:e++,a.flakes[f].melting&&a.flakes[f].melt();if(c<a.flakesMaxActive&& (f=a.flakes[parseInt(g(a.flakes.length),10)],f.active===0))f.melting=true};this.mouseMove=function(c){if(!a.followMouse)return true;c=parseInt(c.clientX,10);c<k?p=-2+c/k*2:(c-=k,p=c/k*2)};this.createSnow=function(c,d){var e;for(e=0;e<c;e++)if(a.flakes[a.flakes.length]=new a.SnowFlake(a,parseInt(g(6),10)),d||e>a.flakesMaxActive)a.flakes[a.flakes.length-1].active=-1;y.targetElement.appendChild(x)};this.timerInit=function(){a.timers=!A?[setInterval(a.snow,a.animationInterval)]:[setInterval(a.snow,a.animationInterval* 3),setInterval(a.snow,a.animationInterval)]};this.init=function(){var c;for(c=0;c<a.meltFrameCount;c++)a.meltFrames.push(1-c/a.meltFrameCount);a.randomizeWind();a.createSnow(a.flakesMax);a.events.add(e,"resize",a.resizeHandler);a.events.add(e,"scroll",a.scrollHandler);a.freezeOnBlur&&(i?(a.events.add(d,"focusout",a.freeze),a.events.add(d,"focusin",a.resume)):(a.events.add(e,"blur",a.freeze),a.events.add(e,"focus",a.resume)));a.resizeHandler();a.scrollHandler();a.followMouse&&a.events.add(i?d:e,"mousemove", a.mouseMove);a.animationInterval=Math.max(20,a.animationInterval);a.timerInit()};this.start=function(c){if(w){if(c)return true}else w=true;if(typeof a.targetElement==="string"&&(c=a.targetElement,a.targetElement=d.getElementById(c),!a.targetElement))throw Error('Snowstorm: Unable to get targetElement "'+c+'"');if(!a.targetElement)a.targetElement=!i?d.documentElement?d.documentElement:d.body:d.body;if(a.targetElement!==d.documentElement&&a.targetElement!==d.body)a.resizeHandler=a.resizeHandlerAlt; a.resizeHandler();a.usePositionFixed=a.usePositionFixed&&!t;n=a.usePositionFixed;if(h&&j&&!a.disabled)a.init(),a.active=true};a.events.add(e,"load",r,false);return this}(window,document); //]]> </script>

 Y de manera sencilla, eso seria todo... Ya hemos añadido nieve a nuestro blog =)

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

read more

 Buenas, ahora con un nuevo tutorial en el cual emplearemos con Hover utilizando el CSS3, este efecto tipo polaroid se empleara al pasar sobre un imagen, este cuenta con propiedades de transiciones las cuales le dará un aspecto muy llamativo e interesante. La visualización plena de la magia por así decirlo, se vera en Ghrome. Comencemos.

 Ponemos las imágenes en una lista ordenada con una clase llamada polaroids y cada una en un enlace donde el atributo title, será el texto que agregaremos debajo de ellas:

<ul class="polaroids"> <li> <a href="javascript:void(0);" title="imagen 1"><img src="URL_imagen1" /></a> </li> <li> <a href="javascript:void(0);" title="imagen 2"><img src="URL_imagen2" /></a> </li> ....... <li class="messy"> <a href="javascript:void(0);" title="imagen especial"><img src="URL_imagenespecial" /></a> </li> ....... </ul>
 La clave de la mágia. El CSS:

<style> /* a la lista le damos una dimensión y le colocamos los márgenes necesarios */ ul.polaroids { list-style-type: none; margin: 0 0 0 50px; width: 600px; } ul.polaroids li { display:inline; list-style-type: none; padding: 0; margin: 0; } /* cada enlace contiene una imagen y es donde definimos los colores y las propeidades de los textos */ ul.polaroids a { display: inline; float: left; margin: 10px 30px; padding: 10px; width: auto; /* las propiedades gráficas */ background-color: #FFF; /* las propiedades de los textos */ font-family: Tahoma; font-size: 18px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #123; /* por defecto, rotamos las imágenes */ -moz-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958); /* y la transición */ -webkit-transition: -webkit-transform .15s linear; } /* cada imagen (en este caso las dimensiono todas iguales pero, pueden ser diferentes) */ ul.polaroids img {display: block; margin-bottom: 5px; height: 150px; width: 200px; } /* esto es lo que agregará el texto contenido en el atributo title */ ul.polaroids a:after{ content: attr(title); } /* utilizando la pseudo-clase nth-child hacemos que algunas imágenes se muestren diferentes */ /* no usamos filtros para IE porque esta pseudo-clase no es reconocida */ ul.polaroids li:nth-child(even) a { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); } ul.polaroids li:nth-child(3n) a { background-color: #AAA; color: #589; position: relative; top: -5px; -moz-transform: none; -webkit-transform: none; } ul.polaroids li:nth-child(5n) a { background-color:#DDD; color:#BEF; position: relative; right: 5px; -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); } ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; } /* una opción es definir una clase con una característica especial, diferenciada del resto */ ul.polaroids li.messy a { background-color: #FEA; margin: 20px 150px; -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.984807753012208, M12=0.17364817766693033, M21=-0.17364817766693033, M22=0.984807753012208); } /* por último, el efecto hover es el que lanza las transiciones */ ul.polaroids li a:hover { position: relative; z-index: 5; -moz-box-shadow: 0px 0px 20px #000 inset,10px 15px 10px #000; -webkit-box-shadow:0px 0px 20px #000 inset,10px 15px 10px #000; -moz-transform: scale(1.25); -webkit-transform: scale(1.25); filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1); } </style>

 VÍDEO TUTORIAL [VER] COMO PONERLO YA EN TU BLOG:

Demo:

• 
• 
• 
• 
• 
• 
• 

read more

Después de un largo tiempo sin publicar, vuelvo con más de recursos para tu web o blog, esta vez con unos botones de redes sociales que poseen el efecto 'hover' al pasar el cursor sobre ellos. Se trata de una barra lateral flotante posicionada por defecto al lado derecho del sitio y cuanta con 5 botones de redes, los mas caracteristicos, que son: facebook, twitter, google+, youtube y el rss.

 Sirve más que nada para que los seguidores o visitantes de tu sitio accionen sobre los iconos, para así redirigirse mediante una nueva ventana a tus paginas de redes sociales aumentando así los seguidores en ellas, a la vez da una buena vista por lo bien que se ven. Esta contribuye a la búsqueda de CC3 debido a los estilos. Lo que buscamos es más audiencia a tus paginas para obtener mas fans y seguidores.

 Para saber más esta barra vea la aquí: 

DEMO

 
Ok sera fácil incorporarlo, aquí te ayudaremos. Sigan los pasos correspondientes:

1- Ir a Blogger.
2- Luego a Plantilla.
3- Y a Editar HTML
4- Integre el siguiente codigo antes de la etiqueta   ]]><'/b:skin'> sin las comillas.

Código CSS:

.social-sidebar-buttons { width: 32px; margin-left: 1100px; } .social-facebook { height: 48px; width: 48px; margin:0px 0 0 48px; float: left; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; position:fixed; right:0px; z-index:1000; top:200px; } .social-facebook:hover { background-position: 0px -48px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); } .social-twitter { height: 48px; width: 48px; margin:0px 0 0 48px; float: left; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; position:fixed; right:0px; z-index:1000; top:250px; } .social-twitter:hover { background-position: 0px -48px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); } .social-google { height: 48px; width: 48px; margin:0px 0 0 48px; float: left; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; position:fixed; right:0px; z-index:1000; top:300px; } .social-google:hover { background-position: 0px -48px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); } .social-youtube { height: 48px; width: 48px; margin:0px 0 0 48px; float: left; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; position:fixed; right:0px; z-index:1000; top:350px; } .social-youtube:hover { background-position: 0px -48px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); } .social-rss { height: 48px; width: 48px; margin:0px 0 0 48px; float: left; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -o-transition: all ease 0.3s; -ms-transition: all ease 0.3s; transition: all ease 0.3s; position:fixed; right:0px; z-index:1000; top:400px; } .social-rss:hover { background-position: 0px -48px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8); } .twitter-hover { background-image: url('http://3.bp.blogspot.com/-aW0EJLzWqQQ/U-kFYKUFEPI/AAAAAAAAVZc/uFV9N6kQEts/s1600/twitter-hover.png'); } .facebook-hover { background-image: url('http://1.bp.blogspot.com/-OUx8NjCmOPY/U-kFMvueC5I/AAAAAAAAVZU/c9GltNEzfwI/s1600/facebook-hover.png'); } .google-hover { background-image: url('http://2.bp.blogspot.com/-eBa2XYdq3Z0/U-kFh6_wPmI/AAAAAAAAVZk/bYRySdPNLZs/s1600/google-hover.png'); } .youtube-hover { background-image: url('http://3.bp.blogspot.com/-WgqHTGHIbwU/U-kFrohrovI/AAAAAAAAVZs/VDYpeZL4REA/s1600/youtube-hover.png'); } .rss-hover { background-image: url('http://3.bp.blogspot.com/-fLZeQuFiekc/U-kF1msvhZI/AAAAAAAAVZ0/fHgCKPkPlBI/s1600/rss-hover.png'); }

A continuación, ya añadido los estilos CSS. Vamos nuevamente:

1- Ir a Blogger.
2- Luego a Plantilla.
3- Y a Editar HTML
4- Integre el siguiente código antes de la etiqueta  <'/body'> sin las comillas.

<a href="#" alt="Facebook" target="_blank"><div class="social-facebook facebook-hover"> </div> </a><a href="#" alt="Twitter" target="_blank"><div class="social-twitter twitter-hover"> </div> </a><a href="#" alt="Google+" target="_blank"><div class="social-google google-hover"> </div> </a><a href="#" alt="Youtube" target="_blank"><div class="social-youtube youtube-hover"> </div> </a><a href="#" alt="Rss" target="_blank"><div class="social-rss rss-hover"> </div> </a>

5- Remplaza '#' por el url de la red social que te indique.

  Eso seria todo amigos.

1.  ¿Te gusto el tutorial? → Siguenos en nuestras redes sociales para más!. 
2. Pásate por la publicidad :).
3. Comentar es Agradecer.

read more

transiciones, sliders y slideshows

Buenas, ahora en este tutorial para empezar, este incluye transición vamos a crear algo similar a un slider de imágenes .

En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.

Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:

<div id="demoANIM2"> <div id="demoANIM2imagenes"> <img id="img_1" src="URL_IMAGEN1" class="visible" /> <img id="img_2" src="URL_IMAGEN2" class="novisible" /> <img id="img_3" src="URL_IMAGEN3" class="novisible" /> <-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) --> <img id="img_7" src="URL_IMAGEN7" class="novisible" /> </div> </div> <div id="demoANIM2links"> <a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a> <a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a> <a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a> <-- agregamos un enlace para cada una de las imágenes --> <a onclick="srcdemoANIM2(7);" href="javascript:void(0);">7</a> </div>

La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que queramos mostrar por defecto y class="novisible" en el resto de ellas.

Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:

<style> #demoANIM2 { /* es el DIV contenedor */ /* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */ height: 375px; width: 500px; margin: 0 auto; /* lo centro */ overflow: hidden; /* impido que se deborde */ position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */ } #demoANIM2imagenes img { /* las imágenes */ /* lo fijo arriba */ position:absolute; left: 0; top: 0; /* fuerzo a que las imágenes se vean todas iguales */ height: 375px; width: 500px; /* y le digo que cualquier cambio sea animado */ -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s.ease-in-out; -o-transition:all 1s.ease-in-out; transition:all 1s ease-in-out; } #demoANIM2imagenes img.visible { /* la imagen es visible */ opacity:1; filter: alpha(opacity=100); } #demoANIM2imagenes img.novisible { /* la imagen está oculta */ opacity:0; filter: alpha(opacity=0); } /* y le pongo un poc de estilo a los numeritos que sirven de enlace */ #demoANIM2links { border-bottom: 1px solid #345; margin: 0 auto; padding: 10px 0; text-align: center; width: 500px; } #demoANIM2links a { background-color: #345; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 4px #ABC inset; margin: 0 2px; padding: 4px 8px; } #demoANIM2links a:hover { box-shadow: 0 0 8px #ABC inset; color: #FFF; } </style>

Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:

<script> //<![CDATA[ // establezco cuál es la imagen visible inicial var imgvisible = "img_1"; function srcdemoANIM2(num) { // la imagen a ser mostrada var id = "img_" + num; var mostrar = document.getElementById(id); // la que ahora esta visible var actual = document.getElementById(imgvisible); // si son la misma no hago nada if(mostrar==actual) {return false;} // permutos su clase ocultando la visible y mostrando otra actual.className="novisible"; mostrar.className="visible"; // y guardo ese dato imgvisible = id; } //]]> </script>

En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.

1234567

1.  Y Listo! → ¿Te gusto? Síguenos en nuestras redes sociales. 
2. Si tienes dudas, comenta todas serán respondidas.

read more

C/ Carteles de texto flotantes con Hover

Buenas, en este tutorial que seria una continuación de esta entrada donde aprendimos a como añadir una caja flotante de texto, ahora aquí se tratara de como añadir un efecto hover al pasar el mouse, a petición por formulario de contacto.

Pues bien es sencillo, la etiqueta de este fue #fijo vamos a añadirle el hover de la siguiente manera: #fijo:hover { debe estar en el mismo <style> de la etiqueta.

Ahora vamos a complementar el hover y también a sumarle otro diseño a el fijo.

Si tienes el anterior borralo, este es el CSS.

#fijo { bottom: 20px; color: #FFF; font-size: 16px; padding: 0px 0px 17px 0px; position: fixed; left: 75%; text-align: center; text-shadow: 1px 1px 1px #000; width: 300px; z-index: 1; background-position: center; margin-left: auto; margin-right: auto; background: rgb(64, 72, 78); padding-bottom: 16px; padding-right: 0px; padding-left: 10px; border: 1px dashed #fff; } #fijo:hover { background: -webkit-gradient(linear,left bottom,left top,from(rgb(17, 20, 24)),to(rgb(11, 83, 119))) rgb(0, 0, 0); border: 1px solid rgb(5, 5, 5); -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; }



Ahora le podemos añadir una transición para que el efecto hover se aprecie de una manera mas llamativa, en este caso le incorpore un cambio de background 1s 2s, sustituye el hover anterior para colocar este:


#fijo:hover { background: -webkit-gradient(linear,left bottom,left top,from(rgb(17, 20, 24)),to(rgb(11, 83, 119))) rgb(0, 0, 0); border: 1px solid rgb(5, 5, 5); -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; transition-property: opacity; transition-property: width; transition-property: z-index; transition-property: opacity, width, z-index; transition-duration: 1s; transition-delay: 1s; transition: [property] [duration] [timing-function] [delay]; ease-out; transition: opacity 1s linear 1s; transition-property: background-color, width; transition-duration: 2s, 3s; transition-timing-function: linear; -webkit-transition-property: background-color, width; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear; -moz-transition-duration: 2s, 3s; -moz-transition-timing-function: linear; background: #090; width: 200px; } Ahora el HTML, para este recomiendo colocarlo en el cualquier parte de el sidebar. <div id="fijo"> <a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';"> <img src="URL_IMAGEN" /> </a> <p> ....... el contenido ....... </p> </div> Ya con esto finalizamos el tutorial de hoy recuerda, que para estar mejor informado repasa el tutorial anterior.
El resultado visible en la entrada, /yo le edite el color y la posición/ →.

1. ¿Te gusto? → Síguenos en nuestra redes sociales
2. Si tienes dudas, comenta todas serán respondidas.

read more

Tutorial

Buenas a todos, hoy con nuevo video de 'Como acelerar la carga de páginas un 100%' que estoy seguro que les sera útil ! Comparte con tus amigos este tutorial.

Suscribete, Like y Comenta. Gracias! (SLC):

read more

Botones de redes sociales con efecto expandible

Buenas!, ya con lo que podría ser un nuevo tag "redes sociales", en este tutorial como poner en nuestro blog una lista de botones sociales con efecto hover muy elegante y buenisimo.
El efecto hover trata de que cuando el cursor / mouse pase por la lista este se expande, no usa script, javascript ni jquery solo con puro CSS3 que sencillamente se puede modificar.
Considero a este con un widget de suma importancia, digo por el echo de tener vigente nuestras redes sociales para aumentar principalmente nuestro trafico.
Aquí podrás ver la demo, en la misma pagina:

• Síguenos en Facebook
• Síguenos en Twitter
• Síguenos en Google+
• Síguenos en Pinterest
• Suscribete vía Email

Los estilos están incorporado en un mismo código por lo que sencillamente podemos obtenerlos interceptándolo en cualquier lado, en este caso lo pegaremos en > Blogger > Diseño > Añadir un gadget > HTML/javascript y allí pega:


<style> #tbsose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbsose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbsose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbsose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuFOgbPagVtnMb07WYajz5sX8fleKG_kzYuKyvrOfQesGnB1yaLMZJthSAmbagkUAJH308uugMGK3FxlF1jKFRpbdOVsFUMarPjWsOlCsfRk-lpPBn3XM1vxrpcmmj6YPmIcyfkqR1Q8/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbsose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbsose .icon{overflow:hidden; color:#fafafa;} #tbsose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbsose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbsose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbsose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbsose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbsose li:hover .icon, .touch #tbsose li .icon{width:210px;} .touch #tbsose li .facebook, #tbsose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbsose li .twitter, #tbsose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbsose li .googleplus, #tbsose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbsose li .pinterest, #tbsose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbsose li .rss, #tbsose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbsose"> <li data-alt="Síguenos en Facebook"><a class="icon facebook" href="http://www.facebook.com/USUARIO-FACEBOOK" target='_blank'>Síguenos en Facebook</a></li> <li data-alt="Síguenos en Twitter"><a class="icon twitter" href="http://www.twitter.com/USUARIO-TWITTER">Síguenos en Twitter</a></li> <li data-alt="Síguenos en Google+"><a class="icon googleplus" href="https://plus.google.com/ID-GOOGLE+" target='_blank'>Síguenos en Google+</a></li> <li data-alt="Síguenos en Pinterest"><a class="icon pinterest" href="http://pinterest.com/USUARIO-PINTEREST" target='_blank'>Síguenos en Pinterest</a></li> <li data-alt="Suscribete vía Email"><a class="icon rss" href="http://feedburner.google.com/fb/a/mailverify?uri=USUARIO-FEEDBURNER" target='_blank'>Suscribete vía Email</a></li> </ul>
Con esto ya tendrás configurado e instalado este Gadget.

1. ¿Te gusto? → Síguenos en nuestra redes sociales
2. Si tienes dudas o agradecimiento, comenta.

read more