Ya son varios los que me han preguntado sobre el truco de ampliar entradas, ocultando la sidebar. Hasta ahora no lo he explicado porque requiere conocer bien nuestra plantilla, saber como se llama cada división (pueden ser diferentes según la plantilla), porque necesitamos aplicar CSS para poder aplicar el truco.

Para que podáis entenderlo, la idea es que aplicando CSS voy a indicar por un lado el tamaño que tendrán mis entradas y que partes del blog no se verán al pulsar un botón. Para ello lo que hacemos es añadir una clase con JQuery e indicamos que al pulsar el botón aplique esa clase.

A continuación os detallo los pasos, pero recordad este truco requiere conocer bien tu plantilla y entender que estamos haciendo. Por cierto este truco lo vi en Janko At Warp Speed, el desplaza la sidebar hacia abajo, yo opte por no hacerlo y le añadí el efecto fade que veis.

CSS

Os expongo el CSS que yo he empleado, a cada clase o ID que actúa en las entradas le añadimos la clase .wide y le definimos sus caracteristicas.

#main-wrapper.wide{width:960px;}
.post.wide{width:920px; }
.post-body.wide{width:890px; padding: 10px;font-size: 120%;}
#footbar-wrapper.wide {display: none;}
.toolbox { float:left; margin:20px 0 20px 20px;}
.toolbox a { width:30px; height:20px; float:left; }
#wideView {background: transparent url(URL DE LA IMAGEN) no-repeat scroll 0px 0px; }
#wideView:hover { background-position:-30px 0px; }
#wideView.wide {background-position:0px -20px; }
#wideView.wide:hover { background-position:-30px -20px; }

NOTA: La imagen la encontrareis en el download disponible en su página.

HTML

Añadimos, donde queramos insertar la imagen en nuestra plantilla, el siguiente código

<div class='toolbox'><a alt='Amplia la entrada' href='#' id='wideView' title='Amplia la entrada'/></div>

SCRIPT

Por ultimo usamos JQuery para realizar el efecto

<script type="text/javascript">
$(document).ready(function() {
$(&quot;#wideView&quot;).click(function() {
$(&quot;#main-wrapper, .post, .post-body, #footbar-wrapper,&quot;).toggleClass(&quot;wide&quot;);
$(this).toggleClass(&quot;wide&quot;);
$(&quot;#main-wrapper&quot;).fadeOut(&quot;slow&quot;).fadeIn(&quot;slow&quot;);
});
});
</script>

Nota: Añadimos los ID y clases que hemos insertado en el CSS. También añadimos el ID (#main-wrapper) sobre el que aplicamos el efecto fade.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también