Como poner un boton que vaya hacia arriba

Hoy les mostrare como poner un boton que vaya hacia arriba o hacia abajo
lo primero es crear un elemento "div" y despues darle el nombre que quieran por ejemplo
<div id="arriba">
</div>
el atributo ID sirve para darle un nombre a nuestro elemento.

Despues podemos llamarlo con una etiqueta "a" de esta manera:
<a href='#arriba' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyw7JY_iQTWfneHNu_atu9-Hj8bMU3xyBryHigJkvwc27uk3P6qVM9anftifCIST74wJvENklQwzZg5O7_t3xe4UZFqXnKLjh7fMiqR8skwsi9qFmQ2mhlriKvRlamoRCvJbzYM1sVAA/s200/arrow1a.png' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>

Ahora si queremos que el boton vaya hacia abajo tenemos que poner el elemento abajo del footer
de nuestra web o blog pero si queremos que vaya hacia arriba entonces lo ponemos en el head de nuestra web o blog

Sin embargo para los blogs de blogger es mas facil ya que podemos usar el elemento outer-wrapper
y asi vamos hacia arriba y para ir hacia abajo usamos footer

Ejemplos para blogger:

Hacia arriba:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyw7JY_iQTWfneHNu_atu9-Hj8bMU3xyBryHigJkvwc27uk3P6qVM9anftifCIST74wJvENklQwzZg5O7_t3xe4UZFqXnKLjh7fMiqR8skwsi9qFmQ2mhlriKvRlamoRCvJbzYM1sVAA/s200/arrow1a.png' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>

Hacia abajo:

<a href='#footer' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyw7JY_iQTWfneHNu_atu9-Hj8bMU3xyBryHigJkvwc27uk3P6qVM9anftifCIST74wJvENklQwzZg5O7_t3xe4UZFqXnKLjh7fMiqR8skwsi9qFmQ2mhlriKvRlamoRCvJbzYM1sVAA/s200/arrow1a.png' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>

Quiero aclarar que los elementos outer-wrapper y footer no estan en todas las platillas pero en las platillas Minima o Minima-Dark si estan estos elementos asi que si tienes una plantilla modificada es mejor que crees tu propio elemento.
Pueden ver como funciona aqui.

Eso es todo espero les sirva, cualquier duda o comentario ya saben como hacerlo.

Post dedicado a:·•º•·Yuri·•º•·

Detectar navegador,Version,Redireccionar | JavaScript

En algunas versiones de navegadores no todos los script son compatibles por lo tanto nos vemos en la necesidad de notificar al usuario que su navegador no es compatible y por ende redireccionarlo a otra pagina.

Con el siguiente script se puede hacer eso:
Ver Codigo Fuente JavaScript

function detectarNavegador()
{
this.nombreNavegador = navigator.appName; //Obtiene el nombre del navegador
this.version = navigator.appVersion //Obtiene la version
}
var informacion= new detectarNavegador() //Crea un objeto llamado informacion
alert('Navegador:\n'+informacion.nombre);//envia nombre del navegador
alert('Version:\n'+informacion.version);//envia version del navegador
}//fin de la funcion detectarNavegador

Este es un ejemplo de un script util para IE que detecta el navegador y la version y si no es superior a 6.0 lo redirecciona:

//creacion de las funciones
var pagina="yahoo.com";
function redireccionar()
{
location.href=pagina;
}//fin de funcion redireccionar
function actualizar()
{
 ventana=confirm("Tu navegador es incompatible\nActualizar?");
 if (ventana) {
 setTimeout ("redireccionar()", 1000); //redirecciona en 1 segundo
 }
 else {
  alert("Cancelaste");
 }
}//fin de funcion actualizar
//Ejecucion del script
var browser=navigator.appName; //detecta navegador
if (browser=="Microsoft Internet Explorer") //si es IE entonces
{
var ver=navigator.appVersion;//Detectar version
ver.match(/(MSIE)(\s*)([0-9].[0-9]+)/ig); //Expresion regular
ver = RegExp.$3;//Usando las expresiones regulares extraemos la version
 if (ver<=6.0)//si es menor o igual a 6.0 entonces
 {
  actualizar(); //ofrece actualizar
 }
}

Espero que te pueda servir yo uso este metodo en este blog, si tienen dudas acerca de este post avisen.

Mostrar la barra de Blogger

