Pack de íconos en formato PNG y SWF

Wireframe Toolbar
	Contiene 1464 íconos de 16x16, 32x32 y 48x48, en formato PNG. descargar

La particularidad de este set es que incluye tambien 488 íconos en formato SWF tanto en su versión white como en su versión black.

Texto vertical

 Ejemplo:

Parque del Plata

- El Balneario "Parque del Plata" se encuentra situado a orillas del Río de la Plata, y pertenece al Departamento de Canelones, República Oriental del Uruguay, a unos 50 km al este de Montevideo.

- La belleza del lugar se acrecienta, porque sus playas son anchas con enormes dunas de arena fina y blanca, componen un ambiente natural característico de la costa de Canelones.

- Sus aguas son semi salinas, tranquilas, seguras y aptas para el disfrute de toda la familia.

- Es un balneario rodeado de pinos y eucaliptos.

- Otros de sus grandes atractivos es el arroyo Solís Chico, con un paseo muy pintoresco y natural. Muy adecuado para los deportes náuticos y la pesca, disfrutando de la paz con la familia y los amigos.

- Sin dudas Parque del Plata es uno de los balnearios más atractivos de la extensa costa de Canelones.

- Las características principal que define a Parque del Plata es la paz y tranquilidad que en él reinan, lo que lo cataloga como un balneario para todas las edades. A esto se suma que cuenta con todos los servicios necesarios que un balneario turístico internacional requiere para recibir visitantes de todas partes del mundo.

- Los principales servicios con que cuenta Parque del Plata son:

• Hotelería.
• Inmobiliarias para alquiler de casas, cabañas, bungalós y chalet.
• Camping.
• Sanatorios, policlínicas y emergencia médica.
• Clubes deportivos.
• Restaurantes.
• Paradores.
• Comercios en General.
• Supermercados muy económicos.
• Entretenimientos.
• Playa.
• Arroyo.
• Plazas.
• Internet.
• Transporte.
• Policía local.
• Salvamento.

- Y Todas las Comodidades para pasar unas vacaciones muy confortables y tranquilas en un ambiente familiar.

¿Cómo se hace...?

Ir a Diseño, Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:

.vertext-left{

/* Valores de la Caja */

width:25px;
margin-right:10px;
padding: 0 5px;
border:1px solid #66CCFF;

/* Valores del Texto */

text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:left;
}

.vertext-right{

/* Valores de la Caja */

width:25px;
margin-left:10px;
padding: 0 5px;
border:1px solid #66CCFF;

/* Valores del Texto */

text-align: center;
color:#66CCFF;
font-size:40px;
line-height:45px;
float:right;
}

En la entradas poner el siguiente código:

Para la izquierda:

<div class="vertext-left" >Texto&ensp;left</div>
---ACÁ EL RESTO DEL TEXTO ---

Para la derecha:

<div class="vertext-right" >Texto&ensp;right</div>
---ACÁ EL RESTO DEL TEXTO ---

Para crear la separación entre las palabras, le agregamos &ensp;

Modificamos el código CSS para adaptar al diseño de su blog: borde de la caja, color del texto, tamaño del texto, ancho de la caja, separación del texto, margen y padding.

Si queremos podemos poner el estilo dentro del div cada ves que lo queramos utilizar:

<div style="width:25px;margin-right:10px;padding: 0 5px;border:1px solid #66CCFF;text-align: center;color:#66CCFF;font-size:40px;line-height:45px;float:left;" >Texto&ensp;left</div>
---ACÁ EL RESTO DEL TEXTO ---

El ejemplo es para la izquierda, de la misma forma sería para la derecha, cambiando el estilo.

Guía de referencia CSS

Acelerar la carga del blog con LazyLoad

Lazyload es un plugin basado en jQuery el cual permite disminuir los tiempos de carga del blog evitando que carguen todas las imágenes del blog de golpe. Lo que hace este plugin es mostrar las imágenes con un efecto fade in al bajar por la página.
¿Cómo obtener este plugin en Blogger?

Primero, debemos instalar jQuery, en el caso de ya estar instalado, omitir este paso.

Vamos a ''Diseño/Edición HTML'' y buscamos la siguiente sección:

</head>

Encima de esta, pegamos el script de jQuery:

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

Guardamos los cambios y listo:

Una vez instalado jQuery, instalamos LazyLoad:

En ''Diseño/Edición HTML'' buscamos la misma línea:

</head>

Sobre ésta, pegamos el script siguiente:

<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/LazyLoad.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
jQuery(&quot;.post img&quot;).lazyload({
effect:&quot;fadeIn&quot;,
});
});
</script>

Guardamos los cambios y listo:

 

¿Por qué mostrar sólo el resumen de los post en la página principal?

El uso de un resumen de los posts en la página principal es algo que puede ser muy beneficioso al momento de publicar, en este artículo veremos las 3 principales ventajas de este resúmen.

