|Hack Diseño ®|

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/AVvXsEgW8x52g0nIJMpch0Tiivlwh9oegf5dheFHcLQ47aeFlHIl4BkclJkrQsasvHIxc4wsYNi3S59OZVfeTo3UO9ZomjkEil_fSWpRQqsqVrwqBRLNejXuSRm2UcWe4X21NX1uXYgiSDVVLA/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/AVvXsEgW8x52g0nIJMpch0Tiivlwh9oegf5dheFHcLQ47aeFlHIl4BkclJkrQsasvHIxc4wsYNi3S59OZVfeTo3UO9ZomjkEil_fSWpRQqsqVrwqBRLNejXuSRm2UcWe4X21NX1uXYgiSDVVLA/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/AVvXsEgW8x52g0nIJMpch0Tiivlwh9oegf5dheFHcLQ47aeFlHIl4BkclJkrQsasvHIxc4wsYNi3S59OZVfeTo3UO9ZomjkEil_fSWpRQqsqVrwqBRLNejXuSRm2UcWe4X21NX1uXYgiSDVVLA/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·•º•·

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:<a href="http://htmledit.squarefree.com/">Real-time HTML editor</a>

Asi de esta manera me di cuenta que siempre fue suficiente con eliminar el codigo
"none !important" de #navar-iframe solo que habia una <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKDqMJ3JfqVHKQopOwmEdijgEH7RS4qU3NkaJxc2JlLSR7_IQcT7YNwJ6RYqLpMflpbyKTr4Pr5qaKxKA44wzCL27uW4L8N821a-UEvSGepPz34f5_AyhjtMQolW_un09fTNAL26SQHs/s1600/top_background.jpg">IMAGEN</a>
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:

<a href="http://sites.google.com/site/hackdiseno/host/img1.bmp"><img height="250" src="http://sites.google.com/site/hackdiseno/host/img1.bmp" width="350" /></a>

<a href="http://sites.google.com/site/hackdiseno/host/img2.jpg"><img height="250" src="http://sites.google.com/site/hackdiseno/host/img2.JPG" width="350" /></a>


Post dedicado a Jane Seidel Vera

Si no quieres que aparezca un titulo en tu blog lo unico que tienes que hacer es esto: ir a Diseño--->Edicion de HTML y una vez ahi buscas este codigo:

#header {
margin: 5px;
//border: 1px solid $bordercolor;
text-align: center;
}
Y solo le agregamos esto:
display:none;
El codigo debe quedar asi
#header {
margin: 5px;
//border: 1px solid $bordercolor;
text-align: center;
display:none;
}


Si por alguna razon el codigo no es igual solo hay que agregar display:none;
a cualquier codigo pero en el Header porque si no no funciona.

Tal vez a algunos les molesta o no les gusta este mensaje, que aparece al hacer una busqueda o seleccionar un categoria en el blog:


Si no te gusta entonces lo puedes eliminar o tambien ocultar bueno para eliminarlo es muy sencillo vas a hacer lo siguiente:

Ir a Diseño/ Edición de HTML y activas la casilla Expandir plantillas de artilugios y buscas esta línea:

<b:include data='top' name='status-message'/>

una vez que la hayas encontrado entonces borras esa linea y listo sera eliminado.

Pero si lo que quieres es ocultar el mensaje entonces solo haz lo siguiente:

Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

.status-msg-wrap {
visibility:hidden;
display:none;
}

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 siguiente codigo : (incluyendo el amarillo ahi se pone el nombre de el cursor que pues ser por ejem:crosshair)

<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 siguiente: (incluyendo el amarillo ahi se pone el nombre de el cursor que pues ser por ejem:crosshair)

<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

A esta barra me refiero

bueno para hacer esto
1.-Ir a plantilla>>Edicion de html
2.-insertar el siguiente codigo entre ]]></b:skin> y <b:skin><![CDATA[/* tambien puedes ponerlo antes de <head> NOTA:(en caso de que lo pongas entre ]]></b:skin> y <b:skin><![CDATA[/*) Te recomiendo que lo insertes casi al final para que en caso de que quieras cambiar esto pues sea mas facil ubicar el codigo y borrarlo
Codigo:

<style type='text/css'>
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
</style>

Si tienes problemas con esto contactanos ya conoces nuestra direccion o en caso de que no la conocas da click aqui

1. Primero vamos a plantilla y escojemos una de las que digan "Minima,minima dark minima blue etc." ya que estas son las mas faciles de alterar.


2. Luego vamos a plantilla---> Edicion html

Buscamos el sig. texto:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}


3. Y todo eso lo cambiamos por el sig codigo:

#outer-wrapper {
margin:0;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
margin-left: 1%;
width: 55%;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

html > body #main-wrapper {
margin-left: 1%;
}

#sidebar-wrapper {
margin-right: 1%;
width: 20%;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 20%;
float: right;
}
html > body #sidebar-wrapper {
margin-right: 1%;
}

NOTA: Si quieres que las dos sidebar esten a la derecha, no hagas ningun cambio, pero si quieres una de cada lado cambia donde dice "right" (en Rojo) por "left".

4. Despues buscamos el siguiente codigo:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>

5. Y antes del codigo añadimos:

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>


Si todo sale bien tu plantilla debera verse asi:

Espero y no tengan problemas con esto en caso de que tenga problemas me lo hacen saber.
Si tienes problemas con esto descargate la plantilla esta contiene 3 sidebars.
Para descargarla solo da click aqui.

Eso es todo solo guarda y listo. Veras que en plantilla tienes dos sidebar.

Para poner una imagen de fondo lo unico que se necesita hacer es:
Plantilla---> Edicion html:
Luego buscas el sig. codigo:
.
body { background:#fff margin:0; padding:40px 20px;
.
Despues de donde dice: background:#fff , añades: url(URL de tu imagen de fondo);
.
Quedaria asi: body { background:#fff url(tuimagendefondo); margin:0; padding:40px 20px;
.
Eso es todo solo revisa en vista preliminar y guarda.

Nos dirigimos a:
.
Plantilla--Edicion HTML
Y buscamos el siguiente código:
.
.post-body {
clear: both;
padding-top: 10px;
}
.
Y lo cambiamos por el siguiente:
.
.post-body {
background: url(URL DE LA IMAGEN) top left;
clear: both;
padding-top: 10px;
}

Nos dirigimos a:
.
Plantilla--->Edicion de html
.
2. Buscamos el siguiente codigo:
.
#header {
margin: 5px;
//border: 1px solid $bordercolor;
text-align: center;
}
.
Y lo cambiamos por este:
.
#header {
margin: 5px;
//border: 1px solid $bordercolor;
text-align: center;
display: none;
}
.
Si se dan cuenta lo unico que hicimos fue agregar al final display: none; ese es el truco.
Hack Diseño®