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 == "item"'><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>
Leer Importante...
Enlaza el blog ...
Ultimos comentarios
its a great blog...full stylish :23)
nice to meet you :24)
Thank you very much, yours also has many effects.
hehehe...you theres :6)
i like this posted, freshly to me :)
I think by using code like this can also...
div.style.width="970px";
to be...
div.style.width="auto";
whether it could be my friend :5) :6)
auto o 100%, pero la idea es mantener el mismo ancho sumado por main y sidebar
your means fixed on the main-wrapper width!!!
i see i see, I mean made so to adjust the monitor used :23)
Con auto o 100% se va a ajustar a la resolucion del monitor, pero no es la idea.
Hola, muy bueno el tutorial. Yo quiero saber sí es posible ampliar las entradas sin la opción de la flechas, que siempre se vean anchas, excepto el inicio que va tener la sidebar normal. Me explico? Quiero que la sidebar sólo aparezca en la página de inicio y por ende en las demás entradas que no tienen la sidebar queden del ancho del blog, crees que me peudes ayudar con eso? Te lo agradezco.
Hola Liliana.
Si se puede hacer.
Fijate acá: http://loseasi.blogspot.com/2010/02/modificar-paginas-independientes-parte.html
Sigue los pasos de esa entrada, es igual pero en lugar de:
<b:if cond='data:blog.pageType == "static_page"'>
Pon:
<b:if cond='data:blog.pageType == "item"'>
Estamos cambiando static_page, que es para las páginas independientes por item, que es para las individuales o entradas.
Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.
Elegir un botón o imagen, Seleccionar, copiar (Ctrl+C) y pegar en formulario de comentarios.
Nota: solo los miembros de este blog pueden publicar comentarios.