64

Plantilla Son of Moto (Añadir sidebar)


Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

Me consulta calvosaez sobre la modificación del HTML para conseguir una nueva sidebar en la plantilla Son of Moto, creo entender que le gustaría tener una a cada lado de las entradas, así que he trabajado en un blog de pruebas y este es el resultado explicado paso a paso:

Antes de nada hemos de aumentar el ancho general del blog, ya que sino lo hacemos así, la nueva sidebar probablemente nos quede bajo las entradas.

1- Vamos a nuestra plantilla-html y buscamos #outer-wrapper {
La anchura del blog viene dada por el valor width: 692px; vamos a cambiarla a width:900px;.

2- En #content-wrapper { añadimos el valor margin-top: 20px; hacemos esto para separar las dos sidebar y las entradas de la cabecera del blog, ya que en esta plantilla quedarían muy pegadas arriba (según mi opinión). Vosotros podéis no añadir este valor, si os gusta como queda.

3- Buscamos #main {, el valor de width:400px; lo cambiaremos por width: 440px; y debajo de esto añadimos margin-left: 20px; para delimitar el margen entre las entradas y las sidebar.

4- Seguimos hacia abajo en la plantilla, y veremos #sidebar {, cambiamos el width: 226px; por width: 200px;

5- Una vez modificado el CSS para hacer todo el blog un poco más ancho, pasamos a añadir la nueva sidebar, que es tan sencillo como copiar la otra, es decir, esto:
#sidebar {
width: 200px;
float: right;
color: #cc0000;
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 */
}

Lo copiamos tal cual está y lo pegamos inmediatamente después de eso mismo, cambiando #sidebar { por #newsidebar { y float: right; por float: left; (si queréis las dos sidebar al mismo lado dejar el float igual para las dos).

6- Para terminar bajamos en nuestra plantilla hasta encontrar <div id='content-wrapper'> y a continuación añadimos :

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

7- Guardamos los cambios y ya tenemos nuestra Son of Moto a tres columnas. :-)

Y así ha quedado la mía ;-):


Entradas Relacionadas:

64 comentarios:


Anónimo

Rosa quiero un hijo tuyo XD mira que he buscado y requetebuscado, siesque eres mi idola, eso se merece un enlace en mi blog, bueno hoy me iva a acostar temprano,pero me temo que no voy a poder dormir teniendo cosas por hacer, mira ya lo consegui en este blog http://fotografiafantastica.blogspot.com/ aunque ahora tendre que retocar todos los diseños, bueno poco a poco, mil gracias, ha sido facilisimo con tu gran explicacion detelladisima

Anónimo

Ja, ja,ja, va a ser que no...lo del hijo digo:D que ya soy muuuu mayor y además tengo dos chavalotes y el mayor es mayor que tu, jeje,:D

Me alegro te saliera a la primera;)

Anónimo

¿Esque sabes programacion?
cuentame un poco de tus aficiones,
al final e tocao el html... XD

PAUTA OUH YEAH (R)

Hola Rosa... yo hace unso dias que pase por qui y me gusto que tuvieses novedades para blogger...

Quiero consultarte...

Estas modificaciones? sirven para Blogger beta???

Yo uso otra plantilla... Denim creo... puedo usar los cambios que tu pusiste para crear una nueva sidebar en esa plantilla???
gracias... muchas gracias...

PAUTA OUH YEAH (R)

te envio un link donde va la plantilla que quiero modificar...(hacer tres columnas)

pero sabes que no puedo dar con el resultado final, ya que:

la barra se crea a la izquierda, pero desplaza la parte central a la derecha y cubre la otra barra...
no se que hago mal...

ademas quisiera ponerle una imagen justo despues de mi titulo al blog...como un icono, pero al final...

AQUI MI BLOG
si puedes datearme a pautaouhyeah@gmail.com

gracias...

AQUI MI PLANTILLA YA UN POCO MODIFICADA

Anónimo

pauta, el problema de la plantilla Denin es el mismo que la de Sound of Moto, no es que hagas algo mal, es que es de cuerpo fijo y por tanto, hay que modificar también las imágenes que usa de fondo, voy a mirarlo, pero supongo que me llevará un tiempo porque la verdad es que estoy "hasta arriba" de consultas y peticiones.
Ten un poco de paciencia...;)

Anónimo

