Mostrar menú superior
Mostrar menú inferior
Facebook de DelasAzores Twitter de AFregar
Poner nieve en Tumblr. Como ya me preguntaron un par de veces por privado, publico un post. Es muy fácil. 
Edit (08/12/2013): El script que tenía inicialmente en el post fue borrado, así que como alternativa, os ofrezco el script entero. Tenéis que poner este ladrillaco justo antes de </head>:
<script type="text/javascript">
var snowmax = 100;
var snowcolor = new Array("#ffffff", "#ffffff", "#ffffff");
var snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Arial", "Berlin");
var snowletter = "•";
var sinkspeed = 0.9;
var snowmaxsize = 30;
var snowminsize = 10;
var snowingzone = 1;
var snow = new Array();
var marginbottom;
var marginright;
var ScrollTop;
var timer;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;
function randommaker(a) 
{
    rand = Math.floor(a * Math.random());
    return rand
}
function iecompattest()
{
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body 
}
function InitHeight() {
if (ie5 || opera) {
marginbottom = iecompattest().clientHeight + 5; //clientHeight;
marginright = iecompattest().scrollWidth + 5; //clientWidth
}
else {
if (ns6) {
marginbottom = self.innerHeight;
marginright = self.innerWidth
}
}
ScrollTop = document.body.scrollTop;
if (ScrollTop == 0) {
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
marginbottom += ScrollTop;
}
function initsnow() 
{
InitHeight()
  var a = snowmaxsize - snowminsize;
  for (i = 0;i <= snowmax;i++) 
{
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("s" + i);
snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
snow[i].size = randommaker(a) + snowminsize;
snow[i].style.fontSize = snow[i].size + "px";
snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
snow[i].sink = sinkspeed * snow[i].size / 5;
if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) } 
if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
snow[i].posy =  randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
snow[i].style.left = snow[i].posx + "px";
snow[i].style.top = snow[i].posy + "px"
  } 
  movesnow()
}
 
function movesnow() 
{
InitHeight();
for (i = 0; i <= snowmax; i++)
{
crds[i] += x_mv[i];
snow[i].posy += snow[i].sink;
snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
snow[i].style.top = snow[i].posy + "px";
if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) 
{
if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
snow[i].posy = ScrollTop 
}
}
var a = setTimeout("movesnow()", 60) 
}
function hidesnow() 
{
if (window.timer) { clearTimeout(timer) }
for (i = 0;i <= snowmax;i++)
{
document.getElementById("s" + i).style.visibility = "hidden"
}
}
for (i = 0;i <= snowmax;i++)
{
document.write('<div id="s' + i + '" style="POSITION: absolute; Z-INDEX: 9' + i + "; VISIBILITY: visible; TOP:-" + snowmaxsize + 'px; LEFT: 15px;">' + snowletter + "</div>")
}
if (browserok)
{ initsnow() }
else
{ document.write('Votre navigateur ne supporte pas ce Javascript, ') };
</script>
Lo bueno que tiene usar este “pequeño” código es que os permite modificar el script para usar una nieve que os congratule más:
var snowmax = 100; Os permite cambiar la cantidad máxima de copos de nieve que se mostrarán en pantalla.
var snowcolor = new Array(“#ffffff”, “#ffffff”, “#ffffff”); Os permite cambiar el color de los copos (#ffffff es blanco).
var snowtype = new Array(“Arial Black”, “Arial Narrow”, “Times”, “Arial”, “Berlin”); Os permite cambiar las fuentes que usarán los copos.
var snowletter = “•”; Os permite cambiar el carácter que usarán los copos. Por ejemplo, si en lugar de un círculo preferís un asterisco es tan fácil como cambiar "•" por "*". Podéis incluso poner palabras o frases.
var sinkspeed = 0.9; Cambia la velocidad de los copos.
var snowmaxsize = 30; Cambia el tamaño máximo de los copos.
var snowminsize = 10; Cambia el tamaño mínimo de los copos.
¡Felices Fiestas!

Poner nieve en Tumblr. Como ya me preguntaron un par de veces por privado, publico un post. Es muy fácil.

Edit (08/12/2013): El script que tenía inicialmente en el post fue borrado, así que como alternativa, os ofrezco el script entero. Tenéis que poner este ladrillaco justo antes de </head>:

<script type="text/javascript">
var snowmax = 100;
var snowcolor = new Array("#ffffff", "#ffffff", "#ffffff");
var snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Arial", "Berlin");
var snowletter = "•";
var sinkspeed = 0.9;
var snowmaxsize = 30;
var snowminsize = 10;
var snowingzone = 1;
var snow = new Array();
var marginbottom;
var marginright;
var ScrollTop;
var timer;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;
function randommaker(a) 
{
    rand = Math.floor(a * Math.random());
    return rand
}
function iecompattest()
{
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body 
}
function InitHeight() {
if (ie5 || opera) {
marginbottom = iecompattest().clientHeight + 5; //clientHeight;
marginright = iecompattest().scrollWidth + 5; //clientWidth
}
else {
if (ns6) {
marginbottom = self.innerHeight;
marginright = self.innerWidth
}
}
ScrollTop = document.body.scrollTop;
if (ScrollTop == 0) {
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
marginbottom += ScrollTop;
}
function initsnow() 
{
InitHeight()
  var a = snowmaxsize - snowminsize;
  for (i = 0;i <= snowmax;i++) 
{
crds[i] = 0;
lftrght[i] = Math.random() * 15;
x_mv[i] = 0.03 + Math.random() / 10;
snow[i] = document.getElementById("s" + i);
snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
snow[i].size = randommaker(a) + snowminsize;
snow[i].style.fontSize = snow[i].size + "px";
snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
snow[i].sink = sinkspeed * snow[i].size / 5;
if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) } 
if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
snow[i].posy =  randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
snow[i].style.left = snow[i].posx + "px";
snow[i].style.top = snow[i].posy + "px"
  } 
  movesnow()
}
 
function movesnow() 
{
InitHeight();
for (i = 0; i <= snowmax; i++)
{
crds[i] += x_mv[i];
snow[i].posy += snow[i].sink;
snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
snow[i].style.top = snow[i].posy + "px";
if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i])) 
{
if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
snow[i].posy = ScrollTop 
}
}
var a = setTimeout("movesnow()", 60) 
}
function hidesnow() 
{
if (window.timer) { clearTimeout(timer) }
for (i = 0;i <= snowmax;i++)
{
document.getElementById("s" + i).style.visibility = "hidden"
}
}
for (i = 0;i <= snowmax;i++)
{
document.write('<div id="s' + i + '" style="POSITION: absolute; Z-INDEX: 9' + i + "; VISIBILITY: visible; TOP:-" + snowmaxsize + 'px; LEFT: 15px;">' + snowletter + "</div>")
}
if (browserok)
{ initsnow() }
else
{ document.write('Votre navigateur ne supporte pas ce Javascript, ') };
</script>

Lo bueno que tiene usar este “pequeño” código es que os permite modificar el script para usar una nieve que os congratule más:

var snowmax = 100; Os permite cambiar la cantidad máxima de copos de nieve que se mostrarán en pantalla.

var snowcolor = new Array(“#ffffff”, “#ffffff”, “#ffffff”); Os permite cambiar el color de los copos (#ffffff es blanco).

var snowtype = new Array(“Arial Black”, “Arial Narrow”, “Times”, “Arial”, “Berlin”); Os permite cambiar las fuentes que usarán los copos.

var snowletter = “•”; Os permite cambiar el carácter que usarán los copos. Por ejemplo, si en lugar de un círculo preferís un asterisco es tan fácil como cambiar "•" por "*". Podéis incluso poner palabras o frases.

var sinkspeed = 0.9; Cambia la velocidad de los copos.

var snowmaxsize = 30; Cambia el tamaño máximo de los copos.

var snowminsize = 10; Cambia el tamaño mínimo de los copos.

¡Felices Fiestas!

Pulsa aquí para mostrar más opciones de este post
Decimosexto post de ayuda. Podéis ver los anteriores aquí.
En este tutorial veremos cómo añadir botones de voto positivo y voto negativo (pulgar arriba, pulgar abajo).
(Nota: Antes de nada, revisad los errores comunes. Es importante.)
Lo primero que tenemos que hacer es ir a http://polldaddy.com/ y crearnos una cuenta de Wordpress (o usar una existente).
Nos logueamos con ella, pulsamos en &#8220;Create a new&#8230;" y seleccionamos "Rating&#8221;:

Ponemos un nombre descriptivo. En mi caso Delasazores:

Seleccionamos &#8220;Nero Rating" (o dejamos marcado "5-Star Rating" si preferimos votación con estrellas):

Seleccionamos el tamaño de las manos (en mi caso usé pequeño):

El resultado (por ahora) es este:

Ahora vamos a personalizar los textos a mostrar, su tamaño y colores. Pulsamos en &#8220;Layout &amp; Fonts" y definimos los tamaños y colores que queremos. Yo usé estos:

Ahora vamos a cambiar los textos a mostrar. Vamos a &#8220;Text&#8221;:

Y ponemos las descripciones que creamos oportunas. En mi caso:


Nota: Dejé en blanco &#8220;Rate This" porque no quiero que se muestre nada encima de los botones para votar y "Rate Up" y "Rate Down" porque no quiero que se muestre nada al pasar por encima de los botones.
¿Para qué son el resto de traducciones? Si pulsamos el círculo azul a la derecha de los botones se muestra un panel como este:



Guardamos nuestro sistema de votaciones:

Ahora vamos a poner el código de las votaciones en nuestro Tumblr. Pulsamos en &#8220;Collect Votes&#8221;:

Y vemos que se nos muestra un código. Este código es para usar en 1&#160;sólo post (más abajo ya pongo el código que necesitamos), por lo que no sirve para nuestro Tumblr. Lo ignoramos y anotamos únicamente el ID del sistema de votaciones (tapado con cuadros rojos):

Ahora vamos a nuestro Tumblr y nos situamos en la posición en la que queremos mostrar las votaciones (por lo general, en el theme Redux, entre las etiquetas &lt;div class=&#8221;footer&#8221;&gt; y &lt;/div&gt;.
Copiamos el siguiente código (modificación del generado en &#8220;Collect Votes&#8221;):
&lt;!-- Votar post --&gt;
&lt;div id="pd_rating_holder_IDVOTACIONES_{PostID}"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
PDRTJS_settings_IDVOTACIONES_{PostID} = {
"id" : "IDVOTACIONES",
"unique_id" : "IDVOTACIONES_{PostID}",
"title" : "",
"permalink" : "{Permalink}",
"item_id" : "_{PostID}"
};
&lt;/script&gt;
&lt;script type="text/javascript" src="http://i0.poll.fm/js/rating/rating.js"&gt;&lt;/script&gt;
Cambiando los 4 IDVOTACIONES por el ID que teníamos anotado de antes.
Como ejemplo, las votaciones de afregar.es situadas en el &lt;div class=&#8221;footer&#8221;&gt; de las redes sociales, justo antes del botón Me Gusta de Facebook:


Por último, indicar que podéis consultar los post más votados accediendo a &#8220;View Results&#8221;:

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

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

En este tutorial veremos cómo añadir botones de voto positivo y voto negativo (pulgar arriba, pulgar abajo).

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

Lo primero que tenemos que hacer es ir a http://polldaddy.com/ y crearnos una cuenta de Wordpress (o usar una existente).

Nos logueamos con ella, pulsamos en “Create a new…" y seleccionamos "Rating”:

Ponemos un nombre descriptivo. En mi caso Delasazores:

Seleccionamos “Nero Rating" (o dejamos marcado "5-Star Rating" si preferimos votación con estrellas):

Seleccionamos el tamaño de las manos (en mi caso usé pequeño):

El resultado (por ahora) es este:

Ahora vamos a personalizar los textos a mostrar, su tamaño y colores. Pulsamos en “Layout & Fonts" y definimos los tamaños y colores que queremos. Yo usé estos:

Ahora vamos a cambiar los textos a mostrar. Vamos a “Text”:

Y ponemos las descripciones que creamos oportunas. En mi caso:

Nota: Dejé en blanco “Rate This" porque no quiero que se muestre nada encima de los botones para votar y "Rate Up" y "Rate Down" porque no quiero que se muestre nada al pasar por encima de los botones.

¿Para qué son el resto de traducciones? Si pulsamos el círculo azul a la derecha de los botones se muestra un panel como este:

Guardamos nuestro sistema de votaciones:

Ahora vamos a poner el código de las votaciones en nuestro Tumblr. Pulsamos en “Collect Votes”:

Y vemos que se nos muestra un código. Este código es para usar en 1 sólo post (más abajo ya pongo el código que necesitamos), por lo que no sirve para nuestro Tumblr. Lo ignoramos y anotamos únicamente el ID del sistema de votaciones (tapado con cuadros rojos):

Ahora vamos a nuestro Tumblr y nos situamos en la posición en la que queremos mostrar las votaciones (por lo general, en el theme Redux, entre las etiquetas <div class=”footer”> y </div>.

Copiamos el siguiente código (modificación del generado en “Collect Votes”):

<!-- Votar post -->
<div id="pd_rating_holder_IDVOTACIONES_{PostID}"></div>
<script type="text/javascript">
PDRTJS_settings_IDVOTACIONES_{PostID} = {
"id" : "IDVOTACIONES",
"unique_id" : "IDVOTACIONES_{PostID}",
"title" : "",
"permalink" : "{Permalink}",
"item_id" : "_{PostID}"
};
</script>
<script type="text/javascript" src="http://i0.poll.fm/js/rating/rating.js"></script>

Cambiando los 4 IDVOTACIONES por el ID que teníamos anotado de antes.

Como ejemplo, las votaciones de afregar.es situadas en el <div class=”footer”> de las redes sociales, justo antes del botón Me Gusta de Facebook:

Por último, indicar que podéis consultar los post más votados accediendo a “View Results”:

———————————————————————————————————

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
Decimoquinto post de ayuda. Podéis ver los anteriores aquí.
En este tutorial veremos cómo mostrar el autor de un reblogueo (para Tumblr con varios admins/moderadores) y cómo cambiar el tamaño a un texto cuando reblogueamos.
(Nota: Antes de nada, revisad los errores comunes. Es importante.)
Para poner un mostrar el autor de un reblogueo, tenemos que añadir el siguiente código en la zona en donde queremos mostrarlo:
&lt;a href="{PostAuthorURL}"&gt;&lt;img src="{PostAuthorPortraitURL-64}"&gt;
Nota: Debemos tener en cuenta que este código no se muestra en la vista previa de Personalizar. Tenemos que guardar los cambios y comprobar el resultado en nuestro Tumblr.
El resultado sería un link-imagen del avatar de quien reblogueó la imagen:

Nota: Podemos cambiar el 64 por una de estas medidas: 16, 24, 30, 40, 48, 96&#160;o 128, según lo que nos interese.
En mi caso, como quería que el autor se mostrara a la izquierda de los post, creé una regla CSS nueva:
#wrapper #content .autorpost {
       width: 64px; /* mismo width que el de PostAuthorPortraitURL */
       float: left; /* lo sitúa a la izquierda de los post */
       background: #999; /* mismo background que el de los post */
       padding: 10px 10px 5px 10px; /* margen interior que le dejáis. A vuestro gusto */
        border-radius: 10px 10px 10px 10px; /* mismo border-radius que en los post */
        border: 5px solid #CCC; /* mismo border que en los post */
            }
Ahora tenemos que ampliar el tamaño del wrapper, para que no se nos desconfigure la página con el CSS añadido. Buscamos:
#wrapper {
Y al width le sumamos los 64px (o lo que corresponda) + 20px de padding + 30px de margin-right. En mi caso sería sumarle 124px. 
Repetimos la operación, sumando 124px en el width de:
 #wrapper #content { 
Ahora tenemos que separar la zona de los post de los avatares de los autores, para que no se solapen. También necesitamos indicarle el ancho exacto de la zona de los post, para evitar desconfiguraciones. Buscamos:
#wrapper #content .post {
Y añadimos:
margin-left: 124px; /* Ancho total de los avatares */
width: 500px; /* Aquí cambiar 500 por el ancho que tengan los post */
Ya tenemos el CSS creado, así que sólo nos queda añadir el código necesario para utilizarlo. Buscamos:
{block:Posts}
Y justo debajo añadimos el código completo para mostrar el autor:
&lt;div class="autorpost"&gt;
        &lt;a href="{PostAuthorURL}"&gt;&lt;img src="{PostAuthorPortraitURL-64}"&gt;&lt;/a&gt;
&lt;/div&gt;
El resultado final (mostrando, con la línea horizontal roja, de dónde vienen los 124px sumados anteriormente) sería:

Nos quedaría una última cosa por corregir. Por defecto, debajo de los post se muestra un sombreado, que ahora estará muy a la izquierda.

Tenemos 2 opciones:
1ª) Moverla a la derecha. Busca:
#wrapper #content .bottom {
Y añade:
margin-left: 124px; /* Ancho de los avatares */
2ª) Quitarla. Busca:
#wrapper #content .bottom {
Y cambia:
background: url('http://assets.tumblr.com/themes/redux/shadow-post.png') top center no-repeat transparent;
Por:
/* background: url('http://assets.tumblr.com/themes/redux/shadow-post.png') top center no-repeat transparent; */
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
Para cambiar el tamaño a un texto cuando reblogueamos/creamos un post, lo primero (para que sea más sencillo) es escribir primero todo el texto que queremos poner y luego hacer los cambios.
Supongamos que tenemos el siguiente texto:
Esto es una prueba

Pulsamos en HTML:

Y vemos que nos muestra el texto como:
&lt;p&gt;Esto es una prueba&lt;/p&gt;
Tenemos varias opciones para cambiar el tamaño al texto. Las dos primeras son usando &lt;small&gt;&lt;/small&gt; (para encoger el texto) y &lt;big&gt;&lt;/big&gt; (para agrandarlo):
&lt;p&gt;&lt;small&gt;Esto es una prueba&lt;/small&gt;&lt;/p&gt;

&lt;p&gt;&lt;big&gt;Esto es una prueba&lt;/big&gt;&lt;/p&gt;

Nota: Se pueden usar tantos &lt;small&gt;&lt;/small&gt; y &lt;big&gt;&lt;/big&gt; como queramos. Por ejemplo, para poner algo muy grande usaríamos:
&lt;p&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;Esto es una prueba&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/p&gt;

Otra opción es usar &lt;h1&gt;&lt;/h1&gt;, &lt;h2&gt;&lt;/h2&gt; o &lt;h3&gt;&lt;/h3&gt;:
&lt;p&gt;&lt;h1&gt;Esto es una prueba&lt;/h1&gt;&lt;/p&gt;
&lt;p&gt;&lt;h2&gt;Esto es una prueba&lt;/h2&gt;&lt;/p&gt;
&lt;p&gt;&lt;h3&gt;Esto es una prueba&lt;/h3&gt;&lt;/p&gt;
Os dejo una imagen con todos a la vez:

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

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

En este tutorial veremos cómo mostrar el autor de un reblogueo (para Tumblr con varios admins/moderadores) y cómo cambiar el tamaño a un texto cuando reblogueamos.

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

Para poner un mostrar el autor de un reblogueo, tenemos que añadir el siguiente código en la zona en donde queremos mostrarlo:

<a href="{PostAuthorURL}"><img src="{PostAuthorPortraitURL-64}">

Nota: Debemos tener en cuenta que este código no se muestra en la vista previa de Personalizar. Tenemos que guardar los cambios y comprobar el resultado en nuestro Tumblr.

El resultado sería un link-imagen del avatar de quien reblogueó la imagen:

Nota: Podemos cambiar el 64 por una de estas medidas: 16, 24, 30, 40, 48, 96 o 128, según lo que nos interese.

En mi caso, como quería que el autor se mostrara a la izquierda de los post, creé una regla CSS nueva:

#wrapper #content .autorpost {
       width: 64px; /* mismo width que el de PostAuthorPortraitURL */
       float: left; /* lo sitúa a la izquierda de los post */
       background: #999; /* mismo background que el de los post */
       padding: 10px 10px 5px 10px; /* margen interior que le dejáis. A vuestro gusto */
        border-radius: 10px 10px 10px 10px; /* mismo border-radius que en los post */
        border: 5px solid #CCC; /* mismo border que en los post */
            }

