lunes, 29 de octubre de 2007

Escucha tus posts con SONO WEBS

Instalación en Blogger




Instalación:

1. Entrar en el panel Blogger de vuestro Blog.







2. Pulsa en "Configuración"






3. Pulsa en la pestaña "Plantilla"




4. Pulsa en la subpestaña "Edición de HTML"



5
Activa la casilla "Expandir plantillas de artilugios"



6. Despues de la cadena:


<b:include data='post' name='post'/>


7. Introducir el siguiente código:



_____________________________________________________________________________________________

<div id='speech'>

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' height='20' width='232'>


<param name='flash_component' value='ImageViewer.swc'/>

<param name='movie' value='http://www.sonowebs.com/tts.swf'/>

<param name='quality' value='high'/>

<param expr:value='"tit=" + data:post.title + "&amp;txt=" + data:post.body + "&amp;lang=es&amp;url=" + data:post.url + "&amp;cat=ninguna"' name='FlashVars'/>

<embed expr:flashvars='"tit=" + data:post.title + "&amp;txt=" + data:post.body + "&amp;lang=es&amp;url=" + data:post.url + "&amp;cat=ninguna"' height='20' quality='high' src='http://www.sonowebs.com/tts.swf' width='232'/>


</object><br/></div>

_____________________________________________________________________________________________


8.Por ultimo pulsa en el botón de "Guardar Plantilla":





A partir de ahora tu blog ademas de poderse leer podra ser escuchado,










gRACIAS A SONO WEBS, VIA LOOGIC

CSS MENU MAKER (Generador de menús) para blogger



He recibido varias peticiones sobre menús horizontales, ya hablamos sobre el clásico menú horizontal y sobre el menú despegable
Esta vez es algo diferente, un generador de menús, la forma de crearlo es muy sencilla para ello accederemos a CSS MENU MAKER encontraremos a la izquierda menús horizontales y a la derecha verticales.
Escogemos el que mejor se adapte nuestro blog.







Ver efecto en Menú Crystal

Una vez decididos...

Clicamos en Customize


Agregamos el número de temas que harán de enlace para en el menú y clicamos en Submit


Llenamos los campos requeridos para el título y agregamos a la derecha la url del lugar que vamos a enlazar. Clicamos de nuevo en Submit


A continuación nos proporciona dos códigos copiaremos el segundo que dice:
CSS Code y nos situaremos en plantilla Edición html
Justo antes de ]]></b:skin> lo pegaremos.

Luego copiaremos donde dice HTML Code nos situaremos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:

<ul id='menu'>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
<li ><a href='url del enlace'>Título del enlace </a></li>
</ul>

Guardamos los cambios y arrastramos esa etiqueta hasta el lugar deseado. Volveremos de nuevo al lugar donde copiamos los códigos para la plantilla y el elemento de página y descargaremos donde dice "Click here to download Image files" se trata de un archivo zip con las imágenes del menú.
Abriremos la carpeta "images" y extraeremos las imágenes en formato gif. que más tarde alojaremos en un servidor para conseguir la url de las imágenes.
Esa url la debemos pegar en el código que agregamos a la CSS de nuestra plantilla.
Viene detallado donde agregarla, deberéis buscar donde dice algo así como:
background:transparent url("images/nombre-de-la-imagen.gif") .......


Gracias JmpaSrgc por el detalle, hacía tiempo que un generador no me hacia tanta ilusión.



Sacado de Gema Blogs

Menú horizontal despegable PARA BLOGGER


Antes de nada quiero aclarar que este menú no sustituye las categorías de Blogger, su finalidad es crear enlaces de forma dinámica a modo de despegable.

1º- Para añadirlo a nuestro blog debemos situarnos en Plantilla/Edicción de HTML y justo después de <head> añadir lo siguiente:


<link href='http://webjcp.googlepages.com/css.css' rel='stylesheet'/>
<!--[if IE]>
<link rel="stylesheet" href="http://webjcp.googlepages.com/hack.css" />
<script type="text/javascript">
window.mlrunShim = true;
</script>
<![endif]-->
<script src='http://webjcp.googlepages.com/js.js' type='text/javascript'>
</script>


2º- Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir lo siguiente:


<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>

</ul>
</div>
</center>


La forma de modificarlo es muy sencilla:
Título o tema será el tema para la categoría de enlaces.
url: debemos pegar la url del lugar que deseamos enlazar.
En Link1, Link2, Link3, y Link4 irá el texto asignado al correspondiente enlace.

Este Menú es una gentileza de César que amablemente pone a disposición de todos.
Yo me he permitido variar un poco las explicaciones para adecuar los colores a nuestro gusto.
El primer código que añadimos a la plantilla contiene tres archivos, un archivo js. y dos CSS.
Uno de los archivos CSS es el que podemos configurar para cambiar el aspecto referente a color.

