Cafetería De las Azores

Duodécimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo ocultar/mostrar las secciones.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

En el décimo tutorial ya vimos como crear una cabecera. Ahora lo que queremos hacer es que muestre una sección oculta y al pulsar en la cabecera la muestre.

Ahora mismo lo que tenemos es esto:

<div id="titulo">NOMBRE CABECERA</div>
  <div id="top">
  CONTENIDO SECCIÓN
  </div>

Tenemos que cambiarlo por esto:

<div id="seccion" style="cursor: pointer;">
       <div onClick="document.getElementById('seccion_oculta').style.display='block'">VER SECCION</div>
       <div onClick="document.getElementById('seccion_oculta').style.display='none'">OCULTAR SECCION</div>
  </div>

  <div id="seccion_oculta" style="display:none">
        <div id="top">
             CONTENIDO SECCIÓN
        </div>
  </div>

Básicamente, al pulsar en VER SECCION, muestra el contenido de la sección y al pulsar en OCULTAR SECCION lo oculta:

Vamos a complicarlo un poco más. No queremos que nos muestre siempre los textos ver y ocultar. Queremos que cuando este oculto nos muestre sólo Ver y cuando este visible nos muestre sólo ocultar:

<div id="seccion" style="cursor: pointer;">
        <div id="btn_mostrar" style="display:block;" onClick="document.getElementById('btn_ocultar').style.display='block'; document.getElementById('seccion_oculta').style.display='block'; document.getElementById('btn_mostrar').style.display='none'">PULSA AQUÍ PARA <br>MOSTRAR LA SECCIÓN</div>
        <div id="btn_ocultar" style="display:none;" onClick="document.getElementById('btn_ocultar').style.display ='none'; document.getElementById('seccion_oculta').style.display ='none'; document.getElementById('btn_mostrar').style.display='block'">PULSA AQUÍ PARA <br>OCULTAR LA SECCIÓN</div>
  </div>

  <div id="seccion_oculta" style="display:none">
       <div id="top">
             CONTENIDO SECCIÓN
        </div>
  </div>

Al pulsar en MOSTRAR LA SECCIÓN, muestra el texto OCULTAR LA SECCIÓN y el contenido de la sección. Además, el botón Ver desaparece.
Al pulsar en OCULTAR LA SECCIÓN, muestra el texto MOSTRAR LA SECCIÓN y el contenido de la sección y el texto OCULTAR LA SECCIÓN desaparecen.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Undécimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir un menú en la parte superior de nuestra página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Nuestro menú constará de 2 partes. La primera (que llamaré cabecera1) irá dedicada a publicidad, banner o similares y la segunda (cabecera2) contendrá una lista horizontal de enlaces.

Como queremos que el menú se sitúe arriba de todo, tendremos que poner el código justo debajo de la etiqueta <body>. Usaremos lo siguiente:

 <div class="cabecera1">
        CONTENIDO DE LA CABECERA 1
 </div>

 <div class="cabecera2">
        CONTENIDO DE LA CABECERA 2
 </div>

Como ejemplo, en la cabecera 1 pondremos una imagen de 800x100:

 <div class="cabecera1">
        <a href="/"><img src="http://lorempixel.com/output/technics-q-c-800-100-6.jpg" /></a>
 </div>

Y en la cabecera 2 un listado de URLs:

 <div class="cabecera2">
       <a href="URL">URL 1</a>&nbsp;|
       <a href="URL">URL 2</a>&nbsp;|
       <a href="URL">URL 3</a>&nbsp;|
       <a href="URL">URL 4</a>&nbsp;|
       <a href="URL">URL 5</a>&nbsp;|
       <a href="URL">URL 6</a>&nbsp;|
       <a href="URL">URL 7</a>&nbsp;|
       <a href="URL">URL 8</a>&nbsp;|
       <a href="URL">URL 9</a>&nbsp;|
       <a href="URL">URL 10</a>&nbsp;|
       <a href="URL">URL 11</a>&nbsp;|
       <a href="URL">URL 12</a>
 </div>

Esto es lo que tenemos por ahora:

Ahora que tenemos el contenido, vamos a modificar un poco su diseño, para ello, nos vamos al CSS (antes de la etiqueta </style>) y pegamos lo siguiente (iré explicanco cada línea con un comentario):

