El Blog de J.Guti.: herramientas

Mostrando entradas con la etiqueta herramientas. Mostrar todas las entradas

XHTML y CSS

jueves, 24 de enero de 2008

Recogido de la página de La Blogueria, por medio de la de la Web Scribd,
este manuel de XHTML y CSS

Publicado por Guti en 22:48 0 comentarios

Pulsar para oir post hablado

VideoTutorial

lunes, 21 de enero de 2008

VideoTutotial para instalar plantilla en Blogger

Guia del buen bloguero!

Publicado por Guti en 23:38 0 comentarios

Pulsar para oir post hablado

Una buena manera de enviar un e-mail desde el propio blog es creando un formulario en la misma página web.Este es el código que tendrán que insertar donde quieran situarlo; bien sea en una entrada o en el sidebar.

<form action="mailto:direcciondecorreo@servidor.com" method=post>
<table align="center" border="0"><td align="left" width="100">Nombre:</td><td align="center" width="150"><input name="nombre" maxlength="25" type="text" value=""></td> <tr><td align="left" width="100">Email:
</td><td align="center" width="150"><input name="mail" maxlength="25" type="text" value="">
</td> <tr><td align="left" width="100">Motivo:</td><td align="center" width="150"><input name="motivo" maxlength="25" type="text" value=""></td> <tr><td align="left" width="100"> Mensaje:</td><td><textarea name="mensaje" rows=3 cols=20></textarea></td><tr><td width="100"></td> <td align="right" width="150"><input name="boton" type="submit" value="Enviar">

</td>

</table>

</form>

Con lo que quedaría así para poder introducir los datos personales y
enviar el e-mail.

Publicado por Guti en 22:12 0 comentarios

Pulsar para oir post hablado

Menu expandible

miércoles, 12 de diciembre de 2007

MENU EXPANDIBLE (abrir/cerrar)
Vamos a la plantilla y buscamos la etiqueta -</head>-
y justo antes añadiremos lo siguiente:

Contraer todo | Expandir todo

Código

Contenido:
<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>

Guarda tu plantilla. Ahora, cada vez que quieras usar este script, has de añadir en la entrada o en la sidebar lo siguiente:

Código

Contenido:
<a href="javascript:void(0);" onclick="expandcollapse('AQUI UN NOMBRE PARA CADA ELEMENTO')"> [+/-] ABRIR / CERRAR</a>

<ul id="AQUI UN NOMBRE PARA CADA ELEMENTO" class="texthidden"><li><a href="AQUI EL ENLACE DEL TEXTO O IMAGEN">aqui el texto o la imagen</a></li><li><a href="AQUI EL ENLACE DEL TEXTO O IMAGEN">AQUI EL TEXTO, IMAGEN, MENU DE ENLACES</a></li></ul>

Nota

Contenido:
Y si no quieres una lista de enlaces, sino simplemente un título que expanda el texto cuando clicas en él, elimina las etiquetas <li> y </li>, de manera que el código simplificado queda así:

<a href="javascript:void(0);" onclick="expandcollapse('NOMBRE ELEMENTO')"> [+/-] TITULO</a>

<ul id="NOMBRE ELEMENTO" class="texthidden">AQUI EL TEXTO OCULTO</ul>

Publicado por Guti en 17:30 18 comentarios

Pulsar para oir post hablado

Seguir Leyendo

MOSTRAR LA ENTRADA COMPLETA EN SU PAGINA

Primeramente buscaremos en nuestra plantilla edición HTML-Expandir Plantilla de Artilugios:Las etiquetas:
</b:skin> y </head>

y pegaremos este código

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

<style type='text/css'>

.fullpost {display:inline;}

.summarypost {display:none;}

</style>

<b:else/>

<style type='text/css'>

.fullpost {display:none;}

.summarypost {display:inline;}

</style>

</b:if>

Luego este otro pequeño código lo insertamos en cada entrada que queramos expandir y aplicar el ...Seguir Leyendo.
Esto nos llevará a la página individual de la entrada donde se mostrará completa.
Añadimos el siguiente código:

Para conseguir la URL del POST, basta publicar dicho post y con el botón derecho del ratón en propiedades nos dará la ruta del enlace. Ahora sólo nos falta aplicarlo justo donde dice -URL DEL POST-. Asegurate de que en -Configuración -Archivo tienes habilitadas las páginas de entradas-.

Publicado por Guti en 15:50 1 comentarios

Pulsar para oir post hablado

Tooltip

lunes, 10 de diciembre de 2007

Consiste en aportar información visual extra a los textos, enlaces o palabras que quieras resaltar de una manera especial. Een ellos se pueden resaltar mediante textos o imagenes que aporten una información complementaria.
Para implantarlo buscaremos en nuestra plantilla el siguiente código:]]></b:skin> y añade justo antes el siguiente código:

[+/-]Código



a.tooltip {

position:relative;

color:#000;

text-decoration:none;

}

a.tooltip span {

display: none;

}

