0

Botones diferentes de Blogger

He encontrado de forma casual unos cuantos botones de Blogger diferentes a los que acostumbramos a ver en nuestros blogs. Si hemos decidido ocultar la Navbar de Blogger, no estaría de más el usar uno de estos botones, sustituyendo a los que incluye Blogger por defecto.
Pongo aquí unos cuantos, pero podéis ver más en el blog de PAM "Armada y peligrosa"

0

Fondos para el blog

Fondos para poner en tu blog tan guapos que dan ganas de ponerlos todos a la vez. En serio, pocas veces los he visto tan chulos como estos. Están organizados por temas: pop, retro, cool, natural y japanese.



Tenían que ser japoneses... ;-) EverydayIcons

0

Frase o texto que sigue al cursor

Haremos que una frase elegida por nosotros o cualquier texto que queramos, se desplace en nuestro blog siguiendo el movimiento del cursor.

[1] En la parte de añadir elementos de nuestra plantilla, escogemos añadir un nuevo elemento de HTML-Javascript y pegamos en su interior este script:

<script language="JavaScript" type="text/javascript">

mensaje = 'COLOCAR AQUI LA FRASE QUE SIGUE AL CURSOR';
font = 'Verdana,Arial';
size = 2;
color = 'black';
velocidad = 0.7;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);


mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);


function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;

</script>

[2] En esta parte del script, haremos los cambios para adecuar el efecto a nuestro blog:
mensaje = 'COLOCAR AQUI LA FRASE QUE SIGUE AL CURSOR';
font = 'Verdana,Arial';
size = 2;
color = 'black';
velocidad = 0.7;

mensaje = La frase o texto que seguirá al cursor.
font = El tipo de fuente del texto.
size = Tamaño del texto.
color = Esto es lo más importante. Marca el color del texto, yo he puesto black (negro) lo que hace que se vea óptimo en un fondo blanco. Para fondos de blog oscuros, quedará bien "white" (blanco).
velocidad = Velocidad de desplazamiento. Os recomendaría dejarlo tal cual está, según mi opinión, es la velocidad más adecuada.

0

Suscribirse al blog mediante email con Rmail

Esta es una opción más para ofrecer a nuestras visitas el suscribirse a las actualizaciones de nuestro blog vía email.

[1] Ingresamos a la web de Rmail

[2] Simply enter your RSS feed in the following textbox: Escribimos la url del feed de nuestro blog.
Si estas usando el feed que proporciona Blogger la url será:


http://nombre_de_nuestro_blog.blogspot.com/atom.xml


Por supuesto, donde dice nombre_de_nuestro_blog, pondremos eso exactamente, el nombre de nuestro blog tal como aparece en el navegador.

[3] Click on the "Generate HTML" button: Pichamos para generar el código HTML que pegaremos en un nuevo elemento del blog.



Email:


0

Suscribirse al blog mediante email con Feedburner

Si estamos usando Feedburner para permitir a nuestros visitantes el acceder a nuestro feed, tenemos la posibilidad de colocar en nuestra sidebar un widget para permitir la suscripción a nuestro feed mediante email.

[1] Ingresamos a nuestra cuenta de Feedburner y pinchamos sobre el feed de nuestro blog.

[2] Pinchamos arriba en la pestaña Publicize
Publicize
[3] A la derecha de la página escogemos Email Subscription
Email suscripción
[4] En el despegable elegimos idioma.

[5] Nos darán el código necesario para colocar el widget en el blog, en un nuevo elemento, el código será algo así:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post" target="popupwindow" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=690409', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="http://feeds.feedburner.com/~e?ffid=690409" name="url"/><input type="hidden" value="El Escaparate" name="title"/><input type="hidden" name="loc" value="es_ES"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://www.feedburner.com" target="_blank">FeedBurner</a></p></form>

[6] Donde dice Enter your email address en el código, lo cambiamos por lo que queramos mostrar, por ejemplo, algo como "Teclea tu email"

Teclea tu email:

Delivered by FeedBurner



Si no estas usando Feedburner, quizá te interese hacerlo, si es así puedes leer como usar Feedburner en Blogger.

0

Ver el nombre de los comentaristas de nuestras entradas

Acabo de dar con un script en JackBook que nos permite mostrar en el pie de nuestras entradas, integrado con los comentarios, el nombre de los comentaristas de cada entrada. Cada nombre del comentarista funcionará como link, para ver su comentario.
Al mismo tiempo hará que "comentarios" se muestre en plural o singular según el número de comentarios de cada post.

