Hacker of the Web
Tus ideas en código!...y mas

Aumentar y reducir el tamaño del texto de las entradas

Aumentar y reducir el tamaño de la fuente en las entradas, se puede realizar de mas de una manera. Existen varios métodos para lograrlo, aquí les explico el que yo utilizo.


[1] Debes ir a Diseño>Edicion HTML>Expandir plantillas de artilugios, donde tienes que agregarlo antes de la etiqueta </head>:
<!-- Start Text-Sizer -->
<script type='text/javascript'>//<![CDATA[
function ChangeSize(number,number) { if (document.all) { element = document.all['entrada'];} else { element = document.getElementById('entrada'); } var startSize = 12; var rateSize = 3;var numRate = 5; var startSizeLine = 14;var rateSizeLine = 3;var numRateLine = 5; var strActual = element.style.fontSize; var strLineActual = element.style.lineHeight; var intActual = parseInt(strActual.substring(0, strActual.indexOf("px"))); var intLineActual = parseInt(strLineActual.substring(0, strLineActual.indexOf("px"))); intActual += number; intLineActual += number; if (intActual < (startSize + ( (numRate + 1) * rateSize) ) && intActual > startSize-1){ element.style.fontSize = intActual + "px"; } if (intLineActual < (startSizeLine + ( (numRateLine + 1) * rateSizeLine) ) && intLineActual > startSizeLine-1){ element.style.lineHeight = intLineActual + "px"; } } function normalSize(){var strActual = element.style.fontSize;var strLineActual = element.style.lineHeight;var intActual = 12;var intLineActual = 14; element.style.fontSize = intActual + "px"; element.style.lineHeight = intLineActual + "px";}//]]></script>
<!-- End Text-Sizer -->


[2] Ahora tienes que ir a Diseño>Edicion HTML>Expandir Plantillas de Artilugios y encontrar el siguiente código:
<div class='post-body entry-content'>

Y cambiarla por la siguiente:
<div class='post-body entry-content' id='entrada' style='font-size:12px;line-height:14px'>


[3] Despues puedes agregar el siguiente código en un gadget HTML, o en la plantilla misma:
<p id='control_txtszr' style="font-family:verdana">
<a href='#' onclick='javascript:ChangeSize(1,1);return false'>
<span style='font-size:20px'>+A|</span>
</a>
<a href='#' onclick='javascript:normalSize();return false'>
<span style='font-size:13px'>A|</span>
</a>
<a href='#' onclick='javascript:ChangeSize(-1,-1);return false'>
<span style='font-size:11px'>A-</span>
</a>
</p>


[4] Por ultimo, puedes modificar el estilo con las siguientes instrucciones CSS:
#control_txtszr {
color:{color del texto}
font:{tipo de fuente}
position:{absolute o relative}
top:{pixeles de espacio hacia arriba}
left:{pixeles de espacio hacia la izquierda}
right:{pixeles de espacio hacia derecha}
bottom:{pixeles de espacio hacia abajo}
}


/!\ En esta entrada se asume que tienes conocimientos básicos de colores en RGB o Hexadecimal. Si no los tienes aún, revisa esta entrada: Colores en RGB o Hexadecimal.



/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.



/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Donde editar el código HTML de nuestra plantilla.

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

12 comentarios !

JOVENES LLAMADOS A SERVIR "JOLLAS" dijo...

Hola santy, tenemos un problema con nuestro blog, y hemos buscado pero aun no hemos encontrado la solucion. lo que queremos es que nuestro blog aparezca centrado, asi como el tuyo, te contamos que hemos visto que nuestro blog aparece justificado en windows xp y 7 con los explorador de internet explorer, pero con mozilla solo aparece justificado con xp, y con vista ni con explorer ni con mozilla nos aparece justificado.

pero lo que queremos no es que lo justifique el explorador sino que quede centrado para que aparezca con todos los exploradores y sistemas operativos, cuando sea abierto.

te dejo la url de nuestro blog.

http://elcofredejollas.blogspot.com/

JOVENES LLAMADOS A SERVIR "JOLLAS" dijo...

hola santy, decidí cambiar la plantilla y ya quedo solucionado el problema.

ENLACE hacia tu blog.

●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola Santy lo he intentado pero no lo consigo cuando lo pongo desaparece el contenido de la entrada. Un saludo!

●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola denuevo santy, he estado mirando y requetemirando y solo se me ocurre que el problema puede deberse al hecho de que mi plantilla no tiene la tiqueta es: <div class='post-body entry-content'>, por tanto en su lugar io la que sustituyo es esta: <p><data:post.body/></p>, ¿puede ser ese el problema?

salu2

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, Hola!!

