Hacker of the Web
Tus ideas en código!...y mas

[+/-]
Diferenciar links

Este código es simplemente para diferenciar los tipos de archivo a los que tienes enlazados en tu blog. Los pasos son los siguientes.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



[1] necesitas entrar en Edición de HTML, no necesitamos expandir plantillas de artilugios solo necesitas colocar antes de ]]></b:skin> los códigos que necesitas.
[2]Los códigos son los siguientes: 
a[href $='.zip'], a[href  $='.rar']{  
  padding-right: 18px;
  background: transparent
  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkXtHAtfUQazyWr73a3VOr3BePGtY23K-8uC6XHs3UvCAOMi_RWB5pAQoOaWxBui_aJFCh_V4d0NuT7w7I-Ww1zpEX1BMvf5RZyzNgKEPhN_oPtXnZNuDxim6klHO1qkJ14-mC5bDtSY/s1600/icono_zip.gif) no-repeat center  right;
El link se verá así


a[href $='.css']{  
  padding-right: 18px;  
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSJ_WyLJo5AscGu3rGRlTngktirjixESp-qktlf6CZOeDtjgHxEI8zco064Fgl3s0LmlfLi_J8ajPrjDUC3qMeI06VVu4EiphD6knCr2l0nJGNHzzJIvVKbW3gteAI3l_avMNiw6TzAY/s1600/icono_css.gif) no-repeat center right;
  }
Asi se verá el link


a[href $='.txt']{  
  padding-right: 18px;  
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYsyxpIEwj8jRAJdYz22dltKi2-s-T7Y9sVvwzUuuTnY7ifjJYYwjNKaE6uHvkGDihDK3mo8Yg7fLmkA7-UYPHyLS0TW07BwlK6-nsdOD6p2i43QXjQoMkCyha8fPlNHoo7q7V5Eh6gSU/s1600/icono_textoplano.gif) no-repeat center right;
  }
El link se verá de esta manera


a[href ^="mailto:"] {
  padding-right: 18px;  
  background: transparent url(http://img177.imageshack.us/img177/9973/icon18emailxj4.gif)  no-repeat center right;  
  }
Asi se verá el link


.linkexterno {  
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNRrVA7qFVRPqHpY7NQOf1fnzgT_9eBFmrWOyRJKCfRzxeVBAu8jlpXAb84B1E-poA4GrLYdlBZgBX9OkICH1BBtKw6r9eEGfNK295akUxNfBxH6RAxVrp7ScPsN4J01E9XAE0G7pTk8/s1600/icono-link-externo.png) no-repeat center right;
  padding-right: 14px;  
  }
Así
En que se publicó / Comentarios ...y tu que opinas?
Etiquetas , , , , 

[+/-]
Fijar imagen en el blog

Algo que suele ser muy útil en los blogs muy extensos, es una imagen de "subir arriba" que se quede estática mientras la página se desliza. Para así el lector se devuelva a donde comenzó

[1]para esto solo es necesario que coloques lo siguiente dentro de <body> y </body>:
<a expr:href='data:blog.url + "#"' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>
Ahora, si quieres una imagen que lleve a la página principal:
<a href='http://TUBLOG.blogspot.com' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>
En que se publicó / Comentarios 7 comentarios ...y tu que opinas?
Etiquetas , , , , 

[+/-]
Efecto en Imágenes tipo agua (en movimiento)

Hola pues regreso con otro generador, o modificador de imágenes. Bueno el caso es que puedes realizar a tus imágenes un efecto agua, en movimiento, comohacker of the webpueden ver aqui:


Como lo he logrado pues muy facil, nada mas y nada menos que con Wattereffect

[1] Subes la imagen.

[2] Le das clic con el botón derecho y le pones en guardar como.
En que se publicó / Comentarios 3 comentarios ...y tu que opinas?
Etiquetas , 

[+/-]
Buscador Interno

Si quieres un buen buscador interno aqui te tengo dos opciones, espero les gusten estos buscadores internos, que pueden trabajar en un blog de blogger facilmente:

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.



[1] Añdimos un widget Html/Javascript con el siguiente codigo:




<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="15" type="text"/>
<input id="b-searchbtn" value="Buscar" class="blue" type="submit"/>
</form>

[2]Y si quieres ponerle una imagen que remplaze el boton buscar:



<form action='/search' id='searchthis' method='get' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar en el Blog";' onfocus='if (this.value == "Buscar en el Blog") this.value = "";' type='text' value='Buscar en el Blog'/>
<input alt='Buscar' border='0' src='http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Crystal_Clear_app_xmag.png/32px-Crystal_Clear_app_xmag.png' type='image'/></form>
En que se publicó / Comentarios 11 comentarios ...y tu que opinas?
Etiquetas , , 

[+/-]
Texto en Imágenes tipo graffiti

