jueves, 15 de julio de 2010

PONER ICONOS DELANTE DEL TÍTULO DE LAS ENTRADAS.

Ahora toca tratar de explicaros una cosita que nuevamente me encontré en el BLOG DE GEMA mientras buscaba por allí la forma de poder ocultar parte del contenido de las columnas del blog (como por ejemplo el widget de comentarios o el de etiquetas, los cuales, en el momento consiga obtener os explicaré como llevarlo a cabo).

Este truco consiste en posibilitar la colocación de una pequeña imágen a la izquierda del título de nuestras entradas (podéis verla puesta en este mismo blog, un pequeño avatar con un dibujo y mi nombre debajo.

La tarea de añadir este icono me pareció sencilla y bastante entretenida, además de darnos la posibilidad de personalizar un poco más nuestro blog para que luzca todo lo bonito que cada uno de nosotros desearía.


Para colocar la imágen debemos irnos al apartado de edición html de nuestro blog y buscar el apartado de post en los códigos CSS, que debería aparecer de una forma similar a esta (ya sabéis que estas cosas cambian en función de la plantilla que tengáis).




Esto es sólo la parte que nos interesa de apartado posts:


h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}


h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}



Para añadir el icono correspondiente solo tendremos que añadir al final de la parte del código señalada en verde lo siguiente (justo antes del símbolo }):


background: url(url del icono) no-repeat 0 .5em;
padding-left: 20px;

Acordados de sustituir la URL del icono por la url del que vosotros queráis poner.



Modificando el valor de padding-left establecemos la distancia entre el icono y el título.
Si queremos modificar la altura podemos aumentar o disminuir el valor de 0 .5 em

Bueno, pues con esto quedaría puesto el icono antes del título de vuestro blog. Espero que lo probéis y que os guste mucho. Recordad no poner imágenes demasiado grandes (la mía creo que tiene 50x50 px) y trabajar siempre haciendo una copia de la plantilla previamente y usando la herramienta de vista previa.

Cualquier duda o problema que os pueda surgir en la colocación de vuestro propios iconos podéis consultarmela sin ningún problema.

martes, 13 de julio de 2010

OCULTAR PARTE DEL TEXTO EN LAS ENTRADAS DE NUESTRO BLOG.

El otro día pasé por la facultad a hacer un exámen y hable con mi amigo Sandman, quien me decía que quería saber el modo de ocultar parte de las entradas de su blog.

Al pasarme por el BLOG DE GEMA me encontré con este sencillo código para hacerlo que quiero compartir con vosotros.

Para que os hagáis una idea de qué es lo que os voy a explicar os dejaré por aquí un pequeño ejemplo de ello:



Ejemplo:
Blanco es,
la gallina lo pone,
con aceite se fríe
y con pan se come.

SOLUCIÓN
    (El huevo)





Pues,tras este pequeño ejemplo a modo de adivinanza vamos a explicar como hacer para conseguir este efecto tan molón en nuestro propio blog.

Para que nos funcione correctente, lo primero que debemos hacer es colocar en el código html de la plantilla de nuestro blog, justo antes de </head> el siguiente código:




<!-- desplegable -->

<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

<!--desplegable -->





Guardamos los cambios en nuestra plantilla html y nos vamos a la página principal del blog.

Si queremos ocultar parte del texto de una entrada que publiquemos en nuestro blog deberemos ir a publicar una nueva entrada y colocar en ella el segundo texto modificando las partes en verde:





<a href="javascript:void(0);" onclick="expandcollapse('cualquiercosa')">Ver ejemplo</a>

<ul id="cualquiercosa" class="texthidden">

Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-Texto oculto-

</ul>





Las sustituciones a realizar son las siguientes:
  • CULAQUIERCOSA: debemos cambiarlo en ambos casos por un nombre para el código. Debemos modificarlo cada vez que usemos el código en nuestro blog.
  • VER EJEMPLO: es lo que veremos cuando el texto esté oculto. En esta entrada aparece como Solución. Podemos poner lo que queramos. También podemos, si queremos colocar una imágen sustituyendo la palabra VER EJEMPLO POR EL SIGUIENTE CÓDIGO:



    <img src="aquilaurldelaimagen"/>


  • TEXTO OCULTO: evidentemente, el texto que queramos ocultar en nuestra entrada.

Cada vez que queramos ocultar una parte del texto deberemos usarlo en la entrada a publicar. Aparentemente puede ser muy pesado poner este código en cada entrada, pero para ello blogger nos da in pequeño truquillo.

