Agrandar el tamaño de una entrada para leerla mejor

Lo que vamos a hacer con este código es agrandar las entradas y el texto de la misma, para eso vamos a ocultar la sidebar.

Es muy similar al código ya conocido para ocultar y mostrar la sidebar, el cambio es que también vamos a agrandar el texto.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script type='text/javascript'>
//<![CDATA[
function agrandarentrada(){
div = document.getElementById("sidebar-wrapper");
div.style.display="none";
div = document.getElementById("main-wrapper");
div.style.width="970px";
div.style.fontSize="16px";
}
function achicarentrada(){
div = document.getElementById("sidebar-wrapper");
div.style.display="";
div = document.getElementById("main-wrapper");
div.style.width="700px";
div.style.fontSize="12px";
}
//]]>
</script>

Hay que ajustar las medidas dependiendo de cada blog.

Donde dice div.style.width="970px"; y div.style.fontSize="16px"; son las medidas que quedara al agrandar, 970px es el ancho y 16px el tamaño del texto. El ancho lo podemos ver en la id #outer-wrapper. O sumamos el ancho del main-wrapper y el de sidebar-wrapper.

En div.style.width="700px"; y div.style.fontSize="12px"; es el ancho y tamaño del texto que vuelve al restaurar, 700px lo vemos en #main-wrapper y 12px en body.

Hay que tener en cuenta los margenes que se encuentren entre el main-wrapper y la sidebar-wrapper.

Puede variar según el blog, este ejemplo es para la plantilla mínima de blogger.

Ahora vamos a colocar el link o una imagen para dar esta opción.

En mi blog lo añadí abajo del titulo de las entradas.

Localizamos el siguiente código:

<div class='post-body entry-content'>
<div class='post-header-line-1'/>
<data:post.body/>

Justo arriba ponemos los link:

<a href='javascript:achicarentrada();'>AGRANDAR ENTRADA</a>
<a href='javascript:agrandarentrada();'>RESTAURAR ENTRADA</a>

Si elegimos poner una imagen:

<a href='javascript:achicarentrada();'><img alt='Agrandar Entrada / Texto.' src='URL DE IMAGEN AGRANDAR' title='Agrandar Entrada / Texto.'/></a>
<a href='javascript:agrandarentrada();'><img alt='Achicar Entrada / Texto.' src='URL DE IMAGEN ACHICAR' title='Achicar Entrada / Texto.'/></a>

Pueden encontrar imágenes acá: http://www.iconfinder.com

Ahora desde VISTA PREVIA vemos como va quedando y ajustar las medidas si es necesario.

Si todo esta bien guardamos.

Si preferimos mostrar esta opción solo al abrir las entradas hay que poner el código de los link entre condicionales.

Ejemplo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<a href='javascript:achicarentrada();'><img alt='Agrandar Entrada / Texto.' src='URL DE IMAGEN AGRANDAR' title='Agrandar Entrada / Texto.'/></a>
<a href='javascript:agrandarentrada();'><img alt='Achicar Entrada / Texto.' src='URL DE IMAGEN ACHICAR' title='Achicar Entrada / Texto.'/></a>

</b:if>