Adornar el pie del post (post footer)

En el pie de la entrada es donde vemos el nombre del autor, la hora de publicación,los comentarios..., podemos ponerle una imagen de fondo para mejorar su estética y, a la vez, para evitar que se confunda con el texto del post.

Entradas expandibles en la página principal

Hace tiempo habíamos visto la forma de lograr que, en las páginas de etiquetas se mostrasen solamente los títulos de las entradas, permitiendo que al pinchar sobre ellas se viesen completas.

Han sido varias personas las que me han preguntado sobre la forma de hacer esto mismo, pero en la página principal.
Esto lo he conseguido con una ligera modificación del código en el "truco" original, incluso pueden mostrarse sin problemas en ambas páginas al mismo tiempo.

Entradas expandibles con footer incluido

Después de explicar como aplicar en el blog la forma de mostrar las entradas en expandible, tanto en las páginas de etiquetas como en la página principal del blog, algunas os habéis interesado por la forma de mostrar al expandir los títulos, además de la entrada completa, también el post-footer.

Antes de nada os recomiendo encarecidamente que guardeis una copia de vuestra plantilla en el PC, pues podrían complicarse las cosas si por error colocamos el código en mal lugar.

Títulos expandibles en los post de las etiquetas

Como consigo que al pinchar sobre una de mis pestañas, se vea solamente la lista del título de las entradas y que una vez se pinche sobre uno de los títulos, este se expanda para mostrar la entrada completa.
Para poder hacer esto, antes es imprescindible tener etiquetados nuestros posts, si no sabéis como hacerlo, podéis consultar en esta entrada anterior como etiquetar vuestras entradas.
[1] Nos descargamos el script que necesitamos para hacer funcionar el efecto, lo descomprimimos y lo subimos a un alojamiento adecuado para obtener su url.
[2] Vamos a Edición de HTML de nuestro panel y marcamos la opción "Expandir las plantillas de artilugios" colocamos la url del script en este código y de esta manera que veis, antes de </head>:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>
<script src="URL_DEL_SCRIPT" type="text/javascript">
</script>

[3] Buscamos la parte de este código que se encuentra escrito en color negro, y añadimos la parte del código que está escrita en rojo, colocada tal cual lo veis aquí:

<b:includable id='PeekABooPost' var='post'>

<div class='post uncustomized-post-template'>

<table><tr><td width='40px'>

<a expr:onclick='&quot;javascript:toggleIt(\&quot;&quot; + data:post.id + &quot;\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>

<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>

<div class='post-body' expr:id='data:post.id' style='display:none'>

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

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

</b:includable>

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:if cond='data:blog.pageType != "static_page"'>

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

<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

<b:else/>

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

</b:if>

<b:else/>

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

</b:if>

<b:else/>

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

</b:if>

Algunas visitas me han comentado que su código no es igual al del truco y que no han podido hacerlo. La diferencia, en casi todos los casos, estaba en que no habían ocultado o eliminado la tabla que sale en las páginas de etiquetas y que dice algo así como "ver más entradas con esta etiqueta". El código de esa tabla es este:

<b:include data='top' name='status-message'/>
<data:adStart/>

La solución, sino queréis quitar u ocultar esa tabla, es colocar el código para los post expandibles, ignorando esa parte, es decir, cuando llegamos a ella, seguimos hacia abajo buscando la parte que necesitamos para colocar el código, y listo.

Recomendar a un amigo

Quieres que tus visitantes o tu mismo puedan recomendar tu blog a sus amigos enviando el enlace del blog mediante un formulario?
Con este sencillo script puedes hacerlo fácilmente ( lo he probado y funciona bien):

<form name="eMailer">
ENVÍA ESTA PÁGINA A UN AMIGO
<br>
Indica su e-mail:
<br>
<input type="text" name="address" size="25">
<br>
<input type="button" value="Send this URL" onClick="mailThisUrl();">
</form>
<script language="JavaScript1.2">
// (C) 2000 www.CodeLifter.com
// Este y otros muchos javascripts
// los encontraras en MundoJavascript.com
var good;
function checkEmailAddress(field) {
// the following expression must be all on one line...
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){
good = true
} else {
alert('Por favor introduce un e-mail valido')
field.focus()
field.select()
good = false
}
}
u = window.location;
m = "Pienso que te puede interesar esta página...";
function mailThisUrl(){
good = false
checkEmailAddress(document.eMailer.address)
if (good){
// the following expression must be all on one line...
window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;
}
}
</script>

Rosa in memoriam

Efecto para links

Cuando pasas el puntero sobre cualquier link del blog este se agranda al tamaño que tu decidas, además se verán de un bonito color rojo (para los títulos de las entradas también vale) puedes comprobar el efecto añadiendo el siguiente código. En el código el tamaño de las letras está en "24" y coloca el código en la plantilla-HTML, justo antes de ]]></b:skin>
Código:

<style fprolloverstyle>a:hover {color: #FF0000; font-size: 24pt; font-weight: bold}</style>

¡Qué te diviertas!

Rosa in memoriam

Ranking 5 estrellas en Blogalaxia

Antes de poner las estrellitas en tu blog has de agregar tu blog en Blogalaxia.
Una vez estes inscrito copias este código:

<iframe
expr:src='"http://rank.blogalaxia.com/pbrate.php?color=ffffff&amp;url=" + data:post.url' frameborder='0' height='15' marginheight='0'
marginwidth='0' scrolling='no' style='margin:0; padding:0' width='70'></iframe>

Una vez copiado, localizas esta parte del código en tu plantilla HTML-expansión de artilugios, y copias el código de arriba justo después:

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

Rosa in memoriam

Insertar líneas en las entradas

Puedes insertar una línea en tu blog para separar lo que quieras logrando un bonito efecto, tan solo has de usar este código: <hr> y obtendrás tu línea:

---

Si quieres cambiar su color o hacerla más ancha:
<hr color="green" size=7>
y la verás así:

---

Si no le indicas lo contrario la línea se ajustará ella solita al tamaño del post o del espacio donde la publiques, vamos a hacerla más pequeñita :
<hr color="orange" size=3 width="190" >

---

Si pones dos <hr> seguidos consigues un efecto de doble línea muy bonito:

---

---

Otra línea fácil de conseguir y que queda muy bien:

<hr style="border: medium dotted; color: #666666;" />

---

Y otra:

<hr style="border: medium dashed; color: yellow;" />

---

También podemos emplear un "div" para conseguir una línea de separación simple y bonita:

<div style="border-top: 1px dashed #000; height: 20px; margin-top: 20px;">
</div>

Rosa in memoriam

Tablas con bordes originales

Habla con bordes punteados.

Código:

<table style="BORDER: red 6pt dotted" width="200" border="0"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /></td></tr></tbody></table>

Resultado:

TEXTO

Tabla con borde de rayas.

Código:

<table style="BORDER: blue 6pt dashed" border="0" width="200"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /> </td></tr></tbody></table>

Resultado:

TEXTO

Tabla con doble borde.

Código:

<div align="center"><br /><br /><table style="BORDER: green 4.5pt double; WIDTH: 170.8pt; HEIGHT: 134.8pt" border="0"><br /><br /><tbody><tr><td> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /></td></tr></tbody></table> <br /><br /><br /><br /></div><br /><br />

 Resultado:

TEXTO

Tabla "cuadro"

Código:

<br /><table cellspacing="5" width="200" align="left" border="15"><br /><br /><tbody><tr><br /><br /><td valign="top"> <br /><br /><br /><br />TEXTO <br /><br /><br /><br /></td></tr></tbody></table><br /><br />

Resultado:

TEXTO

Se pueden modificar en los códigos los colores, posiciones, etc...

Rosa in memoriam

Imprimir página

Quieres que tus visitantes puedan tener la opción de imprimir tu página.
Es fácil, debes incluir este código donde quieras que aparezca el link o botón:

<a href="javascript:print()">Imprimir página</a>

También puedes hacerlo con un botón:

Código:

<input type="button" value="Imprimir página" onclick="javascript:print()"></input>

Rosa in memoriam

Para que otros nos enlacen

He visto que algunos de mis visitantes han llegado al blog a través de Google buscando el código para colocar en su blog y que otros puedan enlazarlos. Nada más fácil:
1- Antes que nada has de tener la imagen que deseas mostrar, te aconsejo que no sea muy grande pues no a todo el mundo le gusta ponerlas grandes en el blog.
2- Subes la imagen a la red ( ImageShack, por ejemplo)y copias la url de tu imagen.
3- En este código sustituyes "url de tu página" por la dirección de tu blog y "url de tu imagen" por la url que te da ImagesShack.

<a href="url de tu página" target="_blank"><img src="url-de-la-imagen"/></a>
<textarea><a href="url-de-tu-página " target="_blank">
<img src="url-de-la-imagen"/></a></textarea>

Debería quedar así:


<a href="http://elescaparatederosa.blogspot.com" target="_blank"><img src="http://img186.imageshack.us/img186/7551/linkif8.jpg" /></a>

Si queremos variar el alto y ancho de la caja de texto, añadimos rows="5" cols="50" justo después de <textarea, donde rows es el alto y cols el ancho. 

Rosa in memoriam

Botón "Página de Inicio"

Puedes poner en tu blog un botón o link para que tus visitantes si así lo desean puedan usar tu página como "página de inicio" cuando inicien su explorador.

Código para link:

<a onclick="Url= 'http://h-l-t.blogspot.com'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#">Convertir en Pagina de Inicio</a>

Resultado:
Convertir en Pagina de Inicio


Código para botón: 

<a onclick="Url= 'http://h-l-t.blogspot.com'; this.style.behavior='url(#default#homepage)';this.setHomePage(Url);" href="#"><form>
<input onclick="javascript:agregar();" type="button" value="Página de Inicio">
</form>
</a>

Sustituyes mi url por la de tu blog.

Rosa in memoriam 

Ventana con mensaje en texto o imagen

Una ventanita que sale cuando pasas el cursor sobre u texto o una imagen, está bien si quieres dar alguna información adicional o simplemente saludar a tus visitas.

Con texto:

<a href="" onmouseover="alert('TU MENSAJE');return true;"><br /><br />El TEXTO RESALTADO VA AQUI</a><br /><br />

Resultado:

El Escaparate

Con imagen: 

<a href="" onmouseover="alert('TU MENSAJE');return true;"><br /><br /><img src="URL" border="0" /></a><br /><br />

Abrir página en una ventana nueva

Casi todo el mundo que maneja un poco esto de las páginas web sabe de este sencillo "truco" pero siempre habrá alguien que aún no lo sepa, así que yo lo pongo por si sirve de ayuda:

Si tienes un link a otra página en tu blog y quieres que al pinchar sobre él, este se habra en una ventana nueva para que tus visitantes no tengan que salir de la tuya, solo tienes que añadir despues del link "target="_blank" dejando un espacio entre ellos.

Ejemplo: 

<a href="http://NombredetuWeb.com/" target="_blank">Nombre del sitio</a>

Rosa in memoriam

Botón "Volver atrás"

Código:

<input type="button" value="Volver atrás" onclick="history.back()" style="font-family: Verdana; font-size: 10 pt">

Puedes hacer el botón más grande o más pequeño sustituyendo en el código donde dice "font-size:" por el número que quieras (número mayor=botón más grande).

Rosa in memoriam

Menú desplegable o lista

Dos códigos sencillitos para hacer un menú desplegable y una lista. Donde pone ejemplo 1, 2, 3 ponéis lo que queráis.

Código uno:

<select name="select"><option>Ejemplo 1</option><option>Ejemplo 2</option><option>Ejemplo 3</option></select>

Código dos:

<label><input type="radio" name="GrupoOpciones1" value="opción">Ejemplo 1</label><label><input type="radio" name="GrupoOpciones1" value="opción">Ejemplo 2 </label>

Rosa in memoriam

Añadir a favoritos

Algunas veces, navegamos entre páginas buscando cualquier cosa y nos encontramos con sitios webs interesantes a los que más tarde no podemos volver porque se nos ha olvidado la dirección.
Para que eso no le suceda a nuestros visitantes podemos recordarle al navegante que tiene la opción de guardar nuestra url agregandonos a sus favoritos; y una forma muy fácil de hacerlo es mediante un enlace, que al pulsarlo abra el menú de Agregar a Favoritos.
Puede hacerse mediante texto, botón e incluso una imagen que queramos.

Código para texto:

<span style="CURSOR: hand" onclick="window.external.AddFavorite('http://escaparatederosa.blogspot.com','El escaparate de Rosa');"><span>Añadir a favoritos</span></span>

Código para botón:

<span style="CURSOR: hand" onclick="window.external.AddFavorite('http://escaparatederosa.blogspot.com','El escaparate de Rosa');"><br /><br /><span><br /><br /><input onclick="javascript:agregar();" type="button" value="Añadir a favoritos">

Botón de cierre

Con un simple botón damos la posibilidad de cerrar la página, al hacer click sobre él aparece un cartelito que te pregunta si deseas cerrarla (IE).
Código:

<input name="button" type="button" onclick="window.close();" value="Clic para cerrar">

Puedes cambiar "cerrar página" por el texto que quieras mostrar en el botón.
No se si os será útil, pero por si acaso ;-)

Oculta la barra de Blogger

Si no te gusta como queda la barra de Blogger (Navbar) puedes ocultarla con unas líneas de CSS.

El código CSS hay que pegarlo entre las etiquetas head en la plantilla del blog Edición html

Para evitar confusiones, lo mejor es colocarlo justo al final del CSS de la plantilla, es decir, justo antes de ]]></b:skin>:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Ultima actualización del blog

Si quieres mostrar a tus visitantes cuando has actualizado la página por última vez solo has de copiar este código:

<script language="JavaScript" type="text/javascript">
<!--
// last modified script by Bernhard Friedrich; should work in all browsers
var a;
a=new Date(document.lastModified);
lm_year=a.getYear();
if (lm_year<1000){ //just in case date is delivered with 4 digits
if (lm_year<70){
lm_year=2000+lm_year;
}
else lm_year=1900+lm_year;
} //end workaround
lm_month=a.getMonth()+1;
if (lm_month<10){
lm_month='0'+lm_month;
}
lm_day=a.getDate();
if (lm_day<10){
lm_day='0'+lm_day;
}
document.write("Última actualización " + lm_day+'/'+lm_month+'/'+lm_year);
// -->
</script>

Lo he probado en la sidebar (añadir HTML-Javascript) y queda bien.
Así se verá:

Última actualización 26/03/2007

Rosa in memoriam