ElHackerZ

Menu minislide

Un sencillo menú con CSS y Javascript que podéis ver con el nombre de "menú uno (minislide)" en mi blog de pruebas.

[1] Necesitaremos descargar el archivo javascript a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.
Lo colocamos entonces antes del </head> de nuestra plantilla de esta manera:

<script src='URL_DEL_ARCHIVO_JAVASCRIPT' type='text/javascript'/>

[2] Incluiremos ahora el código CSS necesario antes del ]]></b:skin> de nuestra plantilla:

/*MENU UNO (Minislide)
Stephen Clark
www.sgclark.com/sandbox/minislide
----------------------------------------------------------------------- */

#nav {padding:10px 0px 0px 0; margin: 0 0 20px 0; float:left; width:100%; border-bottom:1px solid #888888;}

#minislide {
        float: left;
        margin: 0;
        padding: 0px 10px 0px 10px;
        position:relative;
        z-index:2;
        }

#minislide li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
        text-transform:uppercase;
        }

#minislide a:link, #minislide a:visited {
        float: left;
        line-height: 19px;
        font-weight: bold;
        margin: 0 10px 0px 10px;
        text-decoration: none;
        color: #888888;
        }

#minislide a.active:link, #minislide a.active:visited {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #888888;
        }

#minislide a:hover {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #CC0000;
        }

#animated-tab {
        position: absolute;
        z-index: 1;
        /*font-size: 85%;*/
        line-height: 19px;
        padding-bottom: 1px;
        border-bottom: 5px solid #888888;
       width:100%;
        }

br
        {
        clear:both;
        }

[3] Ya solo nos queda colocar el código necesario para armar los enlaces del menú, lo pondremos dentro de un gadget HTMLJavascript debajo de la cabecera o en el crosscol por ejemplo:

<div id="nav">
<ul id="minislide">
<li><a href="#">Inicio</a></li>
<li><a href="#" title="Mi perfil en Blogger">Perfil</a></li>
<li><a href="#" title="Suscribe Feed">Feed</a></li>
<li><a href="mailto:#" title="Envia un email">Contacto</a></li>
<li><a href="search/label/?max-results=999" title="Ver todas las entradas">Ver todas las entradas</a></li>
</li></ul></div>

¡ Feliz 2.009 !

TARTAN Maker

Seguramente esta clase de páginas no te llamen la atención, pero para los diseñadores de plantillas resulta de gran utilidad.
Se llama Tartan Maker y es un generador de imágenes todas ellas a cuadritos tipo textil.
Podemos añadir hasta 10 colores diferentes y escoger la imagen en diagonal o horizontal, así como visualizar el efecto a pantalla completa y descargar la imagen en formato .png
¿Más cosas? dispone de una galería donde ver las imágenes que otras visitas fueron creando con enlace a sus páginas para ver el resultado.

Free Icons

Los iconos forman parte de cualquier plantilla, suelen ser enlaces directos o para ofrecer una información ampliada.
Free icons es sitio obligado si te gusta que a tu blog no le falte ni un detalle, encontraremos una bonita galería de iconos que aportarán un toque alegre y diferente.

Un click para Suecia

Estoy segura de que muchos de vosotros ya habéis leído la noticia en algún otro blog ya que, por suerte, está siendo bastante difundida, aún así he decidido publicar esta entrada ya que cuantos más seamos, más conseguiremos.

Somos un grupo de 3 estudiantes bahienses de la Universidad Nacional del Sur: Nicolás Álvarez, Ricardo Matías Ferro Moreno y Nicolás Komañski. En abril del año que viene (2009), junto con nuestro coach Martín Darío Safe, nos vamos a Estocolmo, Suecia .

¿Cómo?

El 15 de Noviembre de este año participamos en la Instancia Regional de la competencia ACM ICPC (International Collegiate Programming Contest) y salimos 3ros de la Región Sur de Sudamérica (3ros en Argentina, 4tos en toda Sudamérica). Con esto, clasificamos para la instancia mundial.

Pueden ver acá los resultados de la competencia para la región Sudamérica Sur. Nosotros somos el equipo “Bahía”.

Esta competencia consiste en resolver problemas de tipo algorítmicos-matemáticos. Cada grupo de 3 participantes cuenta con una computadora y 5 horas para resolver una cantidad de problemas que varía entre 8 y 11.