Ventajas:

1. Aumento de visitas:

Si tenemos desactivada esta función en nuestro blog, cuando un usuario entre a la página principal podrá leer nuestras entradas desde ahí, esto es perjudicial para nuestras visitas a las entradas, si el usuario puede leer la página completa desde la página principal, no entrará a la entrada, por lo que la visita a ese post será nula. Si tenemos activada esta función en nuestro blog, obligaremos al lector a entrar a ver el artículo, por lo que eso significarían visitas a las entradas.

2. Más comentarios:

Cuando algún usuario visita nuestra página principal, no aparecerá el formulario de comentarios, si activamos la función en el blog, el usuario entrará a la entrada, por lo que las posibilidades de obtener su comentario serán mayores.

3. Orden al blog:

Esto puede significar en el término estético una mejora considerable, ya que cada entrada se verá limitada y sólo se mostrará una pequeña introducción.

¿Ves? Cuando activas esta función en Blogger permites un número mayor de visitas en las entradas y las posibilidades de obtener comentarios aumentan.

Si estás interesado en utilizar esta función en Blogger, puedes revisar este artículo.

Insertar avatar a los comentarios anónimos en Blogger

Cuando algún usuario escribe de forma anónima, se muestra un ícono o simplemente no aparece nada en la zona del avatar de los comentarios.

Con este sencillo tutorial podremos agregar una imagen a todos los comentarios anónimos y a los comentarios con identificación mediante nombre y URL.

¿Cómo agregar un avatar a los usuarios anónimos en Blogger?

Primero, vamos a ''Diseño | Edición HTML'' en donde buscamos la zona de nuestro CSS:

]]></b:skin>

Sobre este código, deberás pegar el siguiente:

/* avatar comentarios anónimos
----------------------------------------------- */
#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
float: left;
height: 49px;
position: static;
width: 49px;
}
#comments-block .avatar-image-container img {
background:#234 url(https://lh6.googleusercontent.com/-y3a8mvMp3Zc/TYgvTnMzodI/AAAAAAAAAis/C4ZMS7S5RG4/s1600/default-image+%2528Custom%2529.png) no-repeat 50% 50%;
border: 1px solid #456;
display: block;
float: none;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
background: #234 url(https://lh6.googleusercontent.com/-y3a8mvMp3Zc/TYgvTnMzodI/AAAAAAAAAis/C4ZMS7S5RG4/s1600/default-image+%2528Custom%2529.png) no-repeat 50% 50%;
border: 1px solid #456;
}
#comments-block .avatar-image-container.avatar-stock img {
display: none;
}
img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}

Guardamos los cambios y listo:

Por defecto se mostrará este avatar:

Para cambiarlo reemplaza las URLs en rojo por la dirección de la imagen.

Actualizar Firefox de manera segura

Actualizar un navegador es fácil, basta hacer click cuando nos lo indican pero, cuando se trata de un cambio de versiones importante, lo mejor es hacerlo de manera limpia, borrando todo lo posible y de ese modo, evitar que se siga juntando basura e incluso, eliminar esos errores que se van acumulando con el tiempo. Claro que, antes de borrar nada, lo mejor es estar absolutamente seguros que hemos guardado todos los datos que queremos preservar.

¿Por qué actualizar Firefox e instalar la versión 4? Porque eso es lo que hay que hacer siempre, no es un tema de consumismo sino de cuidar las herramientas que usamos y, en este caso, sumarnos a una serie de nuevas características que luego, podremos aplicar en nuestros sitios.

TRANSICIONES

Básicamente, hay tres tipos de datos que normalmente queremos mantener: los marcadores, los nombres de usuario y contraseñas de los distintos servicios y las extensiones.

Si estamos utilizando Firefox Sync para sincronizar nuestra información, no necesitaremos agregar la extensión ya que Firefox 4 lo tiene integrado pero, tengamos a mano los datos de la cuenta; nombre, contraseña y clave. Si no los recordamos, puede irse a Herramientas | Opciones | Seguridad y hacer click en Contraseñas Guardadas; nos mostrará la lista y con otro click en Mostrar Contraseñas las tendremos visibles; allí está todo.

Sea com sea, los marcadores también pueden exportarse desde el menú Marcadores y se guardan como un archivo llamado bookmarks.html que luego, con el proceso inverso, podemos importar. No pasa lo mismo con las contraseñas, para eso necesitaríamos alguna extensión como Password Exporter.

Las extensiones podremos instalarlas otra vez así que basta saber cuáles son las que usaremos pero, algunas de ellas tienen datos así que convendría repasarlas o incluso, hacer una copia de nuestro Perfil que en Windows, se encuentra en:
C:\Documents and Settings\nombreUsuario\Datos de programa\Mozilla\Firefox\Profiles\