Estoy haciendo las modificaciones en mis blogs, gracias, funciona perfectamente, pideme lo que quieras menos dinero, te debo una.

PerSe

a mi no me sale

http://perseprueba.blogspot.com/

Anónimo

Perse, eso es porque tu plantilla no es una Son of Moto, ni siquiera es de Blogger, he visto que es una adaptación de Wordpress de Blog and Web. Su código es bastante distinto a las de Blogger, supongo que podrá hacerse, pero yo solo trabajo, de momento, con las Blogger originales.

De todos modos te diré que por lopoco que he visto en tu plantilla, además de copiar el código de la sidebar hay que copiar el de su título para que quede igual que la otra:
#sidebar-wrapper h2 {
background:transparent url(http://bp3.blogger.com/_Zuzii37VUO4/RkTUtOMBThI/AAAAAAAABCc/I-BDP9L70Nc/s1600/sidebar.png) no-repeat scroll 0pt;
margin:0pt;
padding:5px 24px 7px 10px;
color: #666666;
font: bold 110%/110% "Lucida Grande", Arial, sans-serif;
}

Y cambiar su nombre a #newsidebar-wrapper h2 {

También me he fijado que queda al lado de la cabecera y como fuera del cuerpo, creo que es porque has pegado el segundo código, el que hace que se vea, en el lugar incorrecto, intenta ir haciendo pruebas con eso...

Unknown

Hola Rosa,he probado y fallé fatal,menos mal no guardé la plantilla.

Hice todos los pasos y aparece la nueva sidebar siempre a la derecha,aunque modifique el código que lo sitúa a la izquierda.XD

Anónimo

jedimaster, en la copia para la nueva sidebar pones float: left;

Y el código HTML para ella lo colocas justo encima de <div id='main-wrapper'>

Tiene que salir así una a cada lado.

Neo

Todo perfecto... eres un crack..efectivo y bien explicado. Un 10.

Saludos de www.dolordehuevos.net

Anónimo

Neo, ya veo que te ha quedado muy bien. Por cierto, un blog muy original el tuyo, empezando por el título y terminando por la imagen de tu perfil ¡que susto me he pegado! XD:D:D

Anónimo

Hola. Sabes cómo puedo separar los widgets para los diferentes apartados de la menú bar??? Es decir, yo tengo los mismos widgets en la página principal que en mi apartado de vídeos por ejemplo. Se puede cambiar???
Responde, por favor.
Gracias.

Anónimo

Albert, no te he entendido lo que quieres decir...:-X Como no sea esto a lo que te refieres...
http://elescaparatederosa.blogspot.com/2008/01/mostrar-un-widget-en-una-pgina.html

Albert

Efectivamente era eso a lo que me refería. Ahora lo pondré en funcionamiento.
Muchas gracias Rosa!

AmpaElsCossetans

Hola Rosa:

Estoy alucinada con todos los comentarios que leo. Me parece increible que sepas tantísimo, y además una chica. Reconocerás que no es normal. Bueno, el tema es que intento crear una nueva columna bajo la columna de la derecha, como un recuadro más que gestionar aparte y me vuelvo loca. Mira a ver si pudieras echarme una mano. No sé cómo hacerte llegar la página html, pero si puedo mostrarte el enlace del blog que estoy creando. A propósito, es para el Ampa de un Cole. www.amparectoret.blogspot.com Creo que me está quedando bastante mono, aunque tengo que variar algunas cosas. Otra cosita: en las barras inferiores verás que me coloca el slide y el powerpoint uno debajo del otro, con lo que pierdo un montón de espacio, y me preguntaba si sería posible ponerlos uno al lado del otro. Mil gracias. Ah! mi email amparectoret@ya.com

Anónimo

Amparectoret , ja,ja, ¿Qué es eso de "además una chica? A ver si después de tanto luchar por la igualdad, resulta que andamos con esas nosotras mismas...(lease con entonación regañina-bromilla)

En serio ahora, vamos a ver si soy capaz de hacerme entender...tu relajate y tomatelo con calma, leer y pegar prácticamente, así que tranquila :-)

Situate en el codigo de tu plantilla y sin expandir artilugios localiza esta línea (si la nueva sidebar va a ir en la columna derecha):

<div id='sidebar-right'>

Ve mirando desde esa línea hacia abajo, y en cuanto encuentres esto:
</b:section>
</div></div>