Nos vamos a la pestaña de configuración --> Formato --> Plantilla de entrada

Pegamos allí el código son personalizar, de forma que cada vez que vayamos a publicar una entrada nueva nos aparezca automáticamente.

Espero haberla sido de utilidad. Ya me contaréis si os funciona.

domingo, 11 de julio de 2010

SEÑALANDO LOS CÓDIGOS QUE AÑADIMOS A NUESTRAS ENTRADAS EN EL BLOG.

Muchas veces ocurre que al ir añadiendo códigos y scripts a la plantilla html de nuestro blog puedes acabar por volverte loco para encontrar uno concreto en un momento determinado, bien sea para borrarlo o para modificarlo.

Por este motivo os dejo por aquí un truco muy sencillo para saber a qué pertenece cada script o código que añadimos a la plantilla del blog.

El truco consiste en poner un nombre identificativo delante y algo que demuestre donde terminan al final.

Por ejemplo: Vas a añadir el los script para el menú estilo dock. Lo copias y lo pegas, y delante le añades:


<!--SCRIPT ESTILO DOC 1/2--> y al final <!--fin código estilo Dock. -->

Al poner estas frases entre estos símbolos, no intentará ejecutarlas y a nosotros nos ayudará a identificar donde está cada cosa, si algún día necesitamos encontrarlo para cambiarlo o quitarlo.

Además, podemos añadir a este código una fracción (ej. 1/2 o 3/5) de forma que noa indique el fragmento de código (primer dígito) y el total de fragmentos que hemos de añadir (el segundo dígito). De este modo, si algún día queremos eliminar alguna cosa nos resultará muy sencillo saber qué tenemos que eliminar exactamente y cuantos trozos son en total los que constituyen nuestro "elemento a borrar"

Espero que éste mínimo truco os sea a todos de utilidad cuando modifiquéis vuestras plantillas y que os ayude en todo lo posible.

ENLACE DE CONTACTO (E-Mail)

Ahora veremos como preparar un link a una dirección de correo electrónico para que nuestras visitad puedan contactar con nosotros. El proceso es muy sencillo.

En este blog hay un link a mi correo a través de una imágen animada, en la columna de la izquierda, dónde dice CONTACTA. Si la pinchas sObre la imágen debería abrírsete el correo que tengas establecido en tu ordenador como predeterminado (normalmente Outloook Express) para que me puedas mandar uno.

Si no usas este servicio de correo siempre podrás modificar el gestor predeterminado de correo en la configuración del equipo. Si no, también puedes copiar la dirección de correo del destinatario y pegarla en tu gestor de correo habitual (gmail, hotmail, Yahoo...)

Para poner el link al correo debemos proceder así

  • Para empezar elige la imagen que quieras poner.
  • Sube la imágen a un hosting (Picassa, Imageshack, fileden...)
  • Para saber su dirección has de pinchar en la imagen con el botón derecho del ratón, con el izquierdo pinchar en Propiedades del menú que se abre y seleccionar y copiar la dirección que aparece en la ventana que aparecerá.(Si está en una entrada, has de pincharla desde Vista previa).
  • En la pestaña Diseño/Elementos de la página, añade un elemento HTML/Javascript y en el recuadro blanco escribes este código:



    <a href="mailto:TU DIRECCIÓN DE CORREO ELECTRÓNICO"><img src="URL DE TU IMÁGEN"/></a>



    Sustituyendo las palabras en verde por tu dirección de correo electrónico y la URL de la imágen que quieras mostrar.


Este sería pues el resultado a obtener:






Si en lugar de poner una imágen queremos poner un texto:

Me refiero exactamente a esto: Para más información, mandame un correo