Ahora tenemos que ampliar el tamaño del wrapper, para que no se nos desconfigure la página con el CSS añadido. Buscamos:

#wrapper {

Y al width le sumamos los 64px (o lo que corresponda) + 20px de padding + 30px de margin-right. En mi caso sería sumarle 124px. 

Repetimos la operación, sumando 124px en el width de:

 #wrapper #content { 

Ahora tenemos que separar la zona de los post de los avatares de los autores, para que no se solapen. También necesitamos indicarle el ancho exacto de la zona de los post, para evitar desconfiguraciones. Buscamos:

#wrapper #content .post {

Y añadimos:

margin-left: 124px; /* Ancho total de los avatares */
width: 500px; /* Aquí cambiar 500 por el ancho que tengan los post */

Ya tenemos el CSS creado, así que sólo nos queda añadir el código necesario para utilizarlo. Buscamos:

{block:Posts}

Y justo debajo añadimos el código completo para mostrar el autor:

<div class="autorpost">
        <a href="{PostAuthorURL}"><img src="{PostAuthorPortraitURL-64}"></a>
</div>

El resultado final (mostrando, con la línea horizontal roja, de dónde vienen los 124px sumados anteriormente) sería:

Nos quedaría una última cosa por corregir. Por defecto, debajo de los post se muestra un sombreado, que ahora estará muy a la izquierda.

Tenemos 2 opciones:

1ª) Moverla a la derecha. Busca:

#wrapper #content .bottom {

Y añade:

margin-left: 124px; /* Ancho de los avatares */

2ª) Quitarla. Busca:

#wrapper #content .bottom {

Y cambia:

background: url('http://assets.tumblr.com/themes/redux/shadow-post.png') top center no-repeat transparent;

Por:

/* background: url('http://assets.tumblr.com/themes/redux/shadow-post.png') top center no-repeat transparent; */

———————————————————————————————————

Para cambiar el tamaño a un texto cuando reblogueamos/creamos un post, lo primero (para que sea más sencillo) es escribir primero todo el texto que queremos poner y luego hacer los cambios.

Supongamos que tenemos el siguiente texto:

Esto es una prueba

Pulsamos en HTML:

Y vemos que nos muestra el texto como:

<p>Esto es una prueba</p>

Tenemos varias opciones para cambiar el tamaño al texto. Las dos primeras son usando <small></small> (para encoger el texto) y <big></big> (para agrandarlo):

<p><small>Esto es una prueba</small></p>

<p><big>Esto es una prueba</big></p>

Nota: Se pueden usar tantos <small></small> y <big></big> como queramos. Por ejemplo, para poner algo muy grande usaríamos:

<p><big><big><big><big>Esto es una prueba</big></big></big></big></p>

Otra opción es usar <h1></h1>, <h2></h2> o <h3></h3>:

<p><h1>Esto es una prueba</h1></p>
<p><h2>Esto es una prueba</h2></p>
<p><h3>Esto es una prueba</h3></p>

Os dejo una imagen con todos a la vez:

———————————————————————————————————

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
Decimocuarto post de ayuda. Podéis ver los anteriores aquí.
En este tutorial veremos cómo poner banners o publicidad entre 2 post, cómo añadir un botón Like de Tumblr y cómo ajustar las imágenes de los post para que ocupen todo el ancho.
(Nota: Antes de nada, revisad los errores comunes. Es importante.)
Para poner un banner o publicidad entre 2 post, tenemos que buscar:
{/block:Posts}
Y justo encima añadir lo siguiente:
{block:Post1}
Código del banner / publicidad
{/block:Post1}
El resultado sería:

Os puede suceder, como en mi caso, que el banner os salga pegado al siguiente post y situado a la izquierda. Para solucionarlo, le indicamos que lo centre y que haga unos saltos de línea:
{block:Post1}
&lt;center&gt;Código del banner / publicidad&lt;/center&gt;&lt;br&gt;&lt;br&gt;
{/block:Post1}
El resultado sería:

El número que sale en el block:Post define el post tras el cuál se mostrará el código añadido y podemos usar este código tantas veces como queramos.
Por ejemplo, para mostrar un banner tras el tercer post y otro tras el sexto usaremos:
{block:Post3}
Código del banner / publicidad 1
{/block:Post3}
{block:Post6}
Código del banner / publicidad 2
{/block:Post6}
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
Para añadir un botón Like de Tumblr es tan fácil como añadir el siguiente código en la posición que queramos:
{LikeButton}
En mi caso, lo voy a colocar justo después del primer:
&lt;div class="footer"&gt;
O lo que es lo mismo, antes del botón de rebloguear.
Este botón tiene algunas opciones de personalización:
size (por defecto 20): define el tamaño del botón
color (por defecto grey): define el color del botón. Tiene las opciones black y white.
Por ejemplo, para añadir un botón negro de tamaño 15, usaríamos:
{LikeButton color="black" size="15"}
Tumblr se encarga de generar todo el código para este botón, por lo que es probable que no lo coloque en la posición que queremos y nos desorganice el footer:

Nota: En la vista previa de la ventana Personalizar no se ve el botón Like. Tenemos que guardar los cambios y consultar el resultado en nuestra web.
Para solucionar esto, podemos usar este código:
&lt;span style="float: left; margin-right: 5px;"&gt;{LikeButton color="black" size="15"}&lt;/span&gt;
Simplemente coloca el botón a la izquierda de todo y deja un margen de 5px a la derecha.
El resultado sería:

&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
Para que las imágenes ocupen todo el ancho del post (por defecto tienen 500px de máximo), lo primero que tenemos que saber es el ancho que queremos que tengan las imágenes. En mi caso, como los post tienen un margen interior (padding) de 10px, voy a ponerle que ocupen 30px menos que ese ancho, para que quede bien ajustado. Buscamos:
#wrapper #content {
Y anotamos el width que tenemos ahí. En mi ejemplo serían 565px.
Ahora tenemos que buscar:
#wrapper #content .post .media {
y justo debajo del } de cierre añadimos:
#wrapper #content .post .media img {
width: 535px; 
}
Puse 535px porque es el ancho del post (content) menos los 30px que comenté antes.
Por último, buscamos:
#wrapper #content .post img {
Y cambiamos el max-width de 500 a 535px (o lo que corresponda).
Con esto pasamos de esto:

A esto:

&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
Extra: Para crear un menú superior como el que yo tengo, os recomiendo la siguiente página: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Trae todo muy bien explicado y un ejemplo funcional al final de todo.
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

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

En este tutorial veremos cómo poner banners o publicidad entre 2 post, cómo añadir un botón Like de Tumblr y cómo ajustar las imágenes de los post para que ocupen todo el ancho.

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

Para poner un banner o publicidad entre 2 post, tenemos que buscar:

{/block:Posts}

Y justo encima añadir lo siguiente:

{block:Post1}
Código del banner / publicidad
{/block:Post1}

El resultado sería:

Os puede suceder, como en mi caso, que el banner os salga pegado al siguiente post y situado a la izquierda. Para solucionarlo, le indicamos que lo centre y que haga unos saltos de línea:

{block:Post1}
<center>Código del banner / publicidad</center><br><br>
{/block:Post1}

El resultado sería:

El número que sale en el block:Post define el post tras el cuál se mostrará el código añadido y podemos usar este código tantas veces como queramos.

Por ejemplo, para mostrar un banner tras el tercer post y otro tras el sexto usaremos:

{block:Post3}
Código del banner / publicidad 1
{/block:Post3}
{block:Post6}
Código del banner / publicidad 2
{/block:Post6}

———————————————————————————————————

Para añadir un botón Like de Tumblr es tan fácil como añadir el siguiente código en la posición que queramos:

{LikeButton}

En mi caso, lo voy a colocar justo después del primer:

<div class="footer">

O lo que es lo mismo, antes del botón de rebloguear.

Este botón tiene algunas opciones de personalización:

size (por defecto 20): define el tamaño del botón

color (por defecto grey): define el color del botón. Tiene las opciones black y white.

Por ejemplo, para añadir un botón negro de tamaño 15, usaríamos:

{LikeButton color="black" size="15"}

Tumblr se encarga de generar todo el código para este botón, por lo que es probable que no lo coloque en la posición que queremos y nos desorganice el footer:

Nota: En la vista previa de la ventana Personalizar no se ve el botón Like. Tenemos que guardar los cambios y consultar el resultado en nuestra web.

Para solucionar esto, podemos usar este código:

<span style="float: left; margin-right: 5px;">{LikeButton color="black" size="15"}</span>

Simplemente coloca el botón a la izquierda de todo y deja un margen de 5px a la derecha.

El resultado sería:

———————————————————————————————————

Para que las imágenes ocupen todo el ancho del post (por defecto tienen 500px de máximo), lo primero que tenemos que saber es el ancho que queremos que tengan las imágenes. En mi caso, como los post tienen un margen interior (padding) de 10px, voy a ponerle que ocupen 30px menos que ese ancho, para que quede bien ajustado. Buscamos:

#wrapper #content {

Y anotamos el width que tenemos ahí. En mi ejemplo serían 565px.

Ahora tenemos que buscar:

#wrapper #content .post .media {

y justo debajo del } de cierre añadimos:

#wrapper #content .post .media img {
width: 535px; 
}

Puse 535px porque es el ancho del post (content) menos los 30px que comenté antes.

Por último, buscamos:

#wrapper #content .post img {

Y cambiamos el max-width de 500 a 535px (o lo que corresponda).

Con esto pasamos de esto:

A esto:

———————————————————————————————————

Extra: Para crear un menú superior como el que yo tengo, os recomiendo la siguiente página: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

Trae todo muy bien explicado y un ejemplo funcional al final de todo.

———————————————————————————————————

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
Decimotercero post de ayuda. Podéis ver los anteriores aquí.
En este tutorial veremos cómo añadir una nueva barra lateral a nuestra página. Como ya tenemos una a la derecha, la añadiremos a la izquierda.
(Nota: Antes de nada, revisad los errores comunes. Es importante.)
Cómo ya sabemos la barra lateral está formada de la siguiente forma:
&lt;div id="sidebar"&gt;       &lt;div id="top"&gt;               CONTENIDO       &lt;/div&gt; &lt;/div&gt;
Para añadir una barra a la izquierda vamos a usar la misma estructura, pero renombrando los id:
&lt;div id="sideleft"&gt;       &lt;div id="topleft"&gt;               CONTENIDO       &lt;/div&gt; &lt;/div&gt;
Tenemos que hacer lo mismo en el CSS (style). Buscamos y copiamos los siguientes códigos completos (desde el primer # hasta el } de cierre):
#wrapper #sidebar {
#wrapper #sidebar #top {
Y los renombramos como arriba (#sideleft #topleft). Además, en #sideleft cambiamos:
float: right;
por
float: left; 
Y añadimos:
margin: 0px 20px 0px 0px;
Siendo 20px el margen entre la barra de la izquierda y la parte del contenido (la de los post).
Y en el #topleft cambiamos:
padding: 0 20px;
por 
padding: 20px;
Y añadimos:
margin: 0px 0px 20px 0px;
Los 20px de padding serán los márgenes interiores y los 20px la separación entre 2 topleft.
En mi caso quedaría lo siguiente (lo pongo de ejemplo para que veáis de forma más clara lo que debéis hacer, pero no recomiendo un copy/paste de este código, ya que vuestra barra de la izquierda será distinta de la de la derecha):
 #wrapper #sideleft {
                margin: 0px 20px 0px 0px;
                width: 260px;
                float: leftt;
                color: {color:Background};
                font-family: {font:Accent}
            }
      #wrapper #sideleft #topleft {
                    border-radius: 10px 10px 10px 10px;
                    border: 4px solid #000; 
                    box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 20px;
                    margin: 0px 0px 20px 0px;
                }
Ahora tenemos que buscar #wrapper { y a su width sumarle el width de sideleft y el margen que hemos puesto. En mi caso teníamos esto:
#wrapper {
            width: 845px;
            margin: 0 auto;
        }
Y nos quedará esto:
#wrapper {
            width: 1125px; /* 845 + 260 + 20 de margen */
            margin: 0 auto;
        }
Por último, ya sólo nos queda añadir los &lt;div&gt; del principio a nuestra página. Buscamos &lt;div id=&#8221;content&#8221;&gt; y los pegamos justo antes. Por ejemplo:
 &lt;div id="sideleft"&gt;
            &lt;div id="topleft"&gt;
                &lt;img src="http://27.media.tumblr.com/tumblr_m2pavzQyNR1r1m0jso1_250.png"&gt;
            &lt;/div&gt;
            &lt;div id="topleft"&gt;
                &lt;img src="http://assets.tumblr.com/images/default_avatar_128.gif"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
Quedaría de la siguiente forma:

(Ver en grande)
PD: Si el banner de vuestra página se sitúa a la izquierda de todo, y queréis que salga centrado, simplemente tenéis que buscar en CSS (style) #wrapper #title { y añadirle:
text-align: center;
Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda 

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

En este tutorial veremos cómo añadir una nueva barra lateral a nuestra página. Como ya tenemos una a la derecha, la añadiremos a la izquierda.

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

Cómo ya sabemos la barra lateral está formada de la siguiente forma:

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

Para añadir una barra a la izquierda vamos a usar la misma estructura, pero renombrando los id:

<div id="sideleft">
       <div id="topleft">
               CONTENIDO
       </div>
</div>

Tenemos que hacer lo mismo en el CSS (style). Buscamos y copiamos los siguientes códigos completos (desde el primer # hasta el } de cierre):

#wrapper #sidebar {

#wrapper #sidebar #top {

Y los renombramos como arriba (#sideleft #topleft). Además, en #sideleft cambiamos:

float: right;

por

float: left; 

Y añadimos:

margin: 0px 20px 0px 0px;

Siendo 20px el margen entre la barra de la izquierda y la parte del contenido (la de los post).

Y en el #topleft cambiamos:

padding: 0 20px;

por 

padding: 20px;

Y añadimos:

margin: 0px 0px 20px 0px;

Los 20px de padding serán los márgenes interiores y los 20px la separación entre 2 topleft.

En mi caso quedaría lo siguiente (lo pongo de ejemplo para que veáis de forma más clara lo que debéis hacer, pero no recomiendo un copy/paste de este código, ya que vuestra barra de la izquierda será distinta de la de la derecha):

 #wrapper #sideleft {
                margin: 0px 20px 0px 0px;
                width: 260px;
                float: leftt;
                color: {color:Background};
                font-family: {font:Accent}
            }
      #wrapper #sideleft #topleft {
                    border-radius: 10px 10px 10px 10px;
                    border: 4px solid #000; 
                    box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 20px;
                    margin: 0px 0px 20px 0px;
                }

