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.



    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).



    Y si te ha parecido interesante o útil comparte en tus redes, gracias ;)

Twittear