09 junio 2010

HOSPEDAR LAS IMÁGENES EN BLOGGER

Muchas veces alojamos las imágenes de nuestra plantilla en sitos gratuitos como tinypic, imageshack, photobucket,etc..
y cuando estos sitios tienen una caída, dejamos de visualizar nuestras imágenes o son sustituidas por mensajes
que no gustan.
Esto me ha pasó a mi y lo podéis ver en esta captura:

3
A partir de ahí busqué la solución y  que mejor solución que alojarlas en el mismo blogger.
He migrado todas las imágenes de mi plantilla a blogger y aunque es trabajoso tiene su recompensa.
Para ello , abrimos  Diseño>Edición de html>expandir plantilla de artilugios.
Ahora hay que ir buscando y copiando en un bloc de notas todas  las URL  que contengan el nombre del sitio donde  hospedamos nuestras imágenes y las copiamos.
1
Una vez  copiadas, las vamos abriendo una por una en la barra de nuestro navegador y pinchamos con el botón derecho sobre la imagen GUARDAR IMAGEN COMO y las vamos copiando en una carpeta  creado con anterioridad.
2
Cuando las tengamos todas recuperadas abrimos en nuestro blog Creación de entrada> nueva entrada y subimos todas las imágenes como hacemos normalmente.
Una vez todas colocadas en la nueva entrada abrimos Vista previa y pinchamos sobre cada una de las imágenes , estas se abrirán en el navegador y copiamos su URL .
Ya solo nos queda volver a nuestra plantilla y cambiar la URL anterior por la nueva.
Esta nueva entrada la guardamos como BORRADOR y la reservamos para ir añadiendo nuevas imágenes que necesiten un alojamiento.
Es un poco pesado cambiar todas las URL de nuestra plantilla, pero habrá valido la pena el esfuerzo.

17 marzo 2010

MENÚ HORIZONTAL CON PÁGINAS

Como todos sabéis en blogger disponemos de un nuevo gadget PÁGINAS
con el que podemos crear hasta 10 páginas independientes.
No os voy a hablar de como se crean, porque en
el  BLOG DE LA INFORMÁTICA ,
José M.  lo explica pero que muy bien. 
Siguiendo sus consejos ya tengo 8 de estas páginas para ordenar
todas las entradas de mi blog por temas,
1
pero quedan en la sidebar, como un poco escondidas y mi intención es
utilizarlas como barra de navegación debajo del título  (como en una web)
Lo primero que hago es pinchar una por una las páginas que tengo en la
sidebar y copiar en un bloc de notas la URL de las que quiero utilizar en la barra.
2
Ahora me voy a Diseño> Edición de HTML (GUARDO UNA COPIA DE LA PLANTILLA)
3
y pego el siguiente código justo antes de:
           ]]></b:skin>
----------------------------------------------------------------------------------
#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #C0C0C0;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
background-color: #175e74;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #CC3300;
color: white;
}
#navcontainer #active { border-left: 1px solid #fff;
----------------------------------------------------------------------------------------------------
Aquí es donde podemos cambiar el color de fondo, de los botones, del texto, su tamaño, etc…
Ahora buscamos el siguiente código:
         <div id='content-wrapper'>
y justo debajo añado el código para visualizar la barra de menú debajo de la cabecera de mi blog.
-----------------------------------------------------------------------------------------------------
<div id='navcontainer'>
<ul id='navlist'>
<li id='active'><a href='http://mirincon-misaani.blogspot.com'>INICI0</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/el-gimp.html'>EL GIMP</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/el-gimp-tutoriales.html'>EL GIMP Tutoriales</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/photoshop-tutoriales.html'>PHOTOSHOP</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/flash-turoriales.html'>FLASH</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/informatica-varios.html'>INFORMÁTICA varios</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/pirograbado.html'>PIROGRABADO</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/videos_16.html '>VIDEOS</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/p/labores-y-manualidades.html'>LABORES</a></li>
</ul></div>
}
-------------------------------------------------------------------------------------------------------------------
Ahora solo queda sustituir las URL y el TEXTO por los vuestros.
Podéis añadir más líneas o eliminarlas si sobran.
Si queremos  ocultar las páginas vamos a DISEÑO, buscamos el gadget
PAGINAS , lo abrimos, desactivamos los cuadritos y guardamos.
4
Aunque en la parte de diseño seguirá viéndose el gadget PAGINAS donde
podemos hacer cambios, pero en le blog permanecerá oculto.

