JMiur [E]

Con todo lo que hemos modificado, no tendremos problemas en agregar otra sidebar ancha debajo de las anteriores, utilizando siempre el mismo criterio, dándole un ID único que, en este caso será sidebar-inferior.

El haber "envuelto" todo dentro de un contenedor (sidebar-area)es lo que nos va a permitir que todo quede "encolumnado" sino, las flotaciones son impredescibles:


Agregamos entonces, la nueva sidebar y este sería el código completo:
<div id="sidebar-area">
<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-derecha">
<b:section class="sidebar" id="sidebarderecha" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-izquierda">
<b:section class="sidebar" id="sidebarizquierda" preferred="yes">
.......
</b:section>
</div>
<div id="sidebar-inferior">
<b:section class="sidebar" id="sidebarinferior" preferred="yes" />
</div>
</div>
Y tendrá las mismas propiedades que sidebar-wrapper:
#sidebar-inferior {
float: right; /* flota a la derecha */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
width:390px; /* el ancho */ 
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
Guardamos y eso es todo, todo habrá quedado acomodado correctamente.

Y al igual que en la entrada anterior, si queremos cambiar todo de lado, basta invertir los valores de las flotaciones de main-wrapper y de sidebar-area.


Y así podemos seguir una y otra vez, repitiendo los códigos, uno debajo del otro, combunando anchas con angostas con la única precausión de darle a cada una un ID único.
<div id="sidebar-area">

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes" />
</div>
<div id="sidebar-derecha">
<b:section class="sidebar" id="sidebarderecha" preferred="yes" />
</div>
<div id="sidebar-izquierda">
<b:section class="sidebar" id="sidebarizquierda" preferred="yes" />
</div>
<div id="sidebar-inferior">
<b:section class="sidebar" id="sidebarinferior" preferred="yes" />
</div>

<div id="sidebar-wrapper2">
<b:section class="sidebar" id="sidebar2" preferred="yes" />
</div>
<div id="sidebar-derecha2">
<b:section class="sidebar" id="sidebarderecha2" preferred="yes" />
</div>
<div id="sidebar-izquierda2">
<b:section class="sidebar" id="sidebarizquierda2" preferred="yes" />
</div>
<div id="sidebar-inferior2">
<b:section class="sidebar" id="sidebarinferior2" preferred="yes" />
</div>

</div>

