tag:blogger.com,1999:blog-858641142330978452024-03-05T15:17:02.833-08:00Trasteando entre HTMLAnonymoushttp://www.blogger.com/profile/16675269057392027425noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-85864114233097845.post-5615376162519906622016-10-29T17:35:00.003-07:002016-10-30T11:15:12.785-07:00¿Cómo centrar el título de mi blog?Sencillo, solo tienes que copiar lo siguiente en el CSS:<br />
<br />
<blockquote class="tr_bq">
.header<br />
{<br />
text-align: center;<br />
}</blockquote>
<br />
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í:<br />
<br />
<blockquote class="tr_bq">
.header<br />
{<br />
text-align: center;<br />
padding-top: <i style="font-weight: bold;">20px</i>;<br />
}</blockquote>
<br />Anonymoushttp://www.blogger.com/profile/16675269057392027425noreply@blogger.com0tag:blogger.com,1999:blog-85864114233097845.post-19251002235335837572015-04-02T10:43:00.000-07:002016-10-30T11:15:44.834-07:00¿Cómo creo un menú con pestañas desplegables?<div class="tr_bq" style="text-align: justify;">
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 <a href="http://www.ciudadblogger.com/2013/03/menu-horizontal-con-subpestanas-y-buscador-integrado-2.html">Ciudad Blogger</a> 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).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nos vamos a la plantilla HTML y hacemos una copia de seguridad (just in case):</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuy-iIWyTlc4aSyB9ye3_HrAgH_1dK0SEcB80C8WIG4abjBd6bBsc00u_ig3iPoLPTWy3_rQcrXTaCHW8ki_tNjBc7HIbLnLI_MmYU-xgHIlHEPg3H6bfCXHd5_7l3CeU3PD1UJYqilnp5/s1600/Plantilla+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuy-iIWyTlc4aSyB9ye3_HrAgH_1dK0SEcB80C8WIG4abjBd6bBsc00u_ig3iPoLPTWy3_rQcrXTaCHW8ki_tNjBc7HIbLnLI_MmYU-xgHIlHEPg3H6bfCXHd5_7l3CeU3PD1UJYqilnp5/s1600/Plantilla+HTML.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Y ahí buscamos <span style="background-color: #f4cccc;">/* Tabs</span> con ctrl + F, como siempre. Una vez lo tenemos, vemos que debajo aparecen un montón de cosas hasta que pone <span style="background-color: #f4cccc;">/* Columns</span>. Bien, pues todo eso, lo <b>quitamos</b>.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZvG5RmcHiQUBBHBkNPFEUJz5mt5C8bdvFQ7heKgnosJFGHrAz7z5Dc9XHSJMzevGOzvkZuWv5BGpkep_Vx29-HjEqJ4uv5DaTyws0Dgxaw3sqoCKb2WKFdqMiCF3Y-eCFr-ccYk7EI73/s1600/Borrar+Tabs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZvG5RmcHiQUBBHBkNPFEUJz5mt5C8bdvFQ7heKgnosJFGHrAz7z5Dc9XHSJMzevGOzvkZuWv5BGpkep_Vx29-HjEqJ4uv5DaTyws0Dgxaw3sqoCKb2WKFdqMiCF3Y-eCFr-ccYk7EI73/s1600/Borrar+Tabs.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Es más que probable que nos aparezcan más líneas entre <b>/* Tabs</b> y <b>/* Column</b>, 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:</div>
<blockquote class="tr_bq">
#crosscol ul {z-index: 200; padding:0 !important;}<br />
#crosscol li:hover {position:relative;}<br />
#crosscol ul li {padding:0 !important;}<br />
.tabs-outer {z-index:1;}</blockquote>
<div style="text-align: justify;">
De tal manera que quede así:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnfch3ke1AuM-nB3gXDzPc9IjwuaIztoUWOT_yjCYJmF3PM7mgjnbmN9EP-wrlqqGDrGMQfiSBg1TDxuFWA2VrLAS88uo0cy3IeRvEDBpenA-TXx8JKEZllCgcdx-Ub-OkMWs1U-dus57/s1600/Tabs+final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxnfch3ke1AuM-nB3gXDzPc9IjwuaIztoUWOT_yjCYJmF3PM7mgjnbmN9EP-wrlqqGDrGMQfiSBg1TDxuFWA2VrLAS88uo0cy3IeRvEDBpenA-TXx8JKEZllCgcdx-Ub-OkMWs1U-dus57/s1600/Tabs+final.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Una vez hecho esto, guardamos. Después, con ctrl + F buscamos <span style="background-color: #f4cccc;">class='tabs'</span> y nos saldrá esto:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhQMVlBn0G-j88Ot27tEqH9n40RfyGnNB45gjLF7tklEZ5qY6UyjsY8K9aJKpr8vqjnvGPl9o6L19Tw99FgOj3NHWRRwqCqQEdanAiLRufTYKnWRAtG13EluIh8YMfv1eDPNLlUnL1K2s/s1600/Crosscol.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhQMVlBn0G-j88Ot27tEqH9n40RfyGnNB45gjLF7tklEZ5qY6UyjsY8K9aJKpr8vqjnvGPl9o6L19Tw99FgOj3NHWRRwqCqQEdanAiLRufTYKnWRAtG13EluIh8YMfv1eDPNLlUnL1K2s/s1600/Crosscol.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Pues lo <b>borramos</b>, solo lo recuadrado en amarillo, <b>solo <span style="background-color: #f4cccc;">class='tabs'</span></b>, lo demás lo dejamos tal cual.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ahora guardamos la plantilla y salimos de allí. Ahora vamos a crear el gadget en sí. Esto es muy sencillo, es un simple <b>gadget HTML/Javascript</b> en el que escribiremos lo siguiente:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<blockquote>
<div id='menuWrapper'><br />
<ul class='menu'><br />
<li class='top'><a class='top_link' href='<u><b>URL del enlace</b></u>'><span>Pestaña 1</span></a></li><br />
<li class='top'><a class='top_link' href='<b><u>#</u></b>'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='<b><u>#</u></b>'>Pestaña 2.1</a><ul><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.1.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.1.2</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.1.3</a></li><br />
</ul><br />
</li><br />
<li class='mid'><a class='fly' href='<b><u>#</u></b>'>Pestaña 2.2</a><br />
<ul><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.2</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.3</a></li><br />
<li><a class='fly' href='<b><u>#</u></b>'>Pestaña 2.2.4</a><br />
<ul><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.4.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.4.2</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.4.3</a></li><br />
</ul><br />
</li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.5</a></li><br />
<li><a class='fly' href='<u><b>#</b></u>'>Pestaña 2.2.6</a><br />
<ul><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.6.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.2.6.2</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.3</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.4</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 2.5</a></li><br />
</ul><br />
</li><br />
<li class='top'><a class='top_link' href='<b><u>#</u></b>'><span class='down'>Pestaña 3</span></a><br />
<ul class='sub'><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 3.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 3.2</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 3.3</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 3.4</a></li><br />
</ul><br />
</li><br />
<li class='top'><a class='top_link' href='<b><u>#</u></b>'><span class='down'>Pestaña 4</span></a><br />
<ul class='sub'><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.1</a></li><br />
<li><a class='fly' href='<b><u>#</u></b>'>Pestaña 4.2</a><br />
<ul><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.2.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.2.2</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.2.3</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.2.4</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.2.5</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.2.6</a></li><br />
</ul><br />
</li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.3</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.4</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.5</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 4.6</a></li><br />
</ul><br />
</li><br />
<li class='top'><a class='top_link' href='<b><u>#</u></b>'><span class='down'>Pestaña 5</span></a><br />
<ul class='sub'><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 5.1</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 5.2</a></li><br />
<li><a href='<b><u>URL del enlace</u></b>'>Pestaña 5.3</a></li><br />
</ul><br />
</li></blockquote>
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.<br />
<br />
También podemos usar la pestaña sin enlace si queremos que la <b>pestaña solo sirva para que se desplieguen las demás</b>, 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, <b>en lugar de poner una URL, solo ponemos # también entre comillas</b>, 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.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Una vez hecho esto, quedará como si fuera una lista de enlaces. Nos vamos a la edición del CSS y copiamos lo siguiente:</div>
<blockquote>
/* Menu molón<br />
----------------------------------------------- */<br />
#menuWrapper {<br />
width:100%; <span style="color: #3d85c6;">/* 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 */</span><br />
height:35px; <span style="color: #3d85c6;">/* Alto del menú. Si lo queremos más estrechito, reducimos */</span><br />
padding-left:14px;<br />
background:#000000; <span style="color: #3d85c6;">/* Color del menú */</span><br />
border-radius:20px; <span style="color: #3d85c6;">/* Bordes redondeados de la barra principal */</span><br />
}<br />
.menu {<br />
padding:0;<br />
margin:0;<br />
list-style:none;<br />
height:35px; <span style="color: #3d85c6;">/* Si cambiamos el alto del menú, tendremos que cambiarlo de nuevo cada vez que veamos height */</span><br />
position:relative;<br />
z-index:5;<br />
font-family:arial, verdana, sans-serif;<br />
}<br />
.menu li:hover li a {<br />
background:none;<br />
}<br />
.menu li.top {display:block; float:left;}<br />
.menu li a.top_link {<br />
display:block;<br />
float:left;<br />
height:35px;<br />
line-height:34px;<br />
color:#ccc; <span style="color: #3d85c6;">/* Color de las letras del menú */</span><br />
text-decoration:none;<br />
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif; <span style="color: #3d85c6;">/* 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; */</span><br />
font-size:13px; <span style="color: #3d85c6;">/* Tamaño de la fuente */</span><br />
font-weight:normal; <span style="color: #3d85c6;">/* Si queremos que esté en negrita, cambiamos normal por bold, si lo queremos en cursiva, lo cambiamos por italic */</span><br />
padding:0 0 0 12px;<br />
cursor:pointer;<br />
}<br />
.menu li a.top_link span {<br />
float:left;<br />
display:block;<br />
padding:0 24px 0 12px;<br />
height:35px;<br />
}<br />
.menu li a.top_link span.down {<br />
float:left;<br />
display:block;<br />
padding:0 24px 0 12px;<br />
height:35px;<br />
}<br />
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }<br />
.menu li:hover {position:relative; z-index:2;}<br />
.menu ul,<br />
.menu li:hover ul ul,<br />
.menu li:hover ul li:hover ul ul,<br />
.menu li:hover ul li:hover ul li:hover ul ul,<br />
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul<br />
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}<br />
.menu li:hover ul.sub {<br />
left:0;<br />
top:35px;<br />
background:#000000; <span style="color: #3d85c6;">/* Color de fondo del submenú */</span><br />
padding:3px;<br />
white-space:nowrap;<br />
width:200px;<span style="color: #3d85c6;"> /* Ancho de las pestañas desplegables */</span><br />
height:auto;<br />
z-index:3;<br />
}<br />
.menu li:hover ul.sub li {<br />
display:block;<br />
height:30px;<br />
position:relative;<br />
float:left;<br />
width:200px;<br />
font-weight:normal;<br />
}<br />
.menu li:hover ul.sub li a{<br />
display:block;<br />
height:30px;<br />
width:200px;<br />
line-height:30px;<br />
text-indent:5px;<br />
color:#ccc;<br />
text-decoration:none;<br />
}<br />
.menu li ul.sub li a.fly {<br />
<span style="color: #3d85c6;">/* Color de fondo de las segundas pestañas desplegables (justo aquí abajo) */</span><br />
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat;}<br />
.menu li:hover ul.sub li a:hover {<br />
background:#2580a2; <span style="color: #3d85c6;">/* Color de fondo al pasar el ratón */</span><br />
color:#fff;<br />
}<br />
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {<br />
<span style="color: #3d85c6;">/* Color de fondo al pasar el ratón */</span><br />
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxCBpyCo8OJbEDhfbI2GYNW2kByl0lvgXbAQcV3AysDHTPGbIsAdGTbv7U1274-zVj-zy3zG5uMjmucWZ75QOTqcxDP57Q083Z0knJAZ6YJ6PajMzWpHPf-xegsRnVxKopcCZtVPQ9syf/) 185px 10px no-repeat; color:#fff;}<br />
.menu li:hover ul li:hover ul,<br />
.menu li:hover ul li:hover ul li:hover ul,<br />
.menu li:hover ul li:hover ul li:hover ul li:hover ul,<br />
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {<br />
left:200px;<br />
top:-4px;<br />
background: #1AAC00; <span style="color: #3d85c6;">/* 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.) */</span><br />
padding:3px;<br />
white-space:nowrap;<br />
width:200px;<br />
z-index:4;<br />
height:auto;<br />
}</blockquote>
<div style="text-align: justify;">
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!).<br />
<br />
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?</div>
Anonymoushttp://www.blogger.com/profile/16675269057392027425noreply@blogger.com0tag:blogger.com,1999:blog-85864114233097845.post-82448127476692731312015-04-01T12:54:00.000-07:002016-10-30T11:17:17.237-07:00¿Cómo pongo un botón para subir?<div style="text-align: justify;">
Esto es aún más fácil que <a href="http://trasteandoentrehtml.blogspot.com.es/2015/04/como-personalizo-las-blockquotes.html">personalizar blockquotes</a> ;D Solo hay que crear un <b>gadget</b> del tipo <b>HTML/Javascript</b> y copiar lo siguiente:</div>
<blockquote class="tr_bq">
<a style="display:scroll;position:fixed;bottom:20px;right:20px;" href="#" title="Subir"><img src="<u>url de la imagen</u>" /></a></blockquote>
Y eso es todo, todito, todo.<br />
<br />
<h4>
<span style="font-size: large;"><b>Bonus track!</b></span> ¿Cómo pongo un botón para subir con efecto scroll (vamos, que en vez de subir sin más, se deslice)?</h4>
<div>
<br /></div>
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!<br />
<br />
Primero, vamos a crear una <b>copia de seguridad</b> 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!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Jb_lhAE-WhrPn5P9_imbF4spmC1bnpiHs_0C3AMLYE7qMpxnFfJ_e_PMURxTXx7syUfU85Nu98xNXkVKCHVMdEOCkh-P3F5ZuABOPeghzHMqc9mhTKddbnymJhleKu0FzZozdXCVcQaa/s1600/Plantilla+HTML.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Jb_lhAE-WhrPn5P9_imbF4spmC1bnpiHs_0C3AMLYE7qMpxnFfJ_e_PMURxTXx7syUfU85Nu98xNXkVKCHVMdEOCkh-P3F5ZuABOPeghzHMqc9mhTKddbnymJhleKu0FzZozdXCVcQaa/s1600/Plantilla+HTML.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
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).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Y una vez hecho eso, ¡al HTML propiamente dicho!</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VKv5a7A2k5vZDsWo7IyLYbylb6Mr958uSmOAVlHtkmtk-LdrxXCGfomqClRCuBgGEHlHGgSJoCiieM8ijO8ryC7zYafoY3gcmrbO-cwML55omJ9ZTp0ffsoByk6M6wp8l1I9IIp98w0y/s1600/Plantilla+body.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VKv5a7A2k5vZDsWo7IyLYbylb6Mr958uSmOAVlHtkmtk-LdrxXCGfomqClRCuBgGEHlHGgSJoCiieM8ijO8ryC7zYafoY3gcmrbO-cwML55omJ9ZTp0ffsoByk6M6wp8l1I9IIp98w0y/s1600/Plantilla+body.png" width="640" /></a></div>
<br />
<div style="text-align: justify;">
Una vez dentro, buscamos (clicando en cualquier parte del HTML y pulsando ctrl + F) la etiqueta <span style="background-color: #cfe2f3;"></body></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Justo <b>encima</b> copiamos lo siguiente:</div>
<blockquote class="tr_bq">
<div style="text-align: left;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"/></div>
<div style="text-align: left;">
<script></div>
<div style="text-align: left;">
$(function () {</div>
<div style="text-align: left;">
$(&#39;.go-to-top&#39;).click(function () {</div>
<div style="text-align: left;">
$(&#39;html,body&#39;).animate({</div>
<div style="text-align: left;">
scrollTop: 0</div>
<div style="text-align: left;">
}, 500);</div>
<div style="text-align: left;">
return false;</div>
<div style="text-align: left;">
});</div>
<div style="text-align: left;">
});</div>
<div style="text-align: left;">
</script></div>
</blockquote>
<div style="text-align: justify;">
Esto por no tener, no tenemos ni que entenderlo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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":</div>
<blockquote class="tr_bq">
<a style="display:scroll;position:fixed;bottom:10px;right:40px;" href="#wrap" title="Subir arriba" class="go-to-top"><img src="<u>url de la imagen</u>" /></a></blockquote>
<div style="text-align: justify;">
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 <a href="http://personalizaciondeblogs.blogspot.com.es/2013/03/como-poner-un-boton-de-subir-arriba.html">Blanca en Personalización de blogs</a>, <a href="http://trucos-diseno-web.euroresidentes.com/2014/08/como-poner-un-boton-de-subir-arriba-en.html">Trini en Trucos Diseña Web</a>, o <a href="http://www.misslavanda.es/2014/04/botones-subir-arriba-blogger.html">Laura en Miss Lavanda</a>.</div>
Anonymoushttp://www.blogger.com/profile/16675269057392027425noreply@blogger.com0tag:blogger.com,1999:blog-85864114233097845.post-57606609713256641132015-04-01T11:52:00.000-07:002016-10-30T11:17:57.729-07:00¿Cómo personalizo las blockquotes?<div style="text-align: justify;">
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:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyh4iIG_r212sQYRDtfF75D-pAjPJIDPjiEeoVSQCQwKZNMJfPbfcC4WzVz4qaIYKQ1DvjD6mnytkrCzc8aXM8GVLK6Z-UBC-F3C1cfEM-zr9mJXSEsST_fz4G73R74vtKfVABBmVo0aAH/s1600/CSS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyh4iIG_r212sQYRDtfF75D-pAjPJIDPjiEeoVSQCQwKZNMJfPbfcC4WzVz4qaIYKQ1DvjD6mnytkrCzc8aXM8GVLK6Z-UBC-F3C1cfEM-zr9mJXSEsST_fz4G73R74vtKfVABBmVo0aAH/s1600/CSS.png" width="640" /></a></div>
<br />
Y ahí copiamos lo siguiente:<br />
<br />
<div>
<div style="text-align: center;">
<blockquote class="tr_bq">
.post-body blockquote {<br />
border-left: 15px <u>solid</u>; border-color: <b><span style="color: #e06666;">#bf0000</span></b><br />
border-right: 1px <u>solid</u>; border-color: <b><span style="color: #e06666;">#bf0000</span></b>;<br />
border-top: 1px <u>solid</u>; border-color: <b><span style="color: #e06666;">#bf0000</span></b>;<br />
border-bottom: 1px <u>solid</u>; border-color: <b><span style="color: #e06666;">#bf0000</span></b>;<br />
background: <b><span style="color: #e06666;">#ffffff</span></b>;<br />
padding: 25px;<br />
<b>font-size: <span style="background-color: #ffe599;">15px</span>;</b><br />
<b><span style="background-color: white;">color:</span></b> <b><span style="background-color: #b6d7a8;">#323232</span>;</b><br />
<b>font-family: '<span style="background-color: #d0e0e3;">Hanuman</span>', serif;</b>
<br />
<b>font-style:italic; </b><br />
border.radius: 5px;<br />
-moz-border-radius:5px;<br />
-webkit-border-radius:5px;<br />
}</blockquote>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Y <i>voilà!</i>, eso es todo... si quieres que tu blockquote sea exactamente igual que la mía.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Para adaptarla a tus gustos, podemos modificar los <b><span style="color: #e06666;">colores</span></b> (siempre usando el sistema hexadecimal. Yo siempre me ayudo con <a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/">esta página</a> para seleccionar el color perfecto ;)), la <b>letra</b> (<span style="background-color: #ffe599;"><b>tamañ</b>o</span>, <b style="background-color: #b6d7a8;">color</b> y <b style="background-color: #d0e0e3;">fuente</b>) 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).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ah, si queremos cambiar el estilo de los bordes, podemos cambiar <u>solid</u> por <u>dashed</u> (para que estén formados por guiones), <u>dotted</u> (para que estén hechos de puntos) o incluso <u>double</u> (para que haya dos líneas).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-size: large;"><b>Bonus track! </b></span>También podemos poner una imagen de fondo, añadiendo simplemente esta línea:</div>
<br />
<div style="text-align: center;">
<blockquote class="tr_bq">
background-image: url('<i><u>url de la imagen</u></i>');</blockquote>
</div>
<div>
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; text-align: center;">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):</span></div>
<span style="background-color: white; text-align: center;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz8l8aIx307MKU6fqJe4uSwg_djKrjNdwAA5NzaCpZ2N4IR_9Ba4WQN8URD10GI5-eCBbLDqGpwy4cUQ4-s_FGomoQCey9pxz7bX6-hhV-a5StnNQ9anUc-kNW4rLtkovSTuccaqdrEp3/s1600/Blockquote+%231.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzz8l8aIx307MKU6fqJe4uSwg_djKrjNdwAA5NzaCpZ2N4IR_9Ba4WQN8URD10GI5-eCBbLDqGpwy4cUQ4-s_FGomoQCey9pxz7bX6-hhV-a5StnNQ9anUc-kNW4rLtkovSTuccaqdrEp3/s1600/Blockquote+%231.png" width="320" /></a></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">.post-body blockquote {</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">border-left: 12px solid; border-color: #EC1789;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">border-right: 12px solid; border-color: #EC1789;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">border-top: 3px solid; border-color: #EC1789;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">border-bottom: 3px solid; border-color: #EC1789;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">padding: 15px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">font-size:17px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">color: #EC1789;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">font-family: 'Pacifico', serif;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">background: #FFDCEF;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">border.radius: 15px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">-moz-border-radius:15px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">-webkit-border-radius:15px;</span></div>
</div>
<div style="text-align: right;">
<span style="font-size: x-small;"><span style="background-color: white; text-align: center;"></span></span><br /></div>
<div style="text-align: center;">
<div style="text-align: right;">
<span style="font-size: x-small;">}</span></div>
</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
<hr />
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiovuRP5TfOiH14G5l9Vdd2JAYtL7kDU-5vqzIHjF9B8wLd3ZoEox7HXMuKjoWRf4xXCd6z7cAl70q5bfGXsNRpV-Gkkq01Pb7QRshuibTOUuESKw4czZ3Sa5dWIlnG994bmIE9ZfiN2C_h/s1600/Blockquote+%232.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiovuRP5TfOiH14G5l9Vdd2JAYtL7kDU-5vqzIHjF9B8wLd3ZoEox7HXMuKjoWRf4xXCd6z7cAl70q5bfGXsNRpV-Gkkq01Pb7QRshuibTOUuESKw4czZ3Sa5dWIlnG994bmIE9ZfiN2C_h/s1600/Blockquote+%232.png" width="320" /></a></div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">.post-body blockquote {</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">border-left: 12px solid; border-color: #907249;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">border-right: 1px solid; border-color: #907249;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">border-top: 1px solid; border-color: #907249;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">border-bottom: 1px solid; border-color: #907249;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">padding: 30px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">font-size:13px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">color: #000000;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">font-family: 'Times New Roman', serif;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">background: transparent;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">border.radius: 0px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">-moz-border-radius:0px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">-webkit-border-radius:0px;</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;">}</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-size: x-small;"><br /></span></div>
</div>
<div style="text-align: center;">
<span style="font-size: x-small;"><br /></span></div>
</div>
<hr />
<div style="text-align: right;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1VBSj8neq-G0UN0FqGzbmruD6vHPOxxJzQiiE0z2kxjZi1-pDaVNV-lBEtfKLBhxIWsqaLL9M-LRAeoDQK6WDEVPQ5YecClbVIqXUzH2bVMdOZ7B82NhcnxJPdyGZeDRgvTCtPqe_Umb/s1600/Blockquote+%233.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1VBSj8neq-G0UN0FqGzbmruD6vHPOxxJzQiiE0z2kxjZi1-pDaVNV-lBEtfKLBhxIWsqaLL9M-LRAeoDQK6WDEVPQ5YecClbVIqXUzH2bVMdOZ7B82NhcnxJPdyGZeDRgvTCtPqe_Umb/s1600/Blockquote+%233.png" width="234" /></a><span style="font-size: x-small;">.post-body blockquote {</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">border-left: 7px solid; border-color: #FF0731;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">border-right: 7px solid; border-color: #FF0731;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">border-top: 7px solid; border-color: #FF0731;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">border-bottom: 7px solid; border-color: #FF0731;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">padding: 70px;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">font-size:16px;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">color: #FF0731;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">font-family: 'Coming Soon', serif;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">background-image: url('http://feelgrafix.com/data_images/out/13/871810-polka-dot-wallpaper.jpg');</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">border.radius: 10px;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">-moz-border-radius:10px;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">-webkit-border-radius:10px;</span></div>
<div style="text-align: right;">
<span style="font-size: x-small;">}</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><br /></span>
<br />
<span style="font-size: x-small;"><br /></span>
<br />
<div style="text-align: justify;">
Eso es todo lo que tienen las blockquotes. ¿Algo que no quede claro, alguna duda, pregunta, ruego o sugerencia?</div>
</div>
Anonymoushttp://www.blogger.com/profile/16675269057392027425noreply@blogger.com0tag:blogger.com,1999:blog-85864114233097845.post-35096070408038401272015-04-01T10:05:00.001-07:002015-04-01T12:02:42.275-07:00Lorem Ipsum<div style="text-align: justify;">
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.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
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.
</blockquote>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
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.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbWG5gCrcsZKr8FIdYC9Zv-W4f4Dtm4safwhcU799qnUYklyU5Fu9neJiYCbf8tRRdihyphenhyphenNqSqIl4bWnoMagJqQ43FTAXUfNPgiAhkAOVDdDkNSlcB165rD8qEfxUbuATSI6Diy5wiXp1w/s1600/Flecha_opt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrbWG5gCrcsZKr8FIdYC9Zv-W4f4Dtm4safwhcU799qnUYklyU5Fu9neJiYCbf8tRRdihyphenhyphenNqSqIl4bWnoMagJqQ43FTAXUfNPgiAhkAOVDdDkNSlcB165rD8qEfxUbuATSI6Diy5wiXp1w/s1600/Flecha_opt.png" /></a></div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/16675269057392027425noreply@blogger.com0