Por ejemplo, allí veremos una carpeta con los scripts de Greasemonkey llamada gm_scripts, o los datos de otras extensiones en archivos de extensión .sqlite como Stylish (stylish.sqlite) o Scribefire (scribefire.sqlite).

¿Listo? Repasamos, nos aseguramos de tener todo y ahora sí, desinstalamos el navegador indicando que se borre toda la información y datos personales guardados.

Luego, instalamos la nueva versión que, como siempre, está disponible en los repositorios del mismo Mozilla: Firefox 4.0 para Windows, Firefox 4.0. para Mac, Firefox 4.0 para Linux.

Para quienes quieran probar antes, en Blogtecnia podemos encontrar la versión portable de Firefox 4 que no requiere instalación.

Si todo esto resulta complicado, una alternativa es instalar y ejecutar MozBackup, un programa externo muy liviano que nos permitirá hacer una copia de seguridad del perfil de cualquier producto de Mozilla, incluyendo configuración, marcadores, historial, extensiones, contraseñas guardadas, cookies, formularios, listas de descarga y los archivos de datos de las diferentes extensiones.

Header con sombra

A veces no se trata de "esto veo esto quiero" sino de tomar ideas y aplicarlas a nuestro blog,en definitiva esa es la finalidad cuando compartimos algo.

En este caso no sé a quien agradecer la idea porque la he visto en varias plantillas, por eso el agradecimiento va para BTemplates que es el primer sitio donde vi Archel.

Como se puede apreciar en esa plantilla se ha personalizado el crosscol con una imagen que forma la sombra inferior, la idea es la misma pero aplicada a la cabecera (header)

Para los ejemplos he utilizado la plantilla Minima de Blogger que es la que mejor se presta a ser personalizada, digo esto porque con las nuevas plantillas y las creadas con el diseñador es posible que no encontremos similitud a la hora de buscar algo. Es por eso que siempre digo que si nuestra idea es personalizar la plantilla y más tarde ir aplicando ideas que vamos tomando aquí y allá siempre es mejor utilizar la Minima.

Los estilos para el header o cabecera vienen definidos de esta forma Ver código

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {

color:$pagetitlecolor;

}

#header .description {

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Cada vez utilizamos mayor resolución de pantalla y es por eso que decidimos ensanchar nuestro blog, en el ejemplo el ancho del header de 660px lo modifiqué a 990px lógicamente si nuestro header mide ese ancho en outer-wrapper tendríamos la misma o superior anchura porque es el bloque contenedor de todo el blog.

Al hacer esto también tendremos más espacio para las entradas main-wrapper y la columna sidebar-wrapper esos 330px que hemos aumentado los podemos distribuir entre main-wrapper y sidebar-wrapper queda a nuestro criterio la forma de distribuirlos.

Es muy probable que no tengamos las mismas medidas en nuestra plantilla y nos preguntemos entonces la forma de añadir esa imagen de sombra respetando las medidas que tenemos.

Tenemos la opción de crear una nueva imagen o modificar la que tenemos y adecuar las medidas a nuestro blog, para eso tendremos en cuenta que la imagen con sombra mide 957 x 22 y debe medir de ancho 33px menos de lo que tenemos en header-wrapper. Es decir que si nuestro blog tiene en header-wrapper 800px nuestra imagen debe medir 767px de ancho y 22px de alto.

¿Complicado? no lo es tanto si vamos paso a paso ¿qué tal si antes lo hacemos en ese blog de pruebas?

Descargamos la imagen y la subimos a Blogger o Picasa,la url de la imagen la utilizaremos después para añadirla en nuestra plantilla.

En edición de HTML y sin expandir plantilla buscamos los estilos mencionados anteriormente para el header y sustituimos sólo los que vemos a continuación que son
#header-wrapper - #header-inner - #header img

#header-wrapper {

background:url(url-imagen-sombra-png) no-repeat center bottom;

width:990px;

height:250px;

padding-bottom:27px;

overflow:hidden;

margin-bottom:30px;

}

#header-inner {

border: 1px solid #000000;

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header img {

height: auto;

width: 960px;

}

Si no vemos el título, recordemos que cuando subimos la imagen del banner con el gadget de cabecera debemos escoger la opción "Detrás del título y la descripción" el resultado sería algo así:

Aún queda un último paso y es conseguir que en Explorer se visualice la sombra ubicada correctamente y JMiur me facilitó la solución para corregir esas diferencias, se trata de condicionar las hojas de estilo y añadir antes de </head>

<!--[if IE]>

<style>

#header-wrapper {

background:url(url-imagen-png) no-repeat center bottom;

width:990px;

height:272px;

padding-bottom:0;

overflow:hidden;

margin-bottom:30px;

}

</style>

<![endif]-->

Y ahora si, con eso es suficiente.