Los límites de Blogger

En Blogger te damos un montón de espacio, verás cómo estos "límites" en realidad te limitan bastante poco. Por si tienes curiosidad, aquí te explicamos lo que "cabe" en una sola cuenta de Blogger. 
  • Número de blogs: una cuenta puede tener 100 blogs como máximo.
  • Número de entradas: no hay ningún límite en el número de entradas que puede contener un blog. Todas se guardan en tu cuenta (a menos que las elimines a mano), independientemente de si publicas archivos o no.
  • Número de páginas: no hay ningún límite en el número de páginas que puede contener un blog.
  • Tamaño de las entradas: aunque las entradas individuales no tengan un tamaño máximo determinado, si publicas entradas larguísimas tendrás que vértelas con el límite de tamaño de la página (véase el punto siguiente).
  • Tamaño de las páginas: las páginas individuales (la página principal del blog o las páginas de archivo) tienen un límite de tamaño de 1 MB. Ese tope te permite varios cientos de páginas de texto, pero te puede dar problemas si incluyes cientos de entradas en la página principal de tu blog. Si llegas a ese límite, verás el mensaje de error "006 Ponte en contacto con el servicio de asistencia de Blogger". Para evitar ese error, puedes reducir el número de entradas de tu página principal. Además, así tu página se cargará más rápido. 
  • Número de comentarios: no hay ningún límite en cuanto al número de comentarios que admite una entrada. Al igual que ocurre con las entradas archivadas, si eliges ocultar los comentarios de tu blog, todos los comentarios anteriores se guardarán en tu cuenta.
  • Número de imágenes: hasta 1 GB del espacio total de almacenamiento, compartido con la web de Picasa. Si has conectado tu blog con Google+, tus fotos se guardarán en Fotos de Google+. Allí dispones de 15 GB de espacio de almacenamiento, compartido con Gmail y con Drive. 
  • Tamaño de las imágenes: si publicas imágenes a través de Blogger para móviles, cada imagen no puede superar los 250 K.
  • Miembros del equipo: un blog puede tener 100 miembros como máximo.
  • Número de etiquetas: hasta 2.000 etiquetas exclusivas por blog y 20 por entrada.
  • Descripción del blog: puede tener 500 caracteres como máximo, y nada de HTML. Si escribes más caracteres o código HTML, se recuperará la descripción anterior.
  • Datos del perfil "Sobre mí": 1.200 caracteres como máximo.
  • Intereses y favoritos del perfil: cada campo admite un máximo de 2.000 caracteres.
  • Importación de blogs: no hay ningún límite de tamaño de archivo para los blogs importados. Sí que es posible que tengas un máximo de importaciones por día.
 Visto en Ayuda de Blogger.

Gadgets encima de las entradas

Hasta ahora, los gadgets los poníamos en la sidebar, al lateral del blog. La cuestión es que, ¿por qué no ponerlos encima de las entradas? Blogger no nos da esta opción a tenor de las plantillas que incorpora en su sistema. Pero ahora sí podemos hacerlo. Hay que editar el código para poner integrarlas.


  • Ubicación: plantilla.

1. Buscamos estos códigos: 

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog'/>
</b:section>

2. Luego pegamos este bloque justo antes del código anterior:
<div id='BlogGadget1' style='width: 48%; float: left; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-1' preferred='yes' style='float:left;'/>
</div>
<div id='BlogGadget2' style='width: 48%; float: right; margin:0; padding: 5px;'>
<b:section class='sidebar' id='gadget-2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
El parámetro en rosa es el ancho de cada gadget. Para amoldarlos al espacio, reducir dicho número hasta que queden bien.

Menú horizontal tipo listón

Esta es una forma curiosa y sobre todo original de lucir las secciones con las páginas independientes de Blogger. El resultado es muy estético. Este truco ha sido visto en Ciudad Blogger.

Cortesía de Ciudad Blogger

  • Ubicación: plantilla.

1. Se empieza buscando esta línea ]]></b:skin> para pegar el siguiente bloque justo antes: 

/* Menú Listón
----------------------------------------------- */
#menuListon:after, #menuListon:before {
content: '';
position: absolute;
}

#menuListon {
height:25px; /* Alto del menú */
text-align: center;
position: relative;
margin: 0 -30px 5px -30px;
padding: 10px 0;
background: #e5592e; /* Color del listón */
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
box-shadow: 0 2px 0 #bbb;
}
#menuListon:before, #menuListon:after {
border-style: solid;
border-color: transparent;
bottom: -10px;
}

#menuListon:before {
border-width: 0 20px 10px 0;
border-right-color: #8C3115; /* Color de la sombra del doblez */
left: 0;
}

#menuListon:after {
border-width: 0 0 10px 20px;
border-left-color: #8C3115; /* Color de la sombra del doblez */
right: 0;
}

#menuListon ul {
margin-top: 0px;
}

#menuListon li {
list-style: none;
display: inline;
padding-right:20px;
}
#menuListon li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
display: inline;
text-decoration: none;
color: #f0f0f0; /* Color del texto */
font-size: 18px; /* Tamaño del texto */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}

#menuListon li a:hover {
font-size:20px; /* Tamaño del texto al pasar el cursor */
transition:all .1s linear;
-o-transition:all .1s linear;
-moz-transition:all .1s linear;
-webkit-transition:all .1s linear;
}


Editamos parámetros de colores... Para ajustar el listón al blog, modificar el parámetro margin, ambos -30px y marcados en rojo. Cuanto más se rebaje el número, más se reducirá el listón, y viceversa.

 2. Seguidamente, buscamos este otro bloque...
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nombre de mi blog (cabecera)' type='Header'/>
</b:section>

...y pegamos justo debajo el menú:

<div id='menuListon'>
<ul>
  <li><a href='URL del enlace'> Pestaña 1</a></li>
  <li><a href='URL del enlace'> Pestaña 2</a></li>
  <li><a href='URL del enlace'> Pestaña 3</a></li>
  <li><a href='URL del enlace'> Pestaña 4</a></li>
  </ul>
</div>

Si queremos añadir un icono a la pestaña, debemos poner este código:

<img src="URL IMAGEN"/></a>

Así que, el código final quedaría así, con el icono:

<li><a href='URL del enlace'><img src="URL IMAGEN"/></a> Pestaña 1</a></li>

Solo nos queda cambiar lo que está en rosa por las urls de las páginas, y lo de verde por el nombre de las secciones del menú.

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.
Suscribirse a: Entradas (Atom)