08 noviembre 2009

BARRA Rocked Dock

Voy a explicar una nueva lanzadera o barra con efectos  Rocked Dock versión 1.3.5
que podéis descargar AQUÍ.
3
Es totalmente configurable y la podemos
poner toda ella
en español.
Para ello pincharemos en el último icono
Dock Settings

que podéis ver en la siguiente captura.
4
En GENERAL desplegamos idioma y
le ponemos español.
y no activamos iniciar con es sistema.
Al final os cuento por qué.

5
En ICONOS yo no toqué nada, lo dejé todo por defecto, en calidad media y
el tamaño y el aumento también como viene, pero se puede cambiar.
7
En POSICIÓN  yo puse en monitor, monitor 1 porque ya tengo otra barra en el segundo.
posición puede se arriba, abajo, izquierda y derecha.
nivel yo dejé siempre encima , porque si ponemos siempre debajo queda oculto por las ventanas.
8
En ESTILO, tenemos una gran variedad de temas para elegir.
Podemos activar ocultar etiquetas y también personalizarlas.

10
En CONFIGURACIÓN hay dos efectos de activación de los iconos.
Si activamos ocultar automáticamente, la barra solo se hará visible cuando acerquemos el curso al borde de la zona del monitor donde se encuentra.
Este sistema es bastante útil cuando necesitamos todo el espacio del escritorio para hacer un trabajo.
Para eliminar iconos de la barra los arrastramos al centro del escritorio y se esfuman.
Si queremos añadir accesos directos los arrastramos hasta la barra y los soltamos.

5
Si queremos cambiar la imagen del icono pinchamos con el botón derecho
12 
y luego en Opciones de icono y se abrirá una nueva ventana
con una colección de iconos que incluye el programa.

13
Si queremos utilizar alguno de los nuestros, pinchamos en el + encima de la vista previa
y navegaremos por nuestra carpetas hasta llegar a la ruta de nuestro icono y aceptamos.
14
En la entrada anterior explicaba la configuración de otra barra Object Dock
y os dejo el ENLACE porque en ella coloqué un acceso directo a esa otra como podéis ver:
6a
es un icono amarillo con una R en el centro  para abrir esta barra Rocked Dock
ya que la tengo cerrada, porque no activé iniciar con  el sistema  para que no se ralentice  al abrirse.
Una vez abierto pincho sobre este icono  y aparece la barra del el primer monitor.
El enlace a una página donde podéis encontrar una gran variedad de iconos
ya lo puse en la otra entrada.

07 noviembre 2009

BARRA OBJECT DOCK

Voy a explicar como se configura la barra  o lanzadera  Object Dock que fue presentada en la entrada del blog  gimp y más informática y que  podéis descargar desde allí mismo o pinchando AQUI
6
Esta lanzadera que tan amablemente nos presentó Osbaldo en su blog la tengo en la parte de arriba de mi segundo monitor .Como podéis ver es una  forma de tener todas las aplicaciones que más utilizamos ordenadas y por lo tanto de fácil acceso.
Después de pedirle  permiso voy a intentar explicar por encima su funcionamiento.
Para configúrala a nuestro antojo debemos pinchar en Configure Dock
6-1
y se nos abrirá una ventana desde la cual vamos a crea los cambios.
6b
En general primeramente en opciones de idioma
elegimos spanish y a continuación activamos la casilla
Cargar Object Dock al inicio , y con estos dos cambios
que acabamos de hacer , en primer lugar gran parte aunque no todo estará en español y con la activación d la casilla, cuando iniciemos el ordenador siempre encontraremos visible la barra.
6c
En Temas lo más destacado de este apartado son
las dos últimas opciones que señalo en amarillo.
Una vez que tengáis configurada toda la barra ,pincháis
en Save current Dock.. y se abrirá una ventana donde poner un nombre a la barra y guardarla.
De esa forma podéis seguir experimentando y siempre podéis volver a la barra o barras guardas, pero para abrir una de las guardadas pinchareis en
Load Previous Dock y encontrareis una lista con los nombres de las barras que guardasteis anteriormente.

6d
En  Apariencia nos encontramos con unos deslizadores
por si queréis cambiar el tamaño de los iconos , tanto los
fijos como los que se activan al acercar el cursor.
Yo los he dejado tal como vienen por defecto de momento.
En Background pinchando en la pestañita de la derecha
os aparecerá una larga lista de fondos para personalizar vuestra barra, es cuestión de ir probando.


