0

Nieve en el blog

Un lindo efecto de nieve en el blog que conseguiremos usando la etiqueta "marquee".
Podéis ver como queda de lindo en este blog.

El código se construye a partir de una simple línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>

Esta línea de código hace que se forme un copo de nieve. Para mostrar el copo usamos un asterisco (*).
Cada vez que repetimos esta línea se forma un nuevo copo de nieve, eso si, tendremos en cuenta que si la copiamos tal cual, el copo saldrá encima del anterior. Para evitar esto y conseguir el efecto de nevada, tendremos que copiar esa línea tantas veces como copos queramos conseguir, pero modificando algunos valores:

left La distancia desde la izquierda de la pantalla, hasta donde se verá el copo caer. Aquí tendremos en cuenta ir colocando en cada línea distintos valores, por ejemplo, sumando 20 al valor anterior.
top La distancia desde la cabecera del blog, hasta el lugar donde aparecerá el copo. Si ponemos cero en todas las líneas de código, todos los copos saldrán desde arriba del todo de la pantalla.
width La anchura que ocupará el copo de nieve, en el caso de que usemos el asterisco no necesitaremos modificarla, si usamos una imagen en lugar del asterisco, tendremos que poner en todas las líneas la anchura que tenga la imagen.
height La distancia desde donde aparece el copo hasta donde se oculta. Si ponemos distintos valores quedará más bonito, pero puede dejarse el mismo para todos los copos (en todas las líneas).
scrollamount La velocidad de bajada del copo, cuanto menor sea este valor, más lento se desplazará el copo.
color El color del copo. En el ejemplo lo he puesto de color blanco, pero para un blog con fondo blanco tendremos que colocar un color más oscuro, un azul claro estaría bien (#66CCFF).

Como podéis apreciar en mi blog de ejemplo, he usado ademas de los asteriscos, alguna imagen (estrellas y copos de nieve). He tenido la precaución de buscarlas del mismo tamaño, para que resulte más sencillo armar el código.
La línea para un copo con imagen o la estrella, o la imagen que sea, sería esta:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 675px; top: 0px; width: 16px; height: 90px;" scrollamount="1"><img src="URL_DE_LA_IMAGEN"/></marquee>

En cuanto al letrero de "FELIZ NAVIDAD" lo he conseguido añadiendo en el código esta línea:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 500px; top: 0px; height: 200px;" scrollamount="1"><span style="color: #fff;">FELIZ NAVIDAD</span></marquee>

Una vez explicadas las modificaciones que podemos hacer, os dejo el código para mostrar la nieve con los asteriscos, que pegaremos en un elemento HTML-Javascript.
Si no queréis usar imágenes, con copiar y pegar este código, tendréis la nieve en el blog.
Si queréis usar alguna de mis imágenes (las estrellas o el copo) estas son las urls:

Estrella azul: http://img206.imageshack.us/img206/4751/16starcoldxh2.png
Estrella dorada: http://img155.imageshack.us/img155/6118/16starhotzj7.png
Copo: http://img153.imageshack.us/img153/1231/stockweathersnowrk3.png

Código:

<marquee behavior="scroll" direction="down" style="position: absolute; left: 100px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 95px; top: 0px; width: 16px; height: 60px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 115px; top: 0px; width: 16px; height: 70px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 116px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 132px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 148px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 214px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 330px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 246px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 312px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 338px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 354px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 386px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 402px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 418px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 434px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 450px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 482px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 598px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 614px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 894px; top: 15px; width: 16px; height: 260px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 630px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 646px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 662px; top: 15px; width: 16px; height: 600px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 678px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 694px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 710px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 726px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 742px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 758px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 774px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 974px; top: 35px; width: 16px; height: 160px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 790px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 812px; top: 15px; width: 16px; height: 600px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 828px; top: 5px; width: 16px; height: 610px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 844px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 860px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 876px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 892px; top: 55px; width: 16px; height: 400px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 898px; top: 65px; width: 16px; height: 410px;" scrollamount="2"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 900px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 90px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 180px; top: 5px; width: 16px; height: 570px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 206px; top: 15px; width: 16px; height: 600px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 409px; top: 25px; width: 16px; height: 500px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 520px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 656px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 865px; top: 55px; width: 16px; height: 400px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 370px; top: 65px; width: 16px; height: 410px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 290px; top: 35px; width: 16px; height: 460px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 425px; top: 0px; width: 16px; height: 700px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 580px; top: 5px; width: 16px; height: 570px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 306px; top: 15px; width: 16px; height: 300px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 599px; top: 5px; width: 16px; height: 610px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 609px; top: 25px; width: 16px; height: 180px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1070px; top: 25px; width: 16px; height: 450px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 950px; top: 15px; width: 16px; height: 430px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 260px; top: 55px; width: 16px; height: 200px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 770px; top: 65px; width: 16px; height: 210px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 35px; width: 16px; height: 360px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 925px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 225px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 380px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 806px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 399px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 909px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 750px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 660px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 690px; top: 5px; width: 16px; height: 60px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 965px; top: 0px; width: 16px; height: 50px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1000px; top: 0px; width: 16px; height: 50px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 1010px; top: 0px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 390px; top: 5px; width: 16px; height: 70px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 466px; top: 15px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 359px; top: 5px; width: 16px; height: 110px;" scrollamount="3"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 489px; top: 25px; width: 16px; height: 280px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 530px; top: 5px; width: 16px; height: 150px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 780px; top: 15px; width: 16px; height: 130px;" scrollamount="6"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 910px; top: 5px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 570px; top: 5px; width: 16px; height: 110px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 620px; top: 5px; width: 16px; height: 160px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 300px; top: 0px; width: 16px; height: 100px;" scrollamount="1"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 890px; top: 0px; width: 16px; height: 200px;" scrollamount="5"><span style="color: #fff;">*</span></marquee>
<marquee behavior="scroll" direction="down" style="position: absolute; left: 840px; top: 10px; width: 16px; height: 100px;" scrollamount="7"><span style="color: #fff;">*</span></marquee>

0

Etiquetas con feed

Podemos colocar en nuestro blog un nuevo widget en la sidebar donde mostrar las categorías o etiquetas con la posibilidad de ofrecer a nuestras visitas el suscribirse a la etiqueta que prefieran. Para ello mostraremos un pequeño icono de rss delante de cada etiqueta que al pinchar sobre el, posibilite la suscripción a cada etiqueta en particular.

En el html de nuestra plantilla buscamos la zona de los elementos o widget, o lo que es más fácil aún, buscaremos un <:b/widget> cualquiera y justo a continuación pegamos estas líneas de código para el nuevo elemento:

<b:widget id='Label2' locked='false' title='Feeds de Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img402.imageshack.us/img402/305/rect18st2bx0.png'/></a>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Una vez guardados los cambios, podremos cambiar el título del nuevo elemento y arrastrarlo a donde mejor nos parezca en Editar Plantilla.

En el código he puesto id='Label2' por si ya existe en la plantilla un id='Label1', pudiera darse el caso de que estemos utilizando más de dos widget de etiquetas, para evitar problemas podríamos poner un número alto en el id, por ejemplo, id='Label50'.
También es posible cambiar la imagen del icono, simplemente sustituimos la url del ejemplo (en negrita) por la de nuestro icono. En este caso el icono es de color gris, si os gusta más "el de siempre" de color naranja, podéis usar esta url:
http://img442.imageshack.us/img442/3060/feedpj9.png

Seguro que a más de uno le gustará la idea de mostrar el icono de rss a continuación de las etiquetas en vez de antes de ellas, para ello hemos de colocar en el código anterior la url de la imagen a continuación de (<data:label.count/>).
(<data:label.count/>)<img src='http://img402.imageshack.us/img402/305/rect18st2bx0.png'/>


Basado en una idea de: PurpleMoggy´s Blog

0

Imagen en el perfil (opción Blogger)

Visitando el blog de Romina acabo de leer una entrada donde nos informa de que Blogger a añadido la opción de subir directamente desde el PC una imagen a nuestro perfil.
Mucho más sencillo que andar subiendo la imagen a un hosting para conseguir su url ¿no os parece?



¡Gracias Romina!

0

Contando los días que faltan para Navidad

En SpringWidgets podemos obtener un árbol de Navidad personalizado (bolas, adornos, colores, nieve...)que muestra además los días que faltan para navidad.

0

Fondos de Navidad

Ya estamos en Diciembre, dentro de nada llega la Navidad y algun@s seguro que están pensando en adornar sus blogs con este motivo.
Hoy mismo Manu me pedía en un comentario alguna cosilla para adornar su blog de cara a estas fiestas, el me pedía la dirección de alguna web con fondos navideños. En realidad, conozco algunas, pero he preferido poner aquí los fondos navideños que he encontrado y que más me han llamado la atención.

Para colocarlos, buscamos en la parte de edición, HTML de nuestra plantilla este código:
body {
background:$bgcolor;


Algunos tendréis seguramente el color de fondo añadido directamente en la plantilla, así que se verá más o menos así:
body {
background:#2A4359;


Añadiremos el código para la imagen de fondo, justo antes del cierre (;):

body {
background:$bgcolor url(Dirección-url de tu imagen ) repeat;


Ejemplo

Fondos navideños animados
Para conseguir su dirección (url) pincha con el ratón derecho sobre la imagen escogida y en propiedades copia su url (están subidos a Photobucket )



Fondos navideños estáticos

0

Visitas online con imagen

En la web de Opromo conseguiremos un código de forma gratuita que muestra nuestras visitas en tiempo real en forma de texto precedido de una pequeña imagen (icono).

[1] Ingresamos a la web y en el menú de la izquierda escogemos "Visitas Online"

[2] Introducimos la url (dirección) de nuestro blog.

[3] Escogemos el tipo de fuente, tamaño y color.

[4] Seleccionamos la imagen que nos gusta (hay un par de ellas animadas).

[5] Escogemos la forma de mostrar el texto (lo que se leerá).

[6] El resultado se verá allí mismo pinchando en "Visualizar Abaixo" y debajo el código de HTML para copiar y pegar en nuestro blog.

Ejemplo

0

Ensanchar la plantilla Sound of Moto

[1] Iremos a la parte de editar HTML de nuestra plantilla.
Buscamos esta parte del CSS y cambiamos el valor de width, por ejemplo a 850px. Este cambio hace que se ensanche el "cuerpo" del blog.

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 850px;
text-align: left;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
font: $bodyFont;
}

[2] En este paso ensancharemos la parte de nuestras entradas, cambiando de nuevo el width, por ejemplo, a 500px.
#main {
width: 500px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[3] Vamos a ensanchar ahora nuestra sidebar, aumentando el valor de width a, por ejemplo, 290px.
#sidebar {
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);
width: 290px;
float: right;
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 */
}

[4] En el código anterior de la sidebar, he añadido una imagen como la original de la plantilla (el fondo de rayas semitransparente) para que el texto no se "desborde" fuera del fondo. Es esta línea:
background: url(http://img518.imageshack.us/img518/6425/innerwrapxs1.gif);

Ejemplo de plantilla