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

Añadir Gadgets entre el header y las entradas (crosscol)

Existe una seccion de Blogger, que no es utilizada por el mismo blogger, y por ende por CASI nadie. La sección se llama crosscol, lo mejor es que esta, esta ubicada por debajo del header y de las entradas.

/!\ 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] Lo que hay que hacer para poder utilizarla es entrar en Diseño>Edicion HTML>Expandir las plantillas de artilugios. y despues buscamos este codigo:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>


[2] Cambias la palabra en rojo(no) por yes, despues guardas los cambios y listo.El crosscol

[3] Pero también puedes dividirla en tres columnas, pero para esto necesitas sustituir el código anterior:
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

por este otro:
<div id='crosscol-wrapper'>
<div style='clear:both;'/>
<div id='crosscol-contenedor'>
<div id='crosscol-left'>
<b:section class='crosscol' id='crosscol1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol-center'>
<b:section class='crosscol' id='crosscol2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol-right'>
<b:section class='crosscol' id='crosscol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

[4] Despues tienes que añadir antes de ]]></b:skin> el siguiente código CSS:
#crosscol-wrapper {
text-align:center
}
#crosscol-left {
width: 30%;
float: left;
margin:0;
text-align: center;
}
#crosscol-center {
width: 40%;
float: left;
margin:0;
text-align: center;
}
#crosscol-right {
width: 30%;
float: right;
margin:0;
text-align: center;
}
#crosscol-contenedor {
clear:both;
}
.crosscol {
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
.crosscol-columna {
padding: 10px;
}
[5] Y guardas los cambios:De tres columnas
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

34 comentarios !

GABOMANSON dijo...

Hola..
Recuerdo qe la ultima vez qe deje un comentario aqui me lo respondistes ^^
bueno necesito una ayuda..
qe espero qe me puedas ayudar..
xq mi blog es leido por diferentes partes del mundo, aveces entran ingleses y como el idioma es castellano se confunden..
me gustaria saber como poner en mi blog ese articulo qe tienes puesto tu, qe dice "Traducir el Blog a ..." , y aparecen todos los idiomas, ya que eso me viene perfecto.. bueno espero qe me respondas,,
desde ya muchisimas gracias

mis cordiales saludos ^^
(espero tu respuesta)

Mario y Paula dijo...

Hola, soy mario me blog es http://unpaseoconocedor.blogspot.com/ nose si he hecho bien los pasos a seguir sobre Añadir Gadgets entre el header y las entradas (crosscol), podrías mirarlo y saber si esta bien o mal, yo no le veo la diferencia. gracias

SäNTÿ dijo...

Hola!!

GABOMANSON, la solucion a tu problema esta en tener un traductor en el blog

SäNTÿ dijo...

Mrio y Paula, si entras en la pestaña Diseño de su blog y ves Añadir un gadget entre el header y las entradas esta listo.

Solo tienes que agregar gadgets ahi.

gangsTa.bloggeR dijo...

Hola, me gusto mucho tu blog muy intersante espero que me respondas y me des información sobre el siguiente problema que tengo:
Yo descargue una plantilla de BTemplates como muchos pero esta plantilla no me venia con un header modificable, o sea no venia como un elemento sino que tenía que modificarlo vía HTML entonces quisiera saber como puedo crear un elemento para gadgets encima de el sidebar y las entradas pero debajo del supuesto header que no es modificable. Esto me molesto un poco cuando tenia pensado poner mis anuncios google en esa barra modificable entre las entradas y el supuesto header que no tengo !! :'(

GRACIAS por tu atención
mi blog: http://zoneknight.blogspot.com
mi mail:gangstablogger@gmail.com

SäNTÿ dijo...

Hola!!
gangsTa.bloggeR, he estado revisando tu blog y veo que le han eliminado el crosscol a tu plantilla.

Para volver a ponerla necesitas ir a Diseño>Edicion HTML>Expandir las plantillas de artilugios

Despues tienes que buscar el siguiente código y colocar el texto que esta en negrita.

<li class='rssmenu'><a href='http://feeds2.feedburner.com/zoneknight'>Suscribirse vía rss</a></li>
</ul>
</div>
<!-- Closes nav -->
</div></div>
<!-- Closes header --><!-- Closes headerwrapper -->
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

<div id='main'>
<div id='contentwrapper'>
<div id='content'>
<div class='main section' id='content'><div class='widget Blog' id='Blog1'>
<div class='blog-posts hfeed'>

Una vez hecho eso podrás agregar gadgets en entre el "header" y las entradas :D

Suerte!!

Susana dijo...

hola! simplemente para saludarte y agradecerte este post ya que era lo que estaba buscando para agregar a mi blog!
muchas gracias!!!

SäNTÿ dijo...

Susana, Gracias por comentar xD. Ojalá que te sea de ayuda!!.

Melissa dijo...

hola tengo un problema no encuentro el crosscol que Hago ayuda me interesa este post

SäNTÿ dijo...

Melissa, si, en muchas plantillas esta sección es removida, ya que Blogger casi no la usa. Pero puedes volver a agregarla:

Lo que bedes localizar primero en tu plantilla, es la siguiente linea:
<div id='main-wrapper'>Ahora, si quieres el crosscol mas ancho que el header y que los posts. Justo antes de esa etiqueta, tendrás que agregar lo siguiente.

Pero, si quieres el crosscol del mismo ancho que el header y que los posts. Justo despues de esa etiqueta, tendrás que agregar lo siguiente.

<!-- Crosscol section -->
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>
<!-- End Crosscol section -->
Con eso lograrás restaurar la sección del crosscol.

Espero que te ayude, xD!!

Ale Motta dijo...

Holaaa Santy
hice todo como lo indicaste..
pero el color del crosscol es blanco y no se como agregarle el color de fondo del wrapper...
http://biologiacucba.blogspot.com/
esta es la pagina...veras mi problema!
mil gracias por tu ayuda... y tu blog está increíble!!! :)