Ahora tenemos que buscar #wrapper { y a su width sumarle el width de sideleft y el margen que hemos puesto. En mi caso teníamos esto:

#wrapper {
            width: 845px;
            margin: 0 auto;
        }

Y nos quedará esto:

#wrapper {
            width: 1125px; /* 845 + 260 + 20 de margen */
            margin: 0 auto;
        }

Por último, ya sólo nos queda añadir los <div> del principio a nuestra página. Buscamos <div id=”content”> y los pegamos justo antes. Por ejemplo:

 <div id="sideleft">
            <div id="topleft">
                <img src="http://27.media.tumblr.com/tumblr_m2pavzQyNR1r1m0jso1_250.png">
            </div>
            <div id="topleft">
                <img src="http://assets.tumblr.com/images/default_avatar_128.gif">
            </div>
        </div>

Quedaría de la siguiente forma:

(Ver en grande)

PD: Si el banner de vuestra página se sitúa a la izquierda de todo, y queréis que salga centrado, simplemente tenéis que buscar en CSS (style) #wrapper #title { y añadirle:

text-align: center;

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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:
&lt;div id="titulo"&gt;NOMBRE CABECERA&lt;/div&gt;
  &lt;div id="top"&gt;
  CONTENIDO SECCIÓN
  &lt;/div&gt;
Tenemos que cambiarlo por esto:
&lt;div id="seccion" style="cursor: pointer;"&gt;
       &lt;div onClick="document.getElementById('seccion_oculta').style.display='block'"&gt;VER SECCION&lt;/div&gt;
       &lt;div onClick="document.getElementById('seccion_oculta').style.display='none'"&gt;OCULTAR SECCION&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="seccion_oculta" style="display:none"&gt;
        &lt;div id="top"&gt;
             CONTENIDO SECCIÓN
        &lt;/div&gt;
  &lt;/div&gt;
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:
&lt;div id="seccion" style="cursor: pointer;"&gt;
        &lt;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'"&gt;PULSA AQUÍ PARA &lt;br&gt;MOSTRAR LA SECCIÓN&lt;/div&gt;
        &lt;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'"&gt;PULSA AQUÍ PARA &lt;br&gt;OCULTAR LA SECCIÓN&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="seccion_oculta" style="display:none"&gt;
       &lt;div id="top"&gt;
             CONTENIDO SECCIÓN
        &lt;/div&gt;
  &lt;/div&gt;
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

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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 &lt;body&gt;. Usaremos lo siguiente:
 &lt;div class="cabecera1"&gt;
        CONTENIDO DE LA CABECERA 1
 &lt;/div&gt;
 &lt;div class="cabecera2"&gt;
        CONTENIDO DE LA CABECERA 2
 &lt;/div&gt; 
Como ejemplo, en la cabecera 1 pondremos una imagen de 800x100:
 &lt;div class="cabecera1"&gt;
        &lt;a href="/"&gt;&lt;img src="http://lorempixel.com/output/technics-q-c-800-100-6.jpg" /&gt;&lt;/a&gt;
 &lt;/div&gt; 
Y en la cabecera 2 un listado de URLs:
 &lt;div class="cabecera2"&gt;
       &lt;a href="URL"&gt;URL 1&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 2&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 3&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 4&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 5&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 6&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 7&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 8&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 9&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 10&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 11&lt;/a&gt;&amp;nbsp;|
       &lt;a href="URL"&gt;URL 12&lt;/a&gt;
 &lt;/div&gt;
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 &lt;/style&gt;) 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

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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 -&gt; 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 &#8220;Ver comentarios&#8221;. La solución sencilla es buscar:
&lt;a href="{Permalink}#disqus_thread"&gt;{lang:View comments}&lt;/a&gt;
Y añadir un class=&#8221;dsq-comment-count&#8221;:
&lt;a class="dsq-comment-count" href="{Permalink}#disqus_thread"&gt;{lang:View comments}&lt;/a&gt;
Si después de esto sigue mostrándonos &#8220;Ver comentarios&#8221;, 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 &lt;/body&gt;. 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:
&lt;div id="top"&gt;
      CONTENIDO
&lt;/div&gt;
Y lo que tendremos será:
&lt;div id="titulo"&gt;NOMBRE CABECERA&lt;/div&gt;
&lt;div id="top"&gt;
      CONTENIDO
&lt;/div&gt;
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
&lt;div id=&#8221;titulo&#8221;&gt;NOMBRE CABECERA&lt;/div&gt; antes de cada &lt;div id=&#8221;top&#8221;&gt; 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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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: admin@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&amp;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 -&gt; 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

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: admin@delasazores.com), subida de la página a buscadores, acceso FTP y 5MB de espacio en disco.

Como curiosidad, este es el panel:

image

image

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

image

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:

image

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):

image

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:

image

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í:

image

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

image

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

image

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:

image

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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}         &lt;div class="post"&gt;        {block:Photo}

Y lo cambiamos por lo siguiente:
{block:Posts}        {block:PermalinkPagination}               &lt;div class="post"&gt;                      {block:PreviousPost}                              &lt;a href="{PreviousPost}"&gt;&amp;larr; Anterior Post&lt;/a&gt;                      {/block:PreviousPost}                      {block:NextPost}                             &lt;a style="float:right;" href="{NextPost}"&gt;Siguiente Post &amp;rarr;&lt;/a&gt;                      {/block:NextPost}               &lt;/div&gt;               &lt;br /&gt;       {/block:PermalinkPagination} &lt;div class="post"&gt; {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 &#8220;Anterior Post&#8221; o &#8220;Siguiente Post&#8221; por otro texto que os guste más o una imagen.
Nota: El
&lt;div class="post"&gt;
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}         &lt;a class="jump_page" href="/tagged//page/{TotalPages}"&gt;..{TotalPages}&lt;/a&gt; {/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 :)
Nota: En el theme redux, si tenéis sólo los botones siguiente y anterior al final de la página, para activar la numeración tenéis que ir Personalización y, en el tercer rectángulo de Apariencia, activar Enable Jump Pagination.
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:

image

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:

image

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 :)

Nota: En el theme redux, si tenéis sólo los botones siguiente y anterior al final de la página, para activar la numeración tenéis que ir Personalización y, en el tercer rectángulo de Apariencia, activar Enable Jump Pagination.

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
Cómo funcionan los recaptchas explicado con memes

Pulsa aquí para mostrar más opciones de este post
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 &#8220;fantástico&#8221; (sí Sheldon, es sarcasmo) editor de Tumblr, éste muchas veces pega las comillas cursivas. Un ejemplo:
&lt;script type=&#8221;text/javascript&#8221; src=&#8221;https://apis.google.com/js/plusone.js&#8221;&gt;
  {lang: &#8216;es&#8217;}&lt;/script&gt;
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 &lt;&#160;! - - (sin espacios) y su cierre es - - &gt; (sin espacios). Cuando publicas un post Tumblr cambia este código y pone &lt;!— de apertura y —&gt; 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.

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:

<script type=text/javascript src=https://apis.google.com/js/plusone.js>

  {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.

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
Séptimo post de ayuda. Podéis ver los anteriores aquí.
En este tutorial vamos a ver como añadir un buscador de tags y un buscador en Google. 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 &lt;/head&gt;:
&lt;!-- Buscar tags --&gt; &lt;script type="text/javascript"&gt; function handleThis(formElm) { window.location="URL_DE_TU_WEB/tagged/"+formElm.number.value+""; return false; } &lt;/script&gt;

Ejemplo válido:
window.location="http://delasazores.com/tagged/"+formElm.number.value+"";
Ahora buscad lo siguiente
&lt;div id="search"&gt;      &lt;form action="/search" method="get" id="search-form"&gt;             &lt;input type="hidden" name="t" value="{Name}" /&gt;             &lt;input type="hidden" name="scope" value="all_of_tumblr" /&gt;             &lt;input type="text" name="q" class="query" value="{SearchQuery}" /&gt;             &lt;input type="submit" value="{lang:Search}" class="submit" /&gt;             &lt;div class="clear"&gt;&lt;/div&gt;      &lt;/form&gt; &lt;/div&gt;

Y cambiadlo por (si queréis mantener ambos buscadores, podéis simplemente añadir estas líneas debajo del otro código)::
&lt;!-- Buscador de tags --&gt; &lt;div id="search"&gt;        &lt;form action="/search" id="search-form" onsubmit="return handleThis(this)"&gt;                &lt;input type="text" class="query" name="number" value="Buscador de Tags" onclick="this.select()" /&gt;                &lt;input type="submit" value="{lang:Search}" class="submit" /&gt;                &lt;div class="clear"&gt;&lt;/div&gt;        &lt;/form&gt; &lt;/div&gt; &lt;!-- Fin Buscador de tags --&gt;

Para añadir un buscador en Google, hay que añadir este código antes de &lt;/head&gt;:
&lt;!-- Buscar en Google --&gt;
&lt;script type="text/javascript"&gt;
function handleThis2(formElm)
{
window.location="http://www.google.com/search?hl=es&amp;q=site:URL_DE_TU_WEB "+formElm.number.value+"";
return false;
}
&lt;/script&gt;
&lt;!-- Fin Buscar en Google --&gt;
Ejemplo válido:
window.location="http://www.google.com/search?hl=es&amp;q=site:delasazores.com "+formElm.number.value+"";
Y este encima o debajo del buscador de tags:
&lt;!-- Buscador de Google --&gt;
&lt;div id="search"&gt;
&lt;form action="/search" id="search-form" onsubmit="return handleThis2(this)"&gt;
&lt;input type="text" class="query" name="number" value="Buscar en Google" onclick="this.select()" /&gt;
&lt;input type="submit" value="{lang:Search}" class="submit" /&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;!-- Fin Buscador de Google --&gt;
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 y un buscador en Google. 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 -->

Para añadir un buscador en Google, hay que añadir este código antes de </head>:

<!-- Buscar en Google -->
<script type="text/javascript">
function handleThis2(formElm)
{
window.location="http://www.google.com/search?hl=es&q=site:URL_DE_TU_WEB "+formElm.number.value+"";
return false;
}
</script>
<!-- Fin Buscar en Google -->

Ejemplo válido:

window.location="http://www.google.com/search?hl=es&q=site:delasazores.com "+formElm.number.value+"";

Y este encima o debajo del buscador de tags:

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

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.

image

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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é creadordememesTí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:
&lt;iframe width="200" height="257" src="http://es.memegenerator.net/Forever-Alone/embed?languageCode=en&amp;watermark=delasazores.com" frameborder="0" /&gt;

Nota importante: después de cada código de estos, tenéis que añadir
&lt;/iframe&gt;
para cerrarlo, o tendréis problemas en la edición HTML.
Ahora ya &#8220;sólo&#8221; 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 &#8220;copiar la ruta de la imagen&#8221; o &#8220;Guardar imagen como&#8230;&#8221; 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 &#8220;:)&#8221;).
Para enviarme el link de la imagen pulsa encima de &#8220;Enviar un texto&#8221; y selecciona &#8220;Enviar un enlace&#8221;. Para enviarme una imagen que tengas guardada en tu pc pulsa encima de &#8220;Enviar un texto&#8221; y selecciona &#8220;Enviar una foto&#8221;.
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 &#8220;¿?&#8221;).
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

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
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&#160;px (puedes modificar el tamaño y el color)
La tercera básicamente añade un borde de 5&#160;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&#160;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 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 &lt;br&gt;:
&lt;div id="bottom"&gt;&lt;/div&gt;
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 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í:

image

El resultado sería:

image

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:

image

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:

image

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

Pulsa aquí para mostrar más opciones de este post
Comparte este post:
Botón para subir al principio de la página de Cafetería de las Azores, Web de Humor, Tumblr en Español Huevo de Pascua