jueves, 20 de diciembre de 2007

Propiedades de CSS (Hojas de Estilo en Cascada)

Las hojas de estilo requieren un estudio más profundo y, seguramente, serán parte de algún otro tutorial, por ahora, veamos un resumen de las propiedades que podemos incluir.


font-size establece el tamaño del texto en puntos (pt), pulgadas (in), centímetros (cm), o pixeles (px)


{font-size: 12pt;}
{font-size: 1in;}
{font-size: 5cm;}
{font-size: 24px;}


font-family establece la fuente del texto. Se pueden especificar una o varias fuentes alternativas:


{font-family: Arial;}
{font-family: Arial, Helvetica;}
{font-family: Arial, Helvetica, sans-serif;}
{font-family: "Courier New";}

font-weight establece el espesor de la fuente (extra-light, light, demi-light, medium, demi-bold, bold, y extra-bold) y dependen en las fuentes:



{font-weight: medium;}
{font-weight: bold;}

font-style establece la fuente como cursiva:


{font-style: italic;}

font-variant establece una variante de la fuente. Puede ser normal y small-caps (letras minúsculas similares a mayúsculas, pero más pequeñas):



{font-style: small-caps;}

line-height establece la separación entre líneas, que se puede expresar en puntos (pt), pulgadas (in), centímetros (cm), pixels (px) o porcentaje (%):


{line-height: 20pt}
{line-height: 150%}


color establece el color del texto de acuerdo con su valor hexadecimal o usando los nombres de colores:


{color: #33CC00}
{color: red}

background destaca secciones de una página, estableciendo un color o una imagen de fondo:


{background: red;}
{background: #6633FF;}
{background: URL(URLimagen);}

background-color color del fondo en formato hexadecimal o transparent (sin valor):



{background-color: #FF00000;}

background-image especifica la imagen de fondo o none (ninguna):


{background-image: url(URLimagen);}
{background-image: none;}

background-repeat indica si la imagen de fondo se repite y cómo lo hace. Los valores pueden ser repeat, repeat-x, repeat-y y no-repeat:



{background-repeat: no-repeat;}

background-attachment indica si la imagen de fondo está fija (fixed) o no (scroll):


{background-attachment: fixed;}

background-position indica la posición inicial de la imagen de fondo:


{background-position: left;}


word-spacing establece la separación entre caracteres. Puede tomar el valor normal o una longitud que se añade al valor normal. Puede ser un valor negativo:


{word-spacing: 1em;}

letter-spacing igual que el caso anterior:


{letter-spacing: 1cm;}

line-height establece la distancia entre las líneas de base de dos líneas sucesivas. Puede ser normal, un número, una longitud o un porcentaje del tamaño de la fuente del elemento:



{line-height: 1.2em;}

text-decoration permite remarcar el texto. Los valores soportados son underline (subrayado), line-through (tachado), none (ninguno) e italic (cursiva):



{text-decoration: underline}
{text-decoration: line-through}

text-align permite justificar los elementos HTML a la izquierda, al centro o a la derecha:


{text-align: left}
{text-align: center}
{text-align: right}

text-indent provoca una indentación del texto. Se puede expresar en puntos, pulgadas, centímetros o pixels:


{text-indent: 0.5cm;}

text-transform puede ser capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todo en mayúsculas), lowercase (todo en minúsculas) y none (neutraliza todo):



{text-transform: uppercase;}

vertical-align establece la alineación vertical de un elemento en línea y puede ser baseline, sub, super, top, text-top, middle, bottom, text-bottom, o un porcentaje:



{vertical-align: middle;}

margin margin-left margin-right margin-botton margin-top establecen los márgenes. Se pueden especificar en puntos, pulgadas (inches), centímetros o pixeles (se pueden usar valores negativos). Con margin se engloban las cuatro propiedades con cuatro valores (top, right, bottom, left):



{margin: 10px 20px 5px 15px;}
{margin-left: 0.5in;}
{margin-right: 0.5in;}
{margin-top: 1in}

padding padding-top padding-right padding-bottom padding-left establecen el relleno y sus valores son similares a margin excepto que no pueden tomar valores negativos:


{padding: 10px 20px 5px 15px;}
{padding-left: 0.5in;}
{padding-right: 0.5in;}
{padding-top: 1in;}

border-width border-top-width border-right-width border-bottom-width border-left-width establece el ancho del borde y puede ser thin (delgado), medium (mediano), thick (grueso) o una longitud. Con border-width se especifican los cuatro simultánemante:



{border-width: 1px 2px;}

border-color establece el color del borde:


{border-color: red;}

border-style indica el estilo de los cuatro bordes y ser none (ninguno), dotted (punteado), dashed (a trazos), solid (continuo), double (doble), groove (canal), ridge (cresta), inset (bajorrelieve), o outset (altorrelieve):



{border-style : inset;}

border-top border-right border-bottom border-left establece las propiedades de cada borde (ancho, color, estilo):


{border-top : 3px #000 dashed;}
{border-bottom : 3px #000 dashed;}
{border-right : 3px #000 double;}
{border-left : 3px #000 double;}

border es un resumen de todas las propiedades para los cuatro bordes (ancho, color, estilo):


{border: 3px black double}

width especifica el ancho. Puede ser auto, una longitud, o un porcentaje del elemento padre:



{width: 100px;}

height especifica el alto. Puede ser auto, una longitud, o un porcentaje del elemento padre:


{height: 100px;}

float indica que un elemento flota a la izquierda (left), a la derecha (right) o que no es un objeto flotante (none):



{float: right;}

clear indica si un elemento puede tener objetos flotantes a sus lados. Con clear el elemento se mueve hacia abajo hasta quedar debajo del objeto que flota. Con clear:both no se permite que haya un objeto flotante a ningún lado y con clear:none se permiten objetos flotantes a ambos lados:


{clear: both;}

display indica si un elemento es en bloque (block), en línea (inline), si es un objeto de lista (list-item) o si no debe ser representado (none):



{display: block;}

white-space establece cómo tratar a los espacios contenidos en un elemento en bloque. Con el valor normal, varios espacios seguidos se convierten en uno solo. Con el valor pre se comportan como si utilizarámos la etiqueta PRE (se conservan los espacios). Con el valor nowrap sólo se producen saltos de línea donde haya etiquetas BR:


{white-space: nowrap;}

list-style-type establece el estilo de numeración de la lista. Puede ser: disc (un círculo relleno), circle (un círculo hueco), square (un cuadrado), decimal (números), lower-roman (números romanos en minúscula), upper-roman (números romanos en mayúscula), lower-alpha (letras minúsculas), upper-alpha (letras mayúsculas) o none (ningún marcador):



{list-style-type: disk;}

list-style-image es una variante de list-style-type que se utiliza cuando se quiere tener una imagen personalizada:


{list-style-image: url(URLimagen);}

list-style-position indica dónde se coloca el marcador y puede tomar los valores inside (interior) y outside (exterior):



{list-style-position: inside;}

list-style resume todas las anteriores (tipo, posición, margen):


{list-style: url(URLimagen) circle;}



Escucha este escrito

viernes, 14 de diciembre de 2007

Los Secretos de Google AdSense

Seguramente han ya oido hablar del famoso libro de Joel Comm, el cual se titula "Lo que Google no le ha explicado sobre cómo ganar dinero con AdSense."

Este libro se supone es el mejor en lo que respecta a mejorar las ganancias con adsese de google, asi que me he tomado la libertad de buscarlo en la web y ya que ustedes tambien supongo lo querran, se los compratire, pero ya que en la ley esta estipulado que eso no se puede hacer, pasare la web donde los he encontrado.

Este libro nos muestra inumerables consejos, practicas, ejemplos sobre como poder obtener mas ganacias a traves de adsense, espero se den el tiempo para leerlo, y ojala y les guste.

Asi que si llegan a ganar miles de dolares con este libro, no estaria mal una pequeña recompensa para mi. :)

Pondre 2 mirrors, que he sacado de webs diferentes, para que lo descargen, en ambos esta completo, gracias a jilata-eliass.blogspot.com ( de esta web lo he sacado, y me he descargado los dos mirrors y funcionan perfectamente.

Mirror 1

Mirror 2

Un saludo, y espero les agrade el libro.


Escucha este escrito

lunes, 10 de diciembre de 2007

Y llegamos a los 200 días!!!

Hola a todos, hace ya varios dias que no había estado por aqui, y hoy que me encuentro con una muy gran sorpresa, hemos llegado a los 200 dias de vida!!!, pero como corre el tiempo, en verdad que no me habria imaginado llegar tan lejos con este blog. :)

Asi que solo me queda darles las gracias a todos y a cada uno de ustedes, bloggers, lectores, escritores y todo tipo de visitantes que se dan el tiempo de pasar a leer mi blog cada vez que pueden y quieren, por que gracias a ustedes, seguimos aqui, y poco a poco creciendo.

Espero ahora que han acabado mis examenes (sali bien, para el que quiera saber ;)) seguir posteando casi diariamente, y mas adelante les mostrare varias sorpresas en el blog.:P

Lo que hare ahora sera, una lista para todo blogger con 25 puntos, en la cual mencionare varios tips y consejos para poder crear un gran blog, espero les guste.

  1. Segun la calidad es la popularidad, asi que trata de escribir lo mejor posible
  2. No cuentes cuantas visitas has tenido, sino a cuantas personas has ayudado
  3. Olvidate del adsense, por que sin visitas no hay ganancias
  4. Preocupate por tener un blog diferente a los demas
  5. Se original
  6. No copies posts de otros blog
  7. Da referencias de otras paginas
  8. No te metas en líos con otros blogs
  9. No hagas SPAM en otros blogs, por que algun dia lo haran en el tuyo
  10. Se constante con tu blog ( no lo dejes a un lado como yo :P)
  11. Los escritos largos son aburridos, recuerdalo
  12. Haz amistades entre bloggers
  13. Consigue enlaces en bastantes páginas
  14. Date a conocer
  15. Las imagenes son atractivas, utilizalas cada vez que puedas
  16. Tu nombre cuenta, has popular tu blog
  17. Trata de ser lo mas concreto en los escritos para que sean faciles de entender
  18. Utiliza los bookmarks
  19. No uses letra muy pequeña en tu blog, los visitantes se irán rapidamente
  20. No llenes de publicidad tu blog, preocupate por eso mas adelante
  21. Sientete bien con lo que haces, no lo hagas por compromiso
  22. Comenta en cada blog que visites
  23. Recuerda poner tu blog en Google
  24. Haz un blogroll
  25. Y por ultimo un consejo:

  26. No piensen en lo que los demas bloggers les pueden dar a ustedes, sino en lo que ustedes pueden aportar a ellos.


Un saludo a todos y espero los siga viendo por aqui


Escucha este escrito

sábado, 1 de diciembre de 2007

Ultima Actualizacion del blog en un boton

Este post salido de mi blog es un simple hack que te dira la fecha , el dia y la hora que ha sido actualizado el blog.A continuacion el codigo y el ejemplo(no solo funciona en blogger sino que en cualquier lugar):



<input value="Ultima modificacion" name="http://lacrax.blogspot.com/search?q=none" onclick="javascript:alert(document.lastModified)" type="button"/>


Vista Previa:
Ultima Actualizacion



Eso es todo , muchas gracias y por favor comenten


Escucha este escrito

lunes, 26 de noviembre de 2007

Arcoiris en tus enlaces



Este hack fue mandado por LA BLOGUERIA (exelte blog, extremadamente recomendable para todo blogger) a traves de la forma de contacto me ha llegado al mail, agradezco infinitamente su apoyo y espero poder seguir contando con el y su gran blog.

Este hack sirve para que tus enlaces se llenen de color, ya que cuando pasemos el cursor por encima de los enlaces estos cambiaran de color, este hack aplica en todos los enlaces de tu blog.

Este hack lo pueden ver aplicado en mi blog de prueba ( un poco desastrozo ;), si pasan el cursor sobre los enlaces veran el efecto. Y es muy facil de hacer, para poder tener este truco en tu blog, solo tienes que ir a Plantilla----->editar HTML y justo antes de </head> pegan este codigo:

<script src="http://correo.yaju.googlepages.com/rainbow.js"></script>

Y eso es todo, solo guargen los cambio y verán el efecto en todos sus enlaces.

Nuevamente un gran agradecimiento a LA BLOGUERIA , gracias por todo :)


Escucha este escrito

sábado, 24 de noviembre de 2007

Se parte de Hacktime



Hola a todos, soy Alejandro comunmente conocido como Hacktime, hoy vengo a hacerles una propuesta. Estoy buscando bloggers que me ayuden con el blog.

Debido al poco tiempo que tengo para postear ( y de que no vivo de esto ) me veo obligado a pedirles su ayuda, si alguna persona cualquiera que sea, esta dispuesta a aportar algo ( no importa la cantidad ) al blog, por favor solo mandeme un mail a traves del botón de contacto y yo les respondere.

Un saludo a todos y perdone las molestias ;)


Escucha este escrito

sábado, 17 de noviembre de 2007

Flecha de "Ir arriba"

Como veran he puesto una flecha en la parte de la derecha de mi blog con la cual podran ir arriba en cualquier instante, este hack fue pedido por mail y se junto con la publicacion de Cesar asi que tambien dejare su enlace.

Para poder tener la flacha en su blog solo tendrán que ir a Plantilla----->Editar HTML----->Expandir artilugios----->y buscamos este codigo </body> , justo antes colocaremos este otro código:

<a href='#'><img alt='ir arriba' border='0' src='url de la imagen' style='position:fixed; bottom:0; right:0;'/></a>


En ese codigo se puede cmabiar la parte que dice ir arriba, por cualquier otra frase o palabra que quieran que sea mostrada cuando el cursor para sobre la imagen. tendran que cambiar donde dice URL de la imagen por la direccion de la imagen que quieran poner.

Slaudos

Enlace: Blog de Cesar


Escucha este escrito

jueves, 8 de noviembre de 2007

Crear reflejo de una imagen con un script



Este hack lo he sacado del uno de mis blogs favoritos de hacks, el blog de cesar, en esta ocasion les enseñare como crear el reflejo de una imagen con un script facil de usar.

Con tansolo agregar un pequeño codigo en la plantilla, y otro en el lugar donde vayamos a poner la imagen, esta generara automaticamente un reflejo bajo ella.

Lo primero que tenemos que hacer, es agregar el sig. codigo en Plantilla----->Edicion HTML----->justo antes de </head> lo pegamos:

<script src='http://correo.yaju.googlepages.com/reflection.js' type='text/javascript'></script>

Despues guardamos los cambios y nos vamos al lugar donde queremos agregar la imagen, como por ejemplo en un post. Ahi solo tendremos que agregar este otro codigo:

<img src="URL de la imagen" class="reflect"/>

Y ya esta, asi de fácil hemos creado un reflejo de una imagen, sin necesidad de estar editandolas con Photoshop.


Escucha este escrito

jueves, 1 de noviembre de 2007

Sonowebs


Tal vez no se hayan dado cuenta, pero he puesto en el blog una aplicación que me parecio interesante. Se trata de Sonowebs, una página la cual nos permite, tener una "voz" la cual "hable" nuestros escritos, solo con agregar un codigo en enuestra plantilla.

Si ustedes quieren tener este reproductor el cual "hable" sus escritos, solo tienen que agregar un codigo en su plantilla.

Nos vamos a Pantilla----->Editar HTML----- Expandimos artilugios, y buscamos este código:

<div class='post-footer'>

Inmediatamente antes pegamos este otro código:

<div id='speech'>
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0'
height='20' width='232'>
<param name='flash_component' value='ImageViewer.swc'/>
<param name='movie' value='http://www.sonowebs.com/tts.swf'/>
<param name='quality' value='high'/>
<param expr:value='"blogger=1&amp;lang=es&amp;blogurl=" +
data:blog.homepageUrl + "&amp;posttime=" + data:post.timestampISO8601'
name='FlashVars'/>
<embed expr:flashvars='"blogger=1&amp;lang=es&amp;blogurl=" +
data:blog.homepageUrl + "&amp;posttime=" + data:post.timestampISO8601'
height='20' quality='high' src='http://www.sonowebs.com/tts.swf'
width='232'/>
</object><br/>
</div>


Y eso es todo, solo guardamos los cambios y tendremos a "alguien" hablando nuestros escritos.

Saludos


Escucha este escrito

sábado, 27 de octubre de 2007

Script para mostrar un post al azar

Primero que nada me disculpo con todos los visitantes, pero no he estado en mi casa ya que tuve un pequeño accidente y tenia problemas al estar varias horas trabajando.

Lo que hoy les mostraré será un script con el cual podrás poner un boton o un enlace a un post random en tu blog.

Es muy fácil aplicarlo. Primero nos vamosa nuestra Plantilla y buscamos </head>, justo antes colocaremos este codigo:

<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://hacktime.blogspot.com";

function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=
1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};

function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}

};

function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};

function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>

Ahí solo cambiaremos la url que dice http://hacktime.blogspot.com por la de su blog.

Despues de eso nos iremos a Pantilla agregar Nuevo Elemento HTML / JAVASCRIPT, y agregamos este otro código:

<a href="javascript:randomPost();">Ver post al azar</a>

En este codigo pueden cambiar la frase "Ver post al azar" por cualquiera, incluso podemos usar un pequeño icono o imagen, es lo mismo.

Hack de | Purple moggy
Visto en | El escaparate de rosa


Escucha este escrito

domingo, 14 de octubre de 2007

Youtube, hackeado¿?

Esta noticia es de ultimo minuto, tratando de entrar a una de mis pagians preferidas, youtube.com, me encuentro con esto:



Click en la imagen para hacerla mas grande

Sera que youtube fue hackeado, o simplemente un error de los servidores de youtube, en fin, creo que estamos viendo como cae un grande del internet.


Escucha este escrito

sábado, 13 de octubre de 2007

Script para los ultimos posts


Como veran en este blog, he implementado un script para poder ver los ultimos post opublicados, con la fecha y una descripcion breve y el (leer mas).

Es muy facil tenerlo en tu blog, solo tienes que irte a:

Plantilla----->Añadir nuevo elemento HTML, y colocaras este código:

<script src="http://correo.yaju.googlepages.com/ultimosposts.js"></script>
<script language="javascript">
var numposts = 25;
var showpostdate = true;
var showpostsummary = true;
var numchars = 120;
var autoestilo = false;
var todoespacio = true;
var todolist = true;
var tododesplaza = true;
var todovelocidad = 2;
var todoaltura = 200;
</script>
<script src="http://tu blog.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Eso es todo, solo cambien donde dice "http://tu blog.blogspot.com" y eso es todo.

Original de: Beautifulbeta
Visto en: Elescaparatederosa
Modificado por: Todo links
Hackeado por: HACKTIME

En este link podemos ver todas las variables que podemos alterar en el script, pero yo les recomiendo dejarlo asi si no sabe mucho de los scripts.


Escucha este escrito

miércoles, 10 de octubre de 2007

Exelente creador de menus


Vagando por la web, me encuentro con esta pagina la cual es perfecta para pode hacer menus muy buenos, con exelentes diseños y acabados, y lo mejor de todo es que son facilisimos de configurar. El unico problema que le encuentro es que nosotros mismos tenemos que subir las imagenes a un servidor, de spues de descargarlas de su sitio.

La pagina se llama Cssmenumaker.com, en esa pagina, podremos elegir entre varios diseños de menus, ya sean horizontales, o verticales.

Con unos cuantos datos que agregemos, ya estaran listos nuestros menus, solo nos pediran:

Numero de enlaces
La url de los enlaces

Y eso es todo, la paigna configura todo, y al final nos da dos codigos:

El primer codigo (CSS Code) lo tendremos que agregar antes de ]]></b:skin>,(en la Plantilla en edicion HTML) es el codigo que dice CSS Code, es el segundo que se muestra en la pagina. recuerden que en este codigo tenemos que modificar la URL de la imagenes que nosotros hayamos subido a nuestro servidor.

Despues el segundo codigo que agregaremos, es el primero que sale en la pagina (HTML Code) sera agregado, en Plantilla->agregar Nuevo elemento, y ahi pegan el codigo HTML Code.

Eso es todo, es una forma rapida y muy efectiva de crear sus menus.


Escucha este escrito

domingo, 7 de octubre de 2007

Enlaces punteados


Este hack lo he implementado en mi blog, ya que me he dado cuenta que los enlaces se ven feos cuando pasamos el puntero sobre ellos, ya que se ven puntos alrededor.

Para quitar estos feos puntos, lo unico que tendremos que hacer, sera esto:

Irnos a Plantilla---->y buscamos este codigo:

</b:skin>

Y justo antes colocamos este otro:

a {
outline:none;
}

Eso es todo, es asi de facil.

Visto en El rastreador que a su vez lo saco de Gemablog


Escucha este escrito

Cambiar el cursor al pasar por un link o imagen

Este truco, la verdad no le encuentro el uso, pero habra gente que le guste aplicarlo en su blog.

Ejemplo:




Veran que al pasar el cursor por encima de la imagen, este cambiara a una cruz.

