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.

Enlace en una imagen

Con esto se conseguirá que al hacer clic en una imagen nos lleve a una página. 

  • <a href="enlace"><img src="url imagen" border="0" /></a>

 
 
Si queremos que se abra en una ventana distinta, el código tiene que ser este.

  • <a href="enlace" target="_blank"><img src="url imagen" border="0" /></a>
 

Escribir en 2 o 3 columnas

Aunque el editor de Blogger es muy ilimitado, las entradas larguísimas pueden cansar al lector. Escribir en columnas puede hacer más llevadera la lectura del post. El truco es muy fácil.

  • Ubicación: editor HTML de las entradas.

TEXTO A 2 COLUMNAS


Pegar este código en el editor:

<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">TEXTO PRIMERA COLUMNA</div></td>
    <td><div align="justify">TEXTO SEGUNDA COLUMNA</div></td>
  </tr>
</table>

Resultado:

Clic para agrandar

TEXTO A 3 COLUMNAS


Mismo proceso, pegar este código en el editor:

<table width="100%" border="0" cellspacing="10" cellpadding="10">
  <tr>
    <td><div align="justify">TEXTO PRIMERA COLUMNA</div></td>
    <td><div align="justify">TEXTO SEGUNDA COLUMNA</div></td>
    <td><div align="justify">TEXTO TERCERA COLUMNA</div></td>
  </tr>
</table>

Resultado:

Clic para agrandar

Suscribirse a: Entradas (Atom)