CUCBA dijo...

holaaa...jejej problema resuelto...al ser una plantilla creada el nombre con el color del backgnd ya estaba predet.... jejeje...solo lo copié---
:)

SäNTÿ dijo...

Ale Motta, Ahh ok, no conteste por que estuve fuera de servicio. Pero de vuelta a la acción xD

Mauricio dijo...

Hola amigo,he mirado tu blog y está buenisimo, pero tengo un problema en la parte Gadget de la sidebar No me deja reorganizarlos como yo quiero por que simplemente no me da el espacio para hacerlo, a uqe se debe esto ?? te agradesco tú respuesta.Gracias.

SäNTÿ dijo...

Mauricio, la verdad no encontre algun error. No se a que se deba, pero puedes organizarlos de la siguiente manera:

[1] Entras en la pestaña Diseño>Edicion HTML>Sin expandir plantillas de artilugios.

[2] Después buscas algo como lo siguiente:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='XXXXX' locked='XXXXX' title='XXXXXXX' type='XXXX'/>
<b:widget id='XXXXX' locked='XXXXX' title='XXXXXXX' type='XXXX'/>

Para ordenarlo solo debes mover de lugar las etiquetas:
<b:widget id='XXXXX' locked='XXXXX' title='XXXXXXX' type='XXXX'/>

Espero haberte ayudado xD!!

Mauricio dijo...

Gracias amigo, la verdad es que no tenía idea como hacerlo y tu me has aclarado de la duda,Gracias nuevamente y si que es efectivo mover los gadget de esta manera.

Ashley Tisdale dijo...

Hola me gustaria k me dijerais, como se pueden poner una pestaña larga, y otras mas pequeñas abajo, debajo del header, pasate x mi blog i me lo dices: http://ashleytizzyblog.blogspot.com/

Josue Juarez dijo...

fijate que quiero remover los creditos de la plantilla para que se muestren abajo del footer y no sobre footer, como los puedo mover,disculpa las molestias ...

SäNTÿ dijo...

Ashley Tisdale, emm no entiendo muy bien tu idea, pero pronto publicare algo sobre las pestañas xD.

Josue Juarez, claro que no es nignua molestia. Ahora para modificar tu plantilla entras en Edicion HTML>Sin expandir plantillas de artilugios.

[2] Despues te mueves hasta abajo de tu plantilla y verás lo siguiente:

<div id='footer-wrapper'>
<div class='footertext'>[....]</div>
<b:section class='footer' id='footer'>[....]</b:section>
</div>

Lo que debes hacer es mover:
<div class='footertext'>[....]</div>

por debajo de:
<b:section class='footer' id='footer'>[....]</b:section>

Que quedará de la siguiente manera:
<b:section class='footer' id='footer'>[....]</b:section>
<div class='footertext'>[....]</div>

Y listo xD, suerte!!

Josue Juarez dijo...

Muchas gracias santy, si me resulto
cambiar los creditos lo malo es que el footer no trabaja como pense porque cuando le pongo los gadgets, los gadget se salen del diseño de la plantilla, como podria solucionar este inconveniente?
saludos.

Josue Juarez dijo...

ya no me respondiste :D
si no me funciona la footer tendre que cambiar de plantilla :P
saludos.

Ashley Tisdale dijo...

Ya e solucionado el problema, no t preocupes, aun k gracias = mente, y decir k tu blog es la puta cañaaaaa!!!

Josue Juarez dijo...

Hola Santys!! situación del footer arreglada :D utilizaré la parte inferior de edición dividida. jeje
:P saludos.

SäNTÿ dijo...

Disculpas Josue Juarez, he estado por fuera de servicio todo el mes de Julio, pero ya estoy de vuelta xD

Josue Juarez dijo...

Hola Santys! es un gusto verte por aca nuevamente, con estupendos tips, consejos y de todo, que ayudan mucho.
Siempre andare por aca, atacando con miles de preguntas :)
Saludos.

Lucho Editor's dijo...

