jueves, 14 de marzo de 2013

Personalizar bloques entrecomillados, bombilla intermitente para Blogger

Este tutorial realmente le permitirá crear bloques entrecomillados impresionante y atractivo para sus puestos de blogger o sitios web. Estos bloques entrecomillados cambiará de color cuando el cursor del ratón se asoma sobre ella.  Pero este efecto bloques entrecomillados es excepcional! Sólo echar un vistazo de un blockquote siguiente ejemplo.

 
Interesante, ¿no? Ahora vamos a aprender cómo añadir efectos similares como el efecto bombilla parpadea arriba.

Añadir El Blockquote bombilla intermitente para Blogger

Esta blockquote se puede añadir en la forma similar a como se explica en mis mensajes earliar. Si usted es nuevo a continuación, lea esta parte de mi post anterior -> Agregar y personalizar Blockquote En Blogger
El código CSS que se inserta justo por encima de ]]></b:skin> es esto,

blockquote {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5enN3yNAiJ9rlZvGnqovwPEMix3B_3xgzFcXV5VhdNwmMtg7UBZpgGsW3C_9teA3QkoJpP8U3MLM3Rkezw73QnYY01bekJjA1dBRZkWBRo0FSrvr03JjnFti1mdacVEa7zTwd8I2mses/s1600/bulb-off.gif ) no-repeat right bottom ;
margin: 0 20px;
padding: 20px 70px 20px 20px;
color:#595959;
font: bold 0.9em "comic sans ms", "Times New Roman", Times, serif;
border:1px solid #DDD;
}

blockquote:hover {
background: #000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5chfEYPltUuXk0B81T118SXrou4jfa5O5nDpSQQ74Qu0hNMVs7K1ZDWhSlaPMeZe4HUUDrqbJahxQpIvehQkr3Up155f0ze02wJyNOJ5zGJvprxMlOByXpdmMNcGqozagCfuU-i0KWPs/s1600/bulb-on.gif ) no-repeat right bottom ;
color:#E0E089;
}


blockquote p {
margin: 0;
padding-top:10px;
}


La segunda imagen en el enlace rojo aparece al pasar el ratón estacionario y la segunda imagen de enlace verde aparece cuando el ratón se mueve fuera de los bloques entrecomillados

Reducir el tiempo de carga Blog, 12 Consejos útiles