Lo hice de la siguiente forma:
1º- En el primer paso añadí justo antes de </head> el archivo js. que previamente subí a mi servidor.

<script src='http://forevergema.googlepages.com/menu.js.js' type='text/javascript'>

2º-Después el archivo que contiene la configuración para modificar el aspecto del menú lo abrí con el bloc de notas y copié su contenido para seguidamente pegarlo justo antes de ]]></b:skin>
El contenido es el siguiente:
http://forevergema.googlepages.com/

Es ahí donde podéis modificar los colores del menú donde dice /*colors for menu*/

3º-Guardamos los cambios y nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el mismo código que el primer paso:


<center><div class="mlmenu horizontal bluewhite blindv plus">
<ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>

</ul>
</li><li><a href="#"> titulo o tema </a>
<ul>
<li><a href="url">Link1</a></li>
<li><a href="url">Link2</a></li>
<li><a href="url">Link3</a></li>
<li><a href="url">Link4</a></li>
</ul></li>

</ul>
</div>
</center>


Añadimos los enlaces y listo.

Como podéis comprobar la única diferencia es que añadimos en nuestra plantilla un archivo que siendo alojado en un servidor ocuparía mucho menos espacio pero que podremos modificar cada vez que lo deseemos sin necesidad de abrir el archivo y volverlo a alojar.
Si una vez modificado no necesitamos modificarlo más también podemos subir el archivo a nuestro servidor y en el código de César que añadimos después de <head> sustituimos:
http://webjcp.googlepages.com/css.css por la url de vuestro archivo css.






mENU hORIZONTAL dESPLEGABLE

Menú horizontal blogger beta

Este menú horizontal es muy vistoso, lo he tomado prestado del blog de nuestro buen amigo César.
Para añadirlo a nuestro blog nos situaremos en Plantilla/Edición HTML.
Después de <head> /añadiremos lo siguiente:


<style type='text/css'>
#chromemenu{
width: 100%;
font-weight: bold;
font-size: 90%;
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 1px;
clear: both;
visibility: hidden;
}

#chromemenu ul{
border: 5px double #660000;
width: 99%;
background-color: #000000; center
center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #cccc66 ;
padding: 5px;
margin: 10;
text-decoration: none;
border-right: 3px double #660000;
}

#chromemenu ul li a:hover{
background-color: #660000; center
center repeat-x;
}

</style>


(en esta parte de código es donde podemos cambiar el color del menú)


Una vez guardados los cambios nos dirigimos a; Añadir un elemento de página/HTML Javascript donde añadiremos lo siguiente:


<div id="chromemenu">
<ul>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
</ul>
</div>

(En esta parte es donde podemos añadir los enlaces y el texto que será visible)




Extraido de Gemablog

jueves, 25 de octubre de 2007

Posts relacionados en Blogger, otra forma mas facil

This is a Related Posts step-by-step Manual Instructions. Before applying this blogger hacks (may i call it a blogger hack? : ) I recommend you to create a dummy / test blog, so everything will still be under control if you are having trouble with it.



Note: If you have problem on installing this trick, please scroll down and read the update below. you can also the demo here. so if you have problem copying this code, you may download that template and copy the code inside it. thanks


update: to make you easier, you can download the related posts / articles on .txt file here.


Actually Related Article by Label has already created by Hoctro, and i must admit that he had done a really great job. that’s why I didn’t create this hack widget (oh I will mention it as Widget from now) from scratch. I use his widget and modifying it as a better and fit to my need.




First, you may want to read the original article on hoctro blogs here. There are couple thing I don’t like from the original widget. there are;


1. On Previous version, It uses 2 blog’s widget. Now I cut the code, so we can put it anywhere on the same blog widget. Why I don’t like to use 2 different widgets? Because your code would be too long, and you can not have your Related Post List right under your post area and Above the comment section. It is because it uses 2 different widgets.


Sure you can use 2 widgets and place the Related Posts Lists under post area and above the comment section, but that would make your code so not tidy. you with me?



2. On previous version, Users have to modify the code them self so they can use it. They have to fill a Parameter with their Blog Url. Now they need no more! I have modified the code so users will be able to use it just as simply as copy and paste.


3. On Previous Version, and this is important. The Current Article / Post will also be listed inside the Related Post/ Article Lists. that is not right isn’t? Related Posts / Articles means Other Articles / Posts which have relation with the current Article. Not the current Article it self.


I believe Hoctro knows all that points I mentioned above. And I’m sure it is easy for him to update and upgrade the code. It just i don’t know how to contact him, because he hide his comment section on his site. So..



Hope he will permit me to do this, I will modify the code by my self for your use. So here it is.


*Again, if you want to have the old version, you can go to that hoctro’s link above.


and here it is,


Step by step to install the

RELATED POST WIDGET FOR BLOGGER / BLOGSPOT


1. GO to your Template Editor, Under your blogger / blogspot Dashboard.


Click on the DOwnload Full Template Link. save your downloaded template as a back up, just to prevent in case you failed on applying this hack.


Then, tick the Expand Widget Templates.


2. Find this code below


<data:post.body/>

3. Copy this code below


update: to make you easier, you can download the related posts / articles on .txt file here.



<div class='clear-block;'/><b:if cond='data:blog.pageType == "item"'>

<div class="similiar">

<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** –>

<!–

Modified by JackBook.Com to make it easier to use.

1. Now, users don’t need to change anything to use this widget. just copy and paste, and done!

2. The current article will also be listed, now it’s no more.

–>

<div class=’widget-content’>

<h3>Related Posts by Categories</h3>

<div id=’data2007′/><br/><br/>

<div id=’hoctro’>

Widget by <u><a href=’http://hoctro.blogspot.com’>Hoctro</a></u> | <u><a href=’http://www.jackbook.com/’ title=’Related Posts on Blogger Modified by JackBook.Com. Read More?’>Jack Book</a>

</u></div>

<script type=”text/javascript”>

var homeUrl3 = “<data:blog.homepageUrl/>”;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

<b:if cond=’data:blog.pageType == “item”‘>

maxNumberOfPostsPerLabel = 100;

</b:if>

<b:if cond=’data:blog.pageType == “item”‘>

maxNumberOfLabels = 3;

</b:if>