Pega debajo estas líneas:

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop1'>
<b:widget id='BlogArchive2' locked='false' title='Archivo del blog' type='BlogArchive'/>
</b:section>
</div>

Usa la vista previa y ya deberías ver la nueva columna, he puesto los archivos del blog dentro pero luego puedes eliminarlos en edición, lo he hechopara que se vea algo en vista previa.


Si la columna vas a añadirla en la parte de la izquierda, la línea que has de localizar, es esta:
<div id='sidebar-left'>

Y como antes, vas bajando hasta dar con:
</b:section>
</div></div>
Justo después pegas esto:
<div id='sidebarleft-wrap1'><div id='sidebarleft-wrap2'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='BlogArchive3' locked='false' title='Archivo del blog' type='BlogArchive'/>

</div>

Puedes hacerlo para ambas o una sola, como prefieras...


En cuanto a lo del footer, coloca todo (el slide y el power point) en el mismo elemento html, empleando este sistema:

<div style="width: 45%; float: left;">Aqui el codigo del slide (izquierda)</div><div style="width: 45%; float: right;">Aqui el codigo del power point (derecha)</div>
<div style="clear: both;"></div>

¡Suerte y al lio! :-)

AmpaElsCossetans

Hola Rosa:
Mil gracias por la información, pero no puedo aplicarla de momento porque me ha pasado algo increíble en mi blog. Me han aparecido un millon de cuadritos que pone no sé qué de "photobucket upgrade to pro today". Ha sido derrepente, de un día para otro y vuelvo a instalar la plantilla en cuestión y me sigue saliendo. Con otras no me pasa. Por hoy he terminado. Llevo dos horas (literales) intentando saber qué ha ocurrido y no tengo ni idea. Hoy me siento vencida por la tecnología. Mañana estaré más despejada y con más ganas e intentaré recuperar mi adorada plantilla "green grass". Ya te contaré cuando aplique tus conocimientos en la definitiva. Mil gracias. Rosa

Anónimo

Amparectoret , eso ha sucedido porque las imágenes que usa esa plantilla están subidas a Photobucket, y como bastante gente la estará usando, se ha excedido el límite de banda, así que en el lugar de las imágenes sale eso que dices...a veces es pasajero, a veces no.
Cuando usamos una plantilla diseñada por otro, lo mejor es subir todas sus imágenes a un alojamiento propio, que solo usemos nosotros.

lille skvat

Hola Rosa:

Llevo un par de semanas leyéndote y tu blog me es de gran ayuda. Hoy he visto esta entrada sobre la plantilla Son of Moto y los cambios que explicas me funcionan de maravilla. Lo puedes ver en http://lilleskvat.blogspot.com/

Lo único que es una pena es que cuando se está cargando se puede ver el margen original de la plantilla...

Muchísimas gracias por todo :)

Anónimo

Lille, es cierto, tu blog tiene bastante contenido y al demorar su carga esto se aprecia más que en otros...

kkspy

Buenísimo articulo sobre esta plantilla, me he mareado un poco con el tema de la tercera columna, gracias a ti el tema esta solucionado, llevo dos días en el mundo de los blogs y el tuyo me encanto. Saludos.

Anónimo

kkspy Me alegra que te haya sido útil. :D

Clown

hola rosa, podrias decirme como agrego la tercer columna en la plantilla tic tac?

es posible? gracias

Anónimo

Clown Aquí puedes descargarte la Tic Tac de tres columnas:
http://www.megaupload.com/?d=WSLC37ZU

Bleid

Hola rosa
no me sale
cononsigo agrandar el tamaño del blog pero no sale la nueva sidebar hechame una mano
http://bleid-volandovoy.blogspot.com
gracias

Anónimo

bleid En tu blog veo la plantilla original...así no puedo comprobar donde está el error.
Si tienes miedo a usar el blog "real" para los cambios, hazlo en uno de pruebas...
Mientras no pueda ver el resultado, no podré saber que ha ido mal.

Bleid

hola rosa
he cambiado la plantilla de mi blog porque de la otra forma no me salia bien
lo unico que ahora no se poner la imagen de l acabecera
como l apuedo poner para que quede bien
gracias
saludos

Anónimo

bleid La imagen de tu header (la azul) que tienes ahora, está en esta parte del código de tu plantilla:
#header {
background: url("http://img59.imageshack.us/img59/2245/headerjg6.jpg") no-repeat left bottom;
height:150px;
padding:0 15px 8px;
}

Tienes que cambiar su url:
http://img59.imageshack.us/img59/2245/headerjg6.jpg

Por la de la imagen que quieres colocar en su lugar en el header.

Bleid

hola de nuevo rosa
he hecho lo que me has dicho la url de mi imagen la he sacado con imageshack , pero no se ve entera solo se ve un trozo. no sesi he de tocar el tamaño o algo pero tampoco se como hacerlo
gracias por tu rapida respuesta
saludos

Anónimo

bleid Justo debajo de donde has colocado la url, verás esto:
height:150px;

Eso quiere decir que tu imagen no puede superar los 150 pixeles de alto tal como está ahora, aumenta ahí ese valor, es decir, 150 por uno mayor, según lo que quieras mostrar de la imagen en su alto.
Aunque yo te recomiendo usar otra o esa misma a menor tamaño...tarda bastante en cargar porque es muy grande.

Bleid

ok rosa
muchas gracias
no se que haria sin tu pagina
saludos

Bleid

Solo una cosa mas
he conseguido reducir la imagen pero me sale un buscador de ggogle en color verde que me gustaria quitar como lo hago?
gracias

Anónimo

bleid No te dije nada antes, pero sabia que ibas a querer quitarlo, además es un código de publicidad de Adsense que seguro metió el creador de la plantilla y que le da beneficios a el..
Localiza esto y borralo todo (usa vista previa antes de guardar):
<div id='adsense-top'>
<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_host = "pub-1599271086004685";
google_ad_width = 728;
google_ad_height = 15;
google_ad_format = "728x15_0ads_al";
google_ad_channel = "";
google_color_border = "8dc63f";
google_color_bg = "8dc63f";
google_color_link = "191919";
google_color_text = "000000";
google_color_url = "000000";
//-->
</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

Bleid

ok gracias esa era la siguiente pregunta, pero bueno asi adelanto.Yo me referia a una barra verde que aparece en mi cabecera y es un buscador que tambien quiero quitar.
gracis de nuevo ya te estoy esculpiendo una estatua en tu honor jjeej

Anónimo

bleid Es eso. Es que es un buscador de Adsense...tu borra eso y verás como se va.

Bleid

Lo he hecho y se ha ido una letreo blanco de publicidad pero no la barra verde

Anónimo

bleid Yo sigo viendo ese código que te digo en la plantilla... está después del código del header, más o menos sobre:
<div id='newsidebar-wrap'>

Bleid

como he borrado lo anterior ahora no lo encuentro

Anónimo

bleid Tiene que verse enseguida...yo lo veo en tu código fuente.
Busca eso que te digo <div id='newsidebar-wrap'> y algo más arriba está el código.

Bleid

Hola rosa
creoque este no es el lugar indicado para esta pregunta pero aqui la dejo
me comenta gente que entra en mi blog que no puede dejar comentarios y lo he probado y es verdad. que puede ser?
saludos

Anónimo

bleid
Ve a edicion html y marca expandir las plantillas de artilugios.

Ahora te pego el código que ha de estar tal cual lo pongo.

El de color normal es el que YA DEBERIA ESTAR EN TU PLANTILLA, asi que te guias por el para situarte.

El que va en negrita tal vez este incompleto o ni siquiera esté, tendras que añadirlo tal cual lo ves aquí.

USA VISTA PREVIA POR SI ALGO VA MAL ANTES DE GUARDAR NADA.
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

<span class='post-icons'>
<!-- email post links -->

Bleid

hola rosa
este codigo si que sale en mi edicion html
que hago lo borro y copio el tuyo?

Anónimo

bleid Si sale, entonces es que está bien, déjalo así.
Pero lo malo es que entonces no se cual es el problema, ya que ese es el código que muestra los comentarios... quizá tengas que cargar la plantilla de nuevo u otra plantilla...

Bleid

hola rosa
gracias por tu respuesta como siempre.
ya lo he solucionado he cambiadfo la opcion de comentarios y he puesto que salgan en pantalla emergente y ya funcionan
gracias un saludo

Orlando

Hola, quisiera saber como hago para que la nueva barra no quede mas pequeña (en el largo) con relacion a la otra.

y/o si puedo hacer que ocupen todo el largo hasta el final del blog y no se corten a la mitad.


