Agregar secuencias de comandos QueryLoader ('LazyLoad') Para Blogger y personalizarlo.

¿Qué el QueryLoader (LazyLoad).

QueryLoader es un espacio en blanco negro (se puede cambiar) la pantalla que cubre su blog hasta que todo el contenido cargado, lo que significa que sus visitantes no verán la carga real de su blog, en lugar de eso, aparecerá una página con una barra de carga y porcentaje de la carga del blog, es construir con j-consulta y CSS. fácil de aplicar a tu blog de Blogger, y poder personalizar.

Paso 1, añadiendo los archivos de Jave.

En este paso vamos a agregar un archivos de secuencias de comandos a la plantilla de blogger.
Por favor, vaya a su panel de control>>> Diseño> Edición de HTML , y por favor, encontrar el código siguiente,

</ Head>

Y exactamente antes de que se agregue el siguiente código

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/> <script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

Paso 2, la adición de los Códigos de Jave.

Y en la misma página, por favor, encontrar el código siguiente,

</ Body>

Y antes de que se agregue el siguiente código,

<script> QueryLoader.selectorPreload = &quot;body&quot;; QueryLoader.init(); </script>

Paso 3, la adición de los Códigos de Css.

ahora en la misma página también encontrarás este código,

]]></b:skin>

Y antes de ello, agregue este código,

.QOverlay { background-color: #000000; z-index: 9999; } .QLoader { background-color: #CCCCCC; height: 1px; } .QAmt { color:#FF530D; font-size:50px; font-weight:bold; line-height:50px; height:50px; width:100px; margin:-60px 0 0 -50px; }

Ahora Haga clic en Guardar plantilla
Y tu ahora tienen la secuencia de comandos se instala y listo vista previa, haga clic o ver su blog para ver la secuencia de comandos en acción.

Paso adicional, Personalizar los colores.

Ahora bien, este es un paso adicional y se puede hacer o no, como quieras, 

Si desea cambiar los colores, hay que cambiar los valores en el código CSS, "paso 3"
Por favor, mire la siguiente imagen para saber qué lo que debe cambiar para conseguir su propio estilo.

Si usted pregunta acerca de cómo obtener su código de colores propios, yo creo que deberías echar un vistazo a nuestro increíble herramienta de códigos de color aquí .

Demo, créditos y archivos.

Este script originalmente diseñado por gayadesign.com , Para una demostración de este script por favor haga clic aquí ,
En caso de que quería alojar el archivo en el paso 2 en su propio servidor o cualquier otro lugar, puede descargarlo aquí Descargar

Posted in: Tutoriales