jueves, 2 de abril de 2015

¿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://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 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://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 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?

miércoles, 1 de abril de 2015

¿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 blogsTrini 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?

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet mattis urna. Fusce quis blandit neque, non pretium felis. Quisque eget nibh ipsum. Curabitur et ante non orci aliquam facilisis. Pellentesque imperdiet justo sit amet neque placerat cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi sagittis, dui a iaculis cursus, elit tellus placerat tellus, et commodo elit diam nec eros. Suspendisse vitae vestibulum lorem. Quisque placerat eleifend lectus, vel eleifend arcu gravida et. Proin viverra sit amet orci vitae maximus. Aenean convallis risus sit amet tellus faucibus elementum. Etiam elementum, libero et consequat tempus, lectus nibh accumsan eros, vitae aliquet sem augue nec ante. Fusce et lorem mi. Integer gravida quis lorem aliquet sollicitudin. Aenean et justo diam. Suspendisse potenti.

Nulla quis metus sed purus sodales ornare in id magna. Donec blandit neque vitae scelerisque ultrices. Quisque molestie tellus placerat accumsan tempor. Phasellus dignissim orci nec mauris bibendum, luctus mattis ipsum malesuada. Morbi ornare sed nisl ac scelerisque. Phasellus lobortis turpis urna, vitae sodales dui congue a. Praesent ornare ac odio id mattis. Maecenas suscipit dapibus erat. Suspendisse in mollis lacus, ullamcorper rhoncus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fermentum dolor quis imperdiet viverra. Cras urna odio, gravida non leo ac, vulputate lobortis justo. Integer erat urna, suscipit sed posuere consequat, dictum vel orci. Integer magna dui, blandit malesuada egestas eu, efficitur facilisis magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer sed turpis urna.

Donec velit sem, mattis a leo et, tempor scelerisque elit. Nam viverra sit amet arcu id hendrerit. Nam placerat sed metus sed lobortis. Donec consequat aliquet ex, vel rhoncus lacus mattis ac. Mauris sit amet nisl augue. Mauris arcu lacus, luctus sed enim id, congue facilisis velit. Praesent convallis, elit in commodo porttitor, dui ex lobortis magna, eget luctus ligula purus ut tortor. Fusce sed orci bibendum, laoreet lorem sed, imperdiet sem. Nullam vestibulum fermentum mauris finibus ultrices. Vivamus feugiat posuere dui sed convallis. Nulla suscipit justo vel augue sodales laoreet. In ornare purus et tristique aliquam. Donec non tortor fermentum nulla bibendum auctor eget nec velit.

Duis tincidunt auctor purus ac auctor. Maecenas quis ornare sem. Cras viverra, mauris vel pellentesque accumsan, sapien nulla blandit sapien, et mollis libero orci et lorem. Duis quis nunc et neque porttitor interdum non nec neque. Nulla lacinia tincidunt est, nec bibendum tellus condimentum a. Vestibulum blandit mauris sit amet aliquet placerat. In augue erat, ultrices et viverra id, scelerisque sed sapien. Donec elit tellus, interdum et gravida lobortis, luctus at tortor. Phasellus tristique ut elit eu iaculis. Sed fringilla velit sit amet lorem porttitor consequat sed ut ipsum.

Fusce pretium, nibh vel lobortis volutpat, dui erat lacinia felis, malesuada ultrices dui leo at velit. Curabitur accumsan suscipit facilisis. Donec dignissim molestie ante, ac volutpat ligula dictum sed. Phasellus semper risus eu auctor imperdiet. Vestibulum eu turpis augue. Phasellus ornare, risus vitae blandit aliquam, ex augue vulputate lectus, maximus semper quam dolor commodo ipsum. Donec aliquam lacus erat, eget ultricies odio sollicitudin eget. In arcu mi, lobortis eget ultricies sit amet, fermentum ac justo. Aenean euismod, mauris et molestie gravida, ipsum libero feugiat tortor, sit amet faucibus arcu neque consectetur massa.

Curabitur ut nunc lorem. Nam molestie placerat dui vel consequat. Sed et magna vulputate, ultricies quam eu, tempus eros. Praesent mattis, tellus ut consequat tincidunt, dolor quam lacinia orci, et sagittis elit risus at velit. Curabitur id lectus sem. Fusce dapibus massa urna, a rhoncus neque tristique eget. Aliquam quis magna id urna hendrerit finibus. Ut maximus risus feugiat nisi convallis, et commodo quam condimentum. Ut tortor urna, egestas eget lacinia et, ornare vitae nibh. Etiam eu varius nulla, eu vehicula dolor. Pellentesque eu nunc elementum, porta tortor et, euismod lectus. Vivamus malesuada quis elit sed cursus. Morbi mi eros, imperdiet nec urna eu, scelerisque elementum magna.

In eu volutpat orci. Integer tempus nulla at magna lobortis ultricies. Vestibulum sed posuere massa, a aliquam turpis. In elit felis, iaculis nec convallis vel, efficitur ac ipsum. Etiam convallis tempus metus, a maximus ipsum. Morbi sit amet neque erat. Sed vel consequat lacus. Donec sed justo dictum, porttitor felis nec, dapibus lectus. Mauris quis leo purus. Integer condimentum rhoncus ligula, eleifend tristique dolor imperdiet eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc at pellentesque velit. Aliquam erat volutpat. Vestibulum mollis eros non arcu ultricies, vitae scelerisque justo sodales. Cras iaculis, turpis ac maximus sagittis, justo ligula rutrum ipsum, ac dictum lorem ligula vitae tortor.

Duis mattis euismod suscipit. Fusce finibus risus sit amet ultricies iaculis. Vestibulum maximus tempus iaculis. Duis sit amet massa felis. Maecenas eget enim venenatis, eleifend tellus sed, hendrerit lectus. Etiam pulvinar sapien vitae pulvinar porta. Phasellus nibh neque, pulvinar id rutrum ac, tempus eget orci. Ut vel tortor eget dolor vehicula efficitur. Maecenas massa risus, blandit ac tempor vitae, pharetra quis ipsum. Nunc lacinia imperdiet eros, quis iaculis urna vulputate vel. Suspendisse eros justo, tristique sit amet quam et, finibus venenatis est. Sed sit amet efficitur nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.