Casi todos los blogger novato falla cuando se trata de reducir el tiempo de carga de blog. La mayoría de los tutoriales que están disponibles en la reducción del tiempo necesario para que un sitio web para cargar son a menudo poco clara o incompleta. Decidimos compartir nuestra forma de resolver este problema. A continuación se presentan 12 consejos muy interesantes e importantes para disminuir el tiempo de carga de sus blogs en casi un 90%.
  1. Enlace a todas las imágenes dentro de su plantilla de Blogger

    Yo compartimos un dato importante sobre la creación de una mañana de copia de seguridad de imagen en Blogger y luego enlazar a todas las imágenes desde allí. La mayoría de ustedes utilizan plantillas que no están oficial mente cedidas por Blogger. Estas plantillas contienen con frecuencia imágenes que se guardan en servicios como tinypic o photobucket . Cuando tu blog carga el navegador tiene que conectar a todos los servidores que conectan a las imágenes, como resultado conduce a un retraso enorme en el tiempo de carga de tu blog. Lo que debes hacer es reemplazar todas las imágenes de ese tipo con los que ha guardado en el interior de blogger como se explica en el post anterior . La ventaja de hacerlo así será esto que el navegador tendrá que conectar sólo a blogger al cargar las imágenes. Así ahorra tiempo.
  2. Guardar todas las imágenes en formato GIF o PNG

    GIF es sinónimo de "Graphics Interchange Format" y significa "PNG Portable Network Graphics" Ambos formatos están bien comprimidos, de menor tamaño y ampliamente respaldada por todos los navegadores. Pero si el tamaño se refiere PNG comprime mucho mejor que GIF. En los casos típicos de hasta un 5-25%. Hay algunos problemas con la transparencia PNG en IE6 IE7 pero ya se utiliza ampliamente en estos días, la transparencia es ni más un problema. El uso de cualquiera de estos formatos de imagen se reducirá enormemente el tiempo de carga de sus blogs en un 60%, es decir 70-90KB El tamaño es aproximado por mi blog y verdadero tamaño depende del número de imágenes que se utilizan.
  3. Dar dimensiones propias imágenes

    Dar a cada imagen una anchura y una altura hará que sea fácil para el navegador para cargar la imagen rápidamente. Siempre disminuir el tamaño de una imagen si el tamaño original es mayor. El código HTML generales para una imagen se ve como la siguiente,
    <img width="" height="" src="URL De Image" />
    La anchura y la altura se requiere un valor en píxeles. Un píxel es igual a un punto en la pantalla. Una imagen a tamaño completo en mi blog tendrá una width = "590px" y la altura puede ser tan largo como quiera. 590px casi igual a la anchura de mis posts. Espero que esto te da una idea sobre la forma de elegir los valores de anchura y altura para sus imágenes. Navegadores resulta fácil cargar imágenes cuyas dimensiones se especifican. Asegúrese de hacer su hábito para especificar un tamaño adecuado para sus imágenes. Si utiliza Windows Live Writer tu vida será mucho fácil.
  4. No utilice una imagen como fondo

    Si está utilizando cualquier imagen como fondo y luego amablemente quitarlo. Una imagen de fondo se repite horizontal y vertical mente y es responsable de un 50% el tiempo de carga lento. Sólo tienes que quitar y ver la diferencia. Para eliminar una imagen de fondo simplemente encontrar este código CSS dentro de su plantilla, (Consejo: - Está ubicado justo en la parte superior de tu blog Simplemente busque cuerpo.)

    body {background: # 7AA1C3 url (http://xyz.com/blabla.jpg);

    ancho: 980px;

    color: # 333;

    font-size: 14px;

    font-family: Georgia;

    margin: 0 auto 0;

    padding: 0;}
    Este código tendrá un aspecto diferente en su plantilla, pero usted debe preocuparse sólo con el texto negro en negrita. Sólo tiene que eliminar url (http://xyz.com/blabla.jpg) y guardar la plantilla. Da un color simple para su fondo. # 7AA1C3 refiere al color de fondo. Puede cambiarlo usando mi carta de color hexadecimal
  5. Guardar todo JavaScript Dentro de Blogger

    ¿Por qué debería usted se conecta a sitios externos para almacenar su código JavaScript, mientras que fácilmente se puede guardar en Blogger! Guardar todos los códigos de JavaScript dentro de sus plantillas justo por encima de </ head> utilizando el código de abajo,




    <script type='text/javascript'>

    / / <! [CDATA [

    Cómo pegar el código JavaScript aquí

    / /]]>

    </ Script> El texto en negrita es donde hay que pegar el código JavaScript que se utiliza en la plantilla mediante la vinculación a un sitio externo.
    Para encontrar una URL que enlaza con JavaScript sitio externo, la búsqueda de Messenger type='text/javascript'> dentro de su plantilla (Asegúrese de activar la opción "Expandir plantillas de artilugios " caja en la esquina superior derecha). Una vez que encuentre esa vinculación, abra el vínculo en el navegador. Usted verá gran trozo de texto complejo en la ventana y que es su código JavaScript. Simplemente copia y pega el código compartido anteriormente. Vuelva a colocar todos los códigos de JavaScript dentro de su plantilla con el código anterior, asegurándose de que ha extraído el código del enlace y pegar en el código anterior.
  6. Aceptar siempre la calidad y plantillas blogger con secuencias de comandos

    La mayoría de los bloggers gran error hacer es cargar cualquier plantilla que les atrae. La mayoría de los no oficiales plantillas de Blogger que están disponibles en la blogosfera menudo son creadas por personas que no son conscientes con el uso adecuado de HTML y JavaScript. Una plantilla inadecuada guión con etiquetas vacías, etiquetas deseadas y JavaScript roto a menudo hacen trabajo duro para los motores de búsqueda para rastrear el contenido de su blog. Otros navegadores también pierda su valioso tiempo en leer guiones rotos. Si un JavaScript no está bien codificadas o optimizado, puede causar un PC lectores para colgar! Imagínese pasando esto a los lectores para acceder a su blog. En las plantillas de uso a corto de las autoridades que tienen el respeto en la blogosfera y de aquellos que son profesionales certificados.
  7. Utilice anuncios Limitadamente

    Si son los blogs sólo para recibir el pago por mostrar grandes trozos de anuncios de varias fuentes de lo que son, sin duda haciendo mal uso de esta hermosa experiencia de blogging. No haga un blog de un mercado de pescado. Mostrar sólo unos cuantos anuncios en las principales áreas de tu blog. Si lo hace así, mantendrá su interfaz de blog limpio y fácil de navegar y se arrastró poder. Cada complemento que se muestra utiliza JavaScript que prolonga el tiempo de carga de página. Asegúrese de limitar todos sus anuncios a tres.
  8. No enlaces Directorios a blog

    Es una percepción errónea de que la vinculación de varios directorios de blogs te traerá tráfico inmenso. Cuando se vincula a varios directorios de blogs en su sitio web, motores de búsqueda confianza suelto en su blog debido a la excesiva vinculación de los navegadores tienen dificultades para navegar por las imágenes pequeñas que enlace al blog de directorios. Todos los directorios de blogs pido que enlacen con un pequeño enlace de imagen en sus blogs, pero al hacerlo sólo dañará el éxito de su blog. Yo sólo creo en BlogCatalog y MyBlogLog como autoridades competentes para esperar tráfico de. Si realmente quieres una cierta cantidad de tráfico de directorios de blogs y luego confiar sólo en BlogCatalog y MyBlogLog . Por otra parte acepte sólo el pequeño trozo de etiqueta meta de ellos en lugar ligarse a ellos.
  9. No utilizar widgets de directorios de blogs que utilizan imágenes

    Me refiero al widget famoso espectadores reciente BlogCatalog y MyBlogLog . Estos widgets uso de JavaScript que enlazan a estos sitios y también mostrar imágenes que se suman al tiempo de carga de tu blog. Puedo utilizar etiquetas meta proporcionadas por ellos en vez usar sus widgets. Esto ayuda a reducir el tiempo necesario para que mis cargar las páginas. Si usted realmente desea utilizar estos widgets a continuación, intenta mostrar algunas imágenes sobre ellos, tan bajo como 10.
  10. Resuma sus mensajes utiliza una conexión en Leer más

    Mensajes de cuerpo entero en la página principal es una de las mayores razones por las que un blog tiene tiempo de carga. Resumir todos tus mensajes usando el enlace de lectura o continuar leyendo Para saber cómo agregar, leer este post-> Leer Mas
  11. Mostrar sólo cuatro o cinco post en la Página de inicio

    No mostrar más de 4-5 mensajes en la página principal. Si lo hace, mantener a sus lectores mensajes ocupado diferentes de lectura y también le resultará interesante ver qué tan rápido la página de inicio cargas.
  12. Elimine Enlaces externos

    No utilice aparatos que son de sitios externos que no sean blogger. Deshágase de los contadores de estadísticas y el uso de Google Analytics . No guarde las imágenes en otros servicios, pero Blogger. Guarde todo el código JavaScript dentro de blogger como se discutió anteriormente . No agregue enlaces de directorios de blogs, no traen tráfico con excepción de BlogCatalog y MyBlogLog.

Principales Condicionales de Blogger



Todas estas técnicas de mostrar los elementos de cierta forma sólo en determinadas páginas se logra con los códigos condicionales de Blogger.
Las condicionales son códigos que indican dónde debe ejecutarse algo y dónde no. Es decir, condiciona una orden.
De esta forma podemos hacer que un script, un video, una imagen, un gadget, un mensaje, un truco, estilos, etc. se muestre sólo en la portada del blog, o sólo en las entradas, o sólo en las páginas estáticas, o sólo en las listas de archivos, o en una entrada específica.

Usarlos es sencillo, sólo hay poner al inicio del elemento que queremos condicionar el código que específica y condiciona dónde se mostrará, y al final de este el cierre de la etiqueta.

Mostrar /ejecutar un elemento sólo en la portada del blog


<b:if cond='data:blog.url == data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las entradas individuales


<b:if cond='data:blog.pageType == &quot;item&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas del archivo del blog


<b:if cond='data:blog.pageType == &quot;archive&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento sólo en las páginas estáticas


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en una entrada específica o etiqueta específica


<b:if cond='data:blog.url == &quot;URL de la entrada o etiqueta&quot;'>
...Aquí va el código del elemento...
</b:if>


Por lo contrario también podemos especificar que se muestre en todas partes excepto en un lugar específico.

Mostrar /ejecutar un elemento en todas las páginas MENOS en la portada del blog


<b:if cond='data:blog.url != data:blog.homepageUrl'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las entradas individuales


<b:if cond='data:blog.pageType != &quot;item&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas del archivo del blog


<b:if cond='data:blog.pageType != &quot;archive&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en las páginas estáticas


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
...Aquí va el código del elemento...
</b:if>

Mostrar /ejecutar un elemento en todas las páginas MENOS en una entrada específica o etiqueta específica


<b:if cond='data:blog.url != &quot;URL de la entrada o etiqueta&quot;'>
...Aquí va el código del elemento...
</b:if>

En donde dice ...Aquí va el código del elemento... se agrega lo que se desea condicionar, por ejemplo el script, el código del truco, o los estilos.
Por ejemplo, para que la sidebar tenga un color de fondo diferente sólo en la portada del blog se usaría este código antes de </head> lo siguiente:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#sidebar-wrapper {
background: #0080FF;
}
</style>
</b:if>

Eso haría que la barra lateral tenga un color de fondo azul en la portada pero cuando se esté en cualquier otra página cambie al color normal que tiene la plantilla.

De esta forma condicionamos la forma que se verá el blog según la página donde se esté.
Como mencioné antes se puede hacer para un sin fin de cosas, desde un simple estilo hasta condicionar todo un contenedor como la sidebar.

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...