[+/-] Nuve de etiquetas con movimiento.

Y desde El Escaparate de Rosa nos llega un fantástico widget, que sirve nada mas y nada menos que para colocar nuestras etiquetas de una forma muy peculiar.

Se trata de unas lineas de código que toman las etiquetas de nuestro blog y las anima con un efecto de giro. Estos son los pasos a seguir para añadirlo:

[1]Primero entra en Edición de HTML entras ahi y pulsas la opción Expandir plantilla de artilugios
[2]Despues buscas(Ctrl + F) </b:widget>, y despues de esa linea colocas este código:

+/- Mostrar Código

<b:widget id='Label3' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "ANCHO", "ALTO", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xff0000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='18'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Rojo: Ancho y Alto, de la nuve(Pixéles o Porcentaje).
Azul: Color de fondo.
Verde: Color y tamaño de texto.

[3]Una vez modificado el código, haces clic en guardar.

[4]Entras a la pestaña Diseño y mueves la nube de etiquetas a donde quieras

[+/-] Fijar un post en el blog, sin fecha

Aqui les tengo este widget bastante bueno, surge de parte de un lector, que necesitaba fijar un post en la página principal sin tener que adelantar la fecha, pues aquí están los pasos a seguir.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[1]Añadimos un gadget HTML/Javascript con el siguiente código:

+/- Mostrar Código

<h3 class="post-title entry-title">
<a href="http://URL_DEL_POST">TITULO_DEL_POST</a>
</h3>
<div class="postedby">
<div class="post-status">
<span class="post-author vcard">
Publicado por
<span class="fn">AQUI_QUIEN_LO_PUBLICA</span>
</span>
<span class="post-timestamp">
en
<a class="timestamp-link" href="http://URL_DEL_POST" rel="bookmark" title="permanent link"><abbr class="published"</abbr></a>
</span>.

      
<span class="date-header">FECHA_A_MOSTRAR</span>
</div>
<span class="post-comment-link">
<a class="comment-link" href="http://URL_DEL_POST#comments">FRASE_PARA_LOS_COMENTARIOS_DE_TU_BLOG:" y tu que opinas?"</a>
</span>
</div>

**SI QUIERES MOSTRAR ETIQUETAS AÑADE ESTO
<span class="post-labels">
Etiquetas:
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
</span>
**HASTA AQUI LAS ETIQUETAS

<div class="post-body entry-content">
<p>AQUI VA EL POST, O LA PARTE DE EL A MOSTRAR</p>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-backlinks post-comment-link">
</span>

[2]Ya solo hacemos clic en guardar

[Modificaciones]:

Rojo: Esto se modifica, según tu blog, o la entrada
Azul: Este texto se elimina.

[+/-] 5 puntos a tomar para crear tu logo

Crear un logotipo o un icono para tu web, no es tarea difícil, solo tienes que tener imaginación y una idea de lo que vas a hacer.

Y aquí te tengo 5 puntos a tomar en cuenta para crear un logo agradable a la vista.

[1] El logo de tu web no debe tener demasiados colores, no es vistoso un logo con 10 colores diferentes ¿o sí?.

[2] Si tienes en mente un logo con imagen y texto, la imagen no debe ser mas de tres veces el tamaño del texto(altura).

[3] Debes pensar para que fin estará dirigido, ¿cómo saberlo? Piensa en todas las partes en la que aparecerá. Cual de estas crees que será la mas productiva para tu web. No fue difícil ¿o sí?.

[4] Créalo para que este se vea bien en el fin mas productivo, para tu web.

[5] No debe ser muy grande, recuerda que lo van a utilizar en banners, si lo encoges perderá claridad al mostrarse.

[+/-] Escribir en pantalla con CSS

Si quieres escribir en pantalla, lo mismo pero en todas las páginas que estén vinculadas a una hoja de estilos, algo así como una plantilla o una variable en PHP o ASP, C++, o en fin...