El código a insertar (tanto si lo quieres poner en un elemento Html/JavaScript, como en el cuerpo de una entrada es el siguiente (podéis ponerlo a continuación de la última palabra y con una sóla palabra en el hueco TU TEXTO):





<url><a HREF="mailto:TU CORREO ELECTRÓNICO"/>TU TEXTO</a>

Pues con esto acaba la pequeña explicación de cómo hacer esto. Espero que os haya servido de algo. Y ya sabéis, cualquier cosa no dudéis en preguntar lo que sea.

PUBLICAR CÓDIGOS HTML EN TUS ENTRADAS.

Como podrás haber comprobado en tus propias carnes millones de veces antes, el sistema de entradas de Blogger no nos permite la publicación "directa" de códigos html, pues él por su propia cuenta y riesgo interpreta el código correspondiente y ejecuta las órdenes que el código le da de forma automática.

Hasta ahora no encontraba la manera de compartir los códigos de las cosas con vosotros,pero rebuscando por Google encontré un enlace a SIMPLE CODE., una página en la que "traducen" los códigos para que puedas publicarlos.

    En ella vemos tres recuadros:
  • En el primero recuadro pegas el código tal cual y das al botón que dice Process.
  • En el segundo recuadro aparecerá el código tal y como has de escribirlo en el blog para que se vea correctamente.
  • En el tercer recuadro aparece un vista previa del código.

Para que veáis a lo que me refiero os dejo por aquí una captura de pantalla.

sábado, 10 de julio de 2010

MENÚ ESTILO DOCK PARA LA CABECERA DEL BLOG.



Hoy voy a tratar de explicar como colocar los botones que se observan bajo la cabecera de este blog para que aquellos que quieran ponerlo en su blog puedan hacerlo también.

La idea inicial de este elemento es extraída de la página CIUDAD BLOGGER siendo su autor quien diseñó el CSS y los efectos del menú. Posteriormente, con la ayuda de TUNEANDO EL BLOG conseguí acabar de tunear el "elemento" en cuestión.

Pues, imitando las palabras de mis dos "maestros", mencionados anteriormente, voy a proceder a comenzar con la explicación.

Los menús estilo dock son característicos de los ordenadores Mac y que son altamente llamativos para el usuario por la forma en que aumentan de tamaño los íconos al pasar el mouse sobre ellos.

Aquí podéis ver un menú estilo Dock distinto al que se observa en este blog.




Tras explicar un poco que es lo que vamos a hacer en este momento lo llevaremos a cabo.

1. Vamos a Diseño > Edición de HTML y después de <head> pegamos este código:


    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/> <script src='http://sites.google.com/site/ciudadbloggerfiles/Home/interface.js' type='text/javascript'/>


2. Después, antes de ]]></b:skin> pegamos esto que nos permitiría modificar el estilo de nuestro menú. (ojo: el color de las letras está en negro, así que sobre blogs de fondo oscuro tendréis que cambiarlo)



/* Menu Dock
----------------------------------------------- */
.dock {
text-align: center;
height: 60px;
position: relative;
}
a.dockItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
.dockItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.dockItem span {
display: none;
positon: absolute;
}
.dockContainter {
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}



En este código, la parte en verde es el color del NOMBRE DEL BOTÓN, el cual podéis modificar a vuestro antojo cambiando el código hexadecimal del color. Para ver los códigos hexadecimales PINCHA AQUÍ


3. Y finalmente copiamos el scrip siguiente en un elemento html/JavaScript bajo la cabecera de nuestro blog. (ojo: este código debéis personalizarlo a vuestro gusto y antojo, sustituyendo el texto en VERDE por las URL correspondientes a cada botón y enlace respetando SIEMPRE, en caso que las haya, las comillas).


<div class="dock" id="dock">
<div class="dockContainter" style="left: 334px; width: 420px;">

<a href="ENLACE" class="dockItem" linkindex="7" style="width: 60px; left: 0px;"><img src="URL DEL BOTÓN"><span style="display: none;">NOMBRE DEL BOTÓN</span></a>

<a target="_blank" href="ENLACE" class="dockItem" linkindex="8" style="width: 60px; left: 60px;"><img src="URL DEL BOTÓN"><span style="display: none;">NOMBRE DEL BOTÓN</span></a>

<a target="_blank" href="ENLACE" class="dockItem" linkindex="9" style="width: 60px; left: 120px;"><img src="URL DEL BOTÓN"><span style="display: none;">NOMBRE DEL BOTÓN</span></a>


<a target="_blank" href="ENLACE" class="dockItem" linkindex="10" style="width: 60px; left: 180px;"><img src="URL DEL BOTÓN"><span>NOMBRE DEL BOTÓN</span></a>

<a target="_blank" href="ENLACE" class="dockItem" linkindex="11" style="width: 60px; left: 240px;"><img src="URL DEL BOTÓN"><span>NOMBRE DEL BOTÓN</span></a>

<a href="ENLACE" class="dockItem" linkindex="12" style="width: 60px; left: 300px;"><img src="URL DEL BOTÓN"><span>NOMBRE DEL BOTÓN</span></a>

<a target="_blank" href="ENLACE" class="dockItem" linkindex="13" style="width: 60px; left: 360px;"><img src="URL DEL BOTÓN"><span> NOMBRE DEL BOTÓN</span></a>