function listEntries10(json) {

var ul = document.createElement(’ul’);

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == ‘alternate’) {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement(’li’);

var a = document.createElement(’a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l < json.feed.link.length; l++) {

if (json.feed.link[l].rel == ‘alternate’) {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; k++) label = label.replace(”%20″, ” “);

var txt = document.createTextNode(label);

var h = document.createElement(’b');

h.appendChild(txt);

var div1 = document.createElement(’div’);

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById(’data2007′).appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement(’script’);

script.setAttribute(’src’, query + ‘feeds/posts/default/-/’

+ label +

‘?alt=json-in-script&callback=listEntries10′);

script.setAttribute(’type’, ‘text/javascript’);

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values=’data:posts‘ var=’post’>

<b:loop values=’data:post.labels’ var=’label’>

textLabel = “<data:label.name/>”;

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>

3. Paste right after the code #2 (<data:post.body/>)


Please be flexible. You can do experiment by put the <data:post.body/> inside a <p></p> tag like this.


<p><data:post.body/></p> Then_the_related_posts_script_here


4. Save your template. refresh your blog, and Done.



That’s all. Enjoy!


Note; Related Posts is a list of all posts related to some article based on the labels. And because this uses Javascript, if you want to create a list of posts related by content, it might be pretty hard to do currently.



Updates | Important Note :


For some people who always failed and/or getting error on installing this related posts trick. Kirk Warren from weeklycrisis.com has founded the solution for you. here is his comment


The reason you are getting the errors is because whatever he did with the formatting in this script boxes has ” and ‘ wrong. If you look at them in the Blogger template when you paste the code, they come off as ’ (notice it is slanted to the left, not straight down like a normal single quote [ ‘ vs ’ ]. Same thing happens with the ” and “. Notice how one is straight down and the other is to the right [” vs “]. This is what is causing all the hassles for people.


Most likely, when he recovered the post from Google cache, it had reformated the quotation marks on him and this is why you get that error. Manually replace all the ‘ and ” in that section of code and you should be fine.


update: to make you easier, you can download the related posts / articles on .txt file here.


Thanks





tambien puedes descargar desde aca

Posts relacionados en Blogger, interesante y funciona

Gracias a Blogmundi


Una pregunta frecuente es como conseguir mostrar una lista con artículos relacionados al post que estamos leyendo, de la misma manera que hacen varios plugins para Wordpress, en Blogger.

Buscando un poco he encontrado una solución, la cual voy a explicar y que funciona bien. Este sistema se basa en las etiquetas del blog para mostrar artículos cuyas etiquetas coinciden, por lo que es necesario que las utilices en tus posts, sino, no se mostrará nada. Por otro lado aunque sólo hay que copiar y pegar conviene ser cuidadoso para que todo salga perfecto.


En primer lugar, como siempre, realiza una copia de seguridad de tu plantilla.


¿Ya?, muy bien. Pues empezamos añadiendo el código que hace el 80% de la magia. Para ello tienes que ir en el panel de control de tu blog a Plantilla -> Edición HTML.


Entre las etiquetas head, o más sencillo, justo antes de la etiqueta </head>, copias y pegas lo siguiente:




<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>


Puedes guardar la plantilla para no perder ese cambio y ahora marcas “Expandir plantillas de artilugios”. Busca el siguiente trozo de código:




<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>


y sustitúyelo por el siguiente:




<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>


Bueno, ya queda menos. Guarda la plantilla y vete a Plantilla -> Elementos de página


Tienes que añadir un nuevo widget que será el bloque que muestre los artículos. Para ello pinchas en “Añadir un elemento de página” y seleccionas HTML/Javascript.


Como título puedes poner relacionados y en el contenido añades lo siguiente:



<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>


Relacionados Blogger


El nuevo artilugio lo puedes colocar donde quieras, yo a modo de ejemplo lo he situado en la barra lateral. Cuando accedes a una entrada invidual se muestran los artículos relacionados y cuando estás en la página inicial el bloque desaparece.


Queda un pequeño punto todavía. Debes ir de nuevo a Plantilla -> Edición HTML y buscar el siguiente bloque, que es el nuevo artilugio o widget que has añadido:



<b:widget id='HTML13' locked='false' title='Relacionados' type='HTML'><b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> <-Añade esta línea
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != ""’>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<data:content/>
</div> <b:include name=’quickedit’/>
</b:if> <-y ésta
</b:includable></b:widget>


Simplemente debes añadir las líneas que están señaladas.


Ya está, hay ciertos valores que puedes modificar para mostrar más o menos posts relacionados. En el primer bloque de código el i<20 y en el tercer bloque de código el max-results=10.



Pueden verlo en funcinamiento en estos 2 blogs: angelcaido666 y hugo miranda

OTRO METODO ACA QUE FUNCIONA Y LO PUEDEN VER EN INGENIERIA LEGAL

viernes, 12 de octubre de 2007

Como subir dos imagenes al mismo nivel


Los blogs estan cambiando al mundo.........la realidad

miércoles, 3 de octubre de 2007

Añadir una barra lateral (sidebar) en Blogger

Todas las plantillas disponibles a través del panel de control de Blogger disponen de solo una columna. Por eso, vamos a ver como podemos añadir una segunda columna, de manera que quede como puedes ver en este blog de pruebas.

El proceso es bastante sencillo pero requiere tocar varios elementos del código, así que para prevenir cualquier problema, lo mejor es que primero hagas una copia de seguridad de la plantilla. Lo puedes hacer en “Plantilla” -> “Edición HTML”.
Una vez guardado empezaremos a editar la plantilla.

Vamos a suponer que estamos trabajando con una plantilla cuya barra lateral esté a la derecha. Entonces en “Edición HTML”, de nuevo, nos vamos a la sección “Editar plantilla”.

Lo primero que tenemos que hacer es cambiar el nombre a la antigua barra lateral, para poder identificarla correctamente:
Buscamos esto:




y lo cambiamos por esto:




Esa etiqueta tiene un elemento CSS asociado, así que también tenemos que cambiarlo:

En la parte superior del recuadro “Editar Plantilla” buscamos lo siguiente:

#sidebar-wrapper {
width: 220px;
float: right;
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 lo cambiamos por esto:

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

Puedes realizar una vista previa de la plantilla y comprobar que se ve bien.

El siguiente paso es añadir la otra barra lateral, la izquierda en este caso.

Primero vamos a añadirla en la plantilla y después crearemos el CSS con sus propiedades.

Debes localizar el siguiente trozo de código.








Una vez que lo tengas localizado debes añadir entre
y
" lo="" siguiente="">










Pero claro, no hay ninguna propiedad definida para esa etiqueta así que tendremos que crearla:

En el mismo sitio donde antes modificamos el nombre de la barra lateral derecha puedes añadir lo siguiente debajo de #right-sidebar-wrapper:

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Bien si ahora realizas una vista previa verás que una de las columnas se desplaza hacia abajo. Eso es debido a que el div que las contiene no es lo suficientemente ancho. Por eso tenemos que ampliarlo.

Busca lo siguiente:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Debes modificar el 660 por 860, de manera que quede asi:

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Por otro lado también puedes modificar la cabecera para que su ancho coincida con el nuevo ancho del contenido. No obstante tendrás que tener en cuenta, si tienes una imagen, que el nuevo ancho modificará su posición o, simplemente, no cubrirá todo.

Deberías cambiar esto:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Por esto:

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Una vez modificado todo, guarda la plantilla y ve a “Elementos de página”, verás que ahora tienes una nueva columna a la izquierda. Sólo te queda añadir contenido como lo haces habitualmente

blogmundi