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.
Diccionario de español (extensión Firefox)
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)
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
[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;
}
[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
Recuerdaque aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
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>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 = "<data:label.name/>";
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] < cloudMin){
continue;
}
for (var i=0;3 > 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
Menus y cabeceras en flash a la carta
Mi amiga DyDy me envía una interesante propuesta para compartir con todos vosotros.
¿Quieres una cabecera o un menú hecho en flash para tu blog?
DyDy te lo hace "a la carta" con las medidas, estilos, los links ya incluidos...o sea, prácticamente te lo proporciona todo hecho.
Una vez terminado su trabajo, tan solo hay que utilizar un código para colocar el menú o el header en el blog:
<embed src=" URL DE TU FLASH " width=" ANCHO " height=" ALTO " type="application/x-shockwave-flash" play="true" loop="true" menu="true"></embed>
Lo he probado personalmente y funciona tanto en un elemento como añadiéndolo directamente en la plantilla, además funciona sin problemas en IExplorer y Firefox.
En el caso de los menús, bastaría con añadir el código en un elemento HtmlJavascript y arrastrarlo luego debajo de nuestro header, por ejemplo.
En el caso de la cabecera, tendríamos que incluir el código directamente en la plantilla y lo hariamos añadiendo el código para el flash, justo antes de <div id='header-wrapper'>, de esta manera:
<div id='header'>
<embed src=" URL DE TU FLASH " width=" ANCHO " height=" ALTO " type="application/x-shockwave-flash" play="true" loop="true" menu="true"></embed>
</div>
Si algún problema surgiera con el tema de la colocación en vuestro blog del código flash, estaré encantada de intentar ayudaros.
En cuanto a lo demás, tan solo tenéis que contactar con DyDy, ella tiene un foro en su web, donde podéis solicitar su ayuda o consultarle cualquier duda. Y lo mejor de todo esto, es que es gratis, DyDy lo hace porque le gusta y simplemente desea ayudar a los demás.
Para ampliar esta información, visita a DyDy en Flashmania
Entradas y widget enmarcados por separado
Recuerdaque aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Explicaré como hacerlo, teniendo en cuenta que usaré como referencia la plantilla Mínima de Blogger.
Enmarcar cada post por separado
[1] Iremos a la parte de edición-html de nuestra plantilla, no hará falta que expandamos los artilugios, y buscaremos esta parte del código:
.post {
[2] Justo debajo añadimos esta línea de código para que se muestre el borde alrededor de nuestros pots:
border:1px solid #000;
El borde tendrá 1 pixel de ancho, si queremos conseguir más grosor aumentaremos ese valor.
Si preferimos un borde punteado (línea discontinua) en lugar del solido, cambiaremos "solid" por "dashed" o "dotted".
En #000 colocaremos el código para el color que tendrá nuestro borde.
[3] Lo normal es que si no hemos modificado antes esa parte, el borde se vea demasiado pegado al texto, para evitarlo, añadiremos otra línea de código a continuación de la que acabamos de colocar para el borde:
padding-left: 10px;
El resultado final será muchisimo mejor, si dejamos a cero el valor del border-bottom (es la línea punteada del final de las entradas en las Mínima) ya que así esa línea no se verá:
border-bottom:0px dotted $bordercolor;
[4] Si queremos podemos añadir un color de fondo a nuestras entradas desde este mismo código, para eso añadimos una nueva línea:
background: #ddd;
Enmarcar los widgets en la sidebar
[1] Buscamos ahora esta parte del código:
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
[2] Tendremos que separar antes de nada el código de los widget de entradas y de la sidebar, de tal manera que esa parte nos quede así:
.sidebar .widget{
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
[3] Añadimos justo debajo de .sidebar .widget{ las mismas líneas de código que añadimos en las entradas, más una nueva que controlará la separación entre cada widget:
.sidebar .widget{
border:1px solid #000;
padding-left: 10px;
margin:0 0 1.0em;
}
[4] Igual que antes, para los post, si queremos darle color al fondo de cada widget, hemos de añadir una nueva línea al código anterior (siempre antes de la llave de cierre }:
background: #ddd;
Nota: En ambos ejemplos el color de fondo es gris (#ddd;) pero podemos cambiarlo por el que nos guste.
Actualización
Para que el marco se vea con las esquinas redondeadas, añadiremos un par de líneas más de código en cada sección, es decir, en .post { y en .sidebar .widget{, teniendo en cuenta que se verá correctamente en Firefox, ya que en IExplorer las esquinas se verán cuadradas:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Controlar el numero de etiquetas a mostrar en la sidebar
Cuando etiquetamos nuestras entradas, a menudo solemos colocar varias etiquetas a cada una de ellas, así que cuando añadimos un nuevo elemento para mostrar nuestras etiquetas en la sidebar, este se alargará más de lo deseado, haciendo en muchos casos que la estética del blog no sea la más adecuada.
Una solución a este problema, podría ser el mostrar solo aquellas etiquetas más relevantes o que usamos más a menudo, modificando el widget que las muestra.
[1] Si aún no hemos añadido el widget de "Etiquetas" en nuestra sidebar, iremos a nuestra plantilla y en la parte de Diseño pinchamos en "añadir nuevo elemento" y escogemos "Etiquetas".
[2] Una vez tengamos las etiquetas en la sidebar, nos situamos en la parte de Editar-HTML de la plantilla y expandimos los artilugios. Nos desplazamos hacia abajo por el código de la plantilla hasta dar con el widget de las etiquetas que acabamos de añadir:
<b:widget id='Label1' locked='false' title='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>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
[3] Una vez localizado lo eliminamos y lo sustituimos por este:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<ul>
<script type='text/javascript'>
var labelnum = 0;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > 2) {
document.write("<li><a expr:href='data:label.url + "?max-results=100"'
rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>");
}
</b:loop>
</script>
</ul>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
[4] De esta manera solo se mostraran las etiquetas que estén siendo usadas más de dos veces, para aumentar este valor, cambiamos el 2 dentro del código por el número que queramos, en esta línea:
if (<data:label.count/> > 2) {
Diccionario para el blog
No se si realmente tendrá demasiada utilidad en la práctica, pero me han pedido algo así por email, y como suelo hacer siempre, lo publico por si alguien más puede sacarle partido.
Se trata simplemente de copiar y pegar un código en un nuevo elemento HTMLJavascrip para mostrar el diccionario.
En la imagen de abajo puede verse una captura de mi blog de pruebas que os dará una idea de como quedaría, el funcionamiento es sencillo y en mis pruebas funcionó sin problemas.
Para buscar el significado de cualquier palabra, usa la página web del Diccionario de la Real Academia Española, para encontrar un sinónimo de la palabra que queramos usa el Diccionario de Sinónimos de la Universidad de Oviedo y para ambas traducciones Español-Inglés / Inglés Español usa la web de Wordreference.
Código:
<img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/Sp1HZBbtYVI/AAAAAAAAHHI/dPNRR_hNLtc/s400/Libros.jpg" align="left"/>
<div style="padding:0px 0px 0px 35px;" align="left">
<script type="text/javascript">
function frm_diccionario(form) {
if (form.palabra.value != '') {
if (form.donde[0].checked) {
document.lengua.LEMA.value = form.palabra.value;
document.lengua.submit();
}
if (form.donde[1].checked) {
document.sinoni.pb.value = form.palabra.value;
document.sinoni.submit();
}
if (form.donde[2].checked) {
document.caste.spen.value = form.palabra.value;
document.caste.submit();
}
if (form.donde[3].checked) {
document.ingles.tranword.value = form.palabra.value;
document.ingles.submit();
}
}
}
</script>
<form name="lengua" action="http://buscon.rae.es/draeI/SrvltGUIBusUsual" method="post" target="_blank" style="margin: 0px;">
<input value="cara" name="LEMA" type="hidden">
<input name="TIPO_HTML" value="2" type="hidden">
</form>
<form name="sinoni" action="http://tradu.scig.uniovi.es/sinon.cgi" enctype="application/x-www-form-urlencoded" method="post" target="_blank" style="margin: 0px;">
<input name="pb" type="hidden">
<input name="np" value="5" type="hidden">
</form>
<form name="caste" action="http://wordreference.com/es/en/translation.asp" method="get" target="_blank" style="margin: 0px;">
<input name="spen" type="hidden">
</form>
<form name="ingles" action="http://wordreference.com/es/translation.asp" method="get" target="_blank" style="margin: 0px;">
<input name="tranword" type="hidden">
</form>
<form name="diccionario" onsubmit="return false;" action="" method="post" target="_blank" style="margin: 0px;">
<input name="palabra" style="width: 120px;" type="text"><br>
<input class="radioboton" name="donde" value="lengua" id="blengua" checked="checked" type="radio">
<label for="blengua"> L. Española</label><br>
<input class="radioboton" name="donde" value="sinoni" id="bsinoni" type="radio">
<label for="bsinoni"> Sinónimos</label><br>
<input class="radioboton" name="donde" value="anton" id="banton" type="radio">
<label for="banton"> Español - Inglés</label><br>
<input class="radioboton" name="donde" value="ingles" id="bingles" type="radio">
<label for="bingles"> Inglés - Español</label><br>
<div class="boton"><a href="javascript:frm_diccionario(document.diccionario)" class="boton"><strong>Buscar</strong></a></div>
</form>
</div>
Formulario de comentarios Blogger debajo de los posts
Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...
Tendremos el formulario donde ahora vemos los comentarios al entrar a las páginas de etiquetas (al pinchar en el título de una entrada o sobre una etiqueta), y se verá tal cual lo vemos en la ventana popup cuando dejamos un comentario, pero "incrustado" debajo de cada entrada.
[1] Antes de comenzar iremos a la pestaña "Configuración" de nuestra plantilla y una vez allí a "Comentarios" donde seleccionamos SI en la opción "¿Mostrar comentarios en una ventana emergente?
[2] Nos situamos en nuestra plantilla - HTML , expandimos los artilugios y justo encima de </head> colocamos estas líneas de código:
<style>
#comenta-outter {
margin: 50px 0;
}
#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}
</style>
[3] Bajamos ahora por la plantilla hasta localizar esta parte del código:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author'
expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id'
title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
</b:if>
Lo eliminamos por completo y lo sustituimos por este otro:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<center>
<div id='comenta-outter'>
<div id='comenta-inner'>
<iframe align='middle'
expr:src='data:post.addCommentUrl'
frameborder='0' marginheight='0' marginwidth='0' scrolling='auto'
style='width:100%;height:100%;'/>
</div>
</div>
</center>
</b:if>
[4] Buscaremos ahora esta otra parte del código de la plantilla:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<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>
Lo eliminamos sustituyéndolo por este otro:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.url + "#comments"' >
<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>
[5] Modificaciones:
Podemos hacer algunos cambios en el código CSS, para adaptar el formulario y darle una apariencia mucho más original.
#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}
height: 650px; Es el alto que tendrá el formulario, podemos cambiar el valor por el que necesitemos.
width: 500px; Es el ancho del formulario, lo más lógico será ponerle el mismo ancho que tengan nuestras entradas, para evitar que se vea "cortado".
border:none; Borde del formulario, está en none/ninguno podemos poner un valor para el borde: grosor, tipo y color, por ejemplo, border:2px solid #000;
background-color: #ddd; El color de fondo del formulario, en el ejemplo es de color gris claro (#ddd;), cambiaremos aquí el código para conseguir el color que queremos.
Podemos incluso añadir una imagen de fondo al formulario, cambiando
background-color: #ddd; por:
background: url(Dirección_url_de_la_imagen);
Actualización:
Puede ser que antes hayamos modificado nuestra plantilla para aplicar el "Sin comentarios/1 comentario/x comentarios" como explico en esta entrada anterior.
Si queremos entonces colocar el formulario para los comentarios debajo de nuestras entradas, pero manteniendo el "Sin comentarios/1 comentario/x comentarios" los pasos a seguir serán los mismos, con la única diferencia de que el último código (paso[4]) lo cambiaremos por este:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.url + "#comments"' >
<b:if cond='data:post.numComments == 0'>
sin comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 comentario
<b:else/>
<data:post.numComments/> comentarios
</b:if>
</b:if>
</a>
</b:if>
</b:if>
</span>
Elecciones Virtuales en La Isla [Juego]
Os proponemos un juego, ahora que se acerca las elecciones generales y nos van a inundar con la campaña electoral hasta las cejas, para poder escapar de todo ellos y dale un punto imaginativo y humorístico podemos montar partidos políticos y hacer campaña electoral desde Nuestros Blogs y crear las primeras elecciones Virtuales en el Ciber espacio.
Estamos en un mundo virtual, nada tiene que ver con el mundo real, os proponemos reírnos una buena temporada de los políticos "parodiando" a estos ¿Queréis jugar?.
Normas del juego para su buen desarrollo
[1] No se permitirán partidos políticos reales o siglas del mundo real.
[2] No se permitirán partidos o siglas que sean : homófobos, machistas, racistas o que no sean respetuosos con el medio ambiente y con los animales que en el habitan.
[3] Y sobre todo recordar que esto es "POLÍTICA" aquí vale todo "Er_Ma]{uLa ha insistido mucho en esto". Se imaginativ@ y participatv@, para que tod@s podamos pasar un buen rato de risas.
Isla ErranTe y Er_Ma]{uLa
Me pongo manos a la obra para "montar" ahora mismo mi "ciber-partido" y vosotros...¿a que esperáis?, tenemos de tiempo hasta el 1 de febrero, así que no valen disculpas.
Esto es mucho mejor que un meme corriente, al menos nos echaremos alguna que otra risa, que es buenísimo para la salud, además de gratis.
Para participar en las elecciones virtuales ,solo tenéis que publicar un post en vuestro blog ,creando un partido y si puede ser un logotipo para vuestro partido ,con propuestas y tal. Habilitaremos una zona en Isla para poder poner a todos los Blog que se unan al juego ,Se piden sugerencias a l@s que van a jugar .
Sed imaginativos las reglas no están cerradas ,solo se han puesto unas pequeñas normas.
Simbolo del Copyright ©
Hay gente observadora que se fija en cualquier detalle del blog al que están visitando, como Yanka que me manda un email preguntando como hago para colocar el símbolo del Copyright en el pie del blog.
He pensado que quizá le interese a alguien más, e incluso que alguno quisiera añadir un pie de página como el mio, así que os dejo el código que hay que colocar en un elemento HTML y arrastrar hasta la parte de abajo del blog. Está incluido el icono de la casita "Ir Arriba".
Por descontado, que tenéis que cambiar mis datos por los vuestros. Pensad también que el estilo del texto y color de los enlaces será el que vosotros tengáis definido en el #footer { de vuestra plantilla.
<a href="#" title="VOLVER ARRIBA"><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/R0RQObltUbI/AAAAAAAACp8/pxzmxVhYzQY/s200/
houserq1.png"/></a>
<br/>El Escaparate Blog© 2007 | Plantilla<a href="http://www.blogger.com/"> Blogger</a> | Diseño de<a href="http://elescaparatederosa.blogspot.com/"> Rosa</a>
Como veréis en el código, el símbolo del copyright © se consigue con este sencillo código: ©
Nota:
En Blogoff podéis consultar un artículo muy interesante y esclarecedor sobre el plagio de contenidos, el copyright y las licencias de Creative Commons.
Estrellas en tus enlaces
Un efecto muy lindo que hará que al pasar el puntero sobre los enlaces de tu blog, se vean unas estrellitas parpadeantes.
[1] Nos situamos en la parte de edición - HTML de nuestra plantilla, y buscamos esta parte del código de nuestros links:
a:link {
color:#0066cc;
text-decoration:none;
}
a:visited {
color:#cc6600;
text-decoration:none;
}
a:hover {
color:#cc6600;
text-decoration:underline;
}
[2] Justo debajo de a:hover { añadimos este código:
background:url(http://img209.imageshack.us/img209/1033/sterl05nh5.gif);
Se ve en "vista previa" cuando ponemos el puntero sobre un link, lo que facilita el comprobar si lo hemos hecho correctamente, o si el resultado no nos agrada.
Podemos usar otra imagen que no sean las estrellas del ejemplo, cambiando la url del código por la de la nueva imagen.
Nota:
El efecto afectará a todos los enlaces del blog.
Etiquetas y archivos en forma de "falsa nube"
Si tienes demasiadas etiquetas en tu blog, puede pasar que la lista sea tan larga que haga que también se alargue en exceso la sidebar.
Usando este sencillo truco, podemos conseguir que las etiquetas se muestren con efecto "nube". Aquí veis un ejemplo del "antes" y "después".
[1]Una vez hemos añadido el elemento "Etiquetas" en la sidebar, buscamos esta parte del código en nuestra plantilla con los artilugios expandidos, y eliminamos lo que está en negrita:
<b:widget id='Label1' locked='false' title='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>
<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>
[2]Para conseguir el mismo efecto con los archivos del blog, antes hemos de escoger el mostrarlo en opción "lista" y eliminamos los <li> </li> que estarán debajo de esta línea de código:
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog'>
Presumiendo de Escritorio [Meme]
Mi amiga Carmen de UBH (Unión de Bloggers Hispanos), me invita a seguir un meme en el que hay que mostrar nuestro escritorio. Le he dicho que lo haría encantada, así que me puse "manos a la obra" y rápidamente hice un poco de limpieza para no quedar como una desordenada. 
Gracias Carmen por obligarme al aseo, ahora se ve mucho mejor. 
Se lo "endoso" a: Pau, La Blogueria, Yo misma, Rubén, Silvia y a todo el que quiera seguirlo.
Capturas online con enlaces incluidos
Kwout es una aplicación online para hacer capturas de pantalla, que al mismo tiempo que captura la imagen que quieres lo hace también con los enlaces que se muestran en la captura.
Podéis hacer la prueba en la imagen que he añadido en esta entrada, está "capturada" del blog de p3p0 que es donde he leído por primera vez sobre esta utilidad.
Es una forma ideal de hacer referencia a algún sitio sin tener que añadir a mano los enlaces, todo está en la misma imagen, con un aspecto muy bonito además, ya que pueden escogerse varias formas de mostrar la captura, la mía tiene sombra y bordes redondeados.
Para usar el servicio, antes hemos de activarlo añadiendo la página a nuestro navegador favorito, en marcadores o en favoritos (Firefox, IE), después introducimos la url de la web que queremos capturar y aparecerá en la pantalla la imagen (interfaz) de la web en cuestión. Marcamos con el ratón el área a copiar y pinchamos en "cut", podremos entonces personalizar nuestra captura y una vez terminado, copiar el código HTML para colocar en nuestro blog.
Imagen en la sidebar que funciona como link
Todos sabemos que en Blogger podemos añadir con facilidad una imagen en la sidebar, directamente desde nuestro PC, si al "añadir un elemento de página" escogemos la opción "imagen".
Esta tarde, en un comentario Agustín me pregunta como podría hacer que esa imagen subida al blog desde su PC funcione como link, ya que Blogger no incluye esta opción.
He conseguido hacerlo de forma un tanto "artesanal", así que tal vez no sea la manera más correcta, pero lo he probado y funciona.
[1] Una vez añadida la imagen a través de "añadir un elemento de página", nos situaremos en la parte de "edición-HTML" de nuestra plantilla, expandimos los artilugios y localizamos el widget de nuestra imagen:
<b:widget id='Image1' locked='false' title='' type='Image'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
<br/>
<b:if cond='data:caption != ""'>
<span class='caption'><data:caption/></span>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
[2] Dentro de este código, he señalado en negrita la parte que pertenece a la imagen. Colocaremos ese código dentro del que usamos a menudo para un link cualquiera:
<a href='Dirección_del_enlace'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a>
[3] Para abrir el enlace en página nueva, usaremos el "target":
<a href='Dirección_del_enlace' target='_blank'><img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/></a>
Etiquetas en forma de menú desplegable
Cuando añadimos un nuevo elemento de "Archivos" a nuestra sidebar, Blogger nos da tres opciones distintas para mostrarlo, una de ellas es en forma de "Menú desplegable".
Es opción no está disponible cuando el elemento que añadimos es el de "Etiquetas".
Si hemos escogido esa opción para mostrar los Archivos del blog, estaría bien poder hacer lo mismo con las Etiquetas, quedaría bastante bien estéticamente, creo yo...
[1] Añadimos el elemento "Etiquetas" a nuestro blog (si no lo hemos añadido antes)
[2] Vamos a la parte del HTML de nuestra plantilla y sin expandir artilugios buscamos esta línea de código:
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
Tendremos en cuenta que si le hemos puesto algún título a nuestro elemento de Etiquetas, se verá en esa línea title=
Lo mismo que si, por ejemplo, tenemos mas de un elemento de Etiquetas añadido, entonces cambiará el id= por id=2, id=3...
[3] Una vez localizado el elemento correcto, cambiamos esa línea de código por esto:
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Etiquetas del Escaparate</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
[4] Cambiamos en el código donde dice Etiquetas del Escaparate por lo que vamos a mostrar en el menú cuando está "recogido".
Usamos la vista previa y si ha ido todo bien, guardamos cambios.
Así se verá
Nota
Este widget funcionará igual que el de "archivos" de Blogger, es decir, automáticamente se añadirá al menú cada nueva etiqueta que coloquemos en las entradas.