Hola a todos solo posteo esto porque uno de mis visitantes me preguntaba que como le hacia para que en su platilla se pudiera ver la barra de blogger y logicamente inmediatamente pense pues solo quitando el attributo "none" de #navbar-iframe pero despues de descargar la plantilla Cute-Bubbles me di cuenta de que no era suficiente aun asi no se veia la barra de blogger, lo que me hizo pensar en que algun script externo estaba desactivando la barra pero despues de revisar me di cuenta de que no era eso lo que pasaba entonces me fui por las configuraciones en el diseño pero para hacer todo mas facil y ganar tiempo tenia que estar viendo constantemente cada cambio que le hiciera a la platilla asi que para no estar recargando la pagina cada que modificara el codigo use una herramienta online que sirve para ver en tiempo real las modificaciones que se le hacen a una pagina en HTML (Editor de Html Online).

Link:Real-time HTML editor

Asi de esta manera me di cuenta que siempre fue suficiente con eliminar el codigo
"none !important" de #navar-iframe solo que habia una IMAGEN
que era la responsable de que la barra no se mostrara elimine la imagen y ¡por fin!se mostro la barra de blogger pero note que era necesario tener la imagen por lo que la ajuste de manera que se viera la imagen pero que tambien se viera la barra.

Bueno eso es todo espero seguir siendo de su ayuda.
PD:No habia publicado esto porque no tenia conexion a internet.

Imagenes:






Post dedicado a Jane Seidel Vera

Botones

Estos botones tienes diferentes funciones el primero es para cerra la ventana de el navegador y el segundo es para agregar a favoritos, solo que aqui te los mostramos en diferentes tipos de animacion en boton, imagen y texto bueno aqui estan los codigos:
Este es para cerrar la ventana:

Boton: <input type="button" value="Cerrar Ventana" onclick="window.close();">
Imagen: <a href="javascript:window.close();"><img src="http://aqui la direccion de la imagen"></a>

Texto: <a href="javascript:window.close();">cerrar ventana</a>

