Revista Tecnología

Fijar la sidebar en blogger

Publicado el 01 julio 2013 por Pedro Pablo Villegas Yepes @blogyseo
Con el siguiente truco vamos a poder fijar la sidebar en plantillas nuevas de blogger (Diseñador de plantillas). Para este ejemplo vamos a utilizar como modelo la plantilla Simple que estoy utilizando en mi blog Agua y Sig. Vamos a la Edición de HTML de la plantilla de blogger: Página principal seguido de Diseño, Plantilla y por ultimo Editar HTML. 
Antes de “<b:skin><![CDATA[/*”, pegamos el siguiente código. 
<!--Fija la sidebar izquierda del blog-->
<style>
.main-inner .column-left-inner {
position: fixed; /*pone fija la sidebar*/
width:280px;
top: 0px;
bottom: 0px;
height: 3000px
margin-top:20px;
margin-left:-80px;
padding-left:-80px;
background:#eecf72; /*color fondo de la sidebar*/border-left: 4px solid rgb(234, 203, 113); /*color de borde izquierdo*/border-right: 4px solid rgb(234, 203, 113);/*color de borde derecho*/}
  @media screen and (-webkit-min-device-pixel-ratio:0) { /*aplicable a google crome*/.main-inner .column-left-inner {
margin-left:-700px;
//top: 5px;
//bottom: 0px;
// margin:60px;
//padding:60px;}}
</style>

Con el anterior código, fijamos la sidebar y hacemos que llegue hasta la parte superior de la pantalla, sobrepasando la cabecera. Por lo que es necesario disminuir el hancho de la cabecera o Header. Para ello buscamos el siguiente código. 
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

Lo modificamos, hasta quedar de la siguiente forma. 
.header-outer {
height:60px; /*alto del header*/
margin-left:280px;/*margen izquierda para ini*/
margin-right:300px; /*margen derecha*/
margin-top:0px; 
font-weight: bold; 
padding: 5px; 
top: 0px;}

El resultado lo podemos ver visitando agua y sig, será algo como se observa en la siguiente imagen.
sidebar-en-blogger

Volver a la Portada de Logo Paperblog