.cabecera1 {
      background: #000; /* define el color de fondo */
      height: 100px; /* define la altura de la cabera 1 */
      color: #fff; /* define el color del texto que no es enlace */
      text-align: center; /* centra el contenido */
      font-size: 13px; /* define el tamaño de la fuente */
      padding: 5px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */
 } 
     .cabecera1 a {
          color: #fff; /* define el color de los enlaces */
     } 
 .cabecera2 {
     height: 20px; /* define la altura de la cabera 2 */
     background: #333; /* define el color de fondo */
     color: #fff; /* define el color del texto que no es enlace */
     text-align: center; /* centra el contenido */
     font-size: 13px; /* define el tamaño de la fuente */
     padding: 2px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */
 } 
    .cabecera2 a {
         color: #fff; /* define el color de los enlaces */
    }

El resultado sería:

Ahora ya sólo os queda cambiar el contenido por lo que queráis mostrar y personalizar el diseño a vuestro gusto.

Nota: La idea del menú superior es de finofilipino. He creado este tutorial desde 0 (nada de copy/paste), previa autorización de Fino, ya que la idea era suya, porque me lo han pedido por privado.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

$Décimo post de ayuda. Podéis ver los anteriores aquí. En este tutorial veremos cómo añadir los comentarios a nuetro Tumblr usando el Disqus, cómo poner una sección de comentarios recientes del mismo y cómo añadir un título a nuestras secciones. (Nota: Antes de nada, revisad los errores comunes. Es importante.) Vamos a http://disq.us y pulsamos en Sign In. En la ventana de rellenamos lo que nos pide. Por ejemplo: Rellenamos también el usuario y contraseña de Disqus y pulsamos en siguiente. En esta ventana seleccionamos a gusto de cada uno. En mi caso lo he dejado así: Pulsamos en siguiente y en la nueva ventana (install) seleccionamos Tumblr. Tal y como nos indican las instrucciones, tenemos que ir a Tumblr y seleccionar Customize Theme. Bajamos hasta donde pone Disqus shortname y escribimos el nombre que pusimos en la primera ventana del registro. En mi caso pruebasdelasazores: Guardamos y listo. Ya tenemos los comentarios activados en nuestro Tumblr. Ahora, debajo de cada post, se nos muestra un link indicando el número de comentarios y reacciones que tiene cada post: Podemos cambiar el texto que se muestra. Para ello, tenemos que ir a la web del Disqus (http://disq.us) e ir a Settings -> Appearance y bajar hasta Comment Count Link. Ahí ponemos los textos como queremos: El resultado sería: Puede darse el caso de que en vez de salirnos el texto personalizado nos muestre siempre “Ver comentarios”. La solución sencilla es buscar: <a href="{Permalink}#disqus_thread">{lang:View comments}</a> Y añadir un class=”dsq-comment-count”: <a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:View comments}</a> Si después de esto sigue mostrándonos “Ver comentarios”, tenemos que ir a la web del Disqus (http://disq.us) y en la pestaña Moderate pulsamos Install. Seleccionamos Tumblr y bajamos hasta Manual instructions (advanced). Copiamos el código del punto 2 (Copy and paste the following embed code into the HTML.) y lo pegamos antes de </body>. Ya debería mostrar correctamente nuestros textos personalizados. Ahora vamos a ver como añadir los comentarios recientes a nuestra página. Volvemos a http://disq.us y, dentro de la pestaña Admin, pulsamos en Tools. Dejamos seleccionado combination y cambiamos las opciones a gusto de cada uno. En mi caso no cambiaré nada: Por último, copiamos el código de abajo y lo pegamos en nuestra página. El resultado sería: Ahora vamos a ver como añadir una cabecera a nuestras secciones. Lo que vamos a hacer es poner un div encima de cada sección, que tendrá un fondo negro y letra blanca. Ahora mismo lo que tenemos es: <div id="top"> CONTENIDO </div> Y lo que tendremos será: <div id="titulo">NOMBRE CABECERA</div> <div id="top"> CONTENIDO </div> Quedaría así: Ahora tenemos que cambiar el CSS para poner la cabecera como queremos. Añadimos lo siguiente en el CSS: #wrapper #sidebar #titulo { text-align:center; background: #000; padding-top: 5px; padding-bottom: 10px; color: #fff; font-size: 20px; border-radius: 10px 10px 0px 0px; box-shadow: 0 0 5px 5px rgba(0,177,223,1); border-width: 4px 4px 0 4px; border-style: solid; border-color: #000; } Este código añade un fondo negro a nuestra cabecera, y poner el texto a 20px centrado y de color blanco. También redondea los bordes superiores y les añade colores: Ahora lo que vamos a hacer es corregir el CSS de top para que no tenga los bordes superiores y quede mejor el contacto entre ambos divs. Ahora mis tenemos: #wrapper #sidebar #top { border-radius: 10px 10px 10px 10px; border: 4px solid #000; box-shadow: 0 0 5px 5px rgba(0,177,223,1); background: #fff; padding: 0 20px; } Y tiene que quedar así: #wrapper #sidebar #top { border-radius: 0px 0px 10px 10px; border: 4px solid #000; box-shadow: 0 0 5px 5px rgba(0,177,223,1); background: #fff; padding: 0 20px; } El resultado final sería: Ahora ya sólo nos queda añadir <div id=”titulo”>NOMBRE CABECERA</div> antes de cada <div id=”top”> que queremos que tenga cabecera. Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda$

Décimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir los comentarios a nuetro Tumblr usando el Disqus, cómo poner una sección de comentarios recientes del mismo y cómo añadir un título a nuestras secciones.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Vamos a http://disq.us y pulsamos en Sign In. En la ventana de rellenamos lo que nos pide.

Por ejemplo:

Rellenamos también el usuario y contraseña de Disqus y pulsamos en siguiente. En esta ventana seleccionamos a gusto de cada uno. En mi caso lo he dejado así:

Pulsamos en siguiente y en la nueva ventana (install) seleccionamos Tumblr. Tal y como nos indican las instrucciones, tenemos que ir a Tumblr y seleccionar Customize Theme. Bajamos hasta donde pone Disqus shortname y escribimos el nombre que pusimos en la primera ventana del registro. En mi caso pruebasdelasazores:

Guardamos y listo. Ya tenemos los comentarios activados en nuestro Tumblr.

Ahora, debajo de cada post, se nos muestra un link indicando el número de comentarios y reacciones que tiene cada post:

Podemos cambiar el texto que se muestra. Para ello, tenemos que ir a la web del Disqus (http://disq.us) e ir a Settings -> Appearance y bajar hasta Comment Count Link. Ahí ponemos los textos como queremos:

El resultado sería:

Puede darse el caso de que en vez de salirnos el texto personalizado nos muestre siempre “Ver comentarios”. La solución sencilla es buscar:

<a href="{Permalink}#disqus_thread">{lang:View comments}</a>

Y añadir un class=”dsq-comment-count”:

<a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:View comments}</a>

Si después de esto sigue mostrándonos “Ver comentarios”, tenemos que ir a la web del Disqus (http://disq.us) y en la pestaña Moderate pulsamos Install. Seleccionamos Tumblr y bajamos hasta Manual instructions (advanced). Copiamos el código del punto 2 (Copy and paste the following embed code into the HTML.) y lo pegamos antes de </body>. Ya debería mostrar correctamente nuestros textos personalizados.

Ahora vamos a ver como añadir los comentarios recientes a nuestra página. Volvemos a http://disq.us y, dentro de la pestaña Admin, pulsamos en Tools. Dejamos seleccionado combination y cambiamos las opciones a gusto de cada uno. En mi caso no cambiaré nada:

Por último, copiamos el código de abajo y lo pegamos en nuestra página. El resultado sería:

Ahora vamos a ver como añadir una cabecera a nuestras secciones. Lo que vamos a hacer es poner un div encima de cada sección, que tendrá un fondo negro y letra blanca. Ahora mismo lo que tenemos es:

<div id="top">
      CONTENIDO
</div>

Y lo que tendremos será:

<div id="titulo">NOMBRE CABECERA</div>
<div id="top">
      CONTENIDO
</div>

Quedaría así:

Ahora tenemos que cambiar el CSS para poner la cabecera como queremos. Añadimos lo siguiente en el CSS:

#wrapper #sidebar #titulo {
                    text-align:center;
                    background: #000;
                    padding-top: 5px;
    				padding-bottom: 10px;
                    color: #fff;
                    font-size: 20px;
                    border-radius: 10px 10px 0px 0px;
                    box-shadow: 0 0 5px 5px rgba(0,177,223,1);
    				border-width: 4px 4px 0 4px;
					border-style: solid;
					border-color: #000;
				}

Este código añade un fondo negro a nuestra cabecera, y poner el texto a 20px centrado y de color blanco. También redondea los bordes superiores y les añade colores:

Ahora lo que vamos a hacer es corregir el CSS de top para que no tenga los bordes superiores y quede mejor el contacto entre ambos divs. Ahora mis tenemos:

#wrapper #sidebar #top {
					border-radius: 10px 10px 10px 10px;
					border: 4px solid #000; 
					box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 0 20px;
                }

Y tiene que quedar así:

#wrapper #sidebar #top {
					border-radius: 0px 0px 10px 10px;
					border: 4px solid #000;  
					box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 0 20px;
                }

El resultado final sería:

Ahora ya sólo nos queda añadir

<div id=”titulo”>NOMBRE CABECERA</div> antes de cada <div id=”top”> que queremos que tenga cabecera.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Noveno post de ayuda. Podéis ver los anteriores aquí.

En este tutorial vamos a ver cómo adquirir un dominio .com. Yo lo compré en 1and1. Pago 6 euros al año (IVA NO incluido) y dispongo de un dominio .com, 10 subdominios, una cuenta de correo (ejemplo: delasazores@delasazores.com), subida de la página a buscadores, acceso FTP y 5MB de espacio en disco.

Como curiosidad, este es el panel:

Si queréis comprar un dominio, podéis pulsar aquí:

NOTA: Si adquirís el dominio desde este banner o desde el menú lateral de mi web, recibo comisión, así que si os decidís a comprar un dominio, se agradece si lo hacéis desde ahí :P

En la página que nos sale al pulsar el banner escogemos la extensión (en este caso .com) y el nombre de nuestro dominio (en este caso pruebadelasazores) y pulsamos en Comprobar:

Si está disponible, pulsamos en Continuar. En la siguiente ventana nos salen los 3 tipos de packs que tienen (recomiendo revisarlos antes de seguir). Seleccionamos el primero (1&1 Pack Dominio, de 0€ al mes):

En la siguiente ventana nos pregunta si queremos añadir un pack de seguridad. Como no lo queremos, pulsamos en Continuar solo con pedido y veremos esta ventana:

Si todo está correcto el precio de nuestro dominio será 5´99€ (IVA NO incluido) y pulsaremos en continuar. Las siguientes ventanas serán para añadir datos personales y forma de pago, por lo que me las saltaré e iré directamente a la configuración del dominio.

Ahora que tenemos nuestro dominio, pulsamos en Dominios. Ahí podemos ver nuestro dominio. Pueden tardar hasta 24 horas en activarlo. Paciencia. Una vez que lo hayan activado, podréis ver algo así:

Ahora vamos usar nuestro dominio para Tumblr. Para ello pulsamos en DNS -> Modificar la configuración DNS:

En la nueva pantalla nos aseguramos de que este todo igual que esto:

Para los vagos, la dirección IP es: 66.6.44.4

Por último, tenemos que ir a Tumblr y en configuración, añadir nuestro dominio:

Podéis darle a Comprueba tu dominio para verficar que todo está correcto.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

$Octavo post de ayuda. Podéis ver los anteriores aquí. En este tutorial veremos cómo añadir un botón siguiente post y anterior post cuando estamos mirando un post (valga la redundancia). También veremos como añadir un botón en la paginación que nos muestre el número total de páginas que tenemos y que al pulsarlo nos lleve a última página. (Nota: Antes de nada, revisad los errores comunes. Es importante.) Buscamos lo siguiente: {block:Posts} <div class="post"> {block:Photo} Y lo cambiamos por lo siguiente: {block:Posts} {block:PermalinkPagination} <div class="post"> {block:PreviousPost} <a href="{PreviousPost}">&larr; Anterior Post</a> {/block:PreviousPost} {block:NextPost} <a style="float:right;" href="{NextPost}">Siguiente Post &rarr;</a> {/block:NextPost} </div> <br /> {/block:PermalinkPagination} <div class="post"> {block:Photo} El resultado sería: Con {block:PermalinkPagination} hacemos que los botones sólo se vean cuando estás visitando un post concreto (permalink). Podéis cambiar el texto “Anterior Post” o “Siguiente Post” por otro texto que os guste más o una imagen. Nota: El <div class="post"> es para el theme redux. Si usáis otro theme, tenéis que usar otro class. Para añadir un botón ir a última página, tenemos que buscar lo siguiente: {/block:JumpPagination} {/block:IfEnableJumpPagination} Y cambiarlo por lo siguiente: {/block:JumpPagination} <a class="jump_page" href="/tagged//page/{TotalPages}">..{TotalPages}</a> {/block:IfEnableJumpPagination} El resultado sería: Con este código tenemos un pequeño problema. Cuando estamos buscando por tags (ejemplo: http://delasazores.com/tagged/ayuda) si pulsamos en el botón no nos redirige a la última página de los tags, sino a la última página de la web. Si queréis solucionar este pequeño problema, podéis poneros en contacto con Welele.es, que fue quien me ayudó a corregirlo. No os preocupéis, no es difícil de solucionar :) Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda$

Octavo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir un botón siguiente post y anterior post cuando estamos mirando un post (valga la redundancia). También veremos como añadir un botón en la paginación que nos muestre el número total de páginas que tenemos y que al pulsarlo nos lleve a última página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Buscamos lo siguiente:

{block:Posts}
         <div class="post">

        {block:Photo}

Y lo cambiamos por lo siguiente:

{block:Posts}
        {block:PermalinkPagination}
               <div class="post">
                      {block:PreviousPost}
                              <a href="{PreviousPost}">&larr; Anterior Post</a>
                      {/block:PreviousPost}
                      {block:NextPost}
                             <a style="float:right;" href="{NextPost}">Siguiente Post &rarr;</a>
                      {/block:NextPost}
               </div>
               <br />
       {/block:PermalinkPagination}

<div class="post">
 {block:Photo}

El resultado sería:

Con

{block:PermalinkPagination}

hacemos que los botones sólo se vean cuando estás visitando un post concreto (permalink).

Podéis cambiar el texto “Anterior Post” o “Siguiente Post” por otro texto que os guste más o una imagen.

Nota: El

<div class="post">

es para el theme redux. Si usáis otro theme, tenéis que usar otro class.

Para añadir un botón ir a última página, tenemos que buscar lo siguiente:

{/block:JumpPagination}

 {/block:IfEnableJumpPagination}

Y cambiarlo por lo siguiente:

{/block:JumpPagination}

         <a class="jump_page" href="/tagged//page/{TotalPages}">..{TotalPages}</a>

 {/block:IfEnableJumpPagination}

El resultado sería:

Con este código tenemos un pequeño problema. Cuando estamos buscando por tags (ejemplo: http://delasazores.com/tagged/ayuda) si pulsamos en el botón no nos redirige a la última página de los tags, sino a la última página de la web. Si queréis solucionar este pequeño problema, podéis poneros en contacto con Welele.es, que fue quien me ayudó a corregirlo. No os preocupéis, no es difícil de solucionar :)

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Cómo funcionan los recaptchas explicado con memes

Errores comunes

La idea de este post es tratar de hacer una lista con los errores más comunes. Trataré de mantener la lista actualizada con errores que vayan surgiendo.

0. Programa de edición: Es recomendable usar un programa de edición, como puede ser Dreamweaver o Notepad++ (este último si buscas uno completamente gratuito) para que nos facilite localizar los errores.

1. Comillas cursivas: Al copiar un código y pegarlo en el “fantástico” (sí Sheldon, es sarcasmo) editor de Tumblr, éste muchas veces pega las comillas cursivas. Un ejemplo:

{lang: ‘es’}</script>

Cuando lo correcto sería:

Una forma de evitar que esto suceda es rebloguear el post, sin publicarlo, quedándonos en la ventana de edición y desde ahí copiar el código.

2. Comentarios de HTML: Un error similar sucede con los comentarios de HTML. Su código de apertura es < ! - - (sin espacios) y su cierre es - - > (sin espacios). Cuando publicas un post Tumblr cambia este código y pone <!— de apertura y —> de cierre.

NOTA: Los puntos 1 y 2 ya están corregidos gracias al consejo de trollmachine pero los dejo citados por si son de utilidad.

$Séptimo post de ayuda. Podéis ver los anteriores aquí. En este tutorial vamos a ver como añadir un buscador de tags. También como insertar vídeos de youtube en los comentarios de los post o en nuestra página. (Nota: Antes de nada, revisad los errores comunes. Es importante.) Lo primero es añadir el siguiente código antes de la etiqueta </head>:  <script type="text/javascript"> function handleThis(formElm) { window.location="URL_DE_TU_WEB/tagged/"+formElm.number.value+""; return false; } </script> Ejemplo válido: window.location="http://delasazores.com/tagged/"+formElm.number.value+""; Ahora buscad lo siguiente <div id="search"> <form action="/search" method="get" id="search-form"> <input type="hidden" name="t" value="{Name}" /> <input type="hidden" name="scope" value="all_of_tumblr" /> <input type="text" name="q" class="query" value="{SearchQuery}" /> <input type="submit" value="{lang:Search}" class="submit" /> <div class="clear"></div> </form> </div> Y cambiadlo por (si queréis mantener ambos buscadores, podéis simplemente añadir estas líneas debajo del otro código)::  <div id="search"> <form action="/search" id="search-form" onsubmit="return handleThis(this)"> <input type="text" class="query" name="number" value="Buscador de Tags" onclick="this.select()" /> <input type="submit" value="{lang:Search}" class="submit" /> <div class="clear"></div> </form> </div>  Si tenéis un theme distinto al Redux, podéis cambiar los ids y class para adaptarlos a vuestra plantilla y se vea más estético el buscador. Ahora veamos como insertar vídeos de Youtube en nuestros comentarios. A día de hoy es realmente fácil. Simplemente nos vamos al vídeo de Youtube que queremos poner en nuestro post o página. Debajo podemos ver un botón Compartir. Lo pulsamos y a continuación pulsamos también en Insertar. Nota: Es importante cambiar el width (ancho) para que no sea más grande que el ancho de nuestros post, ya que sino, sobresaldrá de los márgenes. Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda$

Séptimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial vamos a ver como añadir un buscador de tags. También como insertar vídeos de youtube en los comentarios de los post o en nuestra página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Lo primero es añadir el siguiente código antes de la etiqueta </head>:

<!-- Buscar tags -->
 <script type="text/javascript">
 function handleThis(formElm)
 {
 window.location="URL_DE_TU_WEB/tagged/"+formElm.number.value+"";
 return false;
 }
 </script>

Ejemplo válido:

window.location="http://delasazores.com/tagged/"+formElm.number.value+"";

Ahora buscad lo siguiente

<div id="search">
      <form action="/search" method="get" id="search-form">
             <input type="hidden" name="t" value="{Name}" />
             <input type="hidden" name="scope" value="all_of_tumblr" />
             <input type="text" name="q" class="query" value="{SearchQuery}" />
             <input type="submit" value="{lang:Search}" class="submit" />
             <div class="clear"></div>
      </form>
 </div>

Y cambiadlo por (si queréis mantener ambos buscadores, podéis simplemente añadir estas líneas debajo del otro código)::

<!-- Buscador de tags -->
 <div id="search">
        <form action="/search" id="search-form" onsubmit="return handleThis(this)">
                <input type="text" class="query" name="number" value="Buscador de Tags" onclick="this.select()" />
                <input type="submit" value="{lang:Search}" class="submit" />
                <div class="clear"></div>
        </form>
 </div>
 <!-- Fin Buscador de tags -->

Si tenéis un theme distinto al Redux, podéis cambiar los ids y class para adaptarlos a vuestra plantilla y se vea más estético el buscador.

Ahora veamos como insertar vídeos de Youtube en nuestros comentarios. A día de hoy es realmente fácil. Simplemente nos vamos al vídeo de Youtube que queremos poner en nuestro post o página. Debajo podemos ver un botón Compartir. Lo pulsamos y a continuación pulsamos también en Insertar.

Nota: Es importante cambiar el width (ancho) para que no sea más grande que el ancho de nuestros post, ya que sino, sobresaldrá de los márgenes.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Sexto post de ayuda. Podéis ver los anteriores aquí.

En este tutorial vamos a ver como añadir un creador de memes a nuestra página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Lo primero que debéis hacer es crear una página nueva dentro de vuestro Tumblr. Para ello, id a personalizar. Debajo de Apariencia veréis que hay una opción llamada Páginas. Púlsadlo y después dadle a Añadir una Página:

URL de página: Ponle algo que defina lo que estás creando, para que te sea cómo de localizar. En mi caso usé creadordememes
Título de página: El título que mostrará la página cuando entras en ella. Yo puse: ¡Crea un meme y después envíamelo!
Mostrar un enlace a esta página: NO lo marques. Ya sabes como hacer un botón lateral, así que puedes hacer uno que enlace a la página (usando la URL que pusiste arriba)

Ahora viene el proceso cansino. Si os fijáis en la barra de edición de la página (donde está poner en negrita y demás) hay una opción que es HTML. Púlsadla y entraréis en la edición HTML de la página:

Ahora (sin cerrar la ventana del HTML) id a http://es.memegenerator.net/ y empieza lo verdaderamente cansino. Tenéis que buscar los memes que os gustan 1 por 1. Al entrar en ellos veréis que hay una opción que dice Embed a nombre_meme generator in your website or blog. Púlsadlo y rellenad lo siguiente:

Size: Escoge el tamaño que quieres ponerle (yo seleccioné siempre la primera opción para no complicarme)
Language: El español si no recuerdo mal daba errores, así que selecciona inglés para todos (los textos que mostrarán los memes pueden ser en español, así que no es problema).
Watermark: Como su nombre indica, es la marca de agua. Ejemplo: delasazores.com

Por último copiad el código generado arriba. Un ejemplo con el Forever Alone:

<iframe width="200" height="257" src="http://es.memegenerator.net/Forever-Alone/embed?languageCode=en&watermark=delasazores.com" frameborder="0" />

Nota importante: después de cada código de estos, tenéis que añadir

</iframe>

para cerrarlo, o tendréis problemas en la edición HTML.

Ahora ya “sólo” os queda repetir este proceso para los memes que queráis. Una vez añadidos todos, guardad la edición HTML y volved a la edición de página normal. Es recomendable que añadáis un par de líneas explicando lo que tienen que hacer los usuarios. En mi caso puse:

Cuando crees un meme, te rediccionará a la web donde se crea. Pulsa el botón derecho del ratón encima de la imagen y dale a “copiar la ruta de la imagen” o “Guardar imagen como…” si la quieres descargar en tu ordenador. Después enviámela usando el botón ¡Envíame algo!, a la derecha de la web (El botón con “:)”).

Para enviarme el link de la imagen pulsa encima de “Enviar un texto” y selecciona “Enviar un enlace”. Para enviarme una imagen que tengas guardada en tu pc pulsa encima de “Enviar un texto” y selecciona “Enviar una foto”.

Por último, si no encuentras el meme que te gustaría crear, pídelo pulsando en el botón ¡Pregunta algo!, a la derecha de la web (El botón con “¿?”).

Guardad la página y listo. Ya tenéis vuestro creador de memes. Acordaos de añadir un botón a vuestra página principal que redireccione al creador :)

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

$Quinto post de ayuda. Podéis ver los anteriores aquí. En este tutorial veremos como redondear los bordes de nuestra página y ponerle bordes de colores. También veremos como anchear la página. (Nota: Antes de nada, revisad los errores comunes. Es importante.) Poner los bordes redondeados y colores es facilito. Es simplemente añadir tres al style del apartado que quieras modificar. Concretamente estas: border-radius: 10px 10px 10px 10px;border: 4px solid #000; box-shadow: 0 0 5px 5px rgba(0,177,223,1); La primera línea redondea los bordes (dejándolos igual que en el menú que tienes a la derecha). La segunda añade un borde negro de 4 px (puedes modificar el tamaño y el color) La tercera básicamente añade un borde de 5 px con el color y la opacidad que le pongas. El color tiene que ser en rgba: r: red (rojo) g: green (verde) b: blue (azul) a: alpha (opacidad) (Nota: La opacidad va de 0 a 1, escalando de 0.1 en 0.1. Por ejemplo, si quieres que se vea muy transparente usa 0.2) Para conseguir los colores rgb puedes usar el photoshop (en su paleta de colores) o usar esta página: http://html-color-codes.info/codigos-de-colores-hexadecimales/ Ahora que ya tienes claro el color, opacidad y anchura de tus bordes tienes que colocar los códigos en el style. Si tienes el theme Redux, busca las siguientes líneas (sin comillas) y pega debajo los códigos: Página central: "#wrapper #content .post {" Menús de la derecha: "#wrapper #sidebar #top {" Página actual de la paginación: "#wrapper #content #navigation.jump_pagination .current_page {" Demás páginas (de la paginación): "#wrapper #content #navigation.jump_pagination a {" Por ejemplo, el style de "#wrapper #content .post {" inicialmente estaría así: #wrapper #content .post { font-family: {font:Body}; background: #fff; padding: 10px; position: relative; } Con el nuevo código quedaría así: #wrapper #content .post {border-radius: 10px 10px 10px 10px; border: 4px solid #000; box-shadow: 0 0 5px 5px rgba(0,177,223,1); font-family: {font:Body}; background: #fff; padding: 10px; position: relative; } Inicialmente se vería así: El resultado sería: Si nos fijamos, el borde negro es interior, lo que nos resta espacio y hace que se compriman los botones poniéndose en una sola columna. Esto se puede solucionar ampliando el ancho de las secciones, en el CSS. Aprovechamos también para anchear un poco la zona de los post. Buscamos lo siguiente en el CSS: #wrapper #content { width: 520px; float: left; } Este CSS indica el ancho de la zona de los post. Podéis modificar el width a vuestro gusto. Yo tengo 565px. Ahora buscamos la siguiente línea: #wrapper #content .post img { max-width: 500px; } Aquí se define cual será el ancho máximo de las imágenes (para ajustarlas a los cambios). Yo tengo 545px. Buscamos lo siguiente: #wrapper #sidebar { width: 250px; float: right; color: {color:Background}; font-family: {font:Accent} } Aquí se define el ancho de las secciones. Yo tengo 260px. Ya sólo nos queda corregir una cosa. Si nos fijamos, en este imagen hay un borde blanco cerrando: Tenemos que buscar la siguiente línea (está en la parte final del código, encima del Copyright) y cambiarla por <br>: <div id="bottom"></div> El resultado sería: Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda$

Quinto post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos como redondear los bordes de nuestra página y ponerle bordes de colores. También veremos como anchear la página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Poner los bordes redondeados y colores es facilito. Es simplemente añadir tres al style del apartado que quieras modificar. Concretamente estas:

border-radius: 10px 10px 10px 10px;
border: 4px solid #000; 
box-shadow: 0 0 5px 5px rgba(0,177,223,1);

La primera línea redondea los bordes (dejándolos igual que en el menú que tienes a la derecha).
La segunda añade un borde negro de 4 px (puedes modificar el tamaño y el color)

La tercera básicamente añade un borde de 5 px con el color y la opacidad que le pongas. El color tiene que ser en rgba:
r: red (rojo)
g: green (verde)
b: blue (azul)
a: alpha (opacidad) (Nota: La opacidad va de 0 a 1, escalando de 0.1 en 0.1. Por ejemplo, si quieres que se vea muy transparente usa 0.2)

Para conseguir los colores rgb puedes usar el photoshop (en su paleta de colores) o usar esta página: http://html-color-codes.info/codigos-de-colores-hexadecimales/

Ahora que ya tienes claro el color, opacidad y anchura de tus bordes tienes que colocar los códigos en el style. Si tienes el theme Redux, busca las siguientes líneas (sin comillas) y pega debajo los códigos:

Página central:

"#wrapper #content .post {"

Menús de la derecha:

"#wrapper #sidebar #top {"

Página actual de la paginación:

"#wrapper #content #navigation.jump_pagination .current_page {"

Demás páginas (de la paginación):

"#wrapper #content #navigation.jump_pagination a {"

Por ejemplo, el style de

"#wrapper #content .post {"

inicialmente estaría así:

#wrapper #content .post {
 font-family: {font:Body};
 background: #fff;
 padding: 10px;
 position: relative;
 }

Con el nuevo código quedaría así:

#wrapper #content .post {
border-radius: 10px 10px 10px 10px;
 border: 4px solid #000; 
 box-shadow: 0 0 5px 5px rgba(0,177,223,1);
 font-family: {font:Body};
 background: #fff;
 padding: 10px;
 position: relative;
 }

Inicialmente se vería así:

El resultado sería:

Si nos fijamos, el borde negro es interior, lo que nos resta espacio y hace que se compriman los botones poniéndose en una sola columna. Esto se puede solucionar ampliando el ancho de las secciones, en el CSS. Aprovechamos también para anchear un poco la zona de los post.

Buscamos lo siguiente en el CSS:

#wrapper #content {
 width: 520px;
 float: left;
 }

Este CSS indica el ancho de la zona de los post. Podéis modificar el width a vuestro gusto. Yo tengo 565px.

Ahora buscamos la siguiente línea:

#wrapper #content .post img {
 max-width: 500px;
 }

Aquí se define cual será el ancho máximo de las imágenes (para ajustarlas a los cambios). Yo tengo 545px.

Buscamos lo siguiente:

#wrapper #sidebar {
 width: 250px;
 float: right;
 color: {color:Background};
 font-family: {font:Accent}
 }

Aquí se define el ancho de las secciones. Yo tengo 260px.

Ya sólo nos queda corregir una cosa. Si nos fijamos, en este imagen hay un borde blanco cerrando:

Tenemos que buscar la siguiente línea (está en la parte final del código, encima del Copyright) y cambiarla por <br>:

<div id="bottom"></div>

El resultado sería:

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda