Diccionario de español (extensión Firefox)

Para mi esta es una de las extensiones de Firefox imprescindible.

Una vez instalado (su instalación es automática) tendremos un corrector ortográfico incluido en nuestro navegador, así cada vez que el navegador detecte un editor de textos (creación de entradas, comentarios, etc...) nos irá subrayando en color rojo y de forma automática, cualquier falta de ortografía que detecte, pinchando sobre la palabra a corregir con el botón derecho, podremos añadir con un click la palabra correctamente escrita.

Si estamos usando alguna palabra a menudo en nuestro blog que el corrector marca como errónea, pero estamos seguros que se escribe así (por ejemplo un nombre propio) tenemos la posibilidad de añadirla al diccionario (con el botón derecho) de esta forma no la volverá a marcar como incorrecta.

Por supuesto en la misma página tenemos diccionarios en varios idiomas para instalar.

Descarga e instalación del Diccionario.

Modificar las columnas del footer

Anteriormente expliqué como añadir tres columnas en el footer (pie del blog).
Poco después de publicar esta entrada me han empezado a llegar consultas sobre la forma de adaptar esas nuevas columnas, para conseguir una apariencia lo más parecida posible a la sidebar del blog. Esto se consigue usando el CSS.

[1] Si nos fijamos en el código añadido para mostrar las columnas, veremos que cada una de ellas tiene una id propia: id='col1', id='col2',id='col3'
Usaremos esa id para modificar su aspecto, para ello vamos a la parte de editar-html de nuestra plantilla y sin expandir artilugios localizaremos la etiqueta ]]></b:skin>.
Justo encima de ]]></b:skin> pegaremos este código:

#col1{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

[2] En: #col1, #col2 y #col3, controlaremos el aspecto de cada columna y en: #col1 h2, #col2 h2 y #col3 h2, lo haremos con el titulo de los elementos que pongamos en cada una de ellas.
Lo más cómodo será mirar en el código de nuestra sidebar e ir copiando lo que necesitemos: border, text-aling, font-size...para asemejar lo más posible las nuevas columnas a la sidebar del blog.

Nota
Tendréis en cuenta que el código que he puesto como ejemplo, es el de mi sidebar y su título, vosotros tendréis que probarlo con los vuestros.
Si lo copiáis y pegáis tal cual está, el resultado sería este:

Mostrar un widget en una página especifica

Los widgets o elementos en la versión nueva de Blogger pueden agregarse fácilmente desde el panel edición de nuestro blog, en "añadir nuevo elemento". Una vez añadido cualquier elemento a la sidebar, este se verá tanto cuando accedemos a la página principal del blog, como cuando lo hacemos a las páginas de archivos o etiquetas.
Podemos decidir en que paginas queremos tal o cual elemento mediante una modificación en su código y hacer que el widget se vea solo en la página escogida por nosotros.

Widget o elemento solo visible en las páginas de etiquetas

[1] Vamos a la Plantilla - HTML - expandir artilugios y localizamos el widget escogido (lo más fácil es hacerlo por su título , si lo tiene). En el ejemplo, mi widget se titula "Links amigos":

<b:widget id="HTML2" locked="false" title="Links amigos" type="HTML">

[2] Añadimos lo que va en negrita a su código, fíjate que la primera línea en negrita va justo después de <b:includable id='main'> y la segunda has de ir buscando hacia abajo hasta que veas el primer </b:includable> y lo colocas justo antes.

<b:widget id="HTML2" locked="false" title="Links amigos" type="HTML">
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
......

Resto del código
........

</b:if>
</b:includable>
</b:widget>

Widget o elemento solo visible en la página principal

[1] Seguiremos los mismos pasos que para los cambios anteriores, con la diferencia de que la primera línea en negrita que hay que añadir, la sustituimos por esta:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Widget o elemento solo visible en una página concreta

[1] Supongamos que tenemos una entrada en la que explicamos como colocar un reloj en la sidebar, por ejemplo, y que queremos que el reloj de ejemplo que hemos puesto en un widget, solo se vea al acceder a esa entrada en concreto.

[2] Una vez instalado el elemento, pinchamos en el título de esa entrada en concreto, copiamos la url que sale en nuestro navegador, y seguimos los pasos que hemos visto para los casos anteriores, colocando en lugar de la primera línea, esta otra:

<b:if cond='data:blog.url == "URL_PAGINA_DE_ENTRADA"'>

Widget o elemento solo visible en la página de una etiqueta concreta

[1] El metodo sería el mismo que para los anteriores, pero colocando en esa línea de código, la url de la etiqueta, es decir, la que vemos en nuestro navegador al pinchar sobre dicha etiqueta:

<b:if cond='data:blog.url == "URL_PAGINA_DE_ETIQUETA"'>

Añadir tres columnas en la sección del footer (pie del blog)

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

[1] Necesitaremos retirar cualquier elemento que tengamos colocado en el footer del blog. Podemos moverlo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el footer, volver a colocarlo en esa sección.

[2] Iremos ahora a la parte del HTML de nuestra plantilla y buscamos, casi al final de su código, estas líneas Sin expandir artilugios:

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

[3] Dependiendo de la plantilla que estemos usando, podría cambiar el código a buscar ("footer" o "footer-wrapper"), en el caso de la Rounders, por ejemplo, hay dos divs en la sección del footer, en cualquier caso, el código que hemos de cambiar es la línea que está resaltada en negrita, sustituyéndola por este código:

<div id='footer-columna-contenedor'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#6633FF' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

[4] Añadiremos ahora unas líneas de CSS para controlar la separación de las columnas. Pegamos estas líneas antes de ]]></b:skin>

#footer-columna-contenedor {
clear:both;
}

.footer-columna {
padding: 10px;
}

Vista "editar"




Vista "blog"


[5] Ya podemos guardar los cambios y colocar los elementos que habíamos retirado a la sidebar donde nos parezca mejor.

[6] En el código está incluida una línea de separación entre las tres columnas y el footer antiguo, en el ejemplo podéis ver que se muestra de color azul.
La parte del código que hace que se vea esta línea, es esta:

<hr align='center' color='#5d5d54' width='90%'/>

Podemos cambiar su color en color='#5d5d54'
También podríamos prescindir de ella borrando la línea por completo.

Nota:
Consulta como modificar el diseño de las columnas con CSS

Autor del post debajo del título

Un lector del Escaparate me pide que explique los pasos para que el nombre del autor de los post, se muestre debajo del título de las entradas.
No es demasiado complicado, hemos de localizar esta parte del código de nuestra plantilla con los artilugios expandidos:

<p class='post-footer-line post-footer-line-1'>

Normalmente justo debajo de esa línea, aunque puede ser que si hemos modificado algo en esa zona el código no este justo ahí, pero si ha de estar cerca, así que servirá para situarnos, veremos esto:

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>

Lo copiamos,lo eliminamos y pegamos su copia debajo de esta línea que encontraremos algo más arriba de donde hemos copiado el código anterior:

<div class='post-body'>

En algunas plantillas esta línea es ligeramente diferente:

<div class='post-body entry-content'>

Actualización

FranKeinas me pide en los comentarios si hay alguna manera de cambiar la apariencia del autor una vez posicionado debajo del título del post. En concreto se refiere a la alineación (a la derecha), cambio de color y tipo de letra, podemos hacerlo usando para ello el css.

[1] En el código de nuestra plantilla localizamos la etiqueta ]]></b:skin> y justo encima añadiremos las líneas de css necesarias:

.post-author{
font-size: 100%;
color: #2462a5;
float:right;
text-transform:uppercase;
}

font-size: 100%; Tamaño del texto.
color: #2462a5; Color del texto.
float:right; Posición a la derecha.
text-transform:uppercase; Texto en mayúsculas. Podemos cambiarlo por "normal".

Manifiesto a favor de la publicidad

Una web para obtener un icono que al pinchar sobre el, nos lleva a la página donde se incluye el manifiesto pro-publicidad.


El icono puede obtenerse en tres colores distintos, con un sencillo "copia y pega" del código que proporciona la web.
La web y por tanto el manifiesto están en inglés, así que lo traduzco (más o menos) por si le interesa a alguien:

Al utilizar este icono en mi sitio web estoy afirmando ...

1. Que no me opongo al uso de publicidad en los blogs.
2. Creo que ganar dinero con mi blog me motiva a escribir mejores entradas todos los días.
3. Que no tengo ningún problema con las personas que deciden no mostrar publicidad en sus blogs.
4. Que yo soy responsable de la publicidad en mi blog.

Pro-Ad Blog

Nube de etiquetas

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

Además de alguna página online desde donde podemos añadir una nube de etiquetas a nuestro blog, podemos configurar una nosotros mismos, para colocar en la sidebar o debajo de la cabecera como menú, que es como yo uso la nube en El Escaparate.

Los pasos a seguir son tres: un código para añadir al CSS, otro para configurarlas y, el último código para añadir al widget donde aparecerá nuestra nube.

Antes de empezar tenemos que añadir en la sección elementos de la plantilla, un nuevo elemento "etiquetas" y, por supuesto, hemos de tener etiquetados nuestros post. Si estamos usando ya un elemento de etiquetas, por ejemplo, para nuestro menú de pestañas, no importa, puede añadirse otro nuevo para usar con la nube.

[1] Vamos a nuestra plantilla - html y no expandimos la plantilla de artilugios. Localizamos esto: ]]></b:skin> y justo antes, o lo que es lo mismo, al final del CSS, colocamos este código que definirá el estilo de nuestra nube:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

[2] Volvemos al mismo sitio de antes: ]]></b:skin> solo que ahora hemos de colocar el código después de esto, es decir, antes de </head>:

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Cambiamos YOURBLOG por el nombre de nuestro blog.

[3] Buscamos en la plantilla esta línea de código, tendremos en cuenta que si hemos añadido un nuevo elemento de etiquetas, el elemento se verá como label2 :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Hemos de reemplazar esa línea por todo este código:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<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>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Nota:
Para que el código funcione correctamente tendremos que cerciorarnos de que al menos, una de las etiquetas, tenga mas de una entrada y no debe aparecer en las etiquetas ninguna comilla ".

Gracias a: Phydeaux3