El truco es fácil.

Lo unico que tenemos que hacer, es esto. Ya que tenemos el codigo de la imagen agregada, como este:

<img src="la url de la imagen">

Solo tendremos que agregar el codigo en azul: (incluyendo el amarillo)

<img style="CURSOR: aqui-el-nombre-del-cursor-que-quieran" src="la url de la imagen">

Se puede agregar en un enlace tambien, cuando hacemos un enlace, el codigo nos queda asi:

<a href="aqui-la-url-del-enlace">aqui el texto</a>

Solo tendriamos que agregar el codigo en azul: (incluyendo el amarillo)

<a style="CURSOR: aqui-el-nombre-del-cursor-que-quieran" href="aqui-la-url-del-enlace">aqui el texto</a>

Los nombres de los tipos de cursores que podemos agregar son estos: (pasen el cursor encima de la palabra para ver su efecto)

default
crosshair
hand
move
nw-resize
ne-resize
n-resize
e-resize
help
text
wait

Eso es todo. Suerte

Visto en: ciberadictos


Escucha este escrito

sábado, 6 de octubre de 2007

Emailmeform


Pues, una persona (la cual me dijo que no diera su nombre, por que, no lo se) me pidio que publicara la forma en que hice el metodo de contacto que esta arriba (con un boton que dice "Contacto"), mediate un boton se abre una pagina nueva con la cual ustedes me pueden madar mails, y la respuesta es facil.

Yo no lo hice, lo he sacado de esta pagina , en la cual puedes diseñar tus formas, poner o quitar lineas, etc, con las cuales te pueden contactar tus visitantes o para cualquier uso.

La pagina se llama Emailmeform y solo tarda unos segundos el registro con el cual tendras derecho a hacer 5 formas, si deseas hacer mas de 5 tendras que dar un pago a cambio.


Escucha este escrito

miércoles, 3 de octubre de 2007

Imagen que se muestra mientras se carga el blog

Imagen muestra

Pues este en un nuevo hack que he implementado en mi blog, espero que les funcione ya que da muy buena vista al blog.

Lo primero que tenemos que hacer es irnos a:

Plantilla----->Editar HTML------>y justo antes de </head> colocamos este codigo:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>

Despues guardamos los cambios y nos dirigimos a:

Agregar nuevo elemento en plantilla HTML/Javascript y agregamos este otro codigo: (en cualquier parte donde quieran que aparezca la imagen)

<div id="imgLOAD" style="text-align:center;">
<img src="URL DE LA IMAGEN"/>< </div>

No olviden cambiar la ULR de la imagen ( aqui para los principiantes ).

En esta pagina hay muy buenas imagens que podemos colocar, pero claro tenemos al gran google que simpre nos trae mas y mas variadas imagenes.

Visto en : Cabalas virtuales


Escucha este escrito

martes, 2 de octubre de 2007

Como modificar tamaño de imágenes con HTML

Pues esta fue una de la interrogantes mas grandes que yo tuve al iniciarme en esto de los blogs, como poder cambiarle el tamaño a las imagenes mediante codigo HTML.

La verdad es muy facil y he aqui la explicacion:

Cuando vamos a subir imagenes al blog, nos aparece una ventanita asi:



Es la parte de la derecha abajo hay tres opciones para modifiar el tamaño de la imagen que estemos subiendo pero aveces quedan de un tamaño raro, con el cual no se ven bien las imagenes, entonces lo que podemos hacer es editarlo en el codigo HTML.

Cuando subimos la imagen, nos vamos a Edicion HTML al lado de redactar y nos aparecera un codigo un poco largo, el cual trataremos que quede como abajo, borrando todo lo demas para que quede masomenos asi:

<img src="Aqui la url de la imagen">

Despues lo que haremos sera agregar el codigo que vemos en color azul abajo:

<img src="Aqui la url de la imagen" border="0" height="0" width="0">

Lo que estamos haciendo ahi es editar su altura con los valores de height="0", los valores de el ancho con width="0" y los valores del borde de la imagen con border="0". Los numeros son pixeles.

Espero que les sirva este pequeño truco.

Visto en: Gemablog


Escucha este escrito

lunes, 1 de octubre de 2007

Localizar de forma fácil un código en la plantilla

Ya sabran que es un poco desgastante andas buscando linea por linea un codigo en la plantilla, cuando queremos hacer un hack, por eso les traigo aqui un pequeño "truco" que nos facilitara este trabajo.

SI estas usando firefox, lo unico que tendras que hacer para poder ubicar un codigo en la plnatilla, sera apretar CTRL + F,, te saldra una ventanita algo asi como la imagen:

Esta en rojo por que no encontro el texto en al pagina, se pondra verde cuando encuentre alguna coincidencia en el texto que estas buscando.

Solo tendras que escribir adentro el codigo que estas buscando y con un solo lcik lo encontrara en toda la pagina.

En IE (internet explorer) es lo mismo solo que te sale una ventana como esta:

Y es asi de fail encontrar un codigo en cualquie parte de la plantilla.


Escucha este escrito

Mostrando el rastro de las paginas



Pues como veran en mi blog, he implementado este hack, el cual nos dice de donde venimos, osea un rastro de la pagina, como podfemos ver en la imagen arriba.

Es un hack con dificultad media ya que si editamos un punto nos sale error, asi que si lo van a intentar en su blog, les recominedo guarden todo el codigo de su plantilla primero, por cual quier error, la puedan recuperar.

Empezemos.

Primero, nos tenemos que ir a:

Plantilla----->Expandir artilugios----->y el primer codigo que buscaremos sera este:

<b:includable id='main' var='top'>

Inmediatamente arriba colocaran este otro:

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
Estas en:
<a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a> &gt;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
</b:includable>

Despues buscaremos este otro codigo:

<b:if cond='data:post.dateHeader'>

Y justo encima colocaremos este otro:

<b:include data='post' name='breadcrumbs'/>

Por ultimo colocaremos el siguiente codigo justo antes de ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Y eso es todo, solo guarden los cambio y veran este hack en su blog.

NOTA: Recuerden siempre que vayan a intentar un hack como este tener una copia de seguridad del codigo completo de su plantilla.

Visto en: Elescaparatederosa


Escucha este escrito

jueves, 27 de septiembre de 2007

Imprimir pagina

esta es solo una imagen, no imprime la paginaEsta es solo una imagen, no imprime nada :)
Este en un hack que he descubierto yo solo y sin querer, ya que estaba observando codigos de otras plantillas de paginas profesionales me encotre con un par de codigos que puse inmediatamente en mi blog de prueba (no les recomiendo que lo vean esta muy sucio y lleno de cosas, ;)), los cuales resultaron ser los codigos para imprimir la pagina.

Como pueden ver yo los he puesto arriba junto al titulo, tal vez un poco mas abajo.

Para poder tener ese codigos en tus posts, es muy facil.

Primero que nada te tienes que ir a:

Plantilla----->Editar HTML----> y vamos a expandir los artilugios, despues tenemos dos opciones:

1.- Agregar los codigos en la parte superior como esta en este blog.

2.-Ponerlo abajo, justo despues de que acabe el post.

1.-