6e
En Posicionando, en Edge of screen podemos colocar nuestra barra arriba, abajo, al derecha o a la izquierda y si tenemos más de un monitor como es mi caso en
On monitor DISPLAY1o DISPLAY 2
en el espacio entre iconos lo he dejado en Automatic.
Interaction tengo activado Hide in background when not in use para que la barra esté siempre visible.
En Efectos los he dejado por defecto como estaban.
y en Contenidos activado Display my icons only

Si queremos eliminar un icono, solo tenemos que arrastrarlo hacia el centro del monitor y desaparece.
Si por el contrario queremos añadir nuevas aplicaciones las arrastramos hasta la barra y las soltamos.
Si queremos cambiar el icono por otro, pinchamos con el botón derecho sobre él y se abrirá una ventana y al final pincharemos en : INGRESAR PROPIEDADES AL DOCK
y en cambiar imagen nos aparece toda una colección de iconos, pero si aún así queremos alguno que tenemos de nuestra colección particular, pinchamos en  Browse  for an image y se nos abrirá el explorador para llegar hasta donde tenemos el icono y luego aceptamos.
Si queréis conseguir buenos  iconos este ENLACE es de lo mejorcito en cantidad y calidad de iconos.

14 agosto 2009

MENÚ Horizontal con buscador

Voy a explicar como he colocado un menú horizontal en mi plantilla de Blogger.
El código principal lo  encontré en EL ESCAPARATE DE ROSA, pero como le hice cambios
porque yo no la quería encima del titulo, sino debajo, voy a explicar mis pasos.
1
En esta foto podéis ver la barra con el buscador incorporado debajo del titulo de mi blog.
En primer lugar abrimos DISEÑO-Edición de HTML  y os aconsejo que siempre, antes de hacer cualquier cambio a vuestra plantilla guardéis una copia. Lo digo por experiencia.
(fue mi salvación)
2

No activéis la casilla de Expandir plantilla de artilugios.
Este es el código que tenéis que copiar y pegar:
*-- CSS Menu Superior-- */
#navtop { background: #760839 ; height: 26px; width: 100%; margin: 5px auto 5px auto; font-family: "Century Gothic", Palatino Linotype, Trebuchet MS, sans-serif; font-variant: small-caps; font-weight: bold; color:#ffffff; font-size: 16px; border-bottom: 1px solid #2b0315
;}
.nav {width: 990px; margin: auto;}
ul.navtop { padding: px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#ffffff; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #cb567d; border-left: 1px solid #cb567d;}
ul.navtop li a:visited { text-decoration: none; color: #ffffff;}
ul.navtop li a:hover { background: #e1477d; color: #7ec7dc; text-decoration: none; border-right: 1px solid #cb567d; border-left: 1px solid #cb567d; }
ul.navtop li a:active { text-decoration: none; color: #ffffff; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }
#searchcont { width: 100%; margin: 12px auto 12px auto; }
#searchform { height:26px; line-height:25px; float:right; margin: 1px; padding: 1px;}
input#s {color: #e1477d; width: 283px; background:#f4ed26; padding: 2px 4px 2px 4px; border: 1px solid #cb567d;}
input#searchsubmit{ background:#ffffff; color:#fff; font-size:13px; padding: 2px;}
Justo antes de
6
En esta parte del código es donde cambiaremos los colores de fondo, del
texto, el tamaño de este y el tipo de fuente.Se trata de ir probando y adaptándolo a nuestro blog.
Ahora copiaremos  el siguiente código;
<!-- Menu Superior -->
<div id='navtop'>
<div class='nav'>
  <ul class='navtop'>
  <li><a href='http://mirincon-misaani.blogspot.com'>Inicio</a></li>
<li><a href='http://mirincon-misaani.blogspot.com/2009/06/entradas.html'>Todas mis entradas</a></li>
<li><a href='http://www.blogger.com/profile/00861632899446696417'>Mis datos personales</a></li>
<li><a href='mailto:misaani@hotmail.com'>Contacto</a></li>
<li><a href='http://www.blogger.com/home'>Blogger</a></li>
  </ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
encima de
5


Fijaros bien en el sitio donde lo colocáis, pues es la clave para que aparezca justo debajo del título.
Estos son mis enlaces , que tendréis que sustituirlos por los vuestros.
Si queréis añadir algún otro enlace , copias el código:
<li><a href=’URL DE ENLACE’>TEXTO DEL BOTÓN</a></li>
 
IR ARRIBA