Pues esta es una web para descargar fonts, o tipos de letra. Pero además ofrece el recurso de probar la imagen. Bueno pues lo que haremos será
usar ese recurso para obtener imágenes interesantes. Los pasos los describo enseguida:

[1] Entra a FontReactor.com luego que te guste un tipo de letra escribes donde dice:

texto tipo graffiti

[2] Luego de que escribas el texto, haces clic en [previsulizar], se generará una imagen en formato PNG y la guardas en el PC.

Despues si quieres puedes agregarle un reflejo a la imagen
En que se publicó / Comentarios 1 comentario ...y tu que opinas?
Etiquetas , , , 

[+/-]
Reflejo a Imagen

Con solo hacer unos clics puedes hacer que una imagen se pueda ver de esta forma.
Reflejo a imagenPara hacer esto requieres
entrar a Reflectionmaker.com.

Si te preguntas además de donde saque esta imagen te puede interesar este otro post:
texto en imágenes tipo graffiti
En que se publicó / Comentarios ...y tu que opinas?
Etiquetas , , , 

[+/-]
Texto que aparece y desaparece (relativamente)

Este código sirve para los usuarios de Blogger.com que permte ver diferentes palabras o código en el mismo lugar pero en diferentes páginas, como
por ejemplo: el link de inicio que está hasta abajo de cada página que no sea la principal.

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



Para agregar el efecto debes seguir estos pasos:

[1] Ingresas al panel de Edicion de HTML y expandes las plantillas de artilugios y donde quieras que el texto aparezca y desaparezca agrega este código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
aqui estará el código o lo que quieres que se vea en la página del post
<b:else/>
y qui estará lo que se verá en la página principal
</b:if>
En que se publicó / Comentarios 3 comentarios ...y tu que opinas?
Etiquetas , , , 

[+/-]
Letras Tipo Google

La popularidad Google en estos últimos años a crecido enormemente, por lo que surgen sitios web como FunnyLogo que nos permiten crear nuestro propio logo con el mismo aspecto del buscador de Mountain View.


Con esta web puedes crear la imagen para tu buscador tipo Google como esta:






Leer la entrada completa
En que se publicó / Comentarios ...y tu que opinas?
Etiquetas , , 

[+/-]
Dominios Gratis

/!\ Actualización Este servicio no funciona más, ahora es de pago. Y los dominios que se registraron tendrán que pagar también. Una lástima.

Dominios Free


Si lo que quieres es un buen dominio y gratis puedes entrar en Dominiosfree.com, ahí te encontrarás con mas de 70 dominios como el que tengo yo, que es santyweb.mx.gs, con algo de esto gratis que mas puedes pedir, es gratis.
En que se publicó / Comentarios 9 comentarios ...y tu que opinas?
Etiquetas , 

[+/-]
Leer mas.... Nota Completa...

Algunos se preguntarán como hacer para tener un leer mas... o un ...Nota completa o en fin lo que sea conveniente, pues con estos pasos será posible.

/!\ Actualizacion(21/01/10): Se ha agregado un parche para solucionar los problemas que causa este hack en las páginas estáticas en el paso número 3


/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.



[1] Primeramente necesitas estar en Diseño>Edición de HTML>expander las plantillas de artilugios, después busca el código a continuación.
<data:post.body/>

[3] Y lo reemplazas por este otro.
Antes de continuar si estás utilizando las páginas estáticas de Blogger y ya habías agregado este hack seguro tienes problemas con ellas. Para solucionar el que se muestre completamente dicha página, reemplaza el siguiente código: 
<b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p><data:post.body/></p>
<b:else/>
  <style>.fullpost{display:none;}</style>
  <data:post.body/>
  <a expr:alt='"Leer completo: "+data:post.title' expr:href='data:post.url' expr:title='"Leer completo: "+data:post.title'>....Nota completa</a>
</b:if>
 Por el código siguiente


<b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p><data:post.body/></p>
<b:else/>
  <b:if cond='data:blog.pageType == "static_page"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
  <b:else/>
    <style>.fullpost{display:none;}</style>
    <data:post.body/>
    <a expr:alt='"Leer completo: "+data:post.title' expr:href='data:post.url' expr:title='"Leer completo: "+data:post.title'>....Nota completa</a>
  </b:if>
</b:if>

[Modificaciones] puedes modificar el código en azul por la frase que se te haga mas coneveniente para colocar en tu blog.y con estos pasos estará listo el código y podrás activarlo en tus entradas encerrando el texto, imagenes, o o que sea de la siguiente manera:

  aquí escribe la PRIMERA PARTE del post para que
<span class="fullpost">
  se quede con ganas de ver la SEGUNDA PARTE OCULTA mas 
  el lector(ya que esta parte estará oculta hasta que entre en el post)
</span>

En que se publicó / Comentarios 3 comentarios ...y tu que opinas?
Etiquetas , ,

Entradas más recientes Entradas antiguas Página Principal
Arriba