Y este es para que te agreguen a favoritos:
Boton: <input type="button" value="Agregar a Favoritos" onclick="window.external.AddFavorite('http://AQUI LA DIRECCION DE TU BLOG O PAGINA','AQUI EL NOMBRE DE TU BLOG O PAGINA')"/>
Imagen: <div class="widget-content">
<p align="center"><script language="JavaScript">
function agregar(){
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {var url="http://AQUI LA DIRECCION DE TU PAGINA O BLOG";
var titulo="AQUI EL TITULO DE TU PAGINA O BLOG";
window.external.AddFavorite (url,titulo);
}
else {
if(navigator.appName == "Netscape")
alert ("Presione Crtl+D para agregar Hack Diseño® a tus favoritos");
}

</script>
<a href="javascript:agregar();"><img alt="AQUI EL TEXTO QUE QUIERAS" width="32" src="http://ggrullon.squarespace.com/storage/pics-dc/curioso_estrella.gif" height="32"</a></p>
</div>
Texto: <a href="javascript:window.external.AddFavorite('http://www.hackdiseno.ec.kz','Hack Diseño®')">
Agregar a Favoritos</a>
Elige el diseño que quieras ya sea de imagen de texto o de boton las direcciones de las imagenes las puedes cambiar por otra que sea de tu gusto.

Metatags

Primero descargate las metatags que estan en nuestra seccion de Descargas y despues haz lo que se te indica abajo y despues pronto apareceras en los resultados de google.


Como insertar las metatags:
Vamos a plantilla>>Edicion HTML>>e insertamos antes de el titulo (Osea antes de la etiqueta <title> las metatags descargadas.

Blockear el boton derecho de el mouse

Este codigo blockeara el boton derecho de el mouse pero tambien le mostrara un mensaje al usuario
Codigo:

Ver Codigo Fuente JavaScript

<script language="JavaScript">
function right(e) {
if(navigator.appName=='Netscape'&&(e.which==3||e.which==2))
return false;
else if(navigator.appName=='Microsoft Internet Explorer'&&(event.button==2||event.button==3)) {
warning =
" !!! Bienvenido !!! \n" +
"____________________\n" +
"\n" +
"NO se permite \n" +
"copiar las imagenes \n" +
"o ver codigo fuente \n" +
"de la pagina \n" +
"\n" +
"Gracias por tu visita!! \n" +
"Esperamos tus comentarios \n" +
"y sugerencias \n" +
"\n" +
"Gracias por su visita \n" +
"a www.hackcreapag.blogspot.com \n" +
"\n" +
"Vuelve cada vez \n" +
"que quieras \n" +
"\n" +
"____________________\n"
var agree = confirm(warning);
return false; }
return true;}
document.onmousedown=right;
document.onmousemove=right;
</script>

Una pagina dentro de tu blog

Si quieres tener dentro de tu blog otra pagina solo tienes que agregar el siguiente codigo en cualquier parte de una entrada.

<iframe src="dirección de página" height="300" width="80%"></iframe>

Quedaria asi:

Espero y les haya gustado este diseño.
Diseño gracias a Hacktime

Enlaces

Bueno aqui esta una lista de los blogs que nos tienen enlazados:
Hare una recomendacion para todos aquellos que esten interesados en Java y el blog que recomiendo es Carlitox en la web

• 
  
• 
  
• Rammstein 1994-2007
  
• Swerch Ground
  
• De toda Fuck
  
• 
  
• 
  
• http://guannasoftx3.blogspot.com/
  

Si quieres ser parte de esta lista solo enlazanos o deja en un comentario tu direccion y si tienes imagen pues tambien la escribes.

Codigo: <a href="http://hackcreapag.blogspot.com" target="_blank"><img src="http://luis.ucr.googlepages.com/Copiadevirus.jpg/Copiadevirus-full.jpg"/></a>

Para agregarnos a tu blog o web solo inserta este codigo en tu blog o pagina web

Codigo en html en texto plano

¿PARA QUE NOS SIRVE ESTA HERRAMIENTA?
sirve para que cuando quieras mostrar un codigo html no se interprete ya que al insertar un codigo html se intepretara asi que ¿como le hago para que no suceda esto?
bueno lee a continuacion lo siguiente:
Para convertir el codigo html a texto plano solo inserta el codigo que quieres que se convierta en texto plano y al hacer click en convertir se te redireccionara a otra pagina y en esa pagina aparecera el codigo que escribistes aqui.

Ahora solo escribe tu codigo!

Introduzca el código html que desea convertir a texto plano.

Por ejemplo: <marquee> <title> cualquier codigo que quieras convertir solo ponlo aqui y dale click en convertir y despues te abrira otra pagina donde te mostrara el codigo en texto plano si vas a convertir un gran codigo entonces te primero dale click y despues en la pagina que se te abra pones tu codigo. Espero que les sirva.

Mas adelante les dire como hacerlo de manera manual.

Contacto

Puedes comunicarte aqui conmigo. Respondere lo mas breve posible.

(*) Campos requeridos

Nombre:

* E-Mail:

* Asunto

Sitio Web:

* Mensaje:

Imagen de verificacion:



[ Recargar Imagen ] [ ¿Que es esto? ]
Ingresa el texto de la imagen:

GRACIAS POR TU VISITA!!

Subir favicon (paginas) *.ico o *.png

Este post ha sido reeditado debido a las quejas que he recibido de los visitantes.
Ahora listare algunas paginas en las que se pueden subir archivos *.ico *.png etc.

• Dynamic Drive


• Windows Live SkyDrive(Este lo recomiendo)


• Cham(Esta pagina sirve para generar tu icono apartir de una Imagen *.Bmp, *.JPG....)

Si no les gusta ninguna de estas opciones tambien pueden usar Google Sites solo necesitan su cuenta de google y es obvio que si usamos Blogger tenemos cuenta google.
para enlazar el icono (una vez que lo hayan subido) el codigo seria el siguiente:

<link href='http://sites.google.com/site/hackdiseno2/hackdiseo-icono.ico' rel='icon' type='image/ico'/>
<link href='http://sites.google.com/site/hackdiseno2/hackdiseo-icono.ico' rel='shortcut icon' type='image/png'/>

Asi lo he hecho yo, tambien quiero decirles que es mejor poner este codigo antes de esta etiqueta:

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

y despues de esta otra etiqueta:

<b:include data='blog' name='all-head-content'/>


Al final su codigo deberia quedar entre las etiquetas marcadas con rojo:
<b:include data='blog' name='all-head-content'/>
<link href='http://sites.google.com/site/hackdiseno2/hackdiseo-icono.ico' rel='icon' type='image/ico'/>
<link href='http://sites.google.com/site/hackdiseno2/hackdiseo-icono.ico' rel='shortcut icon' type='image/png'/>
<title><data:blog.pageTitle/></title>

Esta es manera mas correcta de poner el codigo en blogger se los digo por experiencia xD
y tambien recuerden que en blogger sobre la plantilla se usa ' y no " para poner codigos por eso a veces no se enlaza bien el icono.
Por lo pronto es todo seguire dandole seguimiento a este post.

Poner texto en movimiento

esto es facil de hacer
Para que una palara o frase este en movimiento lo unico que tienes que hacer es agregar el siguiente codigo en cualquier lugar que quieras (en un post, en tu plantilla):
el codigo es <marquee>aqui el texto que quieras que se mueva</marquee>
esto es con <marquee>y</marquee>

Espero y le haya servido.