Ejemplo:


[1] Nos situamos en nuestra plantilla HTML y expandimos artilugios, casi al principio de nuestra plantilla veremos el título:

<title><data:blog.pageTitle/></title>


Justo a continuación colocaremos esta línea de código para llamar al script:

<script type="text/javascript" src="http://lejaniaimposible.googlepages.com/comentaristas.js"></script>


[2] Una vez hecho esto, buscamos esta parte del código de la plantilla:

<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>



[3] Colocaremos ahora dentro de ese código las tags <noscript> y </noscript> de forma que esa parte del código que hemos localizado quedará así:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'><noscript><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></noscript></b:if></b:if>



[4] Pondremos ahora una línea de código justo después de la primera línea del código anterior (<b:if cond='data:blog.pageType != "item"'>):

<script type="text/javascript" expr:src='"http://www.blogger.com/feeds/ID-DE-TU-BLOG/" + data:post.id + "/comments/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"'></script>



[5] Donde dice ID_DE_NUESTRO_BLOG, hemos de poner la id del blog. Si miramos en el navegador mientras estamos en la parte de edicion-HTML de la plantilla, veremos algo así (los números resaltados en negrita son la Id de nuestro blog):

http://www.blogger.com/html?blogID=1234567890123456789&tpl=true

[6] Usamos la "vista previa" y si todo ha ido según lo previsto, guardamos cambios.

Nota
Este script muestra hasta 25 nombres de comentaristas como máximo, si quisiéramos mostrar más (hasta 500), tendríamos que cambiar el código en el paso [4] por este otro:

<script type="text/javascript" expr:src='"http://www.blogger.com/feeds/ID-DE-TU-BLOG/" + data:post.id + "/comments/default?orderby=published&amp;alt=json-in-script&amp;max-results=500&amp;callback=rp"'>
</script>


Actualización:
Aunque el script de la entrada alojado en Google Pages aún parece funcionar correctamente, os aconsejo descargar el script a vuestra PC para usarlo en un alojamiento propio y evitar los problemas de ancho de banda.

0

Seguimiento de comentarios (opción Blogger)

Acabo de darme cuenta ahora mismo que Blogger ha incluido una nueva opción en el formulario de comentarios.
A menudo cuando dejamos algún comentario en cualquier blog, es fácil que se nos olvide en que entrada lo hemos hecho y se nos complica el comprobar si nos han respondido.
Blogger incluye ahora la posibilidad de que, una vez hayamos comentado, nos llegue a nuestro email cualquier respuesta o nuevo comentario que se realice en esa entrada concreta.
Solo tenemos que marcar la nueva opción "Email follow-up comments to" y cuando alguien deje un comentario en esa entrada, un email de aviso nos llegará al correo.

0

Mostrar un post al azar

Lo he visto en PurpleMoggy´s y me ha llamado la atención, aunque no le encuentro demasiada utilidad, la verdad, pero es una cosilla más para lucir en el blog. Podemos hacerlo mediante un script que añadiremos antes del cierre </head> de nuestra plantilla:


<script type='text/javascript'>
//<![CDATA[
var _yourBlogUrl = "http://NOMBREDETUBLOG.blogspot.com";

function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl;
for(var i = 0; i < json.feed.entry[0].link.length; i++) {
if (json.feed.entry[0].link[i].rel == "alternate") {
theUrl = json.feed.entry[0].link[i].href;
break;
}
}
if(theUrl) {
window.location.href = theUrl;
}
}
//]]>
</script>

Cambiamos donde pone http://NOMBREDETUBLOG.blogspot.com por la url (dirección) de nuestro blog.

Añadimos un nuevo elemento html-javascript y pegamos esto:
<a href="javascript:randomPost();">View Random Post</a>

En "View Random Post" ponemos lo que queremos mostrar en el link hacia nuestro post al azar, por ejemplo podemos poner "Ver post al azar".

También podríamos colocar una imagen sustituyendo "View Random Post" por la url de la imagen escogida: <img src="url_de_la_imagen"/>, incluso usar las dos cosas (imagen y texto), por ejemplo un pequeño icono tipo flechita, solo tenemos que colocar la url de la imagen y a continuación el texto.

0

Títulos dobles en la sidebar

Es un efecto muy lindo para mostrar de una forma original los títulos en nuestra sidebar.

1- Hemos de colocar este código en el CSS de nuestra plantilla, por ejemplo, antes de ]]></b:skin>


/*- Doble título-------------------------- */
h5{
margin: 0;
font-weight: normal;
color: #d8f7af;
font-size: 2.2em;
position: relative;
}

h6{
margin: 0;
display: inline;
position: relative;
top: -.5em;
left: 2em;
font-size: 1.5em;
font-weight: normal;
color: #94c258;
}

Podemos cambiar el color por el que más se ajuste a nuestras necesidades e incluso el tamaño del texto (fuente).

2- Vamos a nuestra plantilla /Página de elementos /Añadir un nuevo elemento HTML-Javascript. Dejamos la cajita para el título en blanco y dentro del nuevo elemento pegamos:


<h5>...NUESTRO TITULO...</h5>
<h6>...NUESTRO TITULO...</h6>


Sustituimos "NUESTRO TÍTULO" por el título que vamos a darle al elemento.
Esto hará que el título del elemento tenga el "efecto duplicado", justo debajo incluimos el contenido del elemento (un contador, links, o lo que sea que queramos), guardamos cambios.



Visto en: BlogU

0

Mozilla Firefox 2.0.0.8

Ya está disponible para descarga la nueva versión de Mozilla Firefox, la 2.0.0.8.

A mi me ha llegado hoy el mensaje para actualizar a esta nueva versión, si no nos llegara de forma automática, podemos descargarla sin problema desde el sitio oficial de Mozilla Firefox.


Firefox

0

Vinculos Edicion rapida (Iconos de herramientas)

Me consultan a menudo sobre como ocultarlos y yo siempre contesto lo mismo: "en mi opinión es un gran error prescindir de ellos".

Los vínculos de Edición rápida permiten acceder de forma rápida y directa al editor de entradas, una vez hemos publicado nuestra entrada.
Son esos iconos de herramientas y el lápiz que solo se muestran si has accedido a tu cuenta de Blogger, los demás usuarios no los ven.

Cuando publicamos una entrada larga solemos revisarla en nuestro blog. Si vemos algún error en ella, tenemos que regresar a la página de "Editar entradas", buscarla, corregirla y volver a publicarla...
Los vínculos Edición rápida nos permiten ir directamente a la entrada que queremos corregir, lo que facilita enormemente la tarea y sobre todo acorta el tiempo empleado para llevarla a cabo.

Para habilitarlos, iremos a nuestra plantilla - Configuración - Básico y establecemos SI en ¿Mostrar Edición rápida en tu blog?. Para deshabilitarlos, y que no se vean, ponemos NO.

0

Pop-up controlado (II)

En esta ocasión crearemos mediante un sencillo script un Popup o ventana emergente, que mostrará una imagen o una página web. La diferencia con otros códigos para ventana emergente, es que esta saldrá justo en el centro de la página y las visitas tendrán la posibilidad de agrandar la ventana del popup para ver la imagen o la web en todo su tamaño.
En el caso de las imágenes, estas se adaptaran al tamaño de la ventana, sea este el que sea, así que la imagen siempre se verá completa independientemente de su tamaño o el de la ventana emergente y además con la posibilidad de agrandar la ventana para ver la imagen a su tamaño real.
En el caso de que mostremos en el popup una página web, la ventana emergente se mostrará con barras de scroll y también llevará incluida la posibilidad de agrandar la ventana para mostrar la web a tamaño real.

**

[1] Colocamos el script antes del </head> de nuestra plantilla:

<script language="javascript">