Para el numero uno, tenemos que buscar este codigo:

<div class='post-header-line-1'/>

Y justo antes colocamos este otro codigo: (el codigo viene para que salga el icono que yo tengo en este blog, pueden cambiarlo por otra iagen o por una palabra)

<div align='right'> <a href='javascript:print()'><img src='http://correo.yaju.googlepages.com/imprimir.gif'/></a></div>

Tambien podemos cambiar la posicion (derecha , izquierda) cambiando donde dice "right. Y asi acaba la forma del numero uno.

2.-

Para poner el boton justo abajo de que acaba el post, tenemos que buscar este otro codigo en nuestra plantilla, como lo habiamos hecho con el numero 1:

<p class='post-footer-line post-footer-line-3'/>

Y justo antes colocamos este otro codigo: (el codigo viene para que salga el icono que yo tengo en este blog, pueden cambiarlo por otra iagen o por una palabra)

<div align='right'> <a href='javascript:print()'><img src='http://correo.yaju.googlepages.com/imprimir.gif'/></a></div>

Tambien podemos cambiar la posicion (derecha , izquierda) cambiando donde dice "right. Y asi acaba la forma del numero dos.

Espero les sirva ya que en ningun blog de hacks que yo conozco enseña este truco.


Escucha este escrito

Imagenes que se amplian con un clik

Este truco es muy bueno en cuanto a que da muy buena presentacion al blog, ya que sirve para poder ver imagenes en miniatura las cuales se agrandan al darles click, y la cuales se cierran cuando das click sobre ellas.

Ejemplo:








Solo tienen que hacer dos cosas, una es, primero te vas a:

Plantilla---->Editar HTML-----> y justo antes de </head> colocas este codigo:

<link href='http://correo.yaju.googlepages.com/thumbnailviewer.css'/>
<script src='http://correo.yaju.googlepages.com/thumbnailviewer.js' type='text/javascript'>
</script>

Despues guardas los cambios y te vas a cualquier lugar donde quieras colocar la imagen o imagenes y colocas este otro codigo:

<p><a href="URL de foto" rel="thumbnail" title="Esto sale abajo de la foto">
<img src="URL de foto" style="width: 85px; height: 125px" /></a></p>

En este codigo se cambia el tamaño de la imagen en pequeño donde dice 85 px y 125 px. Si quieres que la imagen en miniatura se vea mas grande solo aumenta los pixeles.
No olvides poner la URL de la imagen dos veces en el codigo, y cambiar donde dice "Esto sale abajo de la foto" para que se vea bien la imagen.

Y eso es todo. Recuerden sus dudas me las pueden hacer saber mediante el boton de arriba que dice "Contacto"


Escucha este escrito

Buen juego

Click en al imagen para ir a la pagina

Pues hoy no les traigo un hack para blogger sino un estupendo juego que encontre mientras paseaba en la red.

Se llama Ramps y tiene 33 niveles, espero que les guste, y otra cosa he aqui los 3 codigos para desbloquear los 4 ultimos niveles:

youseemstarshaped - nivel 30


onefootinthegrave - nivel 31


theresnootherway - nivel 32


shakeappeal - nivel 33

Espero en estos dias ya empezar a postear diario, por favor no dejen de visitar el blog, que ya empezare a trabajar otravez.


Escucha este escrito

viernes, 21 de septiembre de 2007

Mostrar hasta 5 posts al azar

Nuevamente he regresado y con muchos trucos que contar.

Hoy veremos la forma de como poder tener un script para mostrar hasta 5 posts al azar de nuestro ( o de cualquier ) blog.

Este no es un hack, pero es algo que muchos hemos estado buscando en la red. Solamente tenemos de ingresar a la web de Stuff a Blog , ahi ingresaremos la url de nuestro blog y en solo unos segundos, sin registro ni nada complicado, tendremos los posts aleatorios en nuestro blog.

Por supuesto se pueden mostrar las entradas de nuestro blog o las de otro, dependerá de la url que coloquemos.

Tambien tenemos que llenar algunas indicaciones como son:

En "Keyword" ponemos cualquier palabra la cual pensemos nosotros que se reprite muchas veces en nuestro blog.

En "Show Snippets" escogemos SI para mostrar además del título de los posts, parte de su contenido, o tambien podemos escoger NO si solo queremos mostrar el título de los posts.

En "Border" escogemos SI si queremos ver los posts dentro de una caja, o escoger NO para verlos sin borde.

En "Results" escogemos el número de entradas a mostrar, como limite son 5.

despues la pagina te proporcionara un codigo HTML, el cual tienes que pegar en tu sidebar como un nuevo elemento HTML/JAVASCRIPT, o hay otra forma mas rapida y facil la cual es dando click en el boton que dice "Add to blogger" e inmediatamente tendras el script en tu sidebar.

Es una muy buena opcion para los que no quieren andar editando codigos y todo lo que implica hacerlo.


Escucha este escrito

martes, 4 de septiembre de 2007

Otro traductor

He aqui el codigo de un nuevo traductor.









Es muy facil de ponerlo en tu blog, solo tienes que agregar en Plnatilla-----> Nuevo Elemento HTML---->agregas este codigo:

<form id="translateForm" action="http://www.worldlingo.com/S1790.5/translation" target="_blank">

<input value="ES" name="wl_srclang" type="hidden"/>

<select style="font-size: 70%; width: 160px;" name="wl_trglang">

<option value="AR"/>Spanish to Arabic

<option value="ZH_CN"/>Spanish to Chinese (Simplified)

<option value="ZH_TW"/>Spanish to Chinese (Traditional)

<option value="NL"/>Spanish to Dutch

<option value="FR"/>Spanish to French

<option value="DE"/>Spanish to German

<option value="EL"/>Spanish to Greek

<option value="IT"/>Spanish to Italian

<option value="JA"/>Spanish to Japanese

<option value="KO"/>Spanish to Korean

<option value="PT"/>Spanish to Portuguese

<option value="RU"/>Spanish to Russian

<option value="EN"/>Spanish to English

<option value="SV"/>Spanish to Swedish

</select>

<input value="http://hacktime.blogspot.com/" name="wl_url" type="hidden"/>

<input style="font-size: 70%; width: 35px;" value="Go" type="submit"/>

</form>


Y para todos los que su blog no sea es español, este traductor, valga la rebundancia, traduce cualquier idioma, solo tendran que cambiar donde dice Spanish por el nombre de su idioma, el nombre no influye en nada solo es para dar buen aspecto al traductor.

Carol, esta es la respuesta a tu pregunta.

No olviden cambiar donde dice hacktime.blogspot.com por la url de su blog.


Escucha este escrito

Nuevos ultimos comentarios

Como ya hemos comprobado varios de nosotros, ya no sirven los feeds para los ultimos cometarios en blogger, oslamente se mustran quienes hicieron los comentarios, no en que post ni el link al post.

Para eso hay un truco muy facil de hacer.

Primero lo que tenemso que hacer es irnos a Plantilla----->Editar HTML----->y buscamos esto:

</head>

Y justo antes vamos a colocar este otro codigo:

<script src='http://leonelhack.googlepages.com/leonelhack.js' type='text/javascript'/>

