Según publica hoy el estupemdo blog de Gema@blog, este ejemplo de aplicación "Rollover", que cambia las imagenes al pasar el cursor.
Primeramente nos situamos en la plantilla edición HTML, y justo antes de -/head-, añadimos este código:
<script language="JavaScript" type="text/javascript">
imagenOn = new Image(300,200);
imagenOn.src = "images/avatar2.gif";
</script>
damos aceptar guardando los cambios y a continuación añadimos esto otro en el sitio que queramos ponerlo, bien sea una emtrada o en el sidebar;
<a href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">
<IMG name="ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">
</a>
solamente sustituimos donde pone -url.imagen-, por la imagen nuestra: Ejemplo
Mostrar entradas
martes, 27 de noviembre de 2007
[+/-] |
Imagen que cambia al pasar el cursor |
domingo, 25 de noviembre de 2007
[+/-] |
Imagen efecto ir arriba |
Para aplicar en nuestro blog una imagen al pie de página con efecto de ir arriba, basta añadir el siguiente código en nuestra plantilla, preferiblemente antes de la etiqueta -/body-, casi al final, así podremos localizarle más facilmente en caso de querer suprimirla:
donde pone url de la imagen aplicar la url de la que os guste
[+/-] |
Mostrar/Ocultar |
Para que se muestre un desplegable en el cual podamos ocultar y al mismo tiempo expandir el texto, vamos a plantilla y localizaremos la etiqueta -/head-,y justo antes pondremos el siguiente texto:
[+/-] |
Seguir leyendo |
A veces vemos en los post de entradas, sobre todo cuando los textos son demasiados largos, la coletilla del "seguir leyendo", para que si lo creemos conveniente pulsemos y sigamos leyendo el resto del texto si nos interesa. Bien pues para aplicarlo basta seguir los siguientes pasos:
Primeramente buscamos la etiqueta -/head-, y a continuación pegamos lo siguiente:
<script src='http://forevergema.googlepages.com/functiontoggleIt.js' type='text/javascript'/>
Segundo paso es buscar en la plantilla, expandiendo artilugios primeramente este otro código:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
y esto mismo los sustituimos por el siguiente código:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGA LEYENDO</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CERRAR NOTA</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Aceptamos y ya está listo. Solamente nos queda en cada entrada o post ir añadiento esto otro para que funcione:
texto
<span id="fullpost">
texto
</span>
lunes, 19 de noviembre de 2007
[+/-] |
Traducir los post al inglés |
Para que aparezca la bandera de traducción al inglés vamos a plantilla edición HTML y después del siguiente código :<p class='post-footer-line post-footer-line-3'>
.
pondremos este otro código justo a continuación:
<a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&lp=es_en"' title='Spanish to English'><img src='http://1.bp.blogspot.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>
[+/-] |
Barras de separación |
Para añadir lineas de separación verticales dentro del blog, añadiremos lo siguiente:
Añadimos en #main-wrapper { el valor
border-left: solid #000000 1px; para conseguir una barra a la izquierda de la sidebar.
border-right: solid #000000 1px; para conseguir una barra a la derecha de la sidebar.
border-right:1px dashed #ffffff; la barra se verá punteada.
Si queremos incluir las entradas dentro de una caja,es decir, barra derecha-barra izquierda-barra arriba-barra abajo, añadimos en #main-wrapper { el valor border: solid #000000 1px;
Para verla punteada: border: dashed #000000 1px;
Si queremos que las esquinas de la caja se vean redondeadas, añadimos:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Lo mismo puede hacerse en la sidebar, añadiendo esos valores en #sidebar-wrapper {
Observaciones:
*Si os parece que el texto de las entradas queda demasiado pegado al borde que acabamos de colocar, añadís el valor padding, por ejemplo asi: padding: 0 10px 0 10px; según se varie el valor de los pixeles (px) variará la distancia del texto al borde.
[+/-] |
Títulos Expandibles en Etiquetas |
Para que las entradas o post aparezcan normales, pero al entrar en -Etiquetas-, los post estén ocultos y que estos mismos se pueden expandir cuando nosotros queramos, tendremos que añadir los siguientes códigos.
Pimero entramos en la plantilla edición HTML, y antes de -/head-, añadimos esto:
<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'></script>
<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>
Seguidamente tendremos que buscar el texto que les muestro escrito en negro y añadir justo encima la parte de código que está en rojo:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</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.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<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:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>
[+/-] |
Drop Caps |
El Drop Caps consiste basicamente en hacer aparecer la primera letra de los Posts en un tamaño mayor al del resto del texto; al estilo revista o periódico.
Para implantarlo basta añadir el siguiente código en tu plantilla -HTML-, antes de :
]]></b:skin>.:
Código:
.dropcaps {
float:left;
color:#1B703A;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}
Luego cada vez que quieras que aparezca el -Drop Caps-, pega el siguiente código en la entrada correspondiente..., solamente cambia la letra -D-, por la que quieras:
<span class="dropcaps">D</span>
domingo, 18 de noviembre de 2007
[+/-] |
Mensaje de Alerta |
Con este truco pueden resaltar algo para que no pase inadvertido. Por gentileza del blog de -Cesar-.Para eso insertar el siguiente código antes de :]]></b:skin>
Código:
/* alerta */
.alert {
background: #fff6bf url(http://img527.imageshack.us/img527/3821/exclamationfs0.png) 15px center no-repeat;
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
para usarlo hay que emplear lo siguiente:
<p class="alert">ACA VA EL MENSAJE</p>
[+/-] |
Imagen transparente |
Convertir una imagen al pasar con el puntero. Gracias al estupando blog de -Cesar-.
-http://webjcp.blogspot.com-
que nos facilita el siguiente código para implantar en nuestra página:
<img
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" alt="imagen transparente"
style="-moz-opacity:0.4;filter:alpha(opacity=40)" src="http://img329.imageshack.us/img329/771/webjcpow1.jpg"/>
Ejemplo:
[+/-] |
Poner una página dentro del Blog |
Para poder mostrar cualquier página dentro de nuestro blog, bien sea en las entradas o en el sidebar, basta añadir el siguiente código donde lo queramos situar:
<iframe src="dirección de página"WIDTH="50%" HEIGHT="300"></iframe>
Ejemplo:
[+/-] |
Enlaces en la misma página |
Por gentileza del blog de César que nos muestra en su estupenda página cómo se ponen los enlaces dentro de la misma página, lo cual es bastante cómodo para pasar de un contenido a otro dentro del mismo blog. El código que nos muestra es el siguiente:
Primero pones el enlace de referencia
<a href="#1">Ir a mi casa</a>
Después el de destino
<a id="1"/>Mi casa</a>
En el ejemplo el num. -1-, que se muestra es un ejemplo, se puede cambiar este número por el que queramos o por cualquier nombre, eso sí siendo el mismo en las dos partes. Lo mismo que -Mi casa-, que pondremos lo que queramos.
sábado, 17 de noviembre de 2007
[+/-] |
Títulos dobles en la sidebar |
Si queremos poner algo diferente dentro del -sidebar-, y que lo que queramos mostrar sean títulos o textos pequeños, y que a la vez se vean dobles, pondremos lo siguiente
en nuestra plantilla dentro de CSS, por ejemplo antes de :]]></b:skin>
Aplicaremos este código :
/*- 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;
}
Después vamos a nuestra plantilla a añadir un elemento HTML-Javascript y aplicaremos esto otro:
<h5>...NUESTRO TITULO...</h5>
<h6>...NUESTRO TITULO...</h6>
y obviamente donde pone -nuestro título-, pondremos lo que queramos, para que se vea doble.Guardamos los cambios y listo.
[+/-] |
Mostrar/Ocultar(+/-) |
Este es una herramienta bastante util a la vez que queda muy bien en cualquier parte del blog, ya que su principal característica es que muestra y oculta, textos, imagenes, links, posts, y cualquier cosa que se nos ocurra y que queramos tener oculto, bien sea por su tamaño o por cualquier otra circunstancia. Para su implantación tenemos qye añadir el siguiente código:
Primeramente añadiremos lo siguiente dentro de la plantilla, en el CSS:
.commenthidden {display:none}
.commentshown {display:inline}
Segundo colocamos este script justo antes de -/head-
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Tercero, donde queramos situar el efecto añadiremos lo siguiente:
<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')">+/- Título</a><br />
<div class="commenthidden" id="UniqueName"></div>
La parte a ocultar hay que ponerla justo antes del -/div-, de la tercera parte.
También podemos poner el título que más nos guste a continuación de los signos +/-.
Asímismo si quisieramos añadir más segmentos dentro de la misma aplicación solamente tendríamos que ir añadiendo la parte de la fase tercera, pero habría que cambiar la parte que dice UNIQUENAME, por otro nombre diferente, por cada módulo que añadamos.