</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Dock(
{
maxWidth: 90,
items: 'a',
itemsText: 'span',
container: '.dockContainter',
itemWidth: 60,
proximity: 70,
halign : 'center'
}
)

}
);

</script>



El menú está diseñado para 7 botones, pero si queréis poner alguno más podéis hacerlo añadiendo a continuación del séptimo otro más, copiando y pegando el anterior y modificando los datos que sea necesario modificar.


En el apartado ENLACE deberéis poner las URLs de los lugares a los que queráis llegar a través de cada uno de los botones.

En el apartado URL DEL BOTÓN deberéis poner la URL de la imágen del botón. Podéis poner las imágenes que queráis, incluso hechas por vosotros mismo en Photoshop o algún programa similar. Si queréis usar estos mismos que tengo puestos en este blog os dejo por aquí los enlaces para que los cojáis.

  • Para INICIO: http://dl.dropbox.com/u/2616707/png/iconhome.png
  • PARA FEED DE ENTRADAS: http://dl.dropbox.com/u/2616707/png/iconrss.png
  • PARA TWITTER: http://dl.dropbox.com/u/2616707/png/icontwitter.png
  • PARA FACEBOOK: http://dl.dropbox.com/u/2616707/png/iconfacebook.png
  • PARA PICASSA: http://dl.dropbox.com/u/2616707/png/iconpicasa.png
  • PARA CORREO: http://dl.dropbox.com/u/2616707/png/iconmail.png
  • PARA AYUDA: http://dl.dropbox.com/u/2616707/png/iconhelp.png

En NOMBRE DEL BOTÓN podéis poner lo que cada cual crea conveniente.

Bueno, pues una vez colocado todo esto en los lugares correspondientes, el menú debería funcionar correctamente. Espero haberme explicado correctamente y que consigáis hacer unos hermosos menús con este pequeño tutorial.

jueves, 8 de julio de 2010

UN CAMBIO DE IMÁGEN.





Un breve y "discreto" cambio de imágen nunca viene del todo mal. Es cierto, me ha dado ahora por volver a escribir, no se por cuanto tiempo me durará.

Espero poderos escribir alguna cosilla cada día, pero tampoco puedo prometer nada ni asegurar que cada día vaya a estar aquí poniendo cosillas nuevas en el blog.

Por lo pronto, algo nuevo tenemos, una nueva imágen y alguna que otra entradilla mediocre.

Espero sinceramente que os guste el cambio.

Un saludo, mis queridos lectores y amigos.

Un soleado día de Julio




Corría mediados del mes de julio. El sol brillaba ya casi decayendo por el lejano Oeste. A la sombra de un pequeño Manzano, un niño de 10 años devoraba ansiosamente las páginas de una novela de literatura fantástica.

Ese mismo día era su cumpleaños, por ello, antes de dar comienzo a la gran fiesta de celebración sintió las ganas de compartir con el mundo las aventuras de su libro.

De esta forma sorprendió a nuestro jóven amigo la melodía silbada de una hermosa canción. Sonaba cerca del camino a menos de 10 minutos del Manzano bajo el cual se hallaba él, cabizbajo, soñando las aventuras de sus héroes.

Se concentró en el sonido. No sólo era un silbido. Había algo más en aquella dulce melodía. Sonaban también los cascos de un raudo corcel al galope. El niño se acercó al camino, entusiasmado con ver de nuevo a tan fabuloso cuadrúpedo. Habían pasado lo
menos diez meses desde que viese al último caballo en la vida real.

Al llegar a interrumpir el itinerario del corcel y su jinete, se sorprendió muy gratamente. No se trataba de ningún Caballero errante, ni de un imponente Guerrero, tampoco de un gran señor. Era tan sólo una hermosa niña, la cual tendría más o menos su edad.

Los últimos rayos de sol del día iluminaban su silueta, explendida, ergida sobre su hermosa montura. Ella mirò los profundos ojos de nuestro protagonista, el analizó su mirada, le resultaba muy conocida, demasiado familiar.

De pronto la amazona descabalgó dulce y suavemente, se acercó a él y le besó. Fue un beso tierno, largo, maravilloso, del cual nuestro amigo nunca más podría olvidarse.

Tras el beso, la chica miró los profundos ojos del infante, y tras un momento que parecía ser interminable, dijo:
- "llevaba 10 años esperando éste momento, Jon.
Related Posts Plugin for WordPress, Blogger...