viernes, 7 de junio de 2013

Efecto De Cargar Pagina En Blog De Blogger

By andante77 4:57 p.m. cargar, efecto blog, efecto blogger, pagina, super trucos, trucos, widgets 1 comment

Esta vez les introducire al super truco para tu blog de blogger.Toma alrededor de 2.3 segundos para una pagina cargar completamente.Pero te gustaria añadir un truco o efecto a estos 2.3 segundos? Si es asi entonces este simple tutorial es para ti.Este truco o efecto funciona con jquery chequea el ejemplo en enlace de abajo y te daras cuenta como funciona este truco o efecto al subir una nueva pagina o blog.

Ejemplo:

Solo siga estos pasos para anadirlo a tu blog.

1. Entra en tu cuenta de blogger Ve a Diseno >> Editar HTML

2.Encuentra esta etiqueta </head> usando Ctrl+F

3.Pega el codigo de abajo antes de la etiqueta </head>

<style>
/*  bloggertrix.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Vz1Puji4SEOfyrMP9SzkcvEzxmvOL-7WBSI-NaTd9xao3ErQqJ48tCMrARCo5bNceDUymxyQbifelHKoI3u77wmtuQQ2Y7CW39T4_pDmwCYBloUvEJa7qPRKeMwqJ5vjEAXCrpEp6Y6G/s1600/Bloggertrix-loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

4. Ahora encuentra el siguiente codigo <body> usando Ctrl+F
Nota:si no la encuentras pega el codigo debajo etiqueta </head>

5. Pega 1 de los codigos de abajo despues de etiqueta <body>

* Anade este codigo para mostrar este efecto para todas las paginas del blog.

<div id='md-loading'><div 
id='md-progress-bar'></div><div 
id='md-loader'>Loading...</div></div>

Anade este codigo para mostrar este efecto solamente en la Pagina Principal.

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

 <div id='md-loading'><div  
id='md-progress-bar'></div><div  
id='md-loader'>Loading...</div></div></b:if>

7. Guarda tu Plantilla Ahora.
y tu truco efecto esta listo.