Hospeda las imagenes de tu Blog en tu Blogger

Articulo sacado de

El lugar más seguro para hospedar las imágenes de tu plantilla blogger

Uno de los principales problemas de las plantillas blogger es cuando las imágenes fallan y no se visualizan o son sustituidas por mensajes poco agradables. El problema se debe a que en muchos de los casos las imágenes de esas plantillas se encuentran hospedadas en servicios gratuitos (ej: imageshack, photobucket, googlepages, entre otros.) que limitan el número de veces que pueden mostrar (ancho de banda).

Por lo tanto lo ideal es cambiar el hospedaje a un lugar seguro. ¿Cual?, pues el mismo Blogger, el cual no pone un limite (o es muy alto) al ancho de banda de cada imagen.Para obtener las imágenes que usa tu plantilla puedes hacer lo siguiente:

1. Entra a la pestaña “Diseño” y posteriormente a la opción de “Edición de HTML”.


2. Busca todas las direcciones (URLs) de las imágenes, todas serán del tipo:
   

   http://servicio.com/etc/nombre-imagen.jpg

   
   

   Y terminaran en jpg, png, gif u otra extensión de imagen. Seguramente las encuentres entre códigos como …url(url-de-imagen-aquí)… , así que habrá que buscar con detenimiento. Puede pasar que al buscar las urls de las imágenes en el código de las plantillas estas ya estén en Blogger, para tal caso no hay necesidad de hacer ningún.
   
   
   

3. Entra a cada URL y guarda la imagen en un carpeta con el nombre de tu plantilla.

Ahora, para subir imágenes a blogger y poder usarlas en tus plantillas puedes seguir estos sencillos pasos.

1. Entra al editor de entradas (Creación de entradas > Crear).


2. Da clic al icono para subir imágenes normalmente y sube todas las que componen tu plantilla.


3. Al terminar de subirlas y regresar al editor, el código resultante es más o menos como sigue:
   

   <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAJ5RcL5Fjsgkg6dBdGE-3nP8w0zFR7NNKNpD59Ys5Cyn3aTmYGHv0zN3ilnieOqqdL3SPKiKXbzpWtie381pXC3vU8P8VojQ4oUy8krb0l1xMWGL32YD3Wnl2C8qzuhIIqFMc1pAx2d3/s1600-h/footerpg5.jpg"><img style="cursor:pointer; cursor:hand;"
   src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAJ5RcL5Fjsgkg6dBdGE-3nP8w0zFR7NNKNpD59Ys5Cyn3aTmYGHv0zN3ilnieOqqdL3SPKiKXbzpWtie381pXC3vU8P8VojQ4oUy8krb0l1xMWGL32YD3Wnl2C8qzuhIIqFMc1pAx2d3/s400/footerpg5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5243097480906068018" /></a>

   
   
   

   Como puede verse el código contiene dos URLs aparentemente de las imágenes, sin embargo ninguna de ellas puede usarse en las plantillas, así que:
   

4. Copia la primer URL del código de cada imagen y ábrela en una pestaña o ventana del navegador.


5. Al entrar veras la imagen correspondiente, da clic derecho y después “Copiar la ruta la imagen” (firefox).


6. Esa URL ya puede usarse en las plantillas blogger, el siguiente paso será sustituir la antigua URL de la imagen en Diseño > Edición de HTML por la recién copiada en blogger.


7. Repite los pasos 4, 5 y 6 para todas las imágenes que subiste correspondientes a las que usa tu plantilla.

Este puede ser un proceso un poco tedioso, pero hay que pensar en que solo se hace una vez y al hacerlo tendrás mayor seguridad de que las imágenes en tu plantilla no fallaran. Lo mismo aplica si eres creador de plantillas blogger, hacer este proceso puede ahorrarte dolores de cabeza futuros.

Agregar un sidebar a una Plantilla Blogger

Articulo extraido de

Como agregar una sidebar en una plantilla Blogger

Agregar una nueva sidebar a una plantilla Blogger es una de las preguntas más comunes entre lo usuarios de la plataforma para blogs de Google. Agregar una segunda sidebar varia en complejidad de acuerdo al diseño que se trate, así, mientras algunas solo requieran cambiar unas lineas de css, otras necesitarán de una remodelación total que tal vez hagan más conveniente cambiar de diseño.

A grandes rasgos el proceso es el siguiente:

1. Analizar la estructura y estilos de la plantilla.


2. Agregar un nueva zona editable, es decir, la nueva zona para agregar los gadgets.

1. Modificar estilos.

Para seguir sin problema este y cualquier tutorial que implica hacer cambios en la estructura de un blog o sitio web es muy recomendable saber algo de html y css. Entonces:

Analizar la estructura y estilos de la plantilla

