¿Cómo centrar el título de mi blog?

Sencillo, solo tienes que copiar lo siguiente en el CSS:

.header
{
text-align: center;
}

Para separarlo más de la parte superior (por ejemplo), puedes incluir la etiqueta padding-top y los píxeles que quieras separar tu título. Quedaría así:

.header
{
text-align: center;
padding-top: 20px;
}

¿Cómo creo un menú con pestañas desplegables?

Esto ya es un poco más hardcore y requiere un pelín más de tiempo, pero de nuevo, no es imposible, así que tranquilidad y buenos alimentos. En Ciudad Blogger lo explican muy facilito, pero por si acaso, lo explicamos aquí otra vez usando sus códigos (que son los únicos que a mí me funcionan).

Nos vamos a la plantilla HTML y hacemos una copia de seguridad (just in case):

Y ahí buscamos /* Tabs con ctrl + F, como siempre. Una vez lo tenemos, vemos que debajo aparecen un montón de cosas hasta que pone /* Columns. Bien, pues todo eso, lo quitamos.

Es más que probable que nos aparezcan más líneas entre /* Tabs y /* Column, pero no preocuparse, se elimina todo lo que hace referencia a Tabs, sin importar cuántas líneas sean. Y una vez hecho eso, se pone el siguiente código:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}

De tal manera que quede así:

Una vez hecho esto, guardamos. Después, con ctrl + F buscamos class='tabs' y nos saldrá esto:

Pues lo borramos, solo lo recuadrado en amarillo, solo class='tabs', lo demás lo dejamos tal cual.

Ahora guardamos la plantilla y salimos de allí. Ahora vamos a crear el gadget en sí. Esto es muy sencillo, es un simple gadget HTML/Javascript en el que escribiremos lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
<li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
<li><a class='fly' href='#'>Pestaña 2.2.6</a>
<ul>
<li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
<li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 2.3</a></li>
<li><a href='URL del enlace'>Pestaña 2.4</a></li>
<li><a href='URL del enlace'>Pestaña 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 3.1</a></li>
<li><a href='URL del enlace'>Pestaña 3.2</a></li>
<li><a href='URL del enlace'>Pestaña 3.3</a></li>
<li><a href='URL del enlace'>Pestaña 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a class='fly' href='#'>Pestaña 4.2</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 4.3</a></li>
<li><a href='URL del enlace'>Pestaña 4.4</a></li>
<li><a href='URL del enlace'>Pestaña 4.5</a></li>
<li><a href='URL del enlace'>Pestaña 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaña 5.1</a></li>
<li><a href='URL del enlace'>Pestaña 5.2</a></li>
<li><a href='URL del enlace'>Pestaña 5.3</a></li>
</ul>
</li>

La longitud de este gadget dependerá de las pestañas y subpestañas que queramos añadir. Aquí tenemos mil y media, pero si no necesitamos tantas, las quitaremos y punto. Donde pone URL, ese es el lugar donde tendremos que pegar el enlace que sea para que nos lleve a nuestras páginas.

También podemos usar la pestaña sin enlace si queremos que la pestaña solo sirva para que se desplieguen las demás, es decir, que aunque se clique en ella no salga nada (el ejemplo sería mi Pestaña 5, de la cual se despliegan las subpestañas Pestaña 5.1, Pestaña 5.2 y Pestaña 5.3, pero si clicamos en la propia Pestaña 5, no hay nada). Para eso, en lugar de poner una URL, solo ponemos # también entre comillas, importante. En el código de arriba, que es esencialmente igual al menú que yo tengo, ya hay puestas algunas de las # en lugar de URLs, pero si queremos que esas también conduzcan a alguna página, las cambiamos por la dirección que sea, y listo.

Una vez hecho esto, quedará como si fuera una lista de enlaces. Nos vamos a la edición del CSS y copiamos lo siguiente:

/* Menu molón
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú: si lo dejamos en 100% ocupará todo el ancho y listo. Si queremos modificarlo, con poner el valor en píxeles que más se adapte a nuestra plantilla, vale */
height:35px; /* Alto del menú. Si lo queremos más estrechito, reducimos */
padding-left:14px;
background:#000000; /* Color del menú */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px; /* Si cambiamos el alto del menú, tendremos que cambiarlo de nuevo cada vez que veamos height */
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc; /* Color de las letras del menú */
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif; /* Fuente del menú, podemos poner la que mejor vaya con nuestro diseño, pero siempre entre comillas y después del nombre de la fuente, es importante poner una coma y dejar sans-serif; */
font-size:13px; /* Tamaño de la fuente */
font-weight:normal; /* Si queremos que esté en negrita, cambiamos normal por bold, si lo queremos en cursiva, lo cambiamos por italic */
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#000000; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px; /* Ancho de las pestañas desplegables */
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo de las segundas pestañas desplegables (justo aquí abajo) */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el ratón */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el ratón */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #1AAC00; /* Color de fondo de las pestañas que se despliegan de las sub pestañas (sí, lo sé, Inception total, pero si miramos el menú de mi cabecera vemos que son las pestañas verdes, las 2.1.1.) */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}

Donde hay frases que parece que están escritas en cristiano y no en CSS (reconoceréis esas frases primero porque se entienden y segundo porque están entre /* ... */) son las cosillas que podemos cambiar sin miedo a cargarnos nada. En el propio código os explico qué son y para qué sirven, y al estar entre /* ... */ podéis conservarlo en el CSS sin afectar a nada (que a lo mejor es útil para cambiar alguna cosa días o meses o años después, cuando no nos acordemos de para qué era cada etiqueta). Obviamente, si no las queréis para nada las podéis quitar y punto (¡cuidado de no llevarnos nada más que eso!).

