Hack Diseño® nueva imagen

Nueva actualizacion:viernes 14 de agosto de 2009
Este post ya no es valido porque se rediseño el blog totalmente
----------------------------------------------------------------------
Hoy por fin se termino el diseño del blog, fue un diseño que no cambio mucho aparentemente, pero ahora hay un menu mas eficiente y desplegable, algunos links ya fueron actualizados en la seccion de descargas, ademas de que la pagina abrira mas rapido porque ya no pesa lo mismo que la anterior, tambien para los visitantes que usan FIREFOX y que veian que el menu anterior no se mostraba correctamente pues ahora ya se muestra tal y como se veria en IE, el unico inconveniente esque para poder visualizar correctamente el blog, se requerira tener IE7, IE8 o FIREFOX, esto porque añadimos algunos script que no funcionan en antiguos navegadores, como IE6, la descarga de FIREFOX y IE estan disponibles en la seccion de descargas, descargas sin virus, gratuitas y sin tener que registrarse.
Para los que necesiten el antivirus NOD32 tambien esta disponible en la seccion de descargas.

Hasta nuevo post.....

Como poner una imagen en la parte superior de cada entrada

Esta entrada la publico a peticion de un visitante.
Su pregunta fue:

como hago para que en cada post salga una imagen en la parte superior de cada entrada y ademas que redireccione?

=====================================================================================
Bueno pues el codigo que se necesita para conseguir lo que quiere, es muy sencillo es este:

<center>
<a href="http://la direccion a donde redireccionara la imagen/"><img alt="mi imagen" src="http://aqui la direccion de la imagen/" border="0" /></a>
</center>

Y debe estar entre los siguientes codigos de la plantila:

<div class="post-header-line-1">
======AQUI DEBE IR EL CODIGO==========
<div class="post-body entry-content">

Por lo tanto el codigo deberia de quedar asi:


<div class="post-header-line-1">
<a href="http://la direccion a donde redireccionara la imagen/"><img alt="" src="http://aqui la direccion de la imagen/" border="0" /></a>
</center>
<div class="post-body entry-content">

Dentro de <div class="post-header-line-1"> y <div class="post-body entry-content"> debe estar el codigo, para que se vea exactamente como en la imagen que diste de referencia.

Para la insercion del codigo, vas a Diseño-->Edicion de HTML-->Expandir plantilla de artilugios y despues presionas "Ctrl+F" y pegas este codigo: <div class="post-header-line-1"> asi lo encontraras mas rapido, una ves que lo hayas encontrado, solo insertas el codigo y listo.


Dejo algunas imagenes, para ser mas explicito:
Ver imagenes

En estas imagenes se puede apreciar que si funciona el codigo:

Ocultar el titulo en blogger

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.

Posible solucion para el codigo de error bX-39cc9q en blogger

En algunos sitio ya circula esta informacion pero al parecer no funciona para todos los blogs nosotros no hemos probado ya que se veria afectado el diseño de nuestro blog pero vamos a intentarlo en otro blog de pruebas.

De todas formas aqui les dejo la informacion de como darle una posible solucion:

Abre el archivo XML de la plantilla que quieras instalar con WordPad (click derecho del ratón > abrir con > WordPad. Si lo editas con el bloc de notas comprobarás que es mucho más complicado encontrar los códigos de los widgets.

Busca el código HTML referente al div del sidebar en la plantilla. En la mayoría de los casos suele estar abajo del todo.

Elimina cada widget que contenga, suprimiendo para ello el código comprendido desde
<b:widget…> hasta </b:widget>. Por ejemplo:
<b:widget id=’BlogArchive1&#8242; locked=’false’ title=’Archivo del blog’ type=’BlogArchive’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
…
</b:widget>
Guarda los cambios y prueba ahora a subir la plantilla de nuevo.

Espero y les sirva.
HACK DISEÑO®







Informacion extraida de algunos sitios web. Toda la informacion fue analizada, pero no probada asi que no se garantiza que funcione.

Sobre el error “bX-39cc9q” en Blogger

Hola visitantes de Hack Diseño hoy les traigo esta noticia de la que tal vez algunos ya se dieron cuenta es acerca de el error bX-39cc9q en blogger realmente no se sabe que sucedio pero al intentar subir una plantilla o guardar cambios nos da este codigo de error por este problema fue que Hack Diseño estuvo inactivo 1 dia.

Nota:Informacion extraida de algunos sitios como zonacerebral.com

Aqui nos comenta el webmaster de este sitio acerca de el problema.

"Hoy, como tantos otros domingos, tenía pensado comenzar a adaptar una nueva plantilla para Blogger. Siguiendo el protocolo, tras crear el blog con el nombre del diseño y publicar las entradas en la página de demostración, me disponía a subir la plantilla que utilizo como base para adaptar otros diseños. Sin embargo, el servicio de Blogger devolvía una y otra vez el error bX-39cc9q al tratar de subir esta o cualquier otra plantilla:

Lo cierto es que hace unos días, cuando adapté la plantilla de Codigo Geek, también experimenté un problema similar al guardar los cambios en el modo de edición HTML estando activada la casilla “Expandir plantillas de artilugios”, pero por suerte este contratiempo desapareció sin acción alguna por mi parte en 30 minutos aproximadamente.

Después de descartar posibles causas debidas al navegador, a los datos privados del mismo o a la plantilla, he estado buscando información al respecto en algunos grupos de Google y parece ser que el error lleva apareciendo desde hace dos días sin razón aparente al intentar subir una plantilla en la plataforma de Blogger, por lo que puede deberse a un problema interno del servicio.

El blog que publica el estado de Blogger no ha comunicado ninguna advertencia de mantenimiento, aunque si lo hizo para el día 12 de febrero afectando al sistema de alojamiento de imágenes. Así que sólo nos queda esperar que los de Blogger lo detecten y lo solucionen en los próximos días."

Fuente:http://zonacerebral.com/
Al parecer hasta que solucionen problema podremos seguir blogeando.

Quitar/elimina el mensaje "MOSTRANDO ENTRADAS"..

Tal vez a lagunos les molestas o no les gusta este mensaje:

entonces lo pueden eliminar o tambien ocultar bueno para eliminarlo es muy sencillo van 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.
Pero si lo que quieres es ocultar el mensaje solamente entonces 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;
}

Cambiar el cursor al pasar por un link o imagen

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

Protege el blog

Aqui otro metodo para evitar que nos roben el codigo fuente o las imagenes
con este codigo blockeas todo pero sin embargo si puedes clickear vinculos etc.
el codigo es este:

<span onmousedown='return false'; oncontextmenu='return false;' ondragstart='return false';></span>

Este es para que no puedan seleccionar nada con el mouse.

<script>
document.onselectstart=new Function ('return false');
</script>

¿Como cambiar las palabras "Entradas antiguas" por una imagen?

Primero busca el siguiente codigo
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Ahora si quieres poner una imagen como esta:


Este es el codigo:
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>


<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/left.gif'/></a>
</b:if><b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>

Pero si mejor quieres cambiar la leyenda entradas antiguas cambia el codigo por este:

<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>Hacia las mas recientes</a>
</b:if> <b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>Hacia las mas antiguas</a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>Pagina de Inicio</a>
</div>
<div class='clear'/>
</b:includable>
La desicion es tuya elige la que te guste.LETRAS O IMAGENES?

Poner una imagen de fondo en tus entradas

Vamos a ver como insertar una imagen de fondo en nuestros posts (entradas del blog).
.
Nos dirigimos a:
.
Plantilla--Edicion HTMLBuscamos 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;
}
.
Eso es todo

Quitar la barra de navegacion de blogger

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

Ocultar/Mostrar la barra de navegación de Blogger

1.-Ir a Plantilla>>Edición de HTML (no necesitas Expandir plantillas de artilugios) y agregas el siguiente código entre ]]></b:skin> y </head>.


<script src='http://wiki.script.aculo.us/javascripts/prototype.js' type='text/javascript'/>
<script src='http://wiki.script.aculo.us/javascripts/scriptaculous.js?load=effects' type='text/javascript'/>

<script type='text/javascript'>
function navbarShow() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:0.0, to:1.0});
}
function navbarHide() {
new Effect.Opacity('navbar-iframe', {duration:0.5, from:1.0, to:0.0});
}
function navbarHack() {
Event.observe('navbar-iframe', 'mouseover', navbarShow, false);
Event.observe('navbar-iframe', 'mouseout', navbarHide, false);
navbarHide();
}
Event.observe(window, 'load', navbarHack, false);
</script>



Si pegaste correctamente el codigo debera mostrase asi tu barra acerca el mouse para ver que pasa

Plantilla con 2 sidebars

1. Priemro 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>


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


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.

Imagen de fondo en tu blog

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.

Poner una imagen de fondo en tus entradas

Nos dirigimos a:
.
Plantilla--Edicion HTMLBuscamos 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;
}