La mayoría de las plantillas, y especialmente las de Blogger, tienen una estructura muy similar, un header (cabecera) con título y descripción, un contenedor con la columna principal y una sidebar (barra lateral) y un footer (píe de página) con créditos y otra información.

Para este caso, es de interés el contenedor, donde se encuentra el contenido y la sidebar, desde el código de Blogger (Diseño / Edición HTML) este se ve como:

<div id='content-wrapper'>
<div id='main-wrapper'>

  <b:section class='main' id='main' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

 </b:section>
</div>

<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>

  <!-- Código de los gadgets o widgets del sidebar -->
 </b:section> 

</div>
</div>

Varia un poco de plantilla en plantilla, pero generalmente es muy similar a lo anterior. Tanto main-wrapper (columna principal) como sidebar-wrapper (contenedor del sidebar) están definidos por estilos css que determinan su ancho, fondo y otras características. Así que lo

primero será averiguar estas características buscando algo como:

#main-wrapper {
float:left;
width:620px;
/*.... otros atributos ... */
}

#sidebar-wrapper {
float:right;
width:300px;
/*.... otros atributos ... */
}

Nota: Seguramente no los encontraran juntos ni exactamente igual y en algunas ocasiones, más de una vez.

Aquí es importante ver los anchos (width) de cada elemento, pues para agregar una nueva barra hay que cambiar la distribución. Al sumar los anchos del código de ejemplo se tiene un total de 920px, el cual será el espacio disponible para el contenedor principal y las sidebars.

Agregar un nueva zona editable.

Agregar una nueva zona editable en blogger es muy sencillo, estas están definidas por elementos “section” que al incluirlos en el código ya pueden contener gadgets (elementos de página). El código de una nueva zona editable es algo como:

<b:section class='sidebar' id='sidebar2' preferred='yes'></b:section>

Y para agregar una nueva zona editable, solo hay que agregar este código justo después de la zona editable existente:

<div id='content-wrapper'>
<div id='main-wrapper'>
 <b:section class='main' id='main' showaddelement='no'>


 <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
 </b:section>

</div>

<div id='sidebar-wrapper'>
 <!-- Zona editable existente -->
 <b:section class='sidebar' id='sidebar' preferred='yes'>

  <!-- Código de los gadgets o widgets del sidebar -->
 </b:section>

  <!-- Nueva zona editable -->
 <b:section class='sidebar' id='sidebar2' preferred='yes'></b:section> 

</div>

</div>

Hay que tener cuidado que el ID de la nueva zona, no exista en otro elemento “section”, es por eso que en el ejemplo aparece como “sidebar2″. La clase puede repetirse y en el caso de los

sidebars hasta es conveniente que lo haga. Como es una zona nueva, no necesita tener código de gadgets, estos se integraran automáticamente cuando agreguemos un nuevo gadgets desde “Elementos de página”.

Con esto ya hay una zona editable pero como no la plantilla no esta preparada seguramente se deformaría, así que falta hacer algunos cambios.

Modificar estilos.

Ya sabemos el ancho total disponible y tenemos la zona editable, así que hay que cambiar determinar el ancho de cada elemento. Siguiendo el ejemplo; main-wrapper se reduce a 540px y sidebar-wrapper el ahora contenedor de ambas sidebars se aumenta a 380px. Quedando los estilos como sigue:

#main-wrapper {
float:left;
width:540px;
/*.... otros atributos ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... otros atributos ... */
}

De esto modo el espacio disponible para ambas sidebars es de 380px. Lo más comun es ambas tengan el mismo ancho, es decir que ocupen el 50% cada una. A partir de lo IDs de cada zona editable definimos el ancho de cada una y su ubicación (derecha - izquierda) dentro del contenedor sidebar-wrapper, agregando los estilos:

#sidebar {
width:50%;
float:left;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... otros atributos que consideres necesarios: padding, margin, etc ... */
}

Con esto ya se tiene 2 sidebars de un ancho de 190px cada una, capaces de soportar gadgets.

Observaciones

Algunas plantillas pueden tener problemas al cambiar el ancho del sidebar o el contenedor principal, sobre todo aquellas basadas en imágenes fijas que obviamente no cambian de tamaño al reducirse el ancho. En tal caso se pueden editar las imágenes con photoshop para adaptarlas al nuevo ancho.

Conclusión

En general esto proceso puede ser complicado, sobre todo si no se tiene nociones suficientes de css o la plantilla tiene una maquetación -estructura- compleja. Para tal caso queda aprender css o buscar una plantilla con 3 columnas y personalizarla.

Les agradezco cualquier opinión o corrección en los comentarios y sus dudas en nuestro foro.

Otras referencias sobre este tema:

• Añadir una barra lateral (sidebar) en Blogger


• Modificando las plantillas (Tutorial 3: Sidebars)


• Agregar una segunda Sidebar en el blog