a.tooltip:hover span {

display:block;

position:absolute;

top:2em;

left:2em;

width:120px;

border:double #000000;

background-color:silver;

color:#ffffff;

text-align: center;

font-family: Arial;

font-size: 10px;

padding: 5px;

}


Ahora cuando quieras añadir un tooltip con imagen a un enlace presenta esto así:


<a href="URL DEL ENLACE" class="tooltip">TEXTO DEL ENLACE <span><img src="URL DE LA IMAGEN">TEXTO QUE VA DENTRO DEL TOOLTIP</span></a>





y si quieres aplicarlo a una palabra sin que este sea exactamente un enlace aplica esto otro:
<a class="tooltip">AQUI LA PALABRA O FRASE<span><img src="URL DE LA IMAGEN" /></span></a>

en esta parte del código se pueden configurar estas opciones:
top:2em;.......define aquí la posición. Cambia TOP por BOTTOM para situarlo por encima
left:2em;......Cambia LEFT por RIGHT para situarlo a derecha o izquierda
width:120px;.....Define la anchura
border:double #000000; .......Defina el borde y color
background-color:silver; .....Define color de fondo
color:#ffffff; ...............Color , alineación y tipo de fuente

Publicado por Guti en 19:22 0 comentarios

Pulsar para oir post hablado

Pullquote

domingo, 9 de diciembre de 2007

Para escribir una entrada o post y la vez hacer un "pullquote" dentro del mismo texto en un lateral y que se vea el post de una manera diferente o simplemente para resaltar algo que pensemos merece la pena ponerlo de una manera especial, utilizaremos lo que llamamos un PULLQUOTE.
Para llevarlo a cabo utilizaremos el siguiente código que pondremos en la misma entrada donde queramos mostrarlo. El código es el siguiente :

<div style="border: 2px solid blue; padding: 10px; background: #ffffcc none repeat scroll 0% 50%; width: 95%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

<h4>Los podeis hacer del tamaño que querais</h4>

<div style="margin: 10px; background: white none repeat scroll 0% 50%; color: blue; width: 150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; float: right; opacity: 0.2; font-family: Verdana,Arial,Helvetica; font-size: 28px; line-height: 26px; text-align: right;">

Esto es un

<small> pullquote </small>

<strong> Un pullquote es poder hacer<small> un Post </small></strong>

Diferente<strong> para que llame la atención</strong>

</div>

<p>Tan solo un código</p>

Aquí se pone el texto que querais escribir

<p>

<b>y aquí también texto pero resaltado</b>

seguir escribiendo texto.

</p>

</div>

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

Ejemplo de cómo quedaría la entrada :

Los podeis hacer del tamaño que querais

Esto es un
pullquote
Un pullquote es poder hacer un Post
Diferente para que llame la atención

Tan solo un código

Aquí se pone el texto que querais escribir

y aquí también texto pero resaltado
seguir escribiendo texto.

Publicado por Guti en 22:20 0 comentarios

Pulsar para oir post hablado

Subir Scripts

domingo, 2 de diciembre de 2007

A menudo usamos en nuestras aplicaciones y plantillas Script externos, es decir que los archivos no los tenemos nosotros, si no que son otras personas y por lo tanto están en sus archivos.
Nosotros mediante una llamada les copiamos el archivo para que realicen su función en nuestra plantilla.
Esto si bien aligera el peso de nuestra plantilla tiene el inconveniente de que si falla su aplicación a nosotros también nos fallará y no realizará su función.
El Script externo se verá más o menos asi:

<script style="text/javascript" src="http://reinosano.googlepages.com/comentarios.recientes.js"></script>

Por lo tanto lo ideal sería elegir un servidor propio para subirlo.
Aunque hay bastantes servidores para alojar estos archivos, uno recomendable seria
Google Page Creator, que además es gratuito, solamente se necesita una cuenta Gmail.
Una vez creada la cuenta accedemos a sus condiciones y pinchamos en "I'm ready to create my pages",para ir a la página de nuestra cuenta
Una vez allí pinchamos -Back ro site manager- y se abrirá una página nueva, a la derecha veremos
-Site Settings- y debajo -Upload-, es allí donde en -examinar- podemos subir los archivos directamente desde nuestro PC.
Una vez subido el script a nuestro servidor en Google Page pinchamos sobre él con el botón derecho y en propiedades copiamos su dirección, que sera algo así:
http://reinosano.googlepages.com/ultimospost.js

El último paso sería eliminar la dirección original del script y colocar la del nuestro Google Pages, y así de esta manera estaremos usando nuestro propio servidor.

Publicado por Guti en 0:18 0 comentarios

Pulsar para oir post hablado

Generadores

viernes, 30 de noviembre de 2007

Publicado por Guti en 9:34 3 comentarios

Pulsar para oir post hablado

Efecto de agua

Una página interesante que hace el efecto de olas de agua en las imagenes

Add this effect to your own photos

Publicado por Guti en 9:26 0 comentarios

Pulsar para oir post hablado

Editor de Imagenes

jueves, 29 de noviembre de 2007