/*
Auto center window script- Eric King (http://redrival.com/eak/index.shtml)
Permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var win = null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
win = window.open(mypage,myname,settings)
}
</script>

[2] Colocamos este código para el texto o imagen que vamos a usar como link a la ventana popup:
<a href="URL_DE_IMAGEN_O_WEB" onclick="NewWindow(this.href,'name','400','400','yes');return false">TEXTO_DEL_LINK</a>

[3] El tamaño del popup lo escogemos en 400 y 400 (ancho y alto) y si queremos anular las barras de scroll cambiamos "yes" por "no".

Visto en: Dynamic Drive

0

Código de enlace online

Si ya tienes una imagen o botón para usar como enlace a tu blog, te será muy fácil añadirle el código necesario para que se vea igual que el que tengo yo en mi sidebar debajo de "Enlazame".
Con esta sencilla aplicación online será un minuto. Colocamos la dirección (url) de nuestro blog en: "Endereço do seu blog" y la dirección de la imagen o botón, que habremos subido previamente a un alojamiento de imágenes, hemos de colocarla en "Endereço do seu button".
El código resultante lo pegamos en un elemento HTML-Javascript.

Gerador LINK-ME

0

Plantillas para el nuevo Blogger

Atención:
El blog que se menciona en esta entrada, ya no está online.


Me he encontrado por casualidad con este blog donde podemos descargar varias plantillas para Blogger nuevo, incluso hay alguna de tres columnas.
He probado un par de ellas sin ningún problema de instalación ni funcionamiento.

0

Mariposas en tu blog

¿Quieres que una pandilla preciosa de mariposas revoloteen en tu blog?

El dato me lo manda por email Magnolia que tiene el gusto de compartirlo con nosotros. En su blog las mariposillas revolotean en la parte de abajo de la sidebar y he de decir que quedan preciosas y parece que estuvieran vivas. :-)

Este es el código para ponerlas en un elemento HTML-Javascript, pero como podéis ver, pueden volar sin problemas en una entrada.

<embed allowscriptaccess="never" allownetworking="internal" enablejavascript="false" width="350px" src=" http://www.crazyprofile.com/butterfly/Butterfly.swf?nr=6&type1=0&type2=3&type3
=1&type4=4&type5=5&type6=2" height="300" wmode="transparent"><br/><div><a href></a></div></embed>


¡A volar!

0

Visitas en tiempo real con Free Fast Web

Un sencillo script para pegar en un elemento HtmlJavascript que hace que se muestren las visitas de tu blog en ese mismo momento.
La página para obtenerlo se llama Free Fast Web y no hace falta registro.
El código tal como nos lo proporcionan allí es este:

<a href="http://www.fastwebcounter.com" title="Free Web Counter"><script src="http://fastwebcounter.com/secure.php?s=www.yoursite.com"></script> hits</a>


Podemos hacerle algunos cambios para que se adapte mejor al blog o a nuestros gustos.
Cambiaremos "hits" por visitas, lectores...o algo así y colocaremos un texto delante de <script, de tal manera que en el blog se vea algo como esto:

<a href="http://www.fastwebcounter.com" title="Free Web Counter">En el blog ahora...<script src="http://fastwebcounter.com/secure.php?s=www.yoursite.com"></script> Visitas</a>



No se os olvide colocar la url (dirección) de vuestro blog en donde dice "www.yoursite.com"


Personalización del contador (Idea de Juan Manuel Aguiar)

[1] Introducimos el código del contador dentro de un div al que damos un id:

<div id="counter"> AQUI EL CODIGO DEL CONTADOR</div>

[2] Y en el css de la plantilla, antes de ]]></b:skin>
añadimos las instrucciones necesarias:

#counter{
background:url(URL_DE_IMAGEN) no-repeat center;
border: 0px solid #000000;
padding: 30px;
}

0

Buscadores

Hoy me han pedido un buscador que use el mismo sistema de búsqueda que el que estoy usando en el escaparate y con una imagen distinta al mio.
Hice unas cuantas pruebas para mi solicitante y una vez elegida una de ellas, he decidido publicar dos de las que hice para que las use quien quiera en su blog.
Solo tenéis que cambiar la url de mi blog por la del vuestro, fijaros que hay que hacerlo dos veces y que no lleva http:// delante.
Si no estáis usando un fondo blanco en la sidebar, no quedará bien ya que las imágenes llevan fondo blanco, pero quizá os sirva como ayuda para hacer uno vosotros mismos cambiando la url de la imagen por una vuestra.


Código buscador chica detective

<img alt="Google Buscador" src="http://img88.imageshack.us/img88/7908/images2zf0.jpg"/>
<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="" class="searchBox" name="as_q" size="15" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="elescaparatederosa.blogspot.com" name="bl_url" type="hidden"/>
<input id="b-searchbtn"
onclick="document.forms['b-search'].bl_url.value='elescaparatederosa.blogspot.com'" alt="Search This Blog" value="Buscar" title="Buscar "
type="submit"/>
</form>


Código buscador chico detective

<center><img alt="Google Buscador" src="http://img88.imageshack.us/img88/8647/imagesdf9.jpg"/>
<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="" class="searchBox" name="as_q" size="15" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="elescaparatederosa.blogspot.com" name="bl_url" type="hidden"/>
<input id="b-searchbtn"
onclick="document.forms['b-search'].bl_url.value='elescaparatederosa.blogspot.com'" alt="Search This Blog" value="Buscar" title="Buscar "
type="submit"/>
</form></center>

0

Etiquetas con icono

Usando el CSS, podemos mostrar nuestra lista de etiquetas con un icono delante de cada una de ellas.
1- En primer lugar añadiremos las etiquetas al blog, (si no las tenemos ya añadidas).
2- En el CSS de nuestra plantilla añadimos este trozo de código:
#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(URL DE NUESTRO ICONO) no-repeat center left;
}
En "padding-left" he puesto 30px, esa es la distancia del icono al texto, vosotros tenéis que modificarla en función del tamaño del icono, si vais a usar el mio, con 30px quedará perfecto.

Y así se verá:


Esta es la url de mi icono por si queréis usarlo:
http://img526.imageshack.us/img526/7028/taggreenoe1.png

Nota
Se puede usar este sistema para cualquier lista, por ejemplo, si queremos añadir un icono a una lista de links, añadimos el nuevo elemento de links en la plantilla y añadimos en el CSS de la plantilla lo mismo de arriba pero cambiando Label1 li por LinkList1.

En Blogger se pueden añadir listas e incluso las etiquetas, varias veces, por lo que cada vez que queramos cambiar el icono en una nueva lista, pegaremos de nuevo esta porción de CSS, modificando LinkList1 por LinkList2, o Label1 por Label2, y así sucesivamente.

0

Aviso de comentario en tu correo

Cuando recibimos bastantes comentarios en el blog, no es difícil que alguno se nos pase desapercibido.
Considero que es muy importante el responder a los comentarios de nuestros visitantes.
Ya que se han tomado la molestia de comentar, lo mínimo que podemos hacer, es corresponder con nuestra atención en forma de respuesta.
Es casi seguro que si alguien que pasa por primera vez por nuestro blog y deja un comentario, volverá esperando encontrar una respuesta, si no la recibe, es probable que no se moleste en volver...
En mi caso se me hacía casi imposible estar al tanto de todos (consultas y más consultas) y, al comienzo de andadura del Escaparate, estoy segura que más de una visita perdí por este motivo.
Ahora he aplicado la opción de Blogger "Dirección de notificación de comentarios" y problema resuelto:

Vamos a nuestra plantilla - edición y pinchamos en la pestaña "configuración" y seguidamente en "comentarios"




Casi al final de la pantalla veremos una cajita para colocar el e-mail en el que vamos a recibir la notificación del comentario. Es muy cómodo, ya que solo hemos de abrir nuestro correo y revisarlo, en el e-mail (al menos en hotmail, que es el que yo uso)se incluye un link que nos lleva directamente a la entrada donde se ha hecho el comentario, así que podremos contestarlo directamente desde ahí.

0

Tu e-mail en imagen (evitando spam)

Una aplicación online que transforma en una imagen tu dirección de e-mail.
El resultado de colocar nuestro e-mail como imagen, evitará los correos spam o basura, ya que los robots que se dedican a buscar links de direcciones de correo, pasarán por alto la nuestra al considerarla como imagen.
He escogido el fondo blanco, para que simule texto:



Iremos a la web de SafeMail, y una vez allí, en solo tres pasos obtendremos el código para mostrar la imagen de nuestro e-mail en el blog.

Nos proporcionan distintos tipos de código. Escogemos el que dice "HTML code (without link)" y lo pegamos en un nuevo elemento de página HTML-Javascrit.

Pinchamos arriba, donde dice "Formato RTF", seleccionamos la imagen con el ratón y pinchamos en "hiperlink" (es esa imagen pequeñita que parece una bola del mundo verde).

En la ventanita que se abre, borramos su contenido y ponemos mailto: seguido de la dirección de nuestro correo.

(Pincha en la imagen para verla a mayor tamaño)


Guardamos cambios y listo! :-)

0

Colocar un banner o imagen flash en el blog

Mi amigo Toxicboy ha tenido la enorme gentileza de regalarme un banner en formato flash, o lo que es lo mismo, un archivo con extensión .swf.
Además ha sido tan amable que incluso me ha pasado un código para poder subirlo al blog.

En primer lugar hemos de subir nuestro .swf a una página de alojamientos de archivos, en esta ocasión, os recomiendo Photobucket.

En un elemento de la sidebar

Una vez subido el .swf nos situamos en la parte de diseño de nuestra plantilla y añadimos un nuevo elemento Html-Javascript donde pegaremos este código:


<div style="text-align: center;"><object id="movie" type="application/x-shockwave-flash" data="URLarchivo.swf" width="ancho" height="alto"><param name="movie" value="URLarchivo.swf"><param name="wmode" value="transparent"></object></div>


En "data" y "value" colocamos la direccion (url) de la imagen flash que nos proporciona Photobucket.
Borramos donde dice "transparent".
Cambiamos a nuestro gusto el ancho y el largo, poniéndolo en pixeles.

En la cabecera/header del blog

Nos situamos en nuestra plantilla HTML y buscamos la parte del código que corresponde a nuestra cabecera:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='el escaparate (cabecera)' type='Header'/>
</b:section>
</div>


En maxwidgets='1' podremos "2" y en showaddelement='no' pondremos "yes". Guardamos cambios.
Ahora si vamos a la parte de editar (donde añadimos los elementos) de la plantilla, veremos que en la cabecera tenemos la posibilidad de añadir un nuevo elemento. Colocaremos nuestro código flash justo ahí, en un nuevo elemento HTML-Javascript.
Tendremos entonces el flash en la cabecera, pero la cabecera anterior también sigue mostrándose, así que tendremos que eliminarla. Volveremos al HTML de la plantilla, y en el código que antes modificamos, el del header, borramos esta línea:

<b:widget id='Header1' locked='true' title='el escaparate (cabecera)' type='Header'/>


Usamos la "vista previa" y si todo ha ido según lo previsto, guardamos cambios. Nos saldrá entonces un mensaje que nos avisa de que la antigua cabecera va a ser suprimida:

Están a punto de suprimirse los artilugios
.Header1

Este es mi banner en formato flash, como véis también puede colocarse en las entradas del blog sin problemas:


¡Gracias Toxicboy!!! :-)

0

Lectores de RSS en un solo botón

Acabo de colocar en mi sidebar un botón que da la posibilidad a mis visitas de usar su lector de Feeds preferido.
Con solo pasar el puntero sobre el botón, se abre un desplegable que muestra los lectores de Feeds disponibles. Y además, si me permitís la opinión, el botón tiene un diseño muy lindo. :-)

Para conseguir uno hemos de ir a la web de FeedButton, y en un par de pasos obtendremos el botón. No hace falta registro, tan solo hemos de introducir la url del feed de nuestro blog y escoger el tamaño del botón: "normal" (el del Escaparate) o "long" (110px aprox.) en el mismo instante se genera el código para el botón, que tenemos que copiar y pegar en un elemento HTML-Javascript.
Ejemplo

Pincha en la imagen para verla a mayor tamaño


En el mismo código que nos dan, podemos cambiar el color de fondo var fb_bgcolor = y el del borde var fb_bordercolor =

0

Ultimos posts de Beautiful Beta modificado por Todo-links

Hace algún tiempo Wells de Todo-links tubo la amabilidad de informarme de una modificación que había hecho en el script que Beautiful Beta proporciona para mostrar las últimas entradas en la sidebar.
Wells no solo fue tan atento que me hizo saber de su trabajo con el script, sino que incluso me hizo llegar las instrucciones completas para instalarlo.
Wells ha respetado al autor original y yo he decidido hacerlo también no eliminándolo en el código.

Ejemplo Todo Links

Para empezar a usarlo tan solo hemos de copiar y pegar este código en un nuevo elemento HTML-Javascript y colocarlo en el lugar escogido de nuestra sidebar, cambiando donde dice "dirección de tu blog" por la del nuestro:

<script src="http://weells.todolinks.googlepages.com/todoultipost.js"></script>
<script language="javascript">
var numposts = 25;
var showpostdate = true;
var showpostsummary = true;
var numchars = 120;
var autoestilo = false;
var todoespacio = true;
var todolist = true;
var tododesplaza = true;
var todovelocidad = 2;
var todoaltura = 200;
</script>
<script src="http://direcciondetublog.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Explicación del uso de las variables:

numpost = valor entero (Número de post que quieren visualizar). Valor máximo: 25
showpostdate = true (Muestra la fecha de publicación del post) / false (para ocultar)
showpostsummary = true (Muestra el contenido textual del post) / false (ocultar).
numchars = valor entero (Número de caracteres del texto del post) Máximo valor recomendable: 400
autoestilo = true (el texto del contenido tiene estilo cursiva y su tamaño es del 85%, la fecha aparece al comienzo del primer renglón del texto de contenido).
false (texto plano, tamaño 100%. La fecha aparece en la misma línea del titulo. Puedes usar código CSS para modificar el estilo del “titulo con fecha” y del “texto de contenido”).
todoespacio = true (deja una línea vacía entre títulos.) / false (sin línea de espaciado.)
todolist = true (visualización de los post como listas.) / false (Todo lo contrario.)
tododesplaza = true (activa el desplazamiento del texto de abajo a arriba) / false (texto estático).

Si el valor de tododesplaza es true se aplican las siguientes opciones:

todovelocidad = valor entero (velocidad del desplazamiento del texto). Valor mínimo: 1. Máximo recomendable: 10
todoaltura = valor entero (altura del bloque donde se desplazará el texto. La medida es en pixeles). Valor máximo recomendado: 500.

Si el autoestilo tiene el valor de false usamos el siguiente código para personalizar nuestro estilo.

Lo colocamos en el CSS, por ejemplo, antes de ]]>,</b:skin>

.Todotitulo {
font-weight: bold; //es para darle el efecto de negrita al texto
font-size: 100%; //tamaño del texto en porcentaje
font-style:italic; //efecto de cursiva
color:#ffffff; //color del texto }
.Todotexto {
font-weight: bold;
font-size: 100%;
font-style:italic;
color:#ffffff; }


Puede parecer un poco complicado con tantas variables e instrucciones, aunque en mi caso no he modificado nada más que el "var altura" y he dejado las demás variables tal cual están en el código, ya que el texto se adapta automáticamente al estilo del blog.

Para añadirle el subir/bajar y podamos hacer que el texto se desplace hacia arriba o hacia abajo, copiaremos después del código que hemos puesto dentro del elemento, estas líneas:

<br/><center><a style="color: rgb(166, 196, 255);" href="javascript:void(0);" onclick="getElementById('todoposts').direction='down';">Bajar</a><span style="padding-left: 30px;"><a style="color: rgb(166, 196, 255);" href="javascript:void(0);" onclick="getElementById('todoposts').direction='up';">Subir</a></span></center>

El color del texto "subir" y "bajar" podemos cambiarlo en "rgb(166,196,255)".
Para añadir un icono con unas flechitas, por ejemplo, sustituimos "subir" y "bajar" por la url de la imagen del icono: <img src="Url_del_icono"/> o podemos dejar texto e imagen juntos.

En este link podéis consultar el manual completo que Wells nos proporciona, y si alguna duda surge, lo mejor es consultar con Wells en Todo-links, estoy segura que cualquier cosa os atenderá encantado.

¡Gracias Wells!

Nota:
El script funciona desde Google Pages, para evitar problemas podéis descargarlo desde mi alojamiento (botón derecho, guardar como...) y subirlo al vuestro.
Si lo hacéis así, el script que bajéis no llevará incluida la publicidad de los autores.

0

Scrollbars en cualquier parte del blog

Las scrollbars son las barras de desplazamiento que habitualmente usamos para hacer scroll (subir y bajar) por una página web, pero que podemos adaptar mediante CSS para usarlas en algunas partes de nuestro blog.

* Scrollbars en todos los widgets del blog *


Cuando añadimos al blog algún elemento (widget) como una lista de links, por ejemplo, que podría hacer demasiado larga la sidebar, un efecto que queda muy bien y al mismo tiempo acorta los contenidos de nuestros widget, son las scrollbars.

Podemos añadirla, a todos los widgets del blog, lo que hará que pongamos lo que pongamos dentro de los elementos, estos siempre tengan la medida que escojamos, o sea, el mismo tamaño para todos los widgets de la plantilla:


Vamos a colocar los scrollbars a todos los widget de nuestro blog y les daremos una altura de 200px. Las barras se pondrán en overflow:auto, lo que quiere decir que se mostrarán automáticamente cuando el contenido del elemento sobrepase los 200px.

Nos situamos en nuestra plantilla -> Edición HTML. Insertamos esta pieza de código en el CSS. Podríamos añadirlo justo debajo de /* Sidebar Content */.
.sidebar .widget{
height:200px;
overflow:auto;
}

