Espero que este blog ayude a aquellos que están buscando conocimientos, al igual que yo.
Sígueme en:
Blogger Google+ facebook twitter you yube Ver perfil en Linkedin Agregar a Favoritos/Marcadores
pica pica curioso Mi Ping en TotalPing.com Buscar en el blog
Cerrar X Bienvenido amig@!!! Recuerda que puedes recibir las actualizaciones del blog a través de Facebook y/o Twitter, o Suscríbase al Feed vía RSS o vía Email.

Siempre, Siempre, Siempre, antes de modificar tu plantilla guarda una copia.

Descarga la plantilla o copias el código en el bloc de notas.

¿Que es RSS?:

RSS (Really Simple Syndication)

Es un sistema que nos permite enterarnos de las actualizaciones de las paginas que visitamos frecuentemente, sin tener que visitarlas directamente.

¿Cómo funciona?

Así cómo para poder leer correos electrónicos tenemos que tener una cuenta y un lector de correo electrónico, para poder leer nuestras paginas en RSS tenemos que tener un lector de RSS.
Existen muchos lectores de RSS pero uno de los mas sencillos de usar y mas utilizados por todos es el Google Reader, este lector se encarga de agrupar todos los sitios que visitamos frecuentemente mostrándonos la actualización que cada sitio tiene sin necesidad de ir a visitarlos.
Antes yo entraba a los sitios a mirar si habían publicado algo nuevo, ahora mediante los RSS cuando el sitio publica algo nuevo me llega su actualización.

Sencillo, rápido y útil.
votar
Achicar Entrada Agrandar Entrada

Hay varias formas que podemos agrandar y/o reducir el texto de nuestro blog.

Todas estas formas se pueden hacer agregando un código JavaScript.

Podemos agrandar todo el texto del blog o solamente una parte que elijamos.

Yo voy a poner varios códigos, ustedes eligen el que crean mas conveniente.

Los ejemplos que voy a mostrar tienen una fuente principal de 12px, que viene a ser la que se encuentra en el body del blog.

Podemos verlo en nuestro código CSS de la plantilla buscando:

body {
.......
font-size: 12px;
.......
}
Si no es 12 px, pueden cambiar el tamaño en los siguientes códigos.

Parte 1: (Código JavaScript)

Poner el código arriba de </head>

No hay que poner todos los códigos, como dije antes ustedes elijan solamente uno.

Para todo el texto del blog:

Funcionará en el total del blog, mientras no tengamos en alguna etiqueta un tamaño menor en px, pero lo podemos solucionar cambiando el tamaño en px por un % aproximado.

10px cambiarlo, por ejemplo 85%.

Código 1:

Este código es sencillo, solo cambiara el texto a un tamaño elegido.

El texto se agrandará a 22px y se reduce a 12px. (personalizar a gusto)

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
document.body.style.fontSize="22px";
}
function reducirtexto(){
document.body.style.fontSize="12px";
}
//]]>
</script>

Código 2:

El texto se va agrandando de a 2px en 2px, hasta un máximo de 5 veces, de la misma forma se va a ir reduciendo.

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
var txt = document.body;
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="12px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "22px";}
}
function reducirtexto(){
var txt = document.body;
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="22px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "12px";}
}
//]]>
</script>

Para una parte que elijamos del blog:

Lo que va a agrandar o reducir es el texto de una parte del blog, utilizaremos para ello una ID.

En los ejemplos yo elegí la id main-wrapper.

Si quieren pueden agregar el contenido del texto dentro de una ID.

Ejemplo:

< id="nombreID" >
.... contenido con texto ....
</div>

O bien colocan el ejemplo para que agrande el texto de las entradas.

<div class='post-body entry-content'>
<div id="nombreID">
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>

Cambiar "nombreID" por el mismo que tendra el script.

Código 1 con ID:

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
document.getElementById("main-wrapper").style.fontSize="22px";
}
function reducirtexto(){
document.getElementById("main-wrapper").style.fontSize="12px";
}
//]]>
</script>

Código 2 con ID:

<script type='text/javascript'>
//<![CDATA[
function agrandartexto(){
var txt = document.getElementById("main-wrapper");
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="12px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "22px";}
}
function reducirtexto(){
var txt = document.getElementById("main-wrapper");
if (txt.style.fontSize==""){txt.style.fontSize="12px"};
if (txt.style.fontSize=="22px"){txt.style.fontSize = "20px";}
else if (txt.style.fontSize=="20px"){txt.style.fontSize = "18px";}
else if (txt.style.fontSize=="18px"){txt.style.fontSize = "16px";}
else if (txt.style.fontSize=="16px"){txt.style.fontSize = "14px";}
else if (txt.style.fontSize=="14px"){txt.style.fontSize = "12px";}
}
//]]>
</script>

Agrego otro código que es el que actualmente utilizo en mi blog.

Código 3 con ID:

<script type='text/javascript'>
//<![CDATA[
var newsfont = 12;
function changeFont(id) {

if (document.getElementById) {
document.getElementById(id).style.fontSize = newsfont+"px";
} else {
if (document.layers) {
document.layers[id].fontSize = newsfont+"px";
} else {
if (document.all) {
eval("document.all." + id + ".style.fontSize = \"" + newsfont + "px \"");
}
}
}
}

function agrandartexto() {
if (newsfont < 30) {
newsfont= newsfont +2;
changeFont('main-wrapper');
}
}

function reducirtexto() {
if (newsfont > 12) {
newsfont= newsfont -2;
changeFont('main-wrapper');
}
}
//]]>
</script>

Si eligieron la opción de las entradas, no olvidar cambiar la ID main-wrapper por la Id que pusieron en el div. (nombreID)

Ya elegido y colocado uno de los códigos, guardar cambios.

Parte 2: (Colocar link o botón)

Lo que vamos a hacer es colocar los link llamando a las 2 funciones, una para agrandar y otra para reducir el texto.

Esta parte es igual para cualquiera de los 5 ejemplos de los códigos JavaScript.

Colocaremos en la parte del blog que quieran, puede ser en un gadget para mostrar en la sidebar, o directamente en las entradas.

Si van a ponerlo en las entradas pueden colocar los link dentro de una condicional, para que se vea unicamente al abrir el post.

Ejemplo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ACÁ PONER LOS LINK
</b:if>

Ver entrada similar:

Código de los link:

<a href='javascript:void(0);' onclick='agrandartexto();' title='Agrandar texto...'>Agrandar texto</a>
<a href='javascript:void(0);' onclick='reducirtexto();' title='Reducir texto...'>Reducir texto</a>

Cambiar el texto.

Pueden poner en su lugar una imagen:

<img scr="URL de la imagen"/>

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

Ver como queda en vista previa, y si todo va bien guardar.

Otra entrada para cambiar el texto:




Leer Importante... Comentar esta entrada ▼ Ir al principio de la entrada
Admin dijo...

I would suggest FindIcons.com for your icons needs, a better icon search engine with 300,000 free icons available for download.

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.

Si no puedes comentar, intenta con el antiguo formularioO leer solución

VituaRadio
Informe Importante

Por un tiempo voy a estar sin internet, así que no voy a actualizar ni poder contestar a los comentarios.
Suscribirse a las entradas Suscribirse a las entradas vía Mail Suscribirse a los comentarios
¿Que es RSS?