Despues de esto nos vamos a ir a Plantilla----> Agregar nuevo elemento HTML, y vamos a agregar este otro codigo:

<br/><script language="javascript">
var numcomments = 10;
var numchars = 60;
</script>
<script src="http://NOMBRE_DEL_BLOG.blogspot.com/feeds/comments/default?start-index=2&
alt=json-in-script&callback=commentDisplay"></script>

Donde dice 10, es el numero de comentarios que quieres mostrar, se puede editar y donde dice 60 es el numero de letras que quieras que aparezcan por cada comentario, tambien se puede editar.

Espero que les funcione, ya que a mi si me esta funcionando.


Escucha este escrito

lunes, 3 de septiembre de 2007

Quitar el numero en las categorias

Respondiendo preguntas:

¿Como se puede hacer para que no se muestren los numeros al lado de las catagorias?

Hay una manera muy facil de hacer esto.

Primero que nada hay que nombrar al elemento donde tenemos las etiquetas, es decir, en el elemento de la plantilla donde agregamos las etiquetas tenemos que ponerle un nombre. miren la imagen, ese es el nombre del elemento de las etiquetas.


Despues de que le hemos dado un nombre a las etiquetas, nos dirigimos a:

Plantilla-----> Editar HTML----->Expandir artilugios, despues vamos a buscar el nombre que le dieron al elemento de las etiquetas.

Una vez encontrado ese nombre, vamos a buscar casi debajo del nombre este codigo:

(<data:label.count/>)

Una vez localizado, solo lo borramos, verificamos que haya quedado bien en vista previa y eso es todo.


Escucha este escrito

lunes, 27 de agosto de 2007

Compartir tus entradas


A peticion de un amigo, Alejandro Cano dueño de blogtecno.com, aqui esta la forma de poner los plugins sociales para poder compartir tus entradas en meneame, technorati, deli.cio.us, digg, yahoo, promoting blogs, etc.

Lo unico que tenemos que hacer para poder compartir nuestros posts, es lo siguiente.

Se van a:

Plantilla-----> Editar HTML----->Expandir artilugios, y buscan este codigo:

<p class='post-footer-line post-footer-line-3'/>

Inmediatamente antes de ese codigo agremos este otro:

Compártelo: <a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Menéame'><img src='http://img181.imageshack.us/img181/3083/meneamehm7.gif'/></a> |



<a expr:href='"http://www.technorati.com/search/" + data:post.url' target='_blank' title='Technorati'><img src='http://img45.imageshack.us/img45/5606/technoratiiy1.gif'/></a> |



<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Del.icio.us'><img src='http://img50.imageshack.us/img50/9913/deliciogl4.gif'/></a> |



<a expr:href='"http://digg.com/submit?phase=2&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='DiggIt!'><img src='http://img50.imageshack.us/img50/300/diggjf4.gif'/></a> |



<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?url" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Yahoo!'><img src='http://img50.imageshack.us/img50/163/yahooab9.gif'/></a> |



<a expr:href='"http://tec.fresqui.com/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Fresqui'><img src='http://img45.imageshack.us/img45/5397/fresquisr8.gif'/></a> |



<a expr:href='"http://promotingblogs.com/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='PromotingBlogs'><img src='http://img261.imageshack.us/img261/5318/pb16x16it8.png'/>

</a>

Despues solo revisamos que haya quedado bien en vista preliminar y guardamos los cambios, y eso es todo, tus post estas listos para aparecer en paginas como meneame, digg, etc.

Si tienen alguan duda dejenla en los comentarios.


Escucha este escrito

La bandera de tu visitante

Este es un "hack" para que tu blog luzca bien.

Bienvenidos, tu nos visitas desde:


IP Address Lookup


Si quieres que la bandera de un visitante de tu blog aparezca solo tienes que agregar este codigo:



Eso es todo, suerte.


Escucha este escrito

domingo, 26 de agosto de 2007

Traductor

He aqui el codigo de un traductor que le caeria de maravilla , si quieres que te lean personas en otros idiomas.

Solo tienes que irte a Plantilla----->Agregar Nuevo Elemento----->HTML/ Javascript, y agregas es siguiente codigo:



Despues solo guardan los cambios y ya esta. Si tienen dudas dejen sus comentarios.


Escucha este escrito

miércoles, 22 de agosto de 2007

Abrir-cerrar animado


ABRIR | CERRAR


Hola a todos he aqui un nuevo hack



Para poder tener este codigo animado en tu blog, es muy facil, solo son dos pasos faciles.

1.- Lo primero que tienes que hacer es ir a tu plantilla en:

Plantilla---->Edicion HTML---->y buscas este codigo <head>, e inmediatamente despues colocas este codigo:

<script src='http://weblogsam.googlepages.com/animatedcollapse.js' type='text/javascript'></script>

Guardas los cambios y te vas a cualquier parte donde quieras poner la animacion, y colocas este otro codigo:

<center>

<a href="javascript:collapse.slidedown()">ABRIR</a> | <a href="javascript:collapse.slideup()">CERRAR</a></center>

<div id="nombre1" style="width: 220px; height: 150px; background-">

Aqui va lo que quieran ocultar

<script type="text/javascript">var collapse=new animatedcollapse("nombre1", 500, false)</script>

</div>

Y eso es todo, traten de no tocar nada, solamente si quiern cambien las palabras "ABRIR" Y "CERRAR" por alguna imagen.

Y eso es todo, espero que les funcione este hack ya que da una impresion muy buena de tu blog.


Escucha este escrito

jueves, 9 de agosto de 2007

Imagenes en movimiento

Repondiendo la pregunta de ChimboteXtremo si se uede poner imagenes en movimiento, aqui esta como:

El codigo principal seria este:

<marquee><img src="#"></marquee>

Que se veria asi:



Despues si queremos cambiar el lugar del movimiento, por ejemplo hacia arriba sera asi:



Solamente tenemos que agregar el comando direction="up" ( puedes cambiarlo por "down", para que las imagenes se muevan para abajo )

<marquee direction="up"><img src="#"></marquee>


Si quieres que la imagen se detenga al pasar el mouse, el codigo seria este:

<marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up">

<img src="#">

</marquee>

Severia asi:





Lo que colocamos en este codigo es el onmouseover="stop()" onmouseout="start()", esto significa que se detiene cuando el mouse esta sobre la imagen y que vuelve a moverse cuando se quita el mouse, tambien agregamos el scrollamount="2" scrolldelay="100", en esta parte puedes cambiar la velocidad de movimiento de la imagen en scrollamount aumenta los valores para acelerar la velocidado aumenta en scrolldelay para que valla mas lento.

Ahora, si queremos modificar la altura de la caja de imagenes ( no encontre otra forma de llamarle ) tenemos que agregar el comando height entonces quedaria asi:


marquee HEIGHT=100px onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up">

<center><img src="#" /> </center>

<center><img src="#" /></center>

</marquee>

La iamgen muestra que es lo que estamos modificando.



Entonces finalmente nuestro codigo quedaria asi:

<marquee HEIGHT=100px onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up">

<center><img src="#" /> </center>

<center><img src="#" /></center>