[1]Lo que tienes que agregar es

un {X}:after
en vez {X}, escribiremos algo así como una clase: .footer, una id: #footer, o una etiqueta HTML: div, p. Estas servirán para llamar el contenido. Despues de haber escrito eso agregamos el contenido:

  p:after{
    content: 'un texto';
  } 

[2] Y para extraer el contenido, llamaremos el contenido de la siguiente manera:

<p/>

o si es con una clase solo agregamos el class="(clase)" dentro de la etiqueta, es decir de la siguiente manera:

<p class='CLASE'/>

Pero si es con una id solo agregamos el id="id" dentro de la etiqueta, es decir de la siguiente manera:

<p id='ID'/>

[+/-] Ampliar imágenes con mouse y Javascript

Un efecto bastante útil para aquellos donde el espacio es muy reducido o quieren aprovechar el espacio al máximo. Puedes hacer que al paso del mouse se abra otra imagen o cambie de tamaño, también se puede que al hacer un clic se amplíe o cambie de imagen y al hacer dos clics se reduzca o cambie por la imagen inicial.

Puedes usarlo como te des a entender incluso puede ser un menú, con dos imágenes y unos links, CSS y queda el menú, es un decir. puede ser lo que creas mejor para tu sitio.

[1] Solo añade el código donde lo quieras utilizar. Algunos ejemplos con sus respectivos códigos.

Con un clic, aumenta de tamaño y con dos se reduce.

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/"
width="50" 
onclick="javascript:this.height=100;this.width=100" 
ondblclick="javascript:this.width=50;this.height=50"/> 

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.

Al pasar el mouse se agranda la imagen

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/" 
width="20" 
onmouseover="javascript:this.height=49;this.width=49" 
onmouseout="javascript:this.width=20;this.height=20"/>

El texto en color:
rojo es la url de la imagen.
azul es el ancho y alto de la imagen reducida.
verde es el ancho y alto de la imagen original.

Al pasar el mouse se abre otra imagen. Que tal puedes ver el mini choche, es solar y a solo 13 Euros Increible!

<img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe" 
onmouseover="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-PGoWNKbZ9GpPQAwK6grSQ5Q6JNjNZbUVJVRN3WiaIa7_mwyDKt8z1OoVNAVx67BTOxYm5J88NdjfEplazt0mPOuxPLliwYd34dQ33rd3DL7v_Ix0OPMVjrYhL4vLnDWVmVDVpMf5FqT/s400/mini-coche-solar.exe';" 
onmouseout="javascript:this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigWQ8tZS4EXiPcL29apxXoZAxosbdNXdqgLVYTSH8kkbj15rex8WAHMFSmvsOIJNCE3M0nB6c6urFCvPLdkHiKM640XvekyWk3VfmFKL4Q8Mjqp2yinDWAN5KVNQ8BTeX9O76T3AtwGqjC/s400/capricornio.exe';"/>

El texto en color:
rojo es la url de la primer imagen.
azul es la url de la segunda imagen.

/!\ Las imágenes que estoy utilizando estan alojadas en blogger, pero puedes alojarlas donde quieras. Y de cualquier tamaño.

[+/-] Botón para regresar

Con estas lineas de código podrás hacer que el usuario, al hacer click se devuelva a la página anterior, por ejemplo, haces un blog y en el linkeas otro, al entrar al otro si tienes este botón se regresará al original o a la página que estaba viendo antes de hacer click.

Se trata de

un explorador de historial(no lo lee), unicamente toma la página mas reciente(o antes de la presente) y la linkea. Así de simple. Ejemplo:

Ejemplo

Para obtener el mismo efecto necesitas copiar y pegar el código donde lo necesites.

El código para el botón es el siguiente:

<input type="button" value="Volver" onclick="history.back()"><br/>

El código para el link es el siguiente:

<a style="cursor:pointer; cursor:hand;" onclick="history.back()">Volver</a>