Para más información sobre la competencia, dejo un par de links:

¿Por qué estamos contando todo esto?

No creamos este blog para molestar a la gente con nuestra historia por el simple motivo de querer contarla. El problema es que, al ser invitados a la instancia Mundial, la organización de la competencia nos paga todos los gastos relacionados con la estadía en Estocolmo, pero no nos cubre los pasajes.

El costo de los pasajes es aproximadamente 6000 USD (dólares).

Creamos este blog con el objetivo de difundir nuestra situación, para poder darnos a conocer y ver si eso ayuda a conseguir alguna empresa, institución, etc, que nos auspicie.

En su blog han colocado anuncios de publicidad Adsense con la esperanza de que las visitas pinchen en ellos y conseguir así parte del dinero para costearse los pasajes, si os parece podríais visitarles y hacer un par de clicks en los anuncios, no es demasiado esfuerzo por una buena causa ¿no os parece?

¡Un click para Suecia!

Rotador de imágenes

Es una forma de mostrar diferentes imágenes cambiantes con un efecto de transición entre imagen e imagen muy lindo.
Puede utilizarse para mostrar cualquier tipo de imágenes teniendo en cuenta que todas han de tener las mismas medidas.
Es ideal para usarlo con banners o botones de otras web, ya que el código incluye la posibilidad de incluir un vínculo o enlace en cada imagen.
Podéis ver una demostración en la sidebar de mi blog de pruebas, en forma de mini-banners con enlace a cada página.

[1] Nos descargamos el archivo xfade2.js a nuestro PC y lo subimos a un alojamiento de archivos.
Una vez obtenida la url del archivo, lo colocamos de esta manera antes del </head> de nuestra plantilla:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

[2] A continuación colocamos unas líneas de CSS en la plantilla justo antes de ]]></b:skin>:

/* ROTADOR DE IMAGENES
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 2px solid #CC0000;
overflow: hidden;
margin: 10px ;
padding:2px;
position: relative;
width: 200px;
height: 50px;
}
#rotator img
{
border: 0;
width: 200px;
height: 50px;
}

Donde dice: width: 200px; y height:50px; colocamos los valores del ancho (width) y alto (height) de las imágenes que vayamos a usar.

[3] Ya solo nos queda incluir el código necesario en un gadget HTMLJavascript para mostrar el rotador de imágenes e incluir los cambios necesarios :

<div id="rotator">
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>

</div>

En "alt" y "title" colocaremos un texto explicativo, por ejemplo el título de la web a la que enlaza la imagen, así los navegadores mostrarán un cartelito (tooltip) con ese texto al poner el ratón sobre la imagen.

Yanku-template

En Yanku-template no hay un gran surtido de plantillas pero son lindas y de libre descarga.

Añadir un menú en cualquier parte de la cabecera.

Hay plantillas a las que añadir un menú transforma completamente la estética, les resta protagonismo a la cabecera o simplemente no encontramos un menú discreto y acorde con la plantilla. pero no por ello tenemos que prescindir de un menú.

En estos casos bastaría con añadir un menú tipo texto y ubicarlo en la cabecera de nuestro blog.

Nos situamos en la plantilla sin expandir y buscamos:

<div id='header-wrapper'>
_ _ _ _más código de widget_ _ _ _
</div>

Justo después añadimos un bloque conteniendo un div para albergar el menú.

<div style='position:relative;left:590px;bottom:80px;'>
<a href='url-de-la-página'>Home</a> | <a href='url-de-la-página'> Posts RSS</a> | <a href='url-de-la-página'>Comments RSS |</a>
</div>

A ese bloque le estamos añadiendo la ubicación.
position:relative;left:590px; (podemos aumentar o disminuir para ubicarlo a izquierda o derecha)

bottom:80px; (le otorgamos la altura)

Añadí Home para ir a inicio, Posts RSS para suscribirse a los post y Comments RSS para suscribirse a los comentarios pero podría ser cualquier otro enlace.

Perfil, contacto, una entrada especifica del blog o enlaces externos.

¡Un click para Suecia!

En el blog de J.Miur me entero de una noticia que me deja perpleja como seguramente te vas a quedar cuando la leas.
Se trata de la transcripción de un mail recibido y queda corroborado por la nota que aparece en la web que es la siguiente.

¡Hola!

Somos un grupo de 3 estudiantes bahienses de la Universidad Nacional del Sur: Nicolás Álvarez, Ricardo Matías Ferro Moreno y Nicolás Komañski. En abril del año que viene (2009), junto con nuestro coach Martín Darío Safe, nos vamos a Estocolmo, Suecia .

¿Cómo?

El 15 de Noviembre de este año participamos en la Instancia Regional de la competencia ACM ICPC (International Collegiate Programming Contest) y salimos 3ros de la Región Sur de Sudamérica (4tos en toda Sudamérica). Con esto, clasificamos para la instancia mundial.

Pueden ver acá los resultados de la competencia para la región Sudamérica Sur. Nosotros somos el equipo “Bahía”.

Esta competencia consiste en resolver problemas de tipo algorítmicos-matemáticos. Cada grupo de 3 participantes cuenta con una computadora y 5 horas para resolver una cantidad de problemas que varía entre 8 y 11.

Para más información sobre la competencia, dejo un par de links:

¿Por qué estamos contando todo esto?

No creamos este blog para molestar a la gente con nuestra historia por el simple motivo de querer contarla. El problema es que, al ser invitados a la instancia Mundial, la organización de la competencia nos paga todos los gastos relacionados con la estadía en Estocolmo, pero no nos cubre los pasajes.

El costo de los pasajes es aproximadamente 6000 USD (dólares).

Creamos este blog con el objetivo de difundir nuestra situación, para poder darnos a conocer y ver si eso ayuda a conseguir alguna empresa, institución, etc, que nos auspicie.

A medida que vaya progresando nuestra campaña, iremos posteando lo que va pasando.

Agradecemos a todos la ayuda recibida. Con solo entrar al blog, ya nos están ayudando.

Nicolás Álvarez, Ricardo Ferro Moreno, Nicolás Komañski y Martín Safe

Hablar de las obligaciones de los estados como dice J.Miur es algo inútil, sin embargo yo me veo en la obligación moral de divulgar esta noticia, quizás con eso y unos click cada día desaparezca el sentimiento de impotencia, esa sensación de querer y no poder que algunos no deben conocer.

Han creado un blog donde añadieron publicidad de Adsense y sólo piden un click para recaudar fondos y costearse con ello los pasajes.
Con la cantidad de click que hacemos a lo largo del día ¿se los vamos a negar a ellos?

Aquí puedes ayudarles. ¡Un click para Suecia!

Fecha en todas las entradas

En Blogger cuando se publica más de una entrada el mismo día, solo la última publicada mostrará la fecha, en las demás el espacio que debería ocupar la fecha, se mostrará vacío.

Usando javascript podemos hacer que todas las entradas publicadas un mismo día, muestren la fecha correspondiente.

[1] Desde "edición html" localizamos esta parte del código de la plantilla con "la plantilla de artilugios expandida":

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

[2] Sustituimos ese código anterior por este otro:

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = '<data:post.dateHeader/>';</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

¿Necesitas ampliar esta información?: Vagabundia

Vimeo - Aloja y comparte vídeos

Vimeo es un sitio que permite alojar y compartir vídeos en internet y posee una sencilla y cuidada imagen que estéticamente se adapta bien cualquier página web.
Al contrario de YouTube que permite añadir marcos de diferentes colores Vimeo no añade marcos quizás por eso me ha gustado tanto porque la interfaz se muestra amplia y da la sensación que toda la atención la atrae el vídeo.
Otro detalle importante de Vimeo es que no transforma los vídeos a flash sino que respeta su formato original y el tiempo de carga es muy inferior a otros servidos de vídeo.
Dispone de un espacio de ayuda y diferentes vídeos a modo de tutorial sustituyendo con ello una carencia muy importante y es la posibilidad de traducir la página en otros idiomas.
Podemos subir vídeos de 500MB semanales, con una resolución de hasta 1280x720 en formatos asf, asx, avi, divx, dv, dvx, m4v, mov, mp4, mpeg, mpg, qt, wmv, 3g2, 3gp, 3ivx and 3vx. Creo que vale la pena probarlo.

Aquí una muestra de un vídeo creado por Matthew

Si hacemos click donde indica la flecha los podemos ver a pantalla completa y comprobar la calidad de imagen.

Lo siento, lo siento si soy cansina con los temas navideños pero es que este vídeo lo vi precioso....

¡Felices Fiestas!

* •.* Felices Fiestas .* •*

Barra anuncio fija sobre el pie del blog

Podría usarse para anunciar o destacar cualquier cosa que necesitemos ante nuestras visitas.

En este ejemplo colocaremos un mensaje animando a suscribirse al feed, que se mostrará sobre la parte inferior del blog y permanecerá fijo aun cuando hagamos scroll, pero que tendrá la posibilidad de ocultarse con un simple click.

[1] Una vez logueados en nuestro panel de Blogger, nos situamos en la pestaña de "Edición Html" y localizamos dentro del código (sin expandir artilugios) la etiqueta: ]]></b:skin> y justo sobre ella, pegamos este código CSS:

#ftr_bar {
background:#166D80;
border-top: 3px solid #69A7B4;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: auto;
position: fixed;
}
#ftr_bar .left {
float: left;
text-align: center;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #fff;
width:92%;
}
#ftr_bar .right {
float: right;
text-align: center;
width: 30px;
}
#left_bar a {
background: url(http://img440.imageshack.us/img440/4518/icorsstransthumb1ea9.png) no-repeat;
text-decoration: none;
color: #fff;
padding:5px 0px 5px 30px;
}
#left_bar a:hover {
text-decoration: underline;
color: #fff;
}

[2] Algo más abajo veremos la etiqueta </head> justo antes de esta, colocamos este script:

<script type='text/javascript'>
//<![CDATA[
var ftr_arr = new Array();
var ftr_clear = new Array();
function ftrFloat(ftr) {
ftr_arr[ftr_arr.length] = this;
var ftrpointer = eval(ftr_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ftrsrc = document.all? document.all[ftr] : document.getElementById(ftr);
this.ftrsrc.height = this.ftrsrc.offsetHeight;
this.ftrheight = this.cmode.clientHeight;
this.ftroffset = ftrGetOffsetY(ftr_arr[ftrpointer]);
var ftrbar = 'ftr_clear['+ftrpointer+'] = setInterval("ftrFloatInit(ftr_arr['+ftrpointer+'])",1);';
ftrbar = ftrbar;
eval(ftrbar);
}

function ftrGetOffsetY(ftr) {
var ftrTotOffset = parseInt(ftr.mtasrc.offsetTop);
var parentOffset = ftr.ftrsrc.offsetParent;
while ( parentOffset != null ) {
ftrTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ftrTotOffset;
}
function ftrFloatInit(ftr) {
ftr.pagetop = ftr.cmode.scrollTop;
ftr.ftrsrc.style.top = ftr.pagetop - ftr.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("ftr_bar").style.visibility = "hidden";
}
//]]>

</script>

[3] Al final prácticamente del código de la plantilla, veremos la etiqueta </body> y justo sobre ella pegaremos este código:

<div id='ftr_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/blogspot/hnBy' target='_blank'>Suscribete y recibe lo ultimo del Escaparate</a></span></div>
<span class='right' onmouseout='self.status=''' onmouseover='self.status='elescaparatederosa.blogspot.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://img229.imageshack.us/img229/1809/closethumb1zd4.png' style='cursor:hand;cursor:pointer;'/></span>
</div>

Modificaciones:
En el paso [1] podemos cambiar el color de fondo de la barra y el color y anchura del borde:

#ftr_bar {
background:#166D80; [Color de fondo aquí]
border-top: 3px solid #69A7B4; [Color y anchura del borde superior de la barra]

Así como la imagen del icono de rss, sustituyendo la url por la de el nuevo icono:

#left_bar a {
background: url(http://img440.imageshack.us/img440/4518/icorsstransthumb1ea9.png)

En el paso [3] cambiamos la url del feed que en el ejemplo es la de mi blog (en color naranja), por la del blog donde vamos a colocar la barra; y el texto (destacado en verde) por el que queramos mostrar.
La url destacada en azul es la del icono de cierre, también puede cambiarse por la de nuestro propio icono.

Podéis ver el resultado en este blog de pruebas.

Cumulus - Blogumus (etiquetas en movimiento)

La primera vez que vi esta nube en WordPress pensé que el efecto era muy lindo y también que era una pena no poder añadirla a Blogger.
Poco después vi las primeras explicaciones de J.Miur en Vagabundia sobre Cumulus, un plugin para WordPress que genera un archivo Flash y permite crear esta atractiva nube de etiquetas.
Rosa también explicaba como hacerlo siguiendo las explicaciones de Blogger Buster donde se le llama a la nube Blogumus.
Le siguió Olomán y seguramente muchos más. Es por eso que no la había dado a conocer pensando que localizar las instrucciones no tenía pérdida ya que eran muchos los caminos para encontrarla, pero parece que después de un tiempo aún despierta interés así que ahí va.

Las explicaciones las extraje del blog de Rosa, me pareció muy rápida y sencilla la forma de crear la nube y la tengo añadida a mi blog de amigos desde hace tiempo.

Nos situamos en plantilla Edición de HTML, marcamos para expandir la plantilla y buscamos lo siguiente:

<b:section class='sidebar' id='sidebar' preferred='yes'>

En lugar de esa línea podría ser que tuviéramos esta:

<b:section class='sidebar' id='sidebar' showaddelement='yes'>

A continuación añadimos el siguiente código[+]

Para adaptarla a los colores del blog modificaremos lo siguiente :
En color azul ancho de la nube y rojo el alto
En verde el color de fondo
Color de texto en naranja
Tamaño de fuente color rosa

Suscribirse a comentarios ahora más que nunca

El otro día en conversación con k_nelita me decía que la mayoría de bloggers no se suscriben a los comentarios, los motivos pueden ser varios y como ella piensa el desconocimiento de como hacerlo o para qué sirve es uno de ellos.
Lleva mucha razón, con frecuencia leo comentarios donde después de hacer una consulta sugieren que se les responda en su mail eso quiere decir que desconocen que con un simple click en "Suscripción por correo electrónico" reciben en su correo las actualizaciones de comentarios en esa entrada que se suscribieron.
Llevar un seguimiento de comentarios es interesante primero por comodidad de no tener que buscar la respuesta y segundo porque en los comentarios podemos encontrar respuesta a nuestras dudas.

Más conversaciones y esta vez con J.Miur sobre el problema que desde hace unos días estamos teniendo con el feed de Blogger.
El script de últimos comentarios ha dejado de funcionar y según me cuenta J.Miur ni scripts ni widgets tiene nada que ver sino como decía los feed de Blogger cuya cantidad máxima a leer es de 5.000
No quiere decir esto que no se pueda comentar, podemos seguir haciéndolo como tenemos costumbre. Lo que no veremos será el script de la sidebar actualizado hasta que lo solucionen, bien dando un margen mayor de comentarios o dejando las cosas como estaban antes de ~~la metedura de pata~~ los problemas.

Todo esto confirma todavía más la importancia de suscribirse a los comentarios porque somos muchos los que tenemos costumbre de acceder a un blog y mirar en la sidebar por si nos hubieran contestado o simplemente por si el hilo de algún comentario nos interesa.

Esperemos que lo solucionen pronto, sólo esperemos...

Wallpapers navideños I I I

Visto en Fondos Copados

Archivos y Feed (expandir y contraer)

Hace tiempo explicaba como aplicar al gadget de "Etiquetas" un script para mostrarlas con la posibilidad de expandir y contraer desde su título dicho gadget.

Algunas personas me han consultado sobre la posibilidad de hacer lo mismo con el gadget de "Archivos" y "Feed" voy a explicar como hacerlo ya que, aunque el sistema es exactamente el mismo, será más fácil de aplicar con la explicación para el gadget concreto.

Gadget de Archivos

[1] En la parte de "Diseño HTML" de nuestro panel, sin expandir las plantillas de artilugios, localizamos la línea que corresponde al Gadget de "Archivos":

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

[2] Sustituimos esa línea por todo este código:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<b:if cond='data:title'>
    <h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
      <b:include data='data' name='menu'/>
    </b:if>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
      <ul>
        <li expr:class='"archivedate " + data:i.expclass'>
          <b:include data='i' name='toggle'/>
          <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
            <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
          <b:if cond='data:i.data'>
            <b:include data='i.data' name='interval'/>
          </b:if>
          <b:if cond='data:i.posts'>
            <b:include data='i.posts' name='posts'/>
          </b:if>
        </li>
      </ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == "expanded"'>
    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +       "&dir=close&toggle=" + data:interval.toggleId +       "&toggleopen=" + data:toggleopen'>
        <span class='zippy toggle-open'>▼ </span>
    </a>
<b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" +         "&dir=open&toggle=" + data:interval.toggleId +         "&toggleopen=" + data:toggleopen'>
          <span class='zippy'>
            <b:if cond='data:blog.languageDirection == "rtl"'>
              ◄
            <b:else/>
              ►
            </b:if>
          </span>
    </a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
    <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
</ul>
</b:includable>
</b:widget>

Notas:
Los archivos se mostraran como en el ejemplo de la imagen de arriba, es decir, el gadget con la opción "Jerarquía" en un principio, pero usar la opción "Lista" e incluso la de "Menú desplegable" no supondrá ningún problema; podremos cambiar de una opción a otra desde "Editar" del mismo Gadget sin que este pierda la función de expandir y contraer.

Gadget Feed

[1] Localizamos la línea correspondiente al Gadget del Feed que será algo así:

<b:widget id='Feed1' locked='false' title='El Escaparate (Ayuda para tu blog)' type='Feed'>

[2] Sustituimos esa linea por este código:

<b:widget id='Feed1' locked='false' title='El Escaparate (Ayuda para tu blog)' type='Feed'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
    <h2><data:title/></h2>
    <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <b:loop values='data:feedData.items' var='i'>
        <li>
          <span class='item-title'>
            <a expr:href='data:i.alternate.href'>
              <data:i.title/>
            </a>
          </span>
          <b:if cond='data:showItemDate'>
            <b:if cond='data:i.str_published != ""'>
              <span class='item-date'>
                 - <data:i.str_published/>
              </span>
            </b:if>
          </b:if>
          <b:if cond='data:showItemAuthor'>
            <b:if cond='data:i.author != ""'>
              <span class='item-author'>
                 - <data:i.author/>
              </span>
            </b:if>
          </b:if>
        </li>
      </b:loop>
    </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
    <b:include name='quickedit'/>
    </div>
</b:includable>
</b:widget>

Templates Cove

Templates Cove es un lugar donde de forma gratuita podemos descargar plantillas.
Su autora es Gimbola una italiana de gusto exquisito que muestra elegancia en cada uno de sus diseños.

Método sencillo de Expandir | Recoger

Muchas veces nos complicamos la vida sin necesidad me refiero en el tema blog claro está, aunque en el tema personal también ocurre pero eso es otra historia.
No sé la cantidad de formas que hay para expandir y recoger texto, códigos o cualquier contenido, lo cierto que es el tema que más consultas recibe este blog y también que al añadirlo a las plantillas adaptadas los problemas se multiplican.

Hay un script que proporciona J.Miur y me parece la forma más sencilla de ocultar un contenido sin necesidad de hacer grandes cambios en la plantilla. Únicamente es necesario añadir un script justo antes de </head>

Una vez añadido sólo queda ubicarse en el sitio que vamos a ocultar post, sidebar o cualquier parte, para añadir lo siguiente:

Aquí escribimos el texto visible....
<a onclick="return verocultar(this);"href="javascript:void(0);">[+/-]</a>
<div style="display: none;">Contenido oculto</div>

En contenido oculto podemos incluir cualquier cosa.

Vídeos [+/-]

Imágenes[+/-]

Texto [+/-]

Código[+/-]

Podemos sustituir el símbolo de expandir recoger por una imagen, lo que haríamos sería añadir <img src="url-de-la-imagen"/> en lugar de [+/-]

Pellentesque pulvinar, tortor viverra facilisis faucibus, augue risus tempus ipsum, vel interdum ante pede nec nisl.

"Leer más" solo en los post escogidos

Me he encontrado en Blogger Magz con una nueva forma de aplicar el "Leer más" solo a las entradas que queramos mediante el uso de javascript.

A juzgar por los comentarios de allí parece ser que no da el problema de otros "Leer más" anteriores, que aparecía en todas las entradas a pesar de no incluir el código en las mismas.

Yo misma lo he instalado en un blog de pruebas y parece ser que así es, que el "Leer más" solo es visible en las entradas en las que incluyamos el código para el efecto.

[1] En nuestro panel de Blogger, nos situamos en la pestaña de "Edición HTML" y marcamos la opción de "Expandir las plantillas de artilugios" para colocar este código justo antes de </head>:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
   var post = document.getElementById(id);
   var spans = post.getElementsByTagName('span');
   var found = 0;
   for (var i = 0; i < spans.length; i++) {
     if (spans[i].className == 'fullpost') {
       spans[i].style.display = 'none';
       found = 1;
     }
     if (spans[i].className == 'showlink') {
       if (found == 0) {
         spans[i].style.display = 'none';
       }
     }
   }
}
</script>
</b:if>

[2] Localizamos ahora esta parte del código de la plantilla:

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Dependiendo de la plantilla, la primera línea de este código podría verse así:
<div class='post-body entry-content'> o de alguna otra manera. Tomando como referencia el resto del código no será demasiado difícil localizarlo.

Y lo cambiamos por este otro:

<div class='post-body' expr:id='"post-" + data:post.id'>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
    <span class='showlink'>
      <p><a expr:href='data:post.url'>Leer más...</a></p>
    </span>
    <script type='text/javascript'>
      checkFull("post-<data:post.id/>");
    </script>
</b:if>
<div style='clear: both;'/> 
</div>

[3] Una vez guardados los cambios, para usar el "Leer más" hemos de colocar un pequeño código en cada entrada en la que vayamos a usar el efecto de esta manera:

Parte de la entrada que estará a la vista

<span class="fullpost">

El resto de la entrada que estará oculta hasta pinchar en el "Leer más"

</span>

[4] Podemos incluir el código en Opciones - Formato - Plantilla de entrada, así el código aparecerá automáticamente cada vez que vayamos a escribir un nuevo post, si en alguna entrada no queremos mostrar el "Leer más", solo tendremos que borrar el código.

Efecto sombra

El efecto sombra ha sido uno de mis favoritos, suelo aplicarlos a las imágenes pero esta vez se trata de añadir el efecto sombra a las entradas y en su interior podemos añadir cualquier contenido.
Este efecto se crea con tres cajas, y las sombras se añaden con la clase "blur" y "shadow" para el ejemplo se va a añadir las sombras en color gris pero si utilizáis un color de fondo para el blog es recomendable que la sombra sea del mismo color pero en tono más oscuro.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:

.blur{
background-color: #ccc; /*color de sombra 1ª*/
color: inherit;
margin-left: 4px; /*borde izquierdo*/
margin-top: 4px; /*borde superior*/
}

.shadow,
.content{
position: relative;
bottom: 2px;/*borde inferior*/
right: 2px; /*borde derecho*/
}
.shadow{
background-color: #666; /*color de sombra 2ª*/
color: inherit;
}
.content{
background-color: #fff; /*color de fondo de la caja*/
color: #000; /*color de texto*/
border: 1px solid #000; /*borde de la caja*/
padding: .5em 2ex;
}

Guardamos los cambios y nos dirigimos al editor de entradas donde añadiremos lo siguiente:

<div class="blur">
<div class="shadow">
<div class="content">aquí el contenido de la caja</div>
</div>
</div>

En nuestro blog veríamos algo así:

Podemos cambiar el color de borde y de las dos sombra, color de fondo, de texto y añadir una imagen de fondo en .content sustituyendo donde dice background-color: #fff; por background:url('aquí la url de tu imagen de fondo');

Visto en Desarrolloweb

ElHackerZ

Menu minislide

¡ Feliz 2.009 !

TARTAN Maker

Free Icons

Un click para Suecia

Rotador de imágenes

Yanku-template

Añadir un menú en cualquier parte de la cabecera.

¡Un click para Suecia!

Fecha en todas las entradas

Vimeo - Aloja y comparte vídeos

¡Felices Fiestas!

* •.* Felices Fiestas .* •*

Barra anuncio fija sobre el pie del blog

Cumulus - Blogumus (etiquetas en movimiento)

Suscribirse a comentarios ahora más que nunca

Wallpapers navideños I I I

Archivos y Feed (expandir y contraer)

Templates Cove

Método sencillo de Expandir | Recoger

"Leer más" solo en los post escogidos

Efecto sombra

Ayudamos a Ayudar... Hazte Fan!

Buscador

HEY VISITANTE! LEE ESTO!

Buscador #2

Frase: "Proximamente..."

Género

CineTux tiene nueva Administración

sdgsdfgdg

Archivo del blog

Estadísticas