* Scrollbars en los widgets de una de las sidebars *


El sitio para colocarlo será donde el anterior, es decir, debajo de /* Sidebar Content */. Localizamos el nombre de nuestras sidebars, normalmente suele ser sidebar una de ellas, la otra será newsidebar, sidebarleft, sidebarrigth...Para el ejemplo vamos a suponer que se llaman "sidebar" y "newsidebar", si queremos colocar las scrollbars en "sidebar" pegaremos esta pieza de código:
#sidebar .widget{
height:200px;
overflow:auto;
}

Si preferimos colocarlas en la otra sidebar "newsidebar" pegaremos esto:
#newsidebar .widget{
height:200px;
overflow:auto;
}

* Scrollbar en un Widget solamente *


Antes de colocar el código para el widget, hemos de localizar en la plantilla el "id" o nombre del elemento al que queremos añadir las scrollbars.
En nuestra plantilla ->Edición HTML sin expandir los elementos veremos algo como esto:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='MIS AMIGOS' type='LinkList'/>
<b:widget id='Archivelist' locked='false' title='' type='ArchiveL'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>

Nos será mucho más fácil localizar el "id" del elemento si antes le hemos puesto título, en este ejemplo le he puesto "MIS AMIGOS" a la lista de links.
Lo que vemos en negrita es la "id" de cada widget.
Imaginemos que vamos a ponerle scrollbars a una de nuestras listas de links "LinkList1". Buscaremos /* Sidebar Content */ y justo debajo pegaremos esta pieza de código (cuando el widget escogido es una lista, hemos de añadir el "ul" :
#LinkList1 ul{
height:200px;
overflow:auto;
}