</marquee>


Y se veria asi:







Espero haber respondido tu pregunta ChimboteXtremo.

Suerte


Escucha este escrito

miércoles, 8 de agosto de 2007

Plantilla Hacktime 3


Despues de varios dias sin publicar he regresado, y aqui les traigo la plantilla hacktime 3, esta basada en el diseño de blog and web, la plantilla trae sus respectivos creditos.


Espero que les guste.


Escucha este escrito

sábado, 4 de agosto de 2007

Plantilla Hacktime 2


Despues de varios dias de no postear (estaba de vacaciones) aqui les traigo una nueva plantilla.

El creador es Cesar, y yo la edite.



Espero que les agrade.


Escucha este escrito

viernes, 3 de agosto de 2007

Textos en movimiento

Bueno, empezemos con el texto en movimiento mas facil:

1. Codigo:

<marquee>Hola a todos</marquee>

Asi se ve:

Hola a todos

2. Codigo:

<MARQUEE BGCOLOR=#FF4500>Texto móvil</MARQUEE>

Asi se ve:

Texto móvil

3. Codigo:

<marquee behavior="alternate">Texto en movimiento</marquee>

Asi se ve:

Texto en movimiento

4. Codigo:

<marquee direction="up">Texto en movimiento</marquee>

Asi se ve:

Texto en movimiento

5. Codigo:

<marquee direction="down">Texto en movimiento</marquee>

Asi se ve:

Texto en movimiento

6. Codigo:

<marquee direction="up" behavior="alternate">Texto en movimiento</marquee>

Asi se ve:

Texto en movimiento

7. Codigo:

<marquee style="border:#FF4500 2px SOLID">Texto en movimiento</marquee>

Asi se ve:

Texto en movimiento

8. Codigo:

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">Texto en movimiento</marquee></marquee>

Asi se ve:

Texto en movimiento

9. Codigo:

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">Texto en movimiento</marquee></marquee>

Asi se ve:

Texto en movimiento

10. Codigo:

<font color="#FFFF00"><marquee direction="left" style="background:#CD3333">Eso es todo, solo cambien los valores de los colores por los colores que deseen.</marquee></font>

Asi se ve:

Eso es todo, solo cambien los valores de los colores por los colores que deseen.


Eso es todo, solo cambien los valores de los colores por los colores que deseen.

Nota:

No es necesario saber los codigos de los colores, tambien se pueden escribir en ingles, por ejemplo para poner el color rojo, no es necesario poner #xxxxxx, puedes solo escribir #red, y ya.


Escucha este escrito

martes, 31 de julio de 2007

Cuadro con boton "Seleccionar texto"


Hola este dia les traigo la forma de hacer un recuadro con el cual se puede sellecionar el texto que esta dentro con un click. Vean el ejemplo en este blog.

Este el el codigo que hay que agregar, por el momento solo me ha funcionado en la sidebar, no en un post:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function copyit(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
therange=tempval.createTextRange()
therange.execCommand("Copy")
}


// End -->
</script>
<center><form name="it">
<input onclick="copyit('it.select1')" type="button" value="seleccionar texto" name="cpy">

<p><textarea name="select1" rows="5" cols="19">Aqui va el texto que quieren que sea seleccionado</textarea></p>

</form></center>
Bueno, eso es todo.


Escucha este escrito

sábado, 28 de julio de 2007

.:Cartelito al pasar el mouse:.

Este es un pequeño truco con el cual al pasar el mouse sobre un texto, imagen o lo que sea aoarece un cartelito que dice lo que tu queiras.

Ejemplo:

Hola a todos les mando un ósculo desde mexico df.

Al pasar el mouse por encima de osculo sale un cartelito, este truco es my facil de hacer, solo tienes que usar el siguiente codigo.


Escucha este escrito

.:Una pagina dentro de tu blog:.

Si quieren tener dentro de su blog otra pagina solo tienen que agregar el siguiente codigo en cualquier parte de la entrada.



Quedaria asi:



Lamento no poder dar mas explicaiones pero cada vez que editaba la entrada se cerraba el IE.


Escucha este escrito

Menu 2

Aqui les traigo otro menu muy padre espero q les agrade:


Bueno, primero tenemos que irnos a:

Plantilla----> Editar HTML---->y justo despues de <head> pegas el siguiente codigo:


<style type='text/css'>

#hacktime-blogspot-commenu{ /*Codigo del menú de botones debajo de la cabecera*/
padding-top: 5px;
padding-bottom: 2px;
width: 100%;
font-weight: bold;
font-size: 90%;
}

#hacktime-blogspot-commenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#hacktime-blogspot-commenu ul li{
display: inline;
}

#hacktime-blogspot-commenu ul{
border: none;
width: 99.3%;
background-color: C1AEEE; center
center repeat-x;
padding: 5px 0 5px 0;
margin: 0 0 0 0;
text-align: center; /*set value to "right" for example to align menu to the left of page*/
}

#hacktime-blogspot-commenu ul li{
display: inline;
}

#hacktime-blogspot-commenu ul li a{
background-color: #99C9FF;
color: #085A91;
padding: 5px 10px;
margin: 10;
text-decoration: none;
border: solid;
border-color: #3E76B1;
}

#hacktime-blogspot-commenu ul li a:hover{
background-color: #D1EAFA; center
center repeat-x;
} /* Fin del código del menú de debajo de la cabecera */


</style>


Despues guardas los cambios y te vas a:

Plantilla------> Agregar nuevo elemento HTML/Javascript, y pegas este codigo:


<div id="hacktime-blogspot-commenu">

<ul>

<li><a href="#">Aqui va el enlace 1</a></li>

<li><a href="#">Aqui va el enlace 2</a></li>

<li><a href="#">Aqui va el enlace 3</a></li>

</ul>

</div>

Y eso es todo, si quieres cambiar los colores del menu solamente cambia los valores en el primer codigo, y si no sabes los valores de los colores visita este post.


Espero que les agrade el menu y si pueden porfavor pongan un link hacia Hacktime.
Gracias


Escucha este escrito

viernes, 27 de julio de 2007

Plantilla Hacktime 1



Despues de varias horas acabe, la primera plantilla creada por mi.

Espero que si la van a usar por favor pongan un link de este blog en su blog, es una manera facil de agradecer.

Ojala y les agrade. :)

Verla en funcinamiento

Descargar

Despues de descargar, solo se tienen que ir a:

Plantilla---->Editar html----> y le dan click en "Examinar" buscan el archivo que descargaron y le dan en subir.

Suerte.


Escucha este escrito

jueves, 26 de julio de 2007

Colores

Ya que he recibido varios mail de personas que no saben cuales son los codigos para los colores, les voy a dejar aqui en descarga directa el programa pequeño y muy util con el cual solo tienes que pasar el puntero sobre el color deseado y dar un click, luego te dara el codigo del color.




Este programa es muy util si quieres editar por ejemplo tu plantilla de blogger, menus, etc.


Escucha este escrito

miércoles, 25 de julio de 2007

.:Asimo:.

Hoy dejare de lado los hacks y les presentare algo que a mi se me hizo asombroso, el proyecto Asimo de la Honda.