Exacto, ese es el problema, lo que debes hacer en ese caso es, si tu código es este:

<p><data:post.body/></p>

(Si tienes varias veces el código anterior, debes agregar lo siguiente a todas esas etiquetas iguales) Modifica de la siguiente forma:

<p id='entrada' style='font-size:12px;line-height:14px'><data:post.body/></p>

Y saltarte el paso [2]

Suerte con ello y buen dia ;)!

Y como se van a sustituir algunos emoticonos aqui mejor ve este comentario sin emoticonos

●๋•╣ҜΞҜΘ╠●๋• dijo...

No me sale, bueno sale pero no queda bien implementado, alfinal no era tan sencillo... salu2

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, jeje, perdona por ello.

Lo que debes hacer es modificar:

<p id='control_txtszr' style="font-family:verdana">
<a href='#' onclick='javascript:ChangeSize(1,1);return false'>
<span style='font-size:20px'>+A|</span>
</a>
<a href='#' onclick='javascript:normalSize();return false'>
<span style='font-size:13px'>A|</span>
</a>
<a href='#' onclick='javascript:ChangeSize(-1,-1);return false'>
<span style='font-size:11px'>A-</span>
</a>
</p>

Para que te quede de esta manera:

<b:if cond='data:blog.pageType != "item"'>
<p id='control_txtszr' style="font-family:verdana">
<a href='#' onclick='javascript:ChangeSize(1,1);return false'>
<span style='font-size:20px'>+A|</span>
</a>
<a href='#' onclick='javascript:normalSize();return false'>
<span style='font-size:13px'>A|</span>
</a>
<a href='#' onclick='javascript:ChangeSize(-1,-1);return false'>
<span style='font-size:11px'>A-</span>
</a>
</p>
</b:if>

A y una cosita mas, que el código que controla el tamaño del texto, es decir lo de arriba solo este una vez en tu blog. Pues si tienes mas de dos de estos:

<b:if cond='data:blog.pageType != "item"'>
<p id='control_txtszr' style="font-family:verdana">
<a href='#' onclick='javascript:ChangeSize(1,1);return false'>
<span style='font-size:20px'>+A|</span>
</a>
<a href='#' onclick='javascript:normalSize();return false'>
<span style='font-size:13px'>A|</span>
</a>
<a href='#' onclick='javascript:ChangeSize(-1,-1);return false'>
<span style='font-size:11px'>A-</span>
</a>
</p>
</b:if>

Solo funcionará el primero.

PD: Si utilizas el editor de blogger, no modifiques el tamaño del texto desde ahi, pues si lo modificas desde ahi, el código javascript de aqui arriba no podrá modificar el tamaño al texto, que blogger le colocó un tamaño fijo.

●๋•╣ҜΞҜΘ╠●๋• dijo...

Pero santy, amigo, eso que pones que tiene que ver con lo que me pasa a mi¿? mi problema es que no hay suficiente espacio para colocar las A y entonces al colocarlas se mueve el resto del cuerpo del post. No me molesto en probar ese code porque se que es fake.

salu2

SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, que tal!!

mmm, si de hecho lo de arriba es para lo que me comentaste, el código de arriba no es fake:O. Es para que las +A|A|A- aparezcan únicamente en la página de cada entrada y por ende no ocupen demasiado espacio en la página principal del blog .

Y si de igual manera no quieres agregar o probar lo de arriba, esto de abajo es para que las +A|A|A- floten a la izquierda de cualquier cosa, como las que tengo en el titulo de esta entrada, que flotan a la derecha ;):

#control_txtszr {
float:right;
}

Si quieres que flote a la izquierda, cambia el right por un left

Lo agregas en Edición HTML y antes de ]]></b:skin>

Suerte y buen dia:P!!

●๋•╣ҜΞҜΘ╠●๋• dijo...
Este comentario ha sido eliminado por el autor.
●๋•╣ҜΞҜΘ╠●๋• dijo...
Este comentario ha sido eliminado por el autor.
SäNTÿ dijo...

●๋•╣ҜΞҜΘ╠●๋•, no te enfades. El error fue mio. Y se soluciona cambiando la "!" por un "=" de aqui:

<b:if cond='data:blog.pageType != "item"'>
<p id='control_txtszr' style="font-family:verdana">

Lo de arriba si no lo encuentras, busca "control_txtszr" veras algo como lo de arriba, lo modificas de manera que te quede de esta manera:

<b:if cond='data:blog.pageType == "item"'>
<p id='control_txtszr' style="font-family:verdana">

Perdona, me apuraba por contesarte lo mas pronto posible desde la escuela, que se me fue es peque ño gran detalle :X


Página Principal
Arriba