Para editar imagenes on line, añadir texto a las imagenes sin tener que utilizar photoshop, este editor encontrado en la web cumple perfectamente para pequeños retoques.http://http://www.splashup.com/. Les muestro imagenes de la página:

Una vez en la página se pulsa en la pantalla grande donde dice JUMP RIGHT IN, seguidamente se abre el archivo bien sea desde nuestro PC, de Picassa o Flickr.

Publicado por Guti en 22:33 0 comentarios

Pulsar para oir post hablado

Seguir leyendo

domingo, 25 de noviembre de 2007

Para poder mostrar los textos en las entradas o post y que no se lea el texto completo, sino que una parte permanezca oculto y que se vea cuando nosotros queramos, o lo que es lo mismo el "siga leyendo...", empezaremos por seguir los siguientes pasos:

Contraer todo | Expandir todo

Siga leyendo

Contenido:
primeramente buscaremos -/head-, y seguidamente pondremos este código:
<script src='http://forevergema.googlepages.com/functiontoggleIt.js' type='text/javascript'/>

El segundo paso será buscar este código en la plantilla. Previamente habremos expandido artilugios:
<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;'/> 

</div>

Cómo tercer paso esto último los sustituiremos por este otro código:

Código Seguir leyendo:

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;'/> 

</div>

Aceptamos los cambios y solamente falta aplicar en cada entrada esto otro:
texto

<span id="fullpost">

texto

</span>

Observaciones:

Contenido
Esta última parte se podrá para más comodidad dejarlo fijo en plantilla simplemente yendo a -opciones-formato, y pegarlo en plantilla HTML.
texto

<span id="fullpost">

texto

</span>

Publicado por Guti en 10:09 0 comentarios

Pulsar para oir post hablado

Herramientas

domingo, 4 de noviembre de 2007

Contraer todo | Expandir todo

Expandir/Contraer

Contenido:En el estupendo blog de César (dedicado a trucos, herramientas y toda clase de cosas que tenga que ver con el blog y su entorno, aparte de su estimable ayuda en todo lo concerniente al mismo, he pedido encontrar esta estupenda aplicación para Expandir y/o Contraer, tanto texto cómo imagenes y todo lo que se nos ocurra. El código para su implantación es el siguiente:

Entre la etiqueta -Head-/head-, pondremos lo siguiente;:
<script type="text/javascript" src="http://webjcp.googlepages.com/switchcontent.js" >

</script>

<style type="text/css">

.handcursor{

cursor:hand;

cursor:pointer;

}

</style>

-----Y en añadir un elemento de página, en la sección de -HTML-Javascript-,
añadiremos esto otro:

<div><a href="javascript:bobexample.sweepToggle('contract')">Contraer todo</a> | <a href="javascript:bobexample.sweepToggle('expand')">Expandir todo</a></div>

<h3 id="bobcontent1-title" class="handcursor">TITULO</h3>

<div id="bobcontent1" class="switchgroup1">

Contenido

</div>

<h3 id="bobcontent2-title" class="handcursor">TITULO</h3>

<div id="bobcontent2" class="switchgroup1">

Contenido

</div>

<h3 id="bobcontent3-title" class="handcursor">TITULOS</h3>

<div id="bobcontent3" class="switchgroup1">

Contenido

</div>

<script type="text/javascript">

var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements

bobexample.setStatus('<img src="http://webjcp.googlepages.com/abrir.png"/> ', '<img src="http://webjcp.googlepages.com/cerrar.png"/> ')

bobexample.setColor('darkred', 'black')

bobexample.setPersist(true)

bobexample.collapsePrevious(true) //Only one content open at any given time

bobexample.init()

</script>

Titulo

Contenido:

Titulo

Contenido:

Titulo

Contenido:

Publicado por Guti en 23:56 29 comentarios

Pulsar para oir post hablado

Nombre:
Email:
Motivo:
Mensaje:

jueves, 24 de enero de 2008

lunes, 21 de enero de 2008

sábado, 22 de diciembre de 2007

miércoles, 12 de diciembre de 2007

Código

Código

Nota

lunes, 10 de diciembre de 2007

domingo, 9 de diciembre de 2007

Los podeis hacer del tamaño que querais

domingo, 2 de diciembre de 2007

viernes, 30 de noviembre de 2007

jueves, 29 de noviembre de 2007

domingo, 25 de noviembre de 2007

Siga leyendo

Código Seguir leyendo:

Observaciones:

domingo, 4 de noviembre de 2007

Expandir/Contraer

Titulo

Titulo

Titulo

About Me

scroll

Menus

Accesorios

Plantillas

herramientas

Trucos Blog

Utilidades

Curiosidades

Ultimos Post-Rosa

Link

Link

Link

Mostrar/ocultar

Labels

Blog Archive

Enlazan este blog

Desplegable

Calendario

Scroll

Ultimos Post-Gema

El Blog de J.Guti-Ult.Posts

El Blog de J.Guti.

Links

Ayuda Blogs

Links

Suscribirse a