Así que solo queda eliminar el gadget de páginas prediseñado por Blogger si es que lo conservábamos y hala, ¡listo! ¿Alguna pregunta?

¿Cómo pongo un botón para subir?

Esto es aún más fácil que personalizar blockquotes ;D Solo hay que crear un gadget del tipo HTML/Javascript y copiar lo siguiente:

<a style="display:scroll;position:fixed;bottom:20px;right:20px;" href="#" title="Subir"><img src="url de la imagen" /></a>

Y eso es todo, todito, todo.

Bonus track! ¿Cómo pongo un botón para subir con efecto scroll (vamos, que en vez de subir sin más, se deslice)?

De nuevo otra cosilla que parece más complicada de lo que realmente es. Es un pelín más difícil que el botón simple, porque hay que meterse a tocar HTML, pero nada, igualmente sencillo. Así que bueno, ¡manos a la obra!

Primero, vamos a crear una copia de seguridad de nuestra plantilla, que siempre es importante antes de tocar nada del HTML, que luego nos arrepentimos del cambio y no nos acordamos de todo lo que hemos cambiado y bueno, ¡mejor prevenir que curar!

La copia de seguridad es, para que nos entendamos, la plantilla del blog (nada de entradas ni imágenes o archivos que hayamos subido), y se guarda en el ordenador a buen recaudo por si en algún momento queremos volver a ella (para eso solo habría que subirla dándole al mismo botoncito y buscándola en nuestros archivos).

Y una vez hecho eso, ¡al HTML propiamente dicho!

Una vez dentro, buscamos (clicando en cualquier parte del HTML y pulsando ctrl + F) la etiqueta </body>

Justo encima copiamos lo siguiente:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/>

<script>

   $(function () {

   $(&#39;.go-to-top&#39;).click(function () {

   $(&#39;html,body&#39;).animate({

   scrollTop: 0

    }, 500);

   return false;

    });

    });

</script>

Esto por no tener, no tenemos ni que entenderlo.

Y después modificamos el gadget que teníamos hecho ya en el botón sencillo, añadiendo href="wrap" y class="go-to-top":

<a style="display:scroll;position:fixed;bottom:10px;right:40px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="url de la imagen" /></a>

Hacer un botón de subida (que no tiene porqué ser la pera limonera) no es demasiado difícil en PicMonkey o en Pixlr, pero hay gente majísima que ya ha hecho algunos por nosotros, por ejemplo Blanca en Personalización de blogs, Trini en Trucos Diseña Web, o Laura en Miss Lavanda.

¿Cómo personalizo las blockquotes?

En un primer momento puede parecer algo complicado, pero ¡para nada! Empezamos por abrir el diseñador de plantillas de blogger, y vamos a la opción de añadir CSS:

Y ahí copiamos lo siguiente:

.post-body blockquote {
border-left: 15px solid; border-color: #bf0000
border-right: 1px solid; border-color: #bf0000;
border-top: 1px solid; border-color: #bf0000;
border-bottom: 1px solid; border-color: #bf0000;
background: #ffffff;
padding: 25px;
font-size: 15px;
color: #323232;
font-family: 'Hanuman', serif; 
font-style:italic; 
border.radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Y voilà!, eso es todo... si quieres que tu blockquote sea exactamente igual que la mía.

Para adaptarla a tus gustos, podemos modificar los colores (siempre usando el sistema hexadecimal. Yo siempre me ayudo con esta página para seleccionar el color perfecto ;)), la letra (tamaño, color y fuente) e incluso redondear los bordes (para eso sirven las tres últimas líneas, y a más píxeles más redondeados quedarán los bordes, si solo los quieres curvarlos un poquito, pon un valor más cercano a 0px en las tres líneas).

Ah, si queremos cambiar el estilo de los bordes, podemos cambiar solid por dashed (para que estén formados por guiones), dotted (para que estén hechos de puntos) o incluso double (para que haya dos líneas).

Bonus track! También podemos poner una imagen de fondo, añadiendo simplemente esta línea:

background-image: url('url de la imagen');

Aquí os dejo algún ejemplo de blockquotes que yo misma he hecho en un momentín :D (sí, lo sé, lo siento, sé que son bastante horteras, pero tenía que exagerarlo todo mucho para que vieseis las distintas opciones sin para eso hacer ochenta modelos):

.post-body blockquote {

border-left: 12px solid; border-color: #EC1789;

border-right: 12px solid; border-color: #EC1789;

border-top: 3px solid; border-color: #EC1789;

border-bottom: 3px solid; border-color: #EC1789;

padding: 15px;

font-size:17px;

color: #EC1789;

font-family: 'Pacifico', serif;

background: #FFDCEF;

border.radius: 15px;

-moz-border-radius:15px;

-webkit-border-radius:15px;

}

---

.post-body blockquote {

border-left: 12px solid; border-color: #907249;

border-right: 1px solid; border-color: #907249;

border-top: 1px solid; border-color: #907249;

border-bottom: 1px solid; border-color: #907249;

padding: 30px;

font-size:13px;

color: #000000;

font-family: 'Times New Roman', serif;

background: transparent;

border.radius: 0px;

-moz-border-radius:0px;

-webkit-border-radius:0px;

}

---

.post-body blockquote {

border-left: 7px solid; border-color: #FF0731;

border-right: 7px solid; border-color: #FF0731;

border-top: 7px solid; border-color: #FF0731;

border-bottom: 7px solid; border-color: #FF0731;

padding: 70px;

font-size:16px;

color: #FF0731;

font-family: 'Coming Soon', serif;

background-image: url('http://feelgrafix.com/data_images/out/13/871810-polka-dot-wallpaper.jpg');

border.radius: 10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

Eso es todo lo que tienen las blockquotes. ¿Algo que no quede claro, alguna duda, pregunta, ruego o sugerencia?