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

Calendario de posts

Cargando...

 
ir arriba