REFERENCIAS:
  • Modificando las plantillas (Tutorial 1: Anchos)

  • Modificando las plantillas (Tutorial 2: Widebars)

  • 152 comentarios:

    Anónimo  

    J pedagógica tu explicación!!!...saludos!!!

    Responder
    Anónimo  

    Hola JMiur.

    Con estos tutoriales si que es facil cambiar todo el orden, sin tener que embromar con las plantilla de Btempla.... Y todoas esas!.

    Saludos...

    Responder
    Anónimo  

    JMiur, esta padre el tutorial, muy buena opción para dale una remodelada al blog.

    Una pregunta: realmente tienes ese bigote??

    Responder
    Gem@  

    La curiosidad mata jajajajaja sorry no pude evitarlo :)

    Responder
    Anónimo  

    Hola,a mi me gustaría saber para poder tener una Sidebar a un lado pero doble.
    Ejemplo:la Sidebar de Vagabundia pero con dos columnas,sólo por poner ejemplo,ya sé que esta plantilla no le favorecería un Sdebar doble.
    O sea,duplicar la Sidebar que ahora tango y luego ajustar los tamaños,ancho.
    No sé, si me explico.
    Gracias.

    Responder
    JMiur  

    Veremos hasta donde llegamos con esto :D

    jaume: El próximo tutorial habla exactamente de eso así que en un par de días estará publicado. Lo primero que debe hacerse es establecer el ancho total y eso se puede ver en la primera parte.

    sharysce: Pués ... nop :D

    Responder
    Anónimo  

    JMIR una pregunta amigo, donde puedo conseguir el IP Address Bloquer que tienes en el sidebar? yo ya fui a esa pagina, pero no me conduce a ningun codigo para poder pegarlo en mi pagina, Saludos!

    Responder
    JMiur  

    Arturo:
    Esta es la página para crear una cuenta gratuita: AQUÍ

    Responder
    x  

    Ya gracias! y una pregunta el codigo es invisible porque ya lo pegue y no se ve nada?

    Responder
    JMiur  

    Tendría que poder verlo online para contestarte.

    Responder
    Anónimo  

    Magnífico otra vez.

    Lo seguiré probando a ver que tal Gracias!

    Responder
    Anónimo  

    Ahhh ok!!!, empezaba a sospechar que realmente fuera tuyo!!

    Responder
    Admin  

    Ja jajjaaaaa :D

    Responder
    JMiur  

    No tanta risa, no tanta risa :D

    Responder
    Anónimo  

    estos tutos estan muy buenos se agradece las explicaciones

    Responder
    Lew Yuburi  

    Hola Amigo, desde hace un tiempo ya, Leo tu blog (Es uno de los Blog's que visito antes de todos) me gusto este post, pero (Siempre hay un pero) quisiera saber si su pueden adicionar dos columnas arriba de los post, es qu quisiera colocar dos elementos diferentes arriba del los post, que me quede la proporcion perfecta 50%- 50% del tamaño total del post. Creo que me explico, de todas formas dejare una imagen anexa que se explique mejor.

    Muchas gracias espero que respondas pronto.

    Imagen: http://lewisyubu.googlepages.com/ejemplo_vagabundia_para_Jmiur.png

    Responder
    Lew Yuburi  

    Ahm... Otra cosa: me gusta la organizacion de los comentarios de tu blog (Con numeracion y uno mas claro que el otro) podrias explicarmelo?

    Quisiera agregarlo a mi plantila, un poco modificado claro.

    Muchas gracias... :d

    Responder
    JMiur  

    Lewis:

    Eso puede hacerse. Si son elementos agregados normalmente, deberás buscar los IDs y luego poner las propiedades de cada uno. Un modelo genérico de eso es el que puedes ver acá.

    La explicación para numerar comentarios está en este otro post.

    Responder
    Anónimo  

    Hola Jmiur , quiero saber si me podes ayudar en ajustar el tamaño de mi blo , bueno te cuento coloque una sidebar izquierda y resulta que me quedo muy grande el blog lo que me dificulta para colocar un banner en la cabecera.Me podes ayudar ajustar el tamaño de mi blog gracias.

    Responder
    Anónimo  

    Lo que quiero es dejar mas pequeño cada columna.

    Responder
    JMiur  

    El tamaño total es el que dice en #content-wrapper (width:980px)

    Las tres columnas son #newsidebar-wrapper, #main-wrapper y #sidebar-wrapper que también tienen definidas la propiedad width. Bastaría modificar esos anchos hasta ajustarlos a tu gusto.

    Responder
    Anónimo  

    Hola Jmiu una pregunta, quiero colocarle un banner a mi blog en la cabecera y queria saber si soporta el diseño en flash (Animacion).
    Gracias por leer

    Responder
    Anónimo  

    Ha! me falto si soporta en gif?

    Responder
    JMiur  

    Cristal:
    Sí, puede usarse Flash pero no vas a poder agregarlo desde Elementos de la pagína sino que vas a tener que colocar el código directamente en la plantilla.

    El formato GIF también es aceptable pero si se sube a Blogger, los GIFs animados suelen no funcionar; puedes alojarla en otro sitio.

    Responder
    Anónimo  

    Hola Jmiur quiero saber si conoces algun sitio que me permita subir archivos de audio y que luego me brinden la url para que pueda colocar en un reproductor.

    Responder
    JMiur  

    Tanto en Fileden como en SkyDrive es posible hacerlo. Son los que uso habitualmente.

    Responder
    Anónimo  

    Hola Jmiur gracias por contestar, quiero saber si me podes ayudar ahora,es que coloque una imagen como pie de pagina en mi blog, pero resulta que ella queda fuera de escuadra, quiero saber si hay posibilidad de dejarla parejo con el blog.Gracias por leer saludos

    Responder
    JMiur  

    Cristal:
    Debes quitarle el margen que tienen los widgets del footer. Busca esto:

    #footer .widget {
    color:#FEF6EE;
    font-size:90%;
    line-height:1.4em;
    margin:0;
    padding:0 0 15px 55px;
    }

    y cambia:
    padding:0 0 15px 55px;
    por
    padding:0 0 15px 0;

    Responder
    Anónimo  

    ok Jmiur gracias, una pregunta más

    _hay posibilidad de reducir la separacion que hay entre el texto que tengo al final de mi blog y del propio blog_lo que quiero es que el texto que tengo al final de mi blog quede mas junto al blog, espero explicarme.

    Gracias por la amabilidad e interes en ayudarme.

    Responder
    JMiur  

    Eso l ocontrolas con la misma propiedad:

    padding:0 0 15px 0;

    15px es la separación inferior y afecta al texto y a la imagen. Si reduces ese valor, el texto "subirá".

    Responder
    Grupo Cristal  

    Hola Jmiur como puedes ver estoy tratando de modificar mi blog, por ese motivo es que molesto tanto espero que me entiendas y disculpes, quiero saber ahora en que parte de mi BLOG puedo colocar el codigo html del reproductor de mi radio, para que se vea arriba del banner de la cabezera.Gracias por leer saludos.

    Responder
    JMiur  

    Una aletrnativa e solocoarlo en el header. Lo más probable es que veas algo así:

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    Elimina eso de maxwidgets='1' showaddelement='no' para que te permita agregar elementos en esa sección.

    La otra forma es colocar un DIV en la plantilla, justo encima de:

    <div id='header-wrapper'>

    Y allí pegar el código.

    Responder
    Grupo Cristal  

    Hola Jmiu sabes realice las pruebaspara colocar el reproductor sobre el banner de la cabecera pero no funciono me da error, en la primera forma cambie el codigo html del reproductor por donde desis header y luego elimine maxwidgets y lo demas...pero no funciono y tambie agregue sobre div id='header-wrapper'> y no dio resultado, estoy haciendo algo mal o sera que no da?

    Responder
    JMiur  

    Tendría que ver el código que estás usando para contestar con precisión.

    Responder
    Grupo Cristal  

    Hola Jmiur te estoy enviando el codigo HTML del reproductor por correo ok.

    Responder
    JMiur  

    Recién llegó. Luego lo miro y te digo si es que encuentro el problema.

    Responder
    Grupo Cristal  

    Hola Jmiur te quiero preguntar si sabes como puedo conseguir algun blog de una sola columna, es que pretendo tener columnistas en mi blog prinsipal y quisiera conseguir algun blog de solo una columna, es posible, como y donde lo consigo?
    Gracias por leer saludos.

    Responder
    JMiur  

    Si te refieres a sólo posts y que no tenga sidebar, no recuerdo alguna plantilla así, debe haber alguno. También, bastaría quitarla y ensanchar las entradas.

    Responder
    Grupo Cristal  

    Hola JMiur quisiera hacerte una pregunta.Conoces si hay algun codigo html o algo similar que me permita rotar 7 imagenes en la columna prinsipal de forma lento.
    Ejemplo:Como presentacio de fotos que tiene blog para la columna lateral.Espero que me entiendas.Gracias xleer,Saludos...

    Responder
    JMiur  

    Hay muchas de esas cosas. Son slideshows o galerías de imágenes. Por lo general, requieren JavaScript. Hay muchos modelos.

    Responder
    Grupo Cristal  

    Hola Jmiur gracias por contestar e informarne sobre slideshows, solo que ya los conosia y quisiera algo mas simples y diferente aqui te envio un ejemplo de un sitio web que tiene un sistema que rota imagenes que es www.lanuevafm.net te pregunto hay algun codigo que realice este sistema de rotacion de imagenes que no para?
    Gracias nuevamente y perdon por molestarlo.

    Responder
    JMiur  

    Ese modelo en particular está explicado AQUÍ. En esa página están los códigos y los archivos necesarios.

    Responder
    Grupo Cristal  

    Hola Jmiur gracias nuevamente por contestar, parese que esta fasil de colocar el codigo de slideshow, solo que no encuentro donde tendria que colocar la url de mis imagenes.Me podria ayudar a instalar? te estoy enviando via email el codigo entero para que me muestres donde tendria que colocar la url de mis imagenes.
    Gracias por leer y ayudarme.

    Responder
    JMiur  

    Acabo de contestar tu mail :)

    Responder
    Grupo Cristal  

    Hola Jmiur te quiero preguntar sobre el codigo HTML de slideshow quiero saber en que parte dl la edicion HTML de mi blog va el primer codigo del slideshow, porque me dice que va en la seccion de HEAD pero no se si antes o despues y ademas me da error al colocarlo (( No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "theimages.length" must be followed by either attribute specifications, ">" or "/>" )).

    Responder
    JMiur  

    En la sección del head significa antes de </head>

    El tema del error es normal. En lugar de etiquetas SCRIPT normales coloca estas:

    <script type='text/javascript'>
    //<![CDATA[
    ...... y aqui pegas el contenido del script
    //]]>
    </script>

    Si es muy complejo, puede ser que eso tampoco funcione; en ese caso, deberás alojarlo en algún servidor y cargarlo.

    si el slideshow es muy complejo,

    Responder
    Grupo Cristal  

    Buen dia/tarde Jmiur sigo con el slideshow tratando de instalar, ahora da para colocar el codigo HTML pero me parese que el error ahora lo estoy cometien yo, al colocar el primer codigo en edicion HTML del blog y el segundo en la columna principal del blog ,las imagenes no me aparecen.Quiero saber si te podes fijar en el codigo HTML del slideshow junto con la URL de las imagenes para ver si estoy haciendo algo mal te lo envio via Email ok Gracias nuevamente por ayudarme.

    Responder
    Grupo Cristal  

    Hola Jmiur gracias por contestar , luego de colocar el segundo codigo HTML del slideshow en la columna principal y conseguir ver las imagenes resolvi intentar colocar en la columna lateral y si consegui observar.El problema es que no puedo ver en la columna principal.Sabes que problema puede estar pasando.Saludos

    Responder
    Grupo Cristal  

    Jmiur me explique mal no consigo ver la imagen en la columna principal pero si en la lateral.

    Responder
    JMiur  

    Tendría que ver el ejemplo online. Hasta donde probé, todo parecía normal.

    Responder
    Grupo Cristal  

    El slideshow ya lo tengo en la pagina funcionando pero en la columna lateral, espero que me entiendas, es que no consigo ver en la columna principal pero si en la lateral.
    www.cristalfm1079.blogspot.com

    Responder
    JMiur  

    Lo veo en la sidebar, hasta aí está bien. Lo que no sé o no veo es si está en la principal.

    Responder
    Grupo Cristal  

    Perdon Jmiur ahora si coloque tambien en la columna principal el codigo HTML del slideshow (el segundo codigo).
    Saludos

    Responder
    JMiur  

    ¿Está en un post? Entonces el script no debe tener saltos de línea debe estar escrito todo seguido:

    <script type="text/javascript">new fadeshow(fadeimages, 440, 225, 0, 3000, 1, "R")</script>

    Cuidado tambien con el ID que es fadeimages, debería ser diferente del otro que esta en la sidebar.

    Responder
    Grupo Cristal  

    Gracias Gracias Gracias Gracias Gracias Gracias Gracias Gracias Gracias Gracias Gracias Gracias Gracias...Jmiur conseguimos, ahora la ultima pregunta, en el codigo del slideshow hay para colocar 3 imagenes es posible que coloque mas? Saludos y gracias por ayudarme

    Responder
    JMiur  

    Sí, hasta donde sé, puedes colocar la cantidad que quieras.

    Responder
    Grupo Cristal  

    Hola Jmiur, he agregado un scroll en "QUIÉNES SOMOS" en mi blog y quiero saber si da para colocar el cursor del lado izquierdo, lo consegui aquí en Gema:

    http://gemablog-.blogspot.com/2008/08/scroll-en-cualquier-parte.html.

    Ella dijo que no lo sabria si da, quisiera preguntarte si sabes de alguna posibilidad.Saludo

    cristalfm1079.blogspot.com

    Responder
    JMiur  

    No que yo sepa, Cristal. En Firefox, seguro que no porque no puede modificarse de ninguna amnera y en IE, no recuerdo que haya algo semejante.

    Responder
    Grupo Cristal  

    Gracias por contestar Jmiur, ahora quiero preguntarte como puedo hacer para que la sidebar en mi blog se pase de la derecha a izquierda.Lo que quiero hacer es cambiarla de lugar.Saludos cristalfm1079.blogspot.com

    Responder
    JMiur  

    Aparentemente, bastaría cambiar las flotaciones. Poner en

    #main-wrapper {
    float:right;
    .......
    }

    y en :

    #sidebar-wrapper {
    float:left;
    .......
    }

    Responder
    Grupo Cristal  

    Hola Jmiur te envie una imagen en gif a tu correo y quiero saber de que forma funcionaria en mi blog en la columna lateral.

    Responder
    JMiur  

    No entiendo la pregunta ¿te refieres a un servcio de algún tipo? En Blogger es posible colocar podcasts así que no debería haber problemas pero no estoy seguro cuál es tu duda.

    Responder
    Grupo Cristal  

    Bueno..tengo que pedirte disculpas por hacerte perder el tiepo en una pelotudes, porque lo intente colocar la imagen en gif como codigo html...y no me di cuenta que era solo subirla al blog como imagen o una simples foto...Bueno gracias igual de todas formas..ha!tengo ahora un espacio en mi blog llamado SITIOs DE INTERES y pretendo colocar tu banner ok.Saludos

    Responder
    JMiur  

    Ahora entendí :D

    Responder
    Grupo Cristal  

    Jmiur que idea me podes dar para reducir el espacio entre el menú que esta añadido directamente en la plantilla de mi blog y la imagen que tengo en un gadget(de imagen).Hay alguna forma en el codigo html que pueda reducir?Saludos.

    Responder
    JMiur  

    Si es lo que está en la sidebar, puede reducirse el margen inferior que está acá:

    #sidebar .widget {
    margin-bottom:20px;
    }

    Responder
    Grupo Cristal  

    Hola Jmiur gracias nuevamente por contestar,ahora como puedo subir la columna centra un poquito más.Saludos.

    Responder
    JMiur  

    El único margen que hay allí es este:
    #main {
    padding:8px 8px 0;
    }

    Esos 8px iniciales son la separación superior. Poniéndol en 0 sube hasta el máximo posible.

    Responder
    Rodrigo  

    Hola jmiur otras veces he agregado una tercera columna sin problemas, pero ahora sucede que me arroja este aviso:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: Element type "b:section" must be followed by either attribute specifications, ">" or "/>".

    cambie comillas , cerre todo como corresponde pero aun me sale este error.
    que puedo hacer¿?

    ¡¡garcias!!

    Responder
    JMiur  

    Tendría que ver el código para decirte. El error no necesariamente está en esa línea, puede significar que hay una etiqueta mal cerrada, probablemente, en alguna parte antes de <b:/section>

    Responder
    Grupo Cristal  

    Hola Jmiur quisiera realizarte una pregunta sobre un reproductor de audio.Te envie la pregunta y el codigo HTML a tu correo.

    Responder
    JMiur  

    OK, lo veré y te contesto.

    Responder
    Grupo Cristal  

    Gracias Jmiur por contestar.
    Ahora trate de colocar una imagen sobre otra y no consegui, te pregunto hay posibilidad.

    Pero para eso te envie nuevamente un email con un codigo HTML Y una IMAGEN.

    Saludos

    Responder
    JMiur  

    Veré de que se trata :)

    Responder
    Grupo Cristal  

    Hola Jmiu gracias por contestar, pero trate de colocar en LA IMAGEN_1 la URL de la imagen que tendria que ir de fondo y el LA IMAGEN_2 la URL del Emailmefrom, pero resulta que no funciono, al subir el codigo HTML al blog me aparecio el codigo y no la imagen como tendría que ser, hay algo que estoy haciendo mal. Te envio los 2 codigos por Email para que veas.

    Saludos y gracias por el esfuerzo.

    Responder
    Grupo Cristal  

    Hola Jmiur y que te parecio mi problema hay solución?Todavia no consegui hacerlo funcionar.
    Saludos

    Responder
    JMiur  

    ¿Podrías colocar el ejemplo online aunque no funcione o recordarme dónde está? Me perdí un poco y no lo encuentro :D

    Responder
    Grupo Cristal  

    OK Jmiur aquí te envio el error como me aparece en el Blog luego de haber colocado el codigo HTML, igual de todas formas te envie por email los pasos que segui el resulta lo veras aquí.

    http://cristalfm1079.blogspot.com/search/label/EL%20HOR%C3%93SCOPO%20EN%20TU%20M%C3%93VIL

    Responder
    Grupo Cristal  

    Hola Jmiur ahora trate de explicarme mejor mi problema.
    La idea es colocar de fondo de "Emailmefrom" una imagen.

    Responder
    Grupo Cristal  

    Hola Jmiur, tienes novedad si es posible colocar una imagen de fondo de EMAILMEFROM.
    Saludos

    Responder
    Grupo Cristal  

    Hola Jmiur, si es eso lo que estoy buscando, que bueno quedo, me podrias mandar el codigo y como hacer para que me quede como te quedo a ti. Gracias por ayudarme, saludos.

    Responder
    JMiur  

    El código está en el mail que te envié.

    Responder
    Grupo Cristal  

    Hola Jmiur como estas, bueno estoy tratando ahora de abrir un espacio en mi blog que se llamara "Sitios de Interes" y como Ud. siempre de forma tan amable me ayudo , me gustaria colocar su banner, si fuera posible que tuviera 145 X 75.

    Responder
    JMiur  

    En la sidebar del blog hay unos banners, son los únicos que tengo :D Pero, de todas maneras, el tamaño de la imagen la puedes controlar con width o con height

    <img src="laimagen" width="145" height="75" />

    Responder
    El canillita digital  

    Hola me llamo Juan soy periodista estoy tratando de armar un blog (Elcanillitadigital.blogspot.com)
    y encontre una plantilla para mi blog que me gusto y quisiera saber como la coloco o subo a mi blog.

    Responder
    JMiur  

    La debes descargar a tu PC, tienes que encontrar un archivo XML y luego en Diseño, Edición de HTML, la subes: Carga una plantilla desde un archivo de tu disco duro.

    Responder
    El canillita digital  

    ok Gracias pero resulta que la plantilla me la descarga en un formato que al descargar me ofrece imagenes solamente.


    http://templatesparanovoblogger.blogspot.com/2009/04/template-blue.html

    Responder
    JMiur  

    No veo problemas con el archivo, está alojado en 4shared.com, se descarga desde áca, es un ZIP que en el interior tiene un archivo llamado Template Blue.xml

    Responder
    Grupo Cristal  

    Hola Jmiur, estoy armando un blog para un profesor universitario y quisiera quitar el recuadro que aparece (Ninguna entrada coincide con la consulta. Mostrar todas las entradas)

    Responder
    Grupo Cristal  

    Perdon Jmiur se me olvido de pasarte el blog.

    http://marioclara.blogspot.com

    Responder
    JMiur  

    Si no me equivoco, deberías buscar esta línea:

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

    y eliminarla.

    Responder
    Grupo Cristal  

    Hola Jmiur gracias por contestar, ahora quiero saber como eliminar la fecha, quien publico, comentario y la linea caleste que aparece en la columna principal del blog.

    Aquí te dejo la direccion del blog.
    http://ministeriofamiliadedios.blogspot.com/

    Responder
    Grupo Cristal  

    ha! tambien Jmiur como eliminar el texto que aparece en la columna principal que dise: Entradas más recientes y Página principal

    Saludos y gracias por leer y ayudarme.

    Responder
    JMiur  

    La navegación se elimina quitando esto:

    <b:include name='nextprev'/>

    Del resto, no puedo decirte porque sólo veo el header y ninguna entrada pero, la mayoría de esas opciones se controlan editando el elemento Entradas del Blog en la primera pantalla de Diseño y seleccionando o deseleccionado lo que quieres ocultar.

    Responder
    Ivoc  

    no le he hecho nada a la plantilla y la side bar me aparece debajo de los post!! porq pasa eso

    Responder
    Ivoc  

    ya ya todo esta bien!!

    gracias

    Responder
    Grupo Cristal  

    Buen día/tarde Jmiur, te cuento que estoy armando un blog para un colega de radio y quisiera preguntarte dos cosas. 1)- Como puedo hacer para subir más la columna principal 2)- Tambien quiero saber como puedo hacer para correr la columna principal más para la izquierda (Que quedara junto a la columna lateral)
    Gracias por leer, saludos.

    El blog es:
    ministeriofamiliadedios.blogspot.com

    Responder
    APIMUNDO SAS  

    Hola jmiur deseo colocar mis imagenes ajustadas y centradas conforme al tamaño del sidebar, he buscado el codigo html y no lo he encontrado...seria de gran ayuda poder contar contigo y que me des una mano

    Responder
    JMiur  

    Ninguno de esos elementos tiene márgenes así que la posición no puede modificarse, están pegados uno al lado del otro.

    El espacio que se ve entre las columnas es porque la sidebar es más ancha que las imágenes y por lo tanto, queda un lugar vacio. Podrían alinearse:

    #sidebar .widget {
    margin-bottom:20px;
    text-align:right;
    }

    o reducir el ancho de la sidebar o aumentar el ancho de las imágenes.

    Responder
    JMiur  

    Apimundo E.A.T: En este momento, la que veo está centrada pero ¿qué quieres decir con ajustadas? ¿Que se expandan de manera automática para abarcar el ancho de la sidebar sin importar el tamaño original de la imagen?

    Responder
    Grupo Cristal  

    Hola Jmiu me olvide como hacer para que la linia que separa la columna lateral de la principal llegue hasta abajo y que no me quede una parte.Gracias

    Responder
    JMiur  

    Aunque no hay garantías de que funcione en el 100% de los casos, en esta entra hay una explicación y enlaces a otras alternativas.

    Responder
    Grupo Cristal  

    Hola Jmiur aqui ando nuevamente tratando de saber...hay posibilidad de encontrar un sistema de marquesina que no tenga fin?Para explicarme mejor hay un sistema de rotacion de mensajes en esta pagina: http://www.dtforum.net
    Sabrias de algo?

    Responder
    Grupo Cristal  

    Los mensajes que estan rotando estan el la columna lateral de esta pagina: www.dtforum.net
    (( Ultimos 25 mensajes ))

    Responder
    JMiur  

    Eso que se ve allí es una MARQUEE, cuando termina, recomienza ¿Es ese tipo de cosa lo que quieres agregar?

    Responder
    Anónimo  

    ¡Buena Tarde! Queria escribirte, esto ¡¡Gracias!!, por los tres totoriales de como modificar la Plantilla minima, el paso uno sin duda el mas facil, el paso dos a un tengo muchas dudas, el paso tres esta claro, si podes visitate mi blog quedo genial, en la forma en que quedo la plantilla minima, es muy parecido a la plantilla Agosto, esto era lo que justamente buscaba, modificar la plantilla para que se pareciece a la plantilla agosto, y lo mejor de todo ¡funciona!, hasta pronto.

    Responder
    JMiur  

    Me alegra que fuera útil, SacroReyPablo :)

    Responder
    Grupo Cristal  

    Buenas Jmiur quisiera saber si sabes de alguna encuesta que me de para colocar en la columna principal de mi blog y que el resultado no me lleve a otro sitio web.Gracias por leer, espero su respuesta.

    Responder
    JMiur  

    Hay un gadget de Blogger para eso. También es posible hacer una utilizando Google Docs y en unos dias habra un post al respecto.

    Responder
    Grupo Cristal  

    Perdoname Jmiur que te pregunte nuevamente pero como consigo colocar una encuesta con un gadget de Blogger.¿Donde lo encuentro, lo tenes en tu blog como hacer?Gracias por contestar...

    Responder
    JMiur  

    En la pestaña Diseño, Añadir un gadget, allí lo verás en la lista de gadgets por defecto con el nombre de Encuesta. Al añadirlo te pedirá los datos.

    Responder
    Grupo Cristal  

    Hola Jmiur quisiera hacerte una pregunta, hay como reducir la separación que hay entre la columna lateral y la principal.Porque lo que quiero es que el texto o las imagenes queden pegada a la columna lateral.
    Espero que me engtiendas...

    Responder
    JMiur  

    CRISTAL FM 107.9: ¿En que blog quieres ese cambio?

    Responder
    Grupo Cristal  

    Uy! perdon por no colocar la dirección del blog.

    http://www.cristalfm1079.blogspot.com

    Responder
    JMiur  

    No sçe exactamnete que quieres conseguir pero, por ejemplo:

    #sidebar-wrapper dice float:right mejor ponerle float:left;
    también tiene un ancho que puede ser reducido ya que el menú tiene 244 pixeles
    y tiene un pequeño margen

    en #sidebar también hay padding que puede reducirse

    Modificando algunos o varios de esos valores se pueden acercar las columnas entre si.

    Responder
    Grupo Cristal  

    Hola Jmiu lo que quiero conseguir es ecercar más la columna principal a la columna lateral.Q no me quede entre una y otra un espacio en blanco.
    T mando un ejemplo a tu correo adjunto.
    Espero que me entiendas...

    Responder
    JMiur  

    Hay 3 márgenes que se suman:

    #main-wrapper {
    .......
    margin:0 0 0 3px;
    }

    #main {
    padding:0 8px 0;
    }
    .post {
    .......
    margin:0 8px 0 21px;
    }

    3 + 8 + 21 pixeles

    Responder
    Grupo Cristal  

    Hola Jmiur consegui reducir lo que queria...Gracias

    Hace un tiempo me explicaste
    como colocar una imagen de fondo del "EMAILMEFORM", solo que no consegui encontrar la explicación anterior...Me podes explicar como colocar nuevamente? enviandome el codigo HTML donde coloco el cOdigo de la imagen y el de EMAILMEFORM

    Responder
    JMiur  

    La verdad, no recuerdo cómo era el tema pero, podría ser en el FORM o bieb colocar todo eso en un DIV y allí poner la imagen de fondo.

    Responder
    Grupo Cristal  

    Hola Jmiur te envio por email el codigo HTML de una imagen de fondo de EMAILMEFORM,solo que no se como separarlos.

    Si podes ver cual era el codigo para que yo pueda volver a colocar un nuevo EMAILMEFORM y una nueva imagen te agradesco.

    Saludos...

    Responder
    JMiur  

    Lo miraré.

    Responder
    Grupo Cristal  

    Hola Jmiur te conteste a tu email.
    Saludos...

    Responder
    JMiur  

    OK, veremos si eso aclara mis dudas :D

    Responder
    Dyatlov  

    Hola JMiur, necesito saber si es posible colocar 2 sidebar de bajo de las entradas, te comento, el ancho de la entradas es 588 px, estoy necesitando que estas dos sidebar tengan 290 px cada una, pero que queden encolumnadas abarcando el ancho de las entradas.
    desde ya gracias.

    Responder
    JMiur  

    Si, eso es posible, la técnica es la misma aunque no puedo darte muchos detalles ya que eso variará. Tambien en el Blog de Gem@ puedes ver un artículo sobre ese tema aunque se refiere al footer.

    Responder
    Santo  

    Hola JMiur, necesito saber como poner o crear una sidebar entre las entradas, por ejemplo si tengo tres entradas a la vista, quiro colocar entre cada entrada un grafico o publicidad, me podrias orientar como o darme una idea por que lo estube intentando y no pude hcarlo.
    como sienpre gracias.

    Responder
    JMiur  

    No pueden insertarse gadgets dentro de otros y el blog es un gadget. Sólo puede colocarse código directamente en la plantilla.

    El único código que permite detectar algo similar es el condicional:
    <b:if cond='data:post.isFirstPost'>
    que establece si un post es el primero de una página.

    Responder
    Pavelkapaz  

    Saludos Jmiur.
    Primero que todo, gracias por los tutoriales, estos últimos días me han sido de mucha ayuda... Pero llega a un punto en que a veces uno no encuentra la solución a sus problemas, por ello acudo a tí para ver si puedes ayudarme.

    Mi problema es con el sidebar y el footer... sucede que el el sidebar se pone ensima de la sección del footer. Tengo que señalar, que ese es un problema que ya venia con la planilla en un principio, y que en realidad nunca me causo tanto problema, hasta ahora, que estoy intentando darle un buen diseño.

    Para que entiendas el problema he sacado un par de imagenes:

    IMG 1 Así se ve el problema en la Plantilla de Diseño

    IMG 2 Así se ve el problema practicamente

    Claramente que mi intención es poner las cosas en su lugar.
    Si te es de ayuda ESTE es mi blog.

    Saludos
    Pavel

    Responder
    JMiur  

    Pavelkapaz:

    A mi juicio (y esto es subjetivo) , los problemas son dos, uno, se genera por el uso de la posición absoluta de cada elemento. Absoluta con respecto al monitor por lo tanto, el sitio no se verá centrado y la ubicación de cada elemento, dependerá de la resolución de pantalla de quien lo mire.

    Esto, creo que debería resolverse definiendo las propiedades de outer-wrapper, ancho, etc y allí, tal vez, colocar position:relative. De ahí en más, absolute se referirá a ese rectángulo general que es el que contendrá el blog y no al monitor que es un dato variable.

    Lo segundo es que, tal como están armados ahora los contenedores, el footer está dentro del div content-wrapper que es el de la derecha. Entonces, va a "subir" y se superpondrá a la sidebar que está en otro div a la derecha si es que la altura de la columna izquierda (sidebar) es menor que la altura de la columna derecha (header+blog+footer).

    Entiendo yo, que lo razonable para ese tipo de esquema es tener 3 grandes sectores; el header (tan ancho como outer-wrapper) , el central que tendrá dos columnas y el inferior que será el footer (también tan ancho como outer-wrapper)

    Digamos que es el esquema clasico de un blog. Las dos columnas no hace falta que se posicionen de manera absoluta; basta usar float right y left. Luego, llegado el caso, se usa position absolute para posicionar determinadas cosas dentro de cada rectangulo pero no para posicionar esos grandes rectángulos contenedores. Haciéndolo de ese modo "tradicional" es mucho más simple ubicar cada parte.

    Responder
    Pavelkapaz  

    Muchas gracias por la explicación, voy a ver si logro solucionar el problema. Para serte sincero recien estoy entrando a los conceptos basicos para manipular los codigos html y java, y en esto tu blog me ha sido de mucha ayuda. Voy a utilizar un blog de prueba y a cambiar las cosas ;)

    Saludos, y gracias nuevamente.

    Responder
    JMiur  

    Utiliza el esquema de la plantilla mínima porque tiene una diagramación similar a lo que queires hacer, excepto el orden de la sidebar. Creo quecon eso, todo te resultará más fácil.

    Responder
    Pavelkapaz  

    Muchas gracias por toda la ayuda. Lo que hice finalmente fue pescar otra plantilla y modificarla completamente a mi gusto. ESTE fue el resultado.

    Ahora, me gustaria hacerte una pregunta, y me disculpo si no deberia ir en esta entrada. Me gustaria saber como haces para cambiar la estructura de una entrada, como lo haces en tus entradas del menu Como ESTA.

    De esto lo que quier saber son tres cosas:
    1) Quitar la Fecha de la entrada.
    2) Agrandar el Titulo de la Entrada
    3) Como sacas el sidebar. ¿y si con esto es posible ponerle otra imagen al content wrapper, que solo funcione cuando abres esta entrada?

    Nuevamente muchas gracias.

    Responder
    JMiur  

    El sistema que utilizo es el que puede verse en esta entrada.

    Responder
    Gabriel Villasante  

    Buenos dias disculpa estoy haciendo mi blog http://maxvillasante.blogspot.com/ y al instale el template oracle me muestra mis entrada en dos columnas como elimino eso que hace que no se muestren mis entradasm, haber si me ayuda al respecto
    gracias

    Responder
    JMiur  

    La plantilla que usas está hecha de ese modo, si quieres que se vean las entradas normales deberá ser modificada pero no es algo que pueda verse online; puede ser simple o complciado, dependerá de cómo sea esa plantilla.

    Responder
    El Cuervo Adrian  

    Hola!
    Modifiqué la plantilla para agregar una 2da columna.
    El problema que tengo es que me quedaron los gadget de ambas columnas muy pegados, con muy poco espacio vertical entre ellos ¿Me podrás ayudar?
    http://vinosenbuenosaires.blogspot.com/

    Responder
    JMiur  

    El espacio vertical entre widgtes en esa plantilla está definido así:

    .sidebar .widget, .main .widget {
    border-bottom: 1px dotted #7F7F7F;
    margin: 0 0 1.5em;
    padding: 0 0 1.5em;
    }

    Puedes separarlo en dos partes:

    esto controla los posts
    .main .widget {
    border-bottom: 1px dotted #7F7F7F;
    margin: 0 0 1.5em;
    padding: 0 0 1.5em;
    }

    y con esto controlas los widgets de las sidebars así que bastaría aumentarles el margen que en este momento es de 1.5em hacia abajo; puedes poner cualquier valor en pixeles.
    .sidebar .widget, .main .widget {
    border-bottom: 1px dotted #7F7F7F;
    margin: 0 0 1.5em;
    padding: 0 0 1.5em;
    }

    Responder
    Unknown  

    oye queridisimo amigo espero y me puedas ayudar lo que pasa es que quisiera poner la sidebar de una plantilla pero conservar donde publico mis entradas y no se si eso es posible porfavor ayuda :-|

    Responder
    JMiur  

    Tendrás que ver si identificas cual es el código de la sidebar y cuáles son sus propiedades CSS. No hay manera de ayudar con eso. Es posible hecerlo, si, claro.

    Responder
    Pedro Donaire  

    Hola JMiur,
    Tengo un problema con la nueva plantilla de mi blog (http://bitnavegante.blogspot.com/).
    No puedo poner ningún gadget en el sidebar de los post, porque se ven colgando al final de la página principal. Como ejemplo, he puesto únicamente un guión que lo verás al final, antes del footer.
    Esto debería quedar oculto, igual que el mismo post, y sólo mostrarse cuando abres un artículo.

    ¿Podrías mirarlo para ver si ves alguna solución?

    Responder
    JMiur  

    Eso ocurre porque la estructura es errónea; hay un gran contnedor que es #frontpage y debajo, otro llamado #singlepage que es el que tiene esa sidebar.

    Se ve debajo proque está debajo; para empezar, la sidebar debería estar dentro del div #frontpage.

    Responder
    Pedro Donaire  

    Se me ocurren varias preguntas:

    Si la sidebar de #singlepage se ve debajo ¿por qué no se ve igual 'la entrada de post' que también está en la #singlepage?

    Otra, si se cuelga la sidebar de #frontpage ¿no destrozará todo el diseño apareciendo en la página principal?

    Y otra, caso que la segunda pueda realizarse de forma positiva ¿cómo se hace?

    Me parece que a mi amor por la aventura del diseño web se le cortan las alas...

    Responder
    JMiur  

    Porque seguramente, como se trata de un sitio tipo magazine, haya código condicionado y las estructuras cambien según sea el tipo de página; en el home que es lo que miré,pasa eso que te dije. En las páginas individuales, es distinto y el gadget ese con el guión, se ve correctamente a la derecha así que si quieres colocar una sidebar en el home, deberás condicionarla.

    Responder
    Pedro Donaire  

    Puesto que me parecía harto difícil (para mi) lo que me planteabas, he optado por coger la platilla original y copiar los widgets que en principio tenía habilitados. Ha sido un copia y pega que ha dado resultado. Incluso había un widget llamado 'custom search' que es donde he podido incluir un código distinto.
    Recogiendo tus explicaciones, es muy posible que estos widgets ya vengan condicionados desde arriba y por eso no se ven en la página principal. El caso es que lo doy por resuelto, aunque eso sí, un tanto condicionado por lo que autor de la plantilla quiere o no que aparezca.

    De nuevo te reitero las gracias por tu atención y tus siempre certeras indicaciones.

    Responder
    JMiur  

    Me alegro que todo este solucionado o semi-solucionado. Efectivamente, a simple vista, parece una plantilla bastante compleja así que no debe ser nada simple modificarla.

    Responder
    Amiitha Aoi  

    Buenas JMiur~!! Tengo una pregunta
    ¿Cómo puedo hacer para colocar una imagen al pie de un gadget en una plantilla de diseño? Teniendo en cuenta que el gadget ya tiene una imagen de fondo...

    Intenté colocarsela poniendo el código:

    .sidebarBottom {} antes de /b:skin pero no se porque no aparece la imagen ¿? :/ (Disculpa la pregunta de principiante pero me urge hacerlo y no puedo T___T)

    Para que se entienda mejor, quiero hacer que el gadget quede como uno de los de este blog: http://freakingvisuals.blogspot.com/

    ¿Podría ayudarme?

    JMiur  

    ¿Y en que parque quieres colocr esa imagen? No veo ningún elemento llamado sidebarBottom.

    Amiitha Aoi  

    Disculpe me confundí, era SidebarFooter. En ese blog tienen 3 imágenes en cada sidebar:

    .sidebar {} /*imagen de fondo del gadget*/
    .SidebarFooter {} /*imagen en la parte inferior del gadget*/
    .SidebarHeader {} /*imagen en el título del gadget*/

    Quiero hacer que uno de mis gadgets quede como uno de ese blog, osea con las 3 imágenes.

    Pude cambiar la imagen del título del gadget usando este código:

    #id-del-gadget h2 {
    background-image: url(url de la imagen) left top no-repeat;}

    Pero no tengo idea de cómo poner las otras imágenes :/
    Puede verlo en este blog de pruebas:
    http://asconfessions.blogspot.com

    Gracias por su ayuda ^^

    JMiur  

    Eso ya es distinto. Ahí veo que tienes una imagen en el H2
    #id-del-gadget h2 {}

    La imagen de centro, podría ir en:
    #id-del-gadget .widget-content {}

    Pero, te va a faltar algún elemento en donde colocar la inferior; tal vez, lo simple sea agregarlo en el gadget en al plantilla, justo arriba de:
    <b:include name='quickedit'/>
    colocas un DIV:
    <div class='sidebarfooter'></div>

    y la regla que deberá indicar la dimensión (la misma que la imagen que uses:

    #id-del-gadget .sidebarfooter {
    background: xxxxxxxxxxxx;
    height: alturapx;
    width: anchopx;
    }

    Amiitha Aoi  

    Waaa muchísimas Gracias *.*!!!! Al fin quedaron las 3 imágenes T^T
    Solo una íltima pregunta, perdón por molestar tanto, ¿Cómo puedo hacer para que la imagen se ponga a la izquierda (para que esté alineada con las otras) ya intenté poner:

    background: url(url de la imagen)left;

    pero no se mueve O.O ¿tendré que mover el div de .sidebarfooter? ¿O solo es necesario poner algun estilo en #id-del-gadget .sidebarfooter?

    Gracias por su ayuda ^^

    Amiitha Aoi  

    Ya pude solucionarlo, solo debía agregar unas líneas de estilos con las mismas propiedades del widget-content ^^ y ya quedó todo centrado~!!

    Muchísimas gracias por su tiempo y ayuda JMiur ^^
    Como siempre tiene todo mi respeto y admiración xD

    Que tenga una buena noche!

    JMiur  

    Me alegra que funcionara, Amiitha :D

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR