28

Sand Dollar (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...
A petición de varios visitantes de mi blog, voy a explicar como añadir una nueva sidebar a la plantilla Sand Dollar de Blogger.
Aunque suelo decirlo constantemente, no está de más recordar, que las modificaciones en las plantillas que expongo en El Escaparate, están hechas "a mi manera", por lo tanto no siempre será la manera ideal de llevarlas a cabo, simplemente el resultado suele ser óptimo del modo que lo hago y por eso me atrevo a publicarlo, con el único fin de ayudar.

Tendremos en cuenta que vamos a partir de una San Dollar original, sin modificaciones anteriores.
Voy a ir paso a paso, siempre hacia abajo en la plantilla, para que sea más fácil de encontrar las partes donde haremos las modificaciones:

[1] Vamos a nuestra plantilla, y en la parte del CSS (recordad que es esa donde hay muchas llaves de estas {}, localizamos esta línea de código para situarnos:

#content-wrapper {

[2] Debajo del content-wrapper, encontraremos esto:

@media all {

dentro de esto vamos a necesitar cambiar algunos valores, nos tendrá que quedar así:

@media all {
div#main {
float:right;
width:52%;
margin-right: 30px;
margin-left: 20px;
padding:20px 0 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
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 */
}

Las líneas:
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;


son las que hacen que se vean las barras horizontales punteadas de separación entre las entradas y las sidebar,(lo veréis abajo, en la "captura de la plantilla") si no queréis incluirlas las borráis y listo.

[3] Debajo justo de esa parte encontramos esto: div#sidebar {, donde también hemos de cambiar algunos valores, de forma que nos quedará así:

div#sidebar {
margin:0px 0px 0px 0;
padding:20px 0 10px 1em;
text-align:left;
float: left;
width: 20%;
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 */
}

[4] Llegados a este punto, hemos de añadir el CSS necesario para la nueva sidebar y lo pegaremos justo debajo del código anterior, quedará así:

}
div#newsidebar {
margin:0px 0px 0px 0;
padding:20px 0 10px 1em;
text-align:left;
float: right;
width: 20%;
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 */
}

Como habréis observado es prácticamente una copia de la sidebar existente, simplemente hemos modificado algunos valores, tened mucho cuidado con no omitir ninguna llave {, pues no obtendríamos un resultado óptimo.

[5] Por último seguimos bajando en nuestra plantilla, dejamos atrás el CSS y llegamos al HTML, buscamos esto:

<div id='main-wrapper'>

y justo encima, añadiremos el nuevo código para que nuestra sidebar aparezca en "añadir elementos" de nuestra plantilla.

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

[6] Guardamos cambios y vamos a la plantilla para añadir un elemento dentro de la nueva sidebar, ya que ahora la tendremos ahí, pero estará vacía y no se verá en el blog hasta que no pongamos algo dentro.




Entradas Relacionadas:

28 comentarios:


TOTmagazine

buenos dias rosa,tengo un problema,y es que no logro crear el menu de inico como tu lo tienes, osea que cuando alguien pinche encima de una noticia esta se le desplegue. felicidades por el blog

Anónimo

rever, si no me explicas algo más...es dificil, no tienes tu perfil habilitado y no he podido ver tu blog para hacerme una idea...

TOTmagazine

mira el blog es www.lasensacio.com y mi pregunta es que en el incio, osea c=uando sale el blog por primera vez, que las noticias salgan en un rectangul=o i apretando encima se abra la noticia. mejor?

Anónimo

rever, es que me despista lo de "Inicio del blog" porque eso a lo que te refieres supongo que son las entradas en expandible, pero no se ven en la página principal, sino en las de archivos o etiquetas...
Mira a ver, por favor, si te refieres a esto:

Entradas en expandible

Si vas a hacerlo, mira en los comentarios de ese mismo post por si te surge algún problema de los que se han resuelto allí.

Por cierto, ¿has recibido mi email para lo de la entrevista?
Por si no es así, te diré que estaré encantada y que podrías mandarme el cuestionario con las preguntas a lejaniaimposible@hotmail.com

Si esa era tu idea, claro, sino me cuentas...

JOSE MANUEL

hola rosa soy josemanuel
(josemanuel.dkadiz@gmail.com)
gracias por tu apollo .
te e puesto un enlace en mis blogs.
yo aun estoy 1 verde pero me apasiona este mundo.
gracias ati por tu blog.

podrias ayudarme a hacer 1 blog roll
para recomendados kesea como el tuyo.
gracias,,,
1 saludo desde cadiz.

Anónimo

jose manuel, te he enlazado porque me parece muy recomendable tu blog y es lo que suelo hacer, no intercambio enlaces, simplemente coloco los que me parecen destacables, estén empezando o no. Así que tu tranquilo, no tienes porque devolverme el enlace, en serio.

Mira, en cuanto a mi blogroll, supongo que te refieres a la parte estética ¿no? o sea, los iconos que van delante de cada link, las barras y eso...Todo eso va incluido en el CSS de mi plantilla, como habrás notado todos los links de mi sidebar "salen" de lamisma forma...
No obstante, como no eres el primero que lo pregunta, voy a preparar una entrada sobre el tema...

luisdelbar • • •

Hola Rosa!

Hace unos días encontré tu Blog y la verdad que estoy muy contento con la información que aquí he encontrado PERO TENGO UNA DUDA!!! precisamente estoy armando mi Blog con la Plantilla de SandDollar, la dirección de mi Blog es: http://luisdelbar.blogspot.com/

Hice todo o que aquí mencionas para añadir la SideBar, e incluso me descargué la versión hecha por ti, la subí pero en elementos de la página me aparecen de esta forma:
http://mx.geocities.com/luisdelbar/PLANTILLA.gif
me gustaría saber si hay manera de arreglarlo, ya que la verdad es medio molesto tenerlo de esa manera además de que debido a eso el ancho de la página no ajusta perfectamente como podrás ver al visitar mi Blog, quisiera que los elementos me quedaran igual que a ti como muestras en esta foto:
http://bp2.blogger.com/_8PJ-pgoBhWQ/Rm8s5VtwRJI/AAAAAAAABsE/Srpwo0zZwXQ/s1600-h/layout.jpg

Te agradecería mucho que me ayudaras porfavor

Gracias!

Luis Enrique

luisdelbar®

luisdelbar • • •

Hola!

Soy yo luisdelbar® nuevamente, sigo con el problema de los elementos de la página, pero ya logré solucionar lo del ancho, ya logré ajustarlo modificando esta línea de código

#content-wrapper {
width:97%;
padding: 0 1em 0 1em;
}

Poniéndola a 97% se compone ¿porqué? ¿es mi compu? bueno... jeje, no soy experto pero así se compuso

Sólo me queda la duda sobre los elementos de la página ¿si hay manera de arreglarlo? Espero tu respuesta

Gracias!!! ;-)

Anónimo

Writing From México, se compuso porque ahí has reducido un poco el ancho total, seguramente es la resolución de pantalla de tu PC lo que hacía que no fuese el ancho adecuado, no obstante, has hecho muy bien, más estrecho se verá mejor en todas las resoluciones, yo por ejemplo, veo tu blog genial.

En cuanto a la vista del Layout, en realidad mientras puedas editar los elementos, eso no influye para nada en la "vista real del blog", además supongo que estás usando IExplorer y de ahí que lo veas así, con Firefox se ve perfecto, y siento decirte que el que está interpretando mal las "instrucciones" es el Explorer...

luisdelbar • • •

Hola Rosa, amiga muchas gracias por tu ayuda, en efecto por lo que veo la forma del Layout no afecta para nada el diseño final del Blog, y es verdad mi navegador es el IE, pero definitivamente voy a descargarme el FireFox además de que supongo que se verá mejor el Layout y porque de por si ya me lo han recomendado mucho. Te felicito mucho por tu Blog, está de lujo, voy a poner un enlace en mi Blog al tuyo. Muchas Gracias!

Hasta Luego!

Writing From México (luisdelbar®)

Anónimo

Writing, te aseguro que yo en mi PC con Firefox veo el layout perfecto...
Además si te bajas el Fox puedes conservar también el Iexplorer en el PC sin problemas.

luisdelbar • • •

Hola Rosa!

Soy Writing (luisdelbar®) nuevamente, en efecto parece ser que el IE no entiende bien las instrucciones ya que usando FireFox veo el layout de maravilla, te agradezco muchos tus consejos, me está quedando de lujo, con la SideBar añadida se ve súper ¿quieres echarle un ojito? http://luisdelbar.blogspot.com
Hay hasta descargas de todo tipo, un documental anda por hay en fin... aún lo voy empezando.

De veras gracias por tus sabios consejos, puse un link a tu Blog porque la verdad está muy bueno y como agradecimiento por compartir tu sabiduría

Si buscas alguna serie, película, documental etc... dime veo quien lo tiene en la red, y lo cuelgo en mi Blog

Saludos!!!!

Anónimo

Writing From México, es cierto, se ve de lujo el blog. Me alegro mucho que estés tan contento con el cambio.
¡Saludos!

luisdelbar • • •

Hola Rosa!, muchas gracias por tus consejos, ya tengo varios meses con mi blog, he encontrado herramientas y cosas muy útiles aquí, ahora vengo a consultarte nuevamente, y te contacto a través de esta entrada porque creo que es apropiado, dado que se trata precisamente de la Sidebar!. Tengo un problemita con el ancho, pero al interior de esta, verás a lo que me refiero en esta imagen, lo marqué con flechas en rojo:

http://mx.geocities.com/luisdelbar/sidebar.gif

Me gustaría poder agrandar ese espacio, pero sólo ese espacio, el ancho de la Sidebar ya está bien, sólo quiero poder agrandar ese ancho pero al interior, como verás puse las flechas en esa imagen para que te des una idea de como aun teniendo el espacio se "comió" parte de la imagen; tengo otros blogs con la misma plantilla y se me dificulta mucho cuando necesito poner imágenes, ya que el espacio es muy reducido, Te agradecería mucho que pudieras darme una idea de como sulucionarlo, ya que la verdad no soy experto y aunque ya me metí al HTML e hice un blog experimental para irle moviendo no encontré nada que modifique eso.

Como nota adicional, usé la misma plantilla de doble sidebar para SandDollar que pusiste en esta entrada, es la misma. y la dirección de el blog de la imagen es:

http://luisdelbar.blogspot.com

Anónimo

Luisdelbar, creo que el problema es que hay un trocito de código en tu plantilla que está de más y aumenta esa distancia, aunque no estoy segura del todo porque a través del código fuente no es mucho lo que puedo comprobar...en fin, prueba retirando esto:
div#sidebar {
padding:30px 7% 10px 3%;
}

Ten cuidado porque hay otro div parecido, ha de ser ese concretamente, luego usa vista previa, que ya te digo que podría ser una mala apreciación mía...

luisdelbar • • •

Hola Rosa muchas gracias por tu atención!

Lamentablemente =( , eliminando ese código no logré solucionar el problema, ¿crees que si pueda modificarse eso o ya será cuestión de la plantilla o algo así?

Mira, he hecho una copia total de mi plantilla HTML, por si quieres darle un vistazo muy rápido, te lo agradecería mucho.

http://mx.geocities.com/luisdelbar/luisdelbar_html.txt

Si no te la abre, le das en "guardar destino como" (bueno tu ya sabes mejor que yo jeje, )

Espero no importunarte mucho con esto, ojalá tenga solución, ya que si me da un poco de problema sobre todo con mis demás blogs que estoy armando.

Muchas Gracias Rosa!!!

Saludos desde México =)

Anónimo

luisdelbar®, localiza esto:
@media all {
div#main {
float:right;
width:56%;
margin-right: 30px;
margin-left: 20px;
padding:20px 0 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
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 */
}

Y borra estas dos líneas:
margin-right: 30px;
margin-left: 20px;

o dejalas a 0px, por si más tarde necesitas añadir el margen de nuevo.

USA VISTA PREVIA
Aunque creo que con esto se verá como tu quieres.

Okaa-san

Hola rosa!
Mira, que hice todo lo que pusiste pero no hay manera de que se me cree la columna donde tiene que ir :-| mira como me queda:

http://img16.imageshack.us/img16/9517/quedamal.jpg

no se que hago mal ni que puedo hacer para arreglarlo, esto es un caos total xDD ya me pasó con otro que tengo y lo conseguí poner hace tiempo pero ya no me acuerdo cómo =.=uu

Ayuda pliiis >_<

La web en construcción

Anónimo

Okaa-san Como esta entrada ya tenía bastante tiempo, la he vuelto a revisar por si desde entonces el código de Blogger hubiese cambiado, y si, hay unos ligeros cambios.

He editado de nuevo la entrada, he probado yo misma los cambios, y todo ha salido OK.

Intenta hacerlo de nuevo, y fijate bien, ya que hay un código de sidebar bastante parecido a otro...

Okaa-san

Hola rosa, vuelvo a ser yop XP
No hay manera de que me salga. He vuelto a hacerlo todo nuevamente como 50 veces y no sale.

Me dice:Se ha encontrado más de una sección con el ID: newsidebar. Los ID de sección deben ser exclusivos.

Y yo me sigo preguntando que hago mal...
He decidido subirla para ver si le puedes dar un vistazo y decirme que es lo que le falla T.T

http://docs.google.com/Doc?id=d8v8sq8_74p32t2db

Espero no molestarte con esto y espero que se pueda solucionar U_U

Mthks!!

Anónimo

Okaa-san Que tienes dos veces el código html colocado para la newsidebar, elimina el que está debajo de: <div id='content-wrapper'>

Okaa-san

Weno...no conseguí hacerlo XDDD pero trasteando conseguí colocarlo "mas o menos" como queria. De todas formas gracias por molestarte en ayudarme Ç_Ç.

Ale Ysiar

muchas gracias. después de buscar tanto encontré de manera simple como trucar esta Sand Dollar.
La verdad excelente. No se puede dejar puntos sino lo haría.
Un saludo

Susana

Aquí estoy de nuevo Rosa, con mas consultas para el blog coop57galicia.blogspot.com
La plantilla que uso es Sand Dollar, y me gustaría añadirle un espacio al pie (creo que se llama footer??), y poder dividirlo en 3 como tienes tu para poder añadir gadgets.
Creo recordar un post para dividirlo, pero ¿que pasa si no tengo footer?
Gracias anticipadas de nuevo por tu ayuda.
Susana

Anónimo

Susana Primero deberás añadir el footer y luego ya sigues las instrucciones de esa entrada que dices.

Antes de ]]></b:skin> colocas esto:
/* Footer
------------- */
#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Luego casi al final de la plantilla localizas esto:

</div></div> <!-- end outer-wrapper -->

Sobre eso, pegas este código:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Si todo ha ido bien, ya deberías tener footer.

Susana

¡Conseguido! Ya tengo footer. Ahora a intentar dividirlo.
Mil gracias :D

Susana

¡¡Y las divisiones también conseguidas!!
Siguiendo tus instrucciones también conseguí cambiar el aspecto con el CSS.
Poco a poco voy entendiendo esto.
Otra vez Gracias

Anónimo

Susana¡Así se hace! :D Si después tienes por lo que sea, que cambiar de plantilla ya lo harás siendo una experta je,je.
No te creas que yo empecé de otra manera...;)

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