Saludos!
mi blog es: spookyarts.blogspot.com

Anónimo

Darío Morgendorffer Mira aquí a ver si esto te sirve:
http://vagabundia.blogspot.com/2009/09/blogger-more-y-las-columnas-de-igual.html

Xander Reyes

A MI NO ME FUNCIONO: BlogsDeLaRomana.Blogspot.com alquien que me escriba a AlexanderReyesEx@hotmail.com
me dice: El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile

Anónimo

Alexander Borra la línea del gadget que he puesto de prueba:
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>

Lo demás lo haces igual...

Xander Reyes

Bueno, ya quite la linea del widget y se graba, pero no aparece la newsidebar, que la seleccione para quedar an la izquierda (BlogsDeLaRomana.Blogspot.com), también tengo el blog OpinaConAlexander.BlogSpot.Com gracias a cualquiera que pueda ayudarme.

Anónimo

Alexander Reyes No puedo explicar esto mejor que lo hago en la entrada... lo hago lo más claramente que se... algo no has hecho de forma correcta, ya que funciona.

Xander Reyes

Ya pude agregar la segunda barra, es que cuando borre el widget, elimine la section b, tengan cuidados lo principiantes como yo, gracias Rosa, te amoooooooooo.

Anónimo

Alexander Reyes Buen consejo ese... precaución y no solo a los principiantes a todos nos pasa algo parecido alguna vez...;)

Daniela A. Ayala Molinari

Lo he intentado pero no me funciona :( Y no lo entiendo porque la base es SON OF MOTO :( échale un ojo por si pasa algo porfa.
http://english4childrentoday.blogspot.com/

Daniela A. Ayala Molinari

Rosa, me sale este error cuando guardo :( Editar plantilla

Edita los contenidos de tu plantilla. Más información
No hemos podido guardar tu plantilla

Por favor, corrige el siguiente error y envía la plantilla de nuevo.
El código ID del nuevo widget "NewProfile" no es válido para este tipo: Profile

Rosa

DanielaEs el gadget que puse de ejemplo... elimina esta línea en el código:
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>

Jay

Hola, sabes? he intentado como 5 veces añadir la sidebar y me aparece, pero no quiere irse al lado izquierdo, parece que ahora cambio el estilo de las plantillas en vez de:

#sidebar {
width: 200px;
float: right;
color: #cc0000;
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 */
}

aparece:

#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}

ojala pudieras ver y decirme si las plantillas cambiaron o probablemente yo este haciendo algo mal, te lo agradecería muchísimo. Si no me sale por que me equivoco si no fuera molestia tu misma me podrías arreglar el asunto? estoy desesperada, por favor responde ):

Anónimo

Javiera El estilo es el mismo, solo que en unas se utilizan variables y en otras no, lo que no impide el seguir estas instrucciones...
La plantilla Moto lleva una sidebar a la derecha, o sea esta:
#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}

Copia eso, pegalo debajo y cámbialo después así:
#newsidebar {
width: 226px;
float: left;
color: $sidebarTextColor;
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 */
}

Eso si, después no te olvides continuar con el código siguiente que has de añadir o no te servirá de nada...

Anónimo

Javiera Se me olvidada... perdón... tanto en la nueva sidebar como en la que ya tenias, tienes que cambiar el width: 226px; por width: 200px; o una de las dos se vendrá abajo...

Jay

@Rosa

Intente 3 veces otra vez, aparece la columna, pero aparece al centro

Anónimo

Javiera Trata de probar a cambiar el left por right... no se que más decirte... lo siento. Arreglarlo yo misma no es posible, nunca accedo a las cuentas de otros, antes lo hacía y no tengo buenas experiencias con eso...

lille skvat

Después de usar este truco durante mucho tiempo ahora me surge una nueva duda. Sé poner las dos barras en el lado de la derecha en lugar de una a cada lado, pero luego me gustaría que algunos widgets ocupen las dos barras y otros solo 1. ¿Sabes si eso se puede hacer de algún modo? Se me ocurre tal vez creando una gran barra lateral y dentro de ella zonas con dos barras. No sé si me explico. Gracias y feliz 2011.

Anónimo

Lille Skvat Me es imposible explicar en cada caso, pero quizá esto te sirva de orientación:

http://elescaparatederosa.blogspot.com/2009/08/nueva-sidebar-dividida-en-dos.html

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S