Este robot "humanoide" fue creado por la compañia Honda en el año 2000, el objetivo de esta compañia es crear un robot humanoide capaz de interactuar con las personas y de ayudarles haciéndoles la vida más fácil y agradable. Aunque todavía estamos lejos de poder asignarles trabajos concretos a los robots humanoides, podrían utilizarse, por ejemplo, para ayudar e incrementar la autonomía de las personas con minusvalías y de las personas mayores.

Evidentemente, todavía tienen que transcurrir muchos años hasta que se pueda cumplir este objetivo, pero algunas empresas de Japón ya utilizan los servicios de ASIMO para funciones promocionales como la recepción de visitantes.

Aqui les dejo el comercial de Asimo.


Solo hay que imaginar, tal vez en par de decadas veamos muchos de estos robots ayudandonos en nuestra casa o trabajo, etc.

Me gustaria tener uno asi. :)


Escucha este escrito

martes, 24 de julio de 2007

.:Cerrar ventana:.

Siempre quise saber como le hacian esas paginas que con un click se cierra la pagina, y encontre el codigo:


Este es el codigo:

<input name="button" type="button" onclick="window.close();" value="Clic para cerrar" />

Cada persona le encuentra un uso diferente.

Salu2


Escucha este escrito

lunes, 23 de julio de 2007

.:Menu:.

Pues ya he regresado y les traigo aqui un menu padre que les puede gustar.

No lo he implementado en este blog por que me gustan mas estas pestañas pero lo pueden ver aqui.

Este menu es muy facil de implementar en cualquier blog, lo unico que tienes que hacer es colocar el sigueinte codigo en:

Plantilla----> Editar HTML---->y buscas <head> e inmediatamente despues colocas este codigo:

<style type='text/css'>

#hacktime-blogspot-commenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#hacktime-blogspot-commenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: &quot;.";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#hacktime-blogspot-commenu ul{
border: 3px double #000;
width: 99%;
background-color: #FFF; center
center repeat-x;
padding: 8px 0;
margin: 0;
text-align: left; /*set value to &quot;right" for example to align menu to the left of page*/
}

#hacktime-blogspot-commenu ul li{
display: inline;
}

#hacktime-blogspot-commenu ul li a{
color: #000000;
padding: 9px;
margin: 10;
text-decoration: none;
border-right: 3px double #000;
}

#hacktime-blogspot-commenu ul li a:hover{
background-color: #B3B3B3; center
center repeat-x;
}

</style>
.
Luego guardass los cambios y te vas a Plantilla----> Agregar nuevo elemento, y agregas este otro codigo:

<div id="hacktime-blogspot-commenu">
<ul>
<li><a href="#">Aqui va el enlace 1</a></li>
<li><a href="#">Aqui va el enlace 2</a></li>
<li><a href="#">Aqui va el enlace 3</a></li>
<li><a href="#">Aqui va el enlace 4</a></li>
<li><a href="#">Aqui va el enlace 5</a></li>
</ul>
</div>
.
Solo tienes que cambiar las # por la url de la pagina que quieras y eso es todo, espero qu les guste este menu ya que me costo un poco de tiempo hacerlo. :)
.
Me pueden dejar un comentario si no les gusta el tamaño o los colores o diganme lo que no les gusto y lo tratare de cambiar. ;)


Escucha este escrito

domingo, 22 de julio de 2007

.:Aclarar imagen:.

Este es un hack muy facil, solo pasen el mouse por encima de la imgen y veran lo que pasa.

imagen transparente

Si quieren que una imagen se aclare cuando pasan el mouse sobre ella solo utilizan este codigo:

<p align="center"><img onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" alt="imagen transparente" style="-moz-opacity:0.4;filter:alpha(opacity=40)" src="Aqui la url de la imagen"/></p>

Y eso es todo.


Escucha este escrito

viernes, 20 de julio de 2007

.:Truco de la imagen:.

Este es un pequeño truquito, solo pasen el mouse por encima de la imegen y veran lo que pasa.





Este truco es muy sencillo, lo unico que temos que hacer es agregar el sig codigo en cualquier parte donde vallamos a escribir o poner una imagen:

<a onmouseover="parent.location='AQUI LA DIRECCION A LA QUEREMOS REDIRECCIONAR'"><img src="LA URL DE LA IMEGEN"></a>

Y eso es todo. :)


Escucha este escrito

jueves, 19 de julio de 2007

.:Google y su significado:.

Pues paseando por la web, me dio curiosidad saber que es y de donde venia la palabra del mas gran buscador "Google".

Esto fue lo que encontre:

La gente de Google explica que el término proviene de Googol, un número enorme: 10^100 o diez mil octillones [en castellano].




Desde un punto de vista físico, un gúgol es mayor que el número de átomos en el Universo y sin embargo se ha vuelto relativamente común con la invención de las computadoras [el término fue acuñado en 1938]

Los fundadores del buscador más famoso del mundo, Sergey Brin y Larry Page, “eligieron este nombre haciendo alusión a la gran cantidad de información que existe en el mundo”.

Es interesante señalar que según algunos cálculos se generaron 161 exabytes [2^60 bytes] de información digital solo en 2006. La información "original" sería de 40 exabytes pero la reproducción [copia] hizo que esta se multiplicara varias veces al punto que algunos predicen un colapso de Internet para finales del 2007.

Que grande!!


Escucha este escrito

miércoles, 18 de julio de 2007

.:Como hacer que los enlaces se undan:.

Pues como pueden ver en el blog, acabo de implementar el hack de que los enlaces se undan cuando pasamos el mouse sobre ellos, es my facil hacerlo.

Solo nos vamos a:

Plantilla---->Editar HTML---->y buscamos el codigo de abajo: (hay muchos codigos iguales, pero este es el primero que aparece en la plantilla)

a:hover {
color: #aqui esta algun color;

Y solo agrega las partes que estan en azul:

a:hover {
color: [c=4]#aqui esta algun color;[/c]
text-decoration:none;
position: relative;
top: 1.5px;
left: 1.5px;}

Eso es todo, solamente modifica los valores 1.5 por la cantidad de pixeles que quieras que se undan los enlaces.


Escucha este escrito

martes, 17 de julio de 2007

.:Como poner metatags en tu blog:.

Primero que nada voy a disculparme por no estar atendiendo el blog muy seguido, es que he tenido mucho trabajo en la escuela, pero, como todos ya saben, ya acabaron las clases!!!

Empezemos:

Primero empezare explicando que son los metatags son etiquetas html que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Osea que si poner en tus metatags, palabras como youtube, gmail, o cosas asi, cuando la gente busque esas palabras, el buscador pondra en los resultados tu blog.

Para agregar metatags en tu blog te tienes que ir a:

Plantilla---->Editar HTML---->y buscas este codigo: (esta en los primeras lineas del codigo del blog)

<title><data:blog.pageTitle/></title>

Y lo cambias por este otro:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>nombre_del_blog palabra1 palabra2 palabra3 .... </title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


No olvides cambiar las palabras clave, en el codigo separandolas con una coma.

Eso es todo, solo guarda los cambios.


Escucha este escrito

Calendario de posts

Cargando...

 
ir arriba