En este tutorial te mostrare el super truco para añadir el efecto de carga de la pagina.Sitios reconocidos como Facebook, Google, Blogger tiene sus propio efecto de carga cuando visitamos estos sitios este toma su tiempo en cargar y mientras tanto nos muestra el efecto de carga.
Pues en esta ocasion te dejare un efecto dinamico y profesional como el que utiliza Blogger.Para ver ejemplo ve a Demostracion
Para Añadir Este Efecto Dinamico De Carga de Pagina a Blogger
1.Entra en tu cuenta de blogger
2.Ve A Plantilla y escoje Editar Html
3.Busca la siguiente Etiqueta </head>
4.Copia y pega el codigo de Abajo Antes de etiqueta </head>
<style>
/* Blogger Dynamic Style Page Loading Effect By www.fblatest.in */
#fb-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsHtQQrORdivQox2YYdl9NJ_xJCNQwAfACZ8xWzGSxXUw3-QJHzK-hmaZZO5-_E7wUuF2cxV-UPWpl0Ujp9TKjwEwWHmq_a0MqJqZUhb8N6-CDWBYGbe1elxm8mXG7AfIAuVmalufCShR/s1600/index.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.FB #fb-loading { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#fb-progress-bar {
position: absolute;
top: 0; left: 0;
background: #FF6600;
opacity: 0.8;
width: 0;
height: 18px;
}
#fb-loader {
height: 100%;
display: none;
}
</style>
<script>
(function($){
$("html").removeClass("FB");
$("#header").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#fb-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#fb-loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
/* Blogger Dynamic Style Page Loading Effect By www.fblatest.in */
#fb-loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsHtQQrORdivQox2YYdl9NJ_xJCNQwAfACZ8xWzGSxXUw3-QJHzK-hmaZZO5-_E7wUuF2cxV-UPWpl0Ujp9TKjwEwWHmq_a0MqJqZUhb8N6-CDWBYGbe1elxm8mXG7AfIAuVmalufCShR/s1600/index.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.FB #fb-loading { display: none; }
@media only screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#fb-progress-bar {
position: absolute;
top: 0; left: 0;
background: #FF6600;
opacity: 0.8;
width: 0;
height: 18px;
}
#fb-loader {
height: 100%;
display: none;
}
</style>
<script>
(function($){
$("html").removeClass("FB");
$("#header").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#fb-progress-bar").stop().animate({ width: "75%" },1500) });
$(window).load(function(){
$("#fb-progress-bar").stop().animate({ width: "100%" },600,function(){
$("#fb-loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
5.Ahora busca la etiqueta< body>
6.Copia y pega el codigo de abajo despues de la etiqueta < body>
<div id='fb-loading'><div
id='fb-progress-bar'></div><div
id='fb-loader'>Loading...</div></div>
7.Guarda ahora tu plantilla y finalizado.
0 comentarios:
Publicar un comentario