Hola que tal, bueno es la primera vez qe entro al blog xD .. te queria preguntar como hago para centrar una imagen que puse entre el header y la main, una imagen larga que quede centrada, puse center al principio y /center al final y no hay caso.
Me queda la imagen empezando desde la mitad hasta la punta , quiero que quede de punta en punta
nose si me explico xD.

espero que me respondas :)

saludos :D

SäNTÿ dijo...

Lucho Editor's, la verdad no le entedí muy bien a tu pregunta. Pero para centrar una imagen puedes ponerla de la siguiente manera:

<p style='text-align:center;'><img src='ulrImagen.jpg'/></p>

Pero si no se puede con eso puede colocarme, si no te importa un enlace a tu blog xD!!

gracias por comentar!

cinemakira dijo...

oye ya lo hice.pero me gustaria di vidir el espacio en 7 gadgets en linea horizontal para poner imagenes.mi blog es cinemakira.blogspot.com

SäNTÿ dijo...

cinemakira, lo que tienes que hacer es simple xD.

[1] Primero tienes que eliminar los gadgets que tienes en la seccion "crosscol". Puedes agregarlos despues de hacer los cambios xD.

[2] Sustituye este código en la plantilla(sin expandir las plantillas de artilugios):

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

Por este otro:

<div id='crosscol-wrapper'>
<div style='clear:both;'/>
<div id='crosscol-contenedor'>
<div id='crosscol-1'>
<b:section class='crosscol' id='crosscol1' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol-2'>
<b:section class='crosscol' id='crosscol2' preferred='yes' style='float:left;'/>
</div>
<div id='crosscol-3'>
<b:section class='crosscol' id='crosscol3' preferred='yes' style='float:right;'/>
</div>
<div id='crosscol-4'>
<b:section class='crosscol' id='crosscol4' preferred='yes' style='float:right;'/>
</div>
<div id='crosscol-5'>
<b:section class='crosscol' id='crosscol5' preferred='yes' style='float:right;'/>
</div>
<div id='crosscol-6'>
<b:section class='crosscol' id='crosscol6' preferred='yes' style='float:right;'/>
</div>
<div id='crosscol-7'>
<b:section class='crosscol' id='crosscol7' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
</div>

[3] Después tienes que añadir antes de ]]></b:skin> el siguiente código CSS:

#crosscol-wrapper {
text-align:center
}
#crosscol-1 {
width: 14.285%;
float: left;
margin:0;
text-align: center;
}
#crosscol-2 {
width: 14.285%;
float: left;
margin:0;
text-align: center;
}
#crosscol-3 {
width: 14.285%;
float: left;
margin:0;
text-align: center;
}
#crosscol-4 {
width: 14.285%;
float: left;
margin:0;
text-align: center;
}
#crosscol-5 {
width: 14.285%;
float: left;
margin:0;
text-align: center;
}
#crosscol-6 {
width: 14.285%;
float: left;
margin:0;
text-align: center;
}
#crosscol-7 {
width: 14.285%;
float: right;
margin:0;
text-align: center;
}
#crosscol-contenedor {
clear:both;
}
.crosscol {
background:#fff;
margin: 5px;
padding: 5px;
border: 1px solid #60A9D1;
}
.crosscol-columna {
padding: 10px;
}

DUROSdelayaguachi futbol club dijo...

hola amigo , talvez tu me puedas ayudar, quisiera agregar a mi blog algo parecido al tuyo, tu tienes al final de tu blog acerca de.. enlazame!,mis blogs,feed, quisiera tener algo parecido en el mio, lo que quiero es poner algo como mi firma por ejemplo blog diseñado por mi y no se algo mas por ahi, me podrias ayudar en eso, no tengo ni la menor idea como hacerlo e intentado poner gadgets abajo de las entradas pero no estoy bien, como se llama eso y por favor ayudame , de antemano muchas gracias, mi blog es www.durosdelayaguachi.blogspot.com

Cayetana dijo...

Hola!
¿Y si no tengo en mi código HTML de blogger el primer codigo que hay que cambiar?
¿Qué tengo que buscar?
Gracias.

SäNTÿ dijo...

Cayetana, hola!!

Muy buena cuestión la que propones, lo que tienes que buscar en tu plantilla es lo siguiente, con [Ctrl] + [F]:
header-wrapper

Verás algo como esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Titulo del blog (cabecera)' type='Header'/>
</b:section>
</div>

Justo despues de ese código agregas esto:

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>


Realizado lo anterior podrás agregar gadgets entre en header y las entradas ;). De cualquier modo, si tienes problemas avisanos:P!

Saludos y buen dia!

Cayetana dijo...

Te pido otra vez ayuda…. he eliminado todas las opciones de etiquetas, comentarios, etc...Ahora, cada vez que publico una entrada, entre post y post queda un espacio muy grande. ¿Como puedo hacer para reducir este espacio y que queden mas juntos los post? Gracias!

SäNTÿ dijo...

Cayetana, hola de nuevo!

Necesitaría revisar el código en esa parte del blog. Pueden ser varios factores los que provoquen eso. Por que no pones el URL de tu blog ;)


Página Principal
Arriba