* Scrollbars en el cuerpo de las entradas *

Para poner las scrollbars en el cuerpo de las entradas del blog, hemos de localizar en el HTML de la plantilla, esto: .post { y justo debajo colocar el código para mostrar las barras:
.post {
height:200px;
overflow:auto;
}


* Scrollbars para una parte del post (ScrollBox o Caja de Texto) *


Insertamos esta pieza de código en el CSS de la plantilla, en la que especificaremos el alto (height) y el ancho (width) de la caja de scroll:
.scrollbox {
height:100px;
width:300px;
overflow:auto;
}

En el editor de entradas escribimos el post normalmente y donde queremos incluir la parte con scrollbars, colocamos esto:
<div class="scrollbox">TEXTO O IMAGEN/ES QUE VAMOS A INCLUIR EN LA CAJA DE SCROLL</div>



¡¡¡Nota!!!
Esta entrada está basada en la plantilla Mínima de Blogger, pero puede aplicarse de igual forma en todas las demás.
Cuando hablo de /* Sidebar Content */, por ejemplo, en algunas plantillas no se llama de esta forma, pero no habrá problema en cualquier otra plantilla, si se colocan los códigos CSS, antes de ]]></b:skin>.

0

Sistema de comentarios sin ventanas popup


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

En Blogger hay dos formas para escoger a la hora de mostrar a nuestras visitas la parte donde pueden comentar. Esto se puede hacer fácilmente en la pestaña de Configuración-comentarios:
En ambos casos, es decir, escojamos Si o No, cuando nuestras visitas pinchen en "comentarios" al pie de las entradas, se abrirá una nueva ventana popup (en el caso de Si) o una nueva página donde comentar (en el caso de No):

* Eligiendo SI:

* Eligiendo NO:


Hoy he visto en Jackbook una forma nada complicada y que además me ha gustado mucho, para conseguir que cuando alguien pinche en nuestros "comentarios" al pie de entrada este link le lleve a la página de etiquetas, o sea, a ver la entrada con sus comentarios expandidos debajo de ella:


Para conseguir esta forma de presentación de los comentarios tendremos que localizar este código en nuestra plantilla, para hacerlo más fácil podemos usar nuestro navegador para localizar el código:

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

Ahora solo tendremos que cambiarlo por este otro:

<a class='comment-link' expr:href='data:post.url + "#comments"' >


NOTA
Los que se defiendan bien con el inglés, notarán que mi explicación difiere algo de la de Jackbook, esto es porque si seguimos al pie de la letra sus instrucciones, los que como yo tengan cambios anteriores en sus "comentarios", los perderían, de esta manera puede aplicarse el "truco" sin miedo a estropear nada de lo modificado anteriormente en esa parte.

Si anteriormente habíamos añadido el tooltip para "comentarios" hemos de contar con ello si no queremos perder el tooltip, así que el código a buscar se verá así (en "DEJA AQUI TU COMENTARIO" estará lo que hayamos puesto en el tooltip):

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='DEJA AQUI TU COMENTARIO'>

Y tendremos que cambiarlo por este:

<a class='comment-link' expr:href='data:post.url + "#comments"' title='DEJA AQUI TU COMENTARIO'>