Ultimas entradas
AÑADIR TRES COLUMNAS EN LA SECCIÓN DEL FOOTER
Para conseguir este Truco primero tenemos que hacer lo siguiente.
Necesitaremos retirar cualquier elemento que tengamos colocado en el footer del blog. Podemos moverlo a la sidebar de forma temporal y, una vez añadidas las tres columnas en el footer, volver a colocarlo en esa sección.
Iremos ahora a la parte del HTML de nuestra plantilla y buscamos, casi al final de su código, estas líneas Sin expandir artilugios:
-------------------------------------------------
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
--------------------------------------------------
Dependiendo de la plantilla que estemos usando, podría cambiar el código a buscar ("footer" o "footer-wrapper"), en el caso de la Rounders, por ejemplo, hay dos divs en la sección del footer, en cualquier caso, el código que hemos de cambiar es la línea que está resaltada en negrita, sustituyéndola por este código:
<div id='footer-columna-contenedor'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#6633FF' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#6633FF' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text20' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Añadiremos ahora unas líneas de CSS para controlar la separación de las columnas. Pegamos estas líneas antes de ]]></b:skin>
#footer-columna-contenedor {
clear:both;
}
.footer-columna {
padding: 10px;
}
clear:both;
}
.footer-columna {
padding: 10px;
}
Ya podemos guardar los cambios y colocar los elementos que habíamos retirado a la sidebar donde nos parezca mejor.
En el código está incluida una línea de separación entre las tres columnas y el footer antiguo, en el ejemplo podéis ver que se muestra de color azul.
La parte del código que hace que se vea esta línea, es esta:
-------------------------------------------------------------
<hr align='center' color='#5d5d54' width='90%'/>
-------------------------------------------------------------
Podemos cambiar su color en color='#5d5d54'
------------------------------------------------------------------------------------------------------------------------
MODIFICAR LAS COLUMNAS DEL FOOTER
Antes expliqué como añadir tres columnas en el footer
Poco después de publicar esta entrada me han empezado a llegar consultas sobre la forma de adaptar esas nuevas columnas, para conseguir una apariencia lo más parecida posible a la sidebar del blog. Esto se consigue usando el CSS.
Si nos fijamos en el código añadido para mostrar las columnas, veremos que cada una de ellas tiene una id propia: id='col1', id='col2',id='col3'
Usaremos esa id para modificar su aspecto, para ello vamos a la parte de editar-html de nuestra plantilla y sin expandir artilugios localizaremos la etiqueta ]]></b:skin>.
Justo encima de ]]></b:skin> pegaremos este código:
#col1{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col1 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col2 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3{
background:#fff;
margin: 5px;
padding: 5px;
border: 2px outset #b2b2ff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#col3 h2{
margin: 0.0em 0 .5em;
padding: 4px 3px;
border: 0px outset #236C95;
background: #a6c4e1 ;
text-align: center;
font-size: 90%;
color:#fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
En: #col1, #col2 y #col3, controlaremos el aspecto de cada columna y en: #col1 h2, #col2 h2 y #col3 h2, lo haremos con el titulo de los elementos que pongamos en cada una de ellas.
Lo más cómodo será mirar en el código de nuestra sidebar e ir copiando lo que necesitemos: border, text-aling, font-size...para asemejar lo más posible las nuevas columnas a la sidebar del blog.
Nota
Tendréis en cuenta que el código que he puesto como ejemplo, es el de mi sidebar y su título, vosotros tendréis que probarlo con los vuestros.
También podríamos prescindir de ella borrando la línea por completo
Fecha: 11/01/2018
Fuente: elescaparatederosa.blogspot.com.es
Publicado por:
DONDE COLOCAR EL CSS
Será posible resumir todo lo que necesitamos saber sobre CSS en un par de líneas? Realmente no pero, voy a tratar de cumplir con un pedido y por lo menos dar una vaga, vaga, muy vaga idea, aún más que eso que alguna vez publiqué con el nombre de CSS Rápido
CSS (Cascading Style Sheets) es la "tecnología" desarrollada por el W3C (World Wide Web Consortium) con el fin de separar el contenido de la presentación en una página web; es decir, colocar el en HEAD las definiciones de cada etiqueta lo que nos permite hacer que las páginas sean más livianas ya que si no, deberíamos agregarles esas propiedades a cada etiqueta, repetirlas una y otra vez cada vez que las quisiéramos usar. De esta manera, definimos el estilo de un sitio completo de una sola vez y luego, si es necesario, agregamos estilos personales.
INSERTAR CORRECTAMENTE LAS META DESCRIPCIONES
La colocación correcta de meta descripciones es una herramienta indispensable en cara al SEO ya que una buena estructura de nuestro sitio aporta buena apariencia en los resultados y los buscadores como Google.
meta-descripcion
Las meta descripciones son mejores conocidas como la descripción que aparece en los resultados de un buscador, ayuda para que tu sitio pueda ser catalogado en la temática correcta. Además que una buena descripción nos ayuda a tener buenas posiciones en lo que escribimos, en lo personal suelo agregar la palabra clave principal en un inicio del párrafo.
Un ejemplo de una forma correcta de la colocación dela meta descripción de un blog es con una extensión menor a 170 caracteres, hacer uso de tu palabra clave (una vez está bien) y tener algunos sinónimos, pero ten en cuenta que la coherencia de las palabras sea correcta.
APROVECHANDO ESPACIOS EN LA PLANTILLA
Me llegaba ayer un email (por cierto sin firmar) donde alguien me preguntaba si podía explicarle que significaba una parte del código de su plantilla, que aparecía justo sobre esta línea:
