Poner un pie de página a lo ancho del blog

Con este truco podemos poner un pie de página al blog que ocupe todo el ancho del mismo. Es útil para poner los créditos o similares, y estéticamente queda bien.

  • Ubicación: todo en plantilla.

1. Buscamos esta etiqueta </body> y justo encima pegamos este bloque:

<div class='footer-wrapper'>

NOMBRE DEL BLOG &#169; NOMBRE DEL AUTOR DEL BLOG 20xx | Todos los derechos reservados<br/><a href='URL'>Aviso Legal y Política de uso y privacidad</a><br/>

</div>
Cambiar lo marcado en rosa. En la segunda línea figuran el aviso legal y la política de uso, pero pueden ir otros enlaces.

- &#169: es el símbolo de copyright © escrito en HTML.
- 20xx: es el año en curso a falta de los dos últimos dígitos.

2. Luego añadimos el CSS en Plantilla → Personalizar → Avanzado → Añadir CSS

.footer-wrapper {
background: #333333; /*Color de fondo del pie de página*/
padding-top: 30px; /*Con esta línea y la siguiente ajustamos la altura, para que quede bien, los dos valores deben ser iguales*/
padding-bottom: 30px;
width: 100%;
text-align: center;
font: normal normal 12px Arial; /*Tamaño y tipografía*/
color: #ffffff; /*Color del texto*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrar la línea*/
text-transform: uppercase; /*Para que esté en mayúsculas, si no queréis borrad la línea*/
}

.footer-wrapper a{
  color:#cccccc; /*Color del enlace (en este caso el aviso legal)*/
  text-decoration:none;
}

.footer-wrapper a:hover{
  color:#ffffff; /*Color del enlace al pasar el ratón por encima*/
}
Solo nos queda editar los parámetros y listo.

Ocultar (no quitar) navbar

 

Si queremos ocultar la navbar haremos lo siguiente:

Pegar en la plantilla antes de ]]></b:skin>...
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Es mejor ocultarla que no quitarla para siempre no vaya a ser que nos arrepintamos y en un futuro queremos que esté presente en el blog. Siempre podemos quitar el código de la plantilla para tener de vuelta la navbar.

Navbar oculta y visible al pasar el cursor


Si queremos ocultar la navbar que por defecto pone blogger y además hacerla visible cuando ponemos el cursor del mouse encima de ella, hay que pegar este código en un gadget java:

<style>#navbar {filter:alpha(opacity=0); -moz-opacity: 0.0; opacity: 0.0; -khtml-opacity: 0.0;position:relative;margin-bottom:-30px;z-index:10;}  #navbar:hover {filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; -khtml-opacity: 0.7;}</style>

Proteger el blog contra el subrayado de texto

Tan solo pegar este código en un gadget java:


<script language="Javascript">
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Con ello se deshabilita la opción de seleccionar texto y copiarlo con el mouse.

Bordes redondeados en las imágenes

Buscamos este código en la plantilla:

]]></b:skin> 

Pegamos antes las siguientes líneas:

.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */ 
background:#FFF; /* Color de fondo que se ve entre el espacio */ 
-moz-transition: all 1s; 
-webkit-transition: all 1s;
 -o-transition: all 1s; 
} 
.post-body img:hover { 
border-radius: 0% 50%; /* Borde redondeado */ 
box-shadow: 0px 0px 15px #000; /* Sombra */ 
-moz-transition: all 1s; 
-webkit-transition: all 1s; 
-o-transition: all 1s; 
cursor:pointer; 
}

Y editamos parámetros.

Eliminar "mostrando entradas con la etiqueta X"

Borrar este código de la plantilla tantas veces como aparezca:

<b:include data='top' name='status-message'/>

Si queremos añadir una descripción a las etiquetas, NO ELIMINAR EL CÓDIGO.

Separador de entradas

Algo tan sencillo como separar las entradas del blog y diferenciarlas unas de otras.

Buscamos en la plantilla...


<div class='post-footer-line post-footer-line-3'/>

y pegamos esto debajo: 


<center><img src="URL IMAGEN DEL SEPARADOR"/></center>


Ponemos la url de la imagen, y listo.

Destacar comentarios del autor

Es de bien sabido que Blogger, en algunas plantillas, destaca los comentarios del autor con unos iconos en forma de lapicito.


Nosotros podemos sustituir esa pequeña imagen por otra que queramos, siempre y cuando sea de un tamaño de 18x18 px.

El código que hay que modificar en la plantilla es este:

.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(ICONO PERSONALIZADO);}

Donde pone ICONO PERSONALIZADO, quitamos la url del lapicito de blogger y pondremos la de la imagen que queremos que destaque los comentarios del autor.
Suscribirse a: Entradas (Atom)