12 noviembre 2014

COMO PERSONALIZAR LAS PAGINAS DEL BLOG Y OCULTAR LA SIDEBAR (Y OTROS ELEMENTOS)

    Soy un poco culoinquietoinconformista y cuando ya tengo una cosa terminada, o a veces antes, ya estoy pensando en cómo podría mejorarse o hacerse de otra forma. Y cuando ya tenía terminada mi galería de la fama, terminada por tercera o cuarta vez..., pues se me ocurrió que tanta foto así hacia abajo era un poco cansino, y que si mi galería seguía creciendo nadie iba a llegar nunca a ver las fotos de abajo, pobrecillas. Así que necesitaba más espacio para colocar mis imágenes, necesitaba un blog de concepto abierto, como las casas de los programas de reformas americanos. Así que había que tirar tabique, el tabique de la sidebar, fuera sidebar y todo galería eso es, después una manita de pintura, un jarrón y dos cojines y te queda fino fino. Pues venga, manos a la obra que hoy toca albañilería: tutorial para personalizar las páginas del blog y/u ocultar sus elementos.

Tutorial como personalizar paginas del blog y ocultar sidebar y otros elementos


    Lo primero que necesitamos hacer es tomar las medidas de nuestro blog y para ellos vamos a PLANTILLA>>HTML>>CTRL+F y buscamos content.width nos saldrá algo como esto:



<b:variable default='960px' name='content.width' type='length' value='1120px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>




   La primera variable nos dice el ancho del blog, las otras dos de las columnas, en mi caso sólo tengo la derecha así que el valor de la izquierda está a 0. En caso de que tengamos dos valores nos quedamos con el segundo: 1120px.

    Ahora vamos a buscar esta línea:

<div class='column-right-outer'>

     Y la cambiamos por esta:

<div class='column-right-outer' id='sidebar'>


    Si tenemos sidebar en el lado izquierdo también, buscamos esta línea:

<div class='column-left-outer'>

Y la cambiamos por esta otra:


<div class='column-left-outer' id='sidebarleft'>

Ahora vamos a añadir el código. Podemos pegarlo antes de la etiqueta </head> si queremos que nuestros cambios afecten a todas las páginas, o podemos ir a la página que queremos modificar, en este caso galería, y pegar el código en edición HTML, arriba a la izquierda. De esta forma los cambios serán sólo para esa página.



<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>

#sidebar {
display: none; 
}

#sidebarleft {
    display: none;
    }

 
#main {
width: 1120px
margin-left: -200px ;  
}

</style>
</b:if>


     Donde sustituiremos el valor rosa por el valor de la anchura de nuestro blog y borraremos la parte de código azul si no tenemos columna a la izquierda. Variamos el valor de la línea marcada en verde para centrar nuestra página.

    Podemos ocultar otros elementos añadiendolos de la siguiente forma:

#NOMBRE{
display: none; 
}

    Para localizarlos podemos recurrir al truco que expliqué en esta entrada

    Así es cómo ha quedado mi galería sin sidebar (y sin los comentarios):




    Y ahora que hemos terminado el trabajo de albañilería ¿qué tal un poco de decoración? Podemos personalizar las páginas de nuestro blog añadiendo un poco de "estilo" (en azul) a nuestro código:



<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>

#sidebar {
display: none; 
}

#main {
width: 1120px; 
margin-left: -200px ;  
}


.post {
color: #666666;
background: #F3E0F5;
border: 2px dotted #BE59CA;
font-size: 15px, ;
margin:0px;
padding: 10px;
}
.post h3 a, .post h3 a:visited {
display:block;
background: #F3E0F5;
color: #666666;
font-size: 25px;
border-bottom: 1px solid #BE59CA;
}
.post h3 a:hover { 
color:#999999 ; 
background: #F3E0F5;
padding:4px;
margin:0px;}
.post img {
background: #F3E0F5;
padding:4px;
margin:0px;
border: 2px dotted #BE59CA;
}

</style>
</b:if>



    Personaliza cada parte de la página a tu gusto cambiando los fondos, los bordes (en esta entrada vimos los tipos de bordes)... 

.post       /*parte de la página a la que afecta */
{
color: #666666;     /*color */
background: #F3E0F5;     /*color del fondo*/
border: 2px dotted #BE59CA;       /*tamaño, estilo y color del borde*/
font-size: 15px, ;      /*tamañode la fuente*/
margin:0px;           /*anchura del margen*/
padding: 10px;      /*distancia al borde de la celda o caja donde está el elemento*/
}

A trastear pero recuerda hacer antes una copia de seguridad de la plantilla (y ya de paso también del blog).


Image and video hosting by TinyPic
    Y si te ha parecido interesante o útil comparte en tus redes, gracias ;)






Suscríbete sólo introduciendo tu correo y
 ¡¡NO TE PIERDAS NADA!!





7 comentarios:

  1. Muy bien explicado. Yo de momento no voy a cambiar nada pero lo voy mirando por si quiero hacerlo no tener que empezar de cero a buscar. Un besín.

    ResponderEliminar
    Respuestas
    1. Gracias Mariagem. Me voy a visitarte ahora mismo que el nombre de tu blog promete: http://saldelapuro.blogspot.com.es/
      Otro besín para ti.

      Eliminar
  2. Pues muy buena entrada con todo muy bien explicado le dire a mi hija que es la que hace la tecnica jejeje que te visite. Mil besicos amiga

    ResponderEliminar
    Respuestas
    1. Muchas gracias María, tus empanadas de ayer mmmm pa´morirse. Cómo nos tientas!! Menos mal que terminó la peración bikini ;)

      Eliminar
  3. Hola!! Yo debo ser muy torpe porque no encuentro en el código HTML de la página que quiero cambiar el ancho. He puesto en el buscador: 'data:blog.pageType , y me aparecen varias opciones ¿Cómo sé a qué página corresponde?

    ResponderEliminar
    Respuestas
    1. Hola Elísabet, nada de torpes que ninguno nacimos enseñados ;) A ver, primero hay que ir a editar la plantilla del blog, el HTML del blog y ahí buscamos: content.width para ver el ancho del cuerpo de nuestro blog y de las columnas. Y después para variar el ancho de una página nos vamos a editar esa página, como si fuesemos a escribir algo en ella, pero en vez de en redactar, nos ponemos en HTML (estos botones están arriba a la izquierda) y ahí es donde copiamos el código: <b:if cond='data:blog.pageType...... y sustituimos el ancho del ejemplo por el de nuestro blog. No sé si esta vez me he explicado mejor, si tienes más dudas me dices por aquí o por correo como prefieras: mamichufleta@gmail.com

      Eliminar
  4. gracias mil! Necesitaba saber hacer esto y con tu explicación me ha funcionado. Un Beso

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...