Flipboard Style Social Widget

Conectate Con Nosotros

• 
• 
• 
• 
• 

Background Deslizable Con JQuery Para Blog De Blogger

Interesante efecto con Jquery como insertar un background o fondo a tu pagina web que se desliza constantemente anade animacion y atrae a tus vistantes.Solo con unos simples escritos de Jquery.

1.Entra a tu cuenta de blogger dashboard--> Diseno- -> Editar HTML
2.Busca la eyiqueta en tu plantilla </head> .
3.Copia el cidgo de abajo ay pegalo antes de es </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

 .
4.Ahora busca en tu plantilla este codigo :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Nota:el codigo de arriba puede ser diferente en tu plantilla.Pero la parte importante es  body { .
5.Reemplace el codigo de arriba con el codigo de abajo:

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVoWHFUPB2VeH2ZV1Gx8lwBVE5PSCFpu3hArG_A0e3IQVzTvBtkkG090T3zW1y8wQk8SiTSeHBk2WqCRzaoPmRtDwLsRqT-QAuCO1qA1GXOBtWWxwo4HzqlrsS_T5d_y2ZZuscZUJ44Wc/);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Nota: Puedes usar una imagen que sea mas oportuna en lugar de la imagen de arriba.
6.Click guardar plantilla y listo.

Simple Dezlizador Con JQuery Simple

• 
• 
• 
• 
• 

- See more at: http://www.spiceupyourblog.com/2011/06/blogger-tip-jquery-featured-slider.html#sthash.MIlzpHUO.dpuf