Colocar el título de tu blog en movimiento

jueves, 22 de mayo de 2014
Posted by Unknown
0 Comments
Tag :
+
Este truco es para poner el título del blog en movimiento. ¿Dónde se mueve? Arriba en la ventana del explorador, abajo en el botón de la barra de herramientas y en la pestaña de la ventana.

Hacerlo es muy sencillo, sólo entra en Plantilla | Edición de HTML y después de <head> pega lo siguiente:

<script>
//<![CDATA[
var txt=" Título del blog ";
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);}
rotulo_title();
//]]>
</script>

Cambia lo que está en rojo por el título de tu blog y listo.

Cómo poner una imagen flotante en tu blog de blogger

miércoles, 21 de mayo de 2014
Posted by Unknown
0 Comments
Tag :
+
Una imagen flotante o estática es una imagen que permanece visible aunque bajemos o subamos toda la barra de desplazamiento de una página y esta siga en el mismo lugar. Puedes ver un ejemplo en esta misma entrada, debajo del lado izquierdo verás la imagen que permanece ahí aunque bajes la página.

Puedes poner tu logo, un mensaje, una foto, o la imagen que más te guste. Colocarla es muy fácil, sólo entra en Plantilla | Edición de HTML y pega antes de </body> lo siguiente:

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/>

Sólo debes cambiar la URL de la foto; esta imagen quedará en la parte inferior izquierda, para cambiarla de posición remplaza bottom por top si la quieres arriba, y right por left si la quieres a la derecha.

Este truco igual lo puedes usar para poner una flecha (ir arriba) y que los mande al inicio del blog, si ese es el caso entonces usa este código:

<a href='#'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;'/></a>

Cómo colocar una cuenta regresiva para el Mundial Brasil 2014 Blogger

Posted by Unknown
0 Comments
Tag :
+
La fiebre del fútbol se ha apoderado de la gente, el mundial esta a la vuelta de la esquina y que mejor oportunidad para adaptar nuestros blogs a este evento tan importante.

Con este pequeño pero interesante gadget que te indica cuantos días falta para el mundial.

Para agregarlos vamos a Diseño y agregamos un nuevo gadget HTML/Javascript y pegamos el contador con el diseño que mas te guste.

<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/UDVp3h" style="height: 140px; width: 260px;"></iframe></div>
<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/MpRJzt" style="height: 88px; width: 300px;"></iframe></div>
<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/VwUiA5" style="height: 150px; width: 300px;"></iframe></div>
<div style="margin: 0 auto; text-align: center;"><iframe align="middle" allowtransparency="true" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://goo.gl/Tt1g56" style="height: 240px; width: 210px;"></iframe></div>

Cómo colocar un cursor con letras en movimiento en blogger

lunes, 19 de mayo de 2014
Posted by Unknown
0 Comments
Tag :
+

 
Este truco es uno de mis favoritos... Sirve para que un texto siga el cursor del mouse. El texto puede ser el título del blog, un mensaje, o lo que quieras mostrar.
Puedes ver un ejemplo de cómo el texto sigue al cursor  AQUI


METODO 1

Para ponerlo en tu blog entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el siguiente código:
<script language="JavaScript" type="text/javascript">

mensaje = 'EL TEXTO QUE QUIERAS';
font = 'Verdana,Arial';
size = 2;
color = 'orange';
velocidad = 0.7;

n4 = (document.layers);
ie = (document.all);
n6 = (document.getElementById);

mensaje = mensaje.split('');
n = mensaje.length;

a = size*10;
ymouse = 0;
xmouse = 0;
props = "<font face="+font+" color="+color+" size="+size+">";

if (n4)
{
for ( i = 0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="n4mensaje'+i+'" height="+a+"><center>'+props+mensaje[i]+'</font></center></layer>');
}
else if (ie)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

if(n4)
window.captureEvents(Event.MOUSEMOVE);

function Mouse(evento)
{
if(ie)
{
xmouse = event.x+20;
ymouse = event.y+20;
}
else if(n4 || n6)
{
xmouse = evento.pageX+20;
ymouse = evento.pageY+20;
}
}

if(n4)
window.onMouseMove = Mouse
else if(ie || n6)
document.onmousemove = Mouse;

y = new Array();
x = new Array();
Y = new Array();
X = new Array();
Yaux = new Array();
Xaux = new Array();

for (i=0; i < n; i++)
{
y[i] = 0;
x[i] = 0;
Y[i] = 0;
X[i] = 0;
Yaux[i] = 0;
Xaux[i] = 0;
}

function asigna()
{
if (ie)
padre.style.top = document.body.scrollTop;

for (i = 0; i < n; i++)
{
if(n4)
{
document.layers['n4mensaje'+i].top = y[i];
document.layers['n4mensaje'+i].left = x[i]+(i*(a/2));
}
else if(ie)
{
iemensaje[i].style.top = y[i];
iemensaje[i].style.left = x[i]+(i*(a/2));
}
else if(n6)
{
eval("document.getElementById('iemensaje"+i+"').style.top = '"+y[i]+"px'");
eval("document.getElementById('iemensaje"+i+"').style.left = '"+(x[i]+(i*(a/2)))+"px'");
}
}
}

function ondula()
{
y[0]=Math.round(Y[0] +=((ymouse)-Y[0])*velocidad);
x[0]=Math.round(X[0] +=((xmouse)-X[0])*velocidad);

for (var i = 1; i < n; i++)
{
Yaux[i] = Math.round(Y[i]);
Xaux[i ]= Math.round(X[i]);
y[i] = Math.round(Y[i]=Yaux[i]+(y[i-1]-Y[i])*velocidad);
x[i] = Math.round(X[i]=Xaux[i]+(x[i-1]-X[i])*velocidad);
}
asigna();
setTimeout('ondula()',50);
}

window.onload = ondula;
</script>

Para personalizarlo debes cambiar el mensaje que dice EL TEXTO QUE QUIERAS, si quieres otro tipo de letra cambia donde dice font, para el tamaño de la letra en size, el color donde dice orange, puedes poner el color que quieras (black, red, green, etc) incluso puedes modificar la velocidad.

Nota: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger entonces cambia esta parte del código:


document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

Por esta otra:
document.write('<div id="padre" style="position:absolute;top:-270px;left:-150px; z-index:400;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemensaje" style="position:absolute;top0px;left:0px;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}
else if (n6)
{
document.write('<div id="padre" style="position:absolute;top:-270px;left:-150px; z-index:400;"><div style="position:relative">');
for (i = 0; i < n; i++)
document.write('<div id="iemensaje'+i+'" style="position:absolute;top:0px;left:0px;height:'+a+';width:'+a+';text-align:center">'+props+mensaje[i]+'</font></div>');
document.write('</div></div>');
}

Verifica que cambies sólo y únicamente la parte que se menciona para no afectar el funcionamiento del script.


METODO 2:


Si tienes algun tipo de problema con el Metodo 1, les daré otro código. Este al igual que el anterior hará que un texto persiga al cursor, sin embargo este tiene un efecto más suave al ondularse el texto. .

Entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

<script language='javascript' type='text/javascript'>
//Cursor con texto en movimiento

//<![CDATA[
var x,y
var tempo = 10
var espera = 0

var texto = "Aquí va tu texto"

texto = texto.split("")

var xpos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
xpos[i] = -50
}
var ypos = new Array()
for (i = 0; i <= texto.length - 1; i++) {
ypos[i] = -50
}

function seguir(e){

//si no es NS4, usa objeto window.event
if (!e) var e = window.event

//NS4
if (e.pageX || e.pageY) {
x = e.pageX
y = e.pageY
window.status = x + ' : ' + y
//IE y compatibles con DOM
} else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
window.status = x + ' : ' + y
//no soportado, no hace nada
} else {
return
}

espera = 1
}

function animar_cursor() {

if ( espera == 1 ) {
for ( i = texto.length - 1; i >= 1; i--) {
xpos[i] = xpos[i-1] + tempo
ypos[i] = ypos[i-1]
}
xpos[0] = x + tempo
ypos[0] = y
}

//para el IE 4.x
if ( espera==1 && document.all ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("span" + i + ".style")
letra.posLeft = xpos[i]
letra.posTop = ypos[i]
}
}
//para el Netscape 4.x
else if ( espera==1 && document.layers ) {
for (i = 0; i <= texto.length - 1; i++) {
var letra = eval("document.span" + i)
letra.left = xpos[i]
letra.top = ypos[i]
}
}

//para navegadores compatibles DOM
else if ( espera==1 && document.getElementById ) {

for (i = 0; i <= texto.length - 1; i++) {
var letra = document.getElementById( "span" + i)

letra.style.left = xpos[i] + 'px'
letra.style.top = ypos[i] + 'px'
}
}

var timer = setTimeout("animar_cursor()", 30)
}

if (document.layers)
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = seguir
//]]>
</script>
<style type='text/css'>
.cursoranimado {
position:absolute;
visibility:visible;
top:-50px;
font-size:11pt;
font-family:Arial;
font-weight:bold;
color:red;
}
</style>
<script language='javascript' type='text/javascript'>
//<![CDATA[
if (document.layers) {
for (i=0;i<=texto.length-1;i++) {
document.write('<span id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</span>')
}
} else if (document.all || document.getElementById) {
for (i=0;i<=texto.length-1;i++) {
document.write('<div id="span' + i + '" class="cursoranimado">')
document.write(texto[i])
document.write('</div>')
}
}
animar_cursor()
//]]>
</script>

Sólo cambia lo que está en rojo por el texto que quieres que aparezca junto al cursor. En font-size puedes cambiar el tamaño del texto y en color para cambiar el color de las letras.

Ver número de usuarios en linea en tu blog de blogger

Posted by Unknown
0 Comments
Tag :
+

¿Quieres saber cuántos lectores en línea hay en tu blog, en tiempo real?

Navegando en internet me di cuenta que Whos amung us nos trae esta herramienta sencilla para nuestro sitio web. Sabremos el número de usuarios en línea, estadísticas como de qué paises nos visitan o cuándo tuvimos más visitantes en línea.

Agregarlo es lo mejor, ya que NO NECESITAS REGISTRARTE, sólo entra a la página de Whos amung us y ve a Widgets, selecicona el contador web que quieras, copia el código y pégalo en tu blog. Para ello entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código que copiaste.

Cuando quieras ver tus estadisticas completas sólo haz click en el gadget que colocaste. Más sencillo imposible ¿no? Así que si quieres que tus lectores vean cuántos bloggers más están leyéndote, esta es tu mejor opción.



 



Cómo cambiar el fondo de nuestro blog por una imágen

Posted by Unknown
0 Comments
Tag :
+
Hoy quiero enseñarle a cómo cambiar el fondo de nuestro blog por una imágen o cambiar la imagen de fondo actual por otra. Para ello ve a Plantilla | Edición de HTML y busca este código:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor;
font-family: arial,verdana,helvetica,tahoma;
font-size: 100%;
width: 100%;
}

Es posible que tu código no se vea exactamente como este, ya que varía según su plantilla, lo importante es que localices el background que está dentro de body {
Ahora lo que hay que hacer es cambiar lo que está en rojo por este código:

background: url(URL de la imagen) no-repeat;
background-attachment : fixed;

Sólo cambia donde dice URL de la imagen por la dirección donde tienes alojada la imagen de fondo que vas a usar. Si quieres que el fondo se mueva cuando bajen la página con el scrollbar entonces omite la última línea del código.
Con ese código la imagen no se repetirá, pero si tu imagen es pequeña o un patrón (pattern) entonces elimina lo que está en negrita para que la imagen de fondo se repita.

Si sólo quieres cambiar el color de fondo en lugar de una imágen entonces sólo cambia el código de color, por ejemplo: background:#fffff; esto dará un fondo de color blanco.

Como poner un buscador en tu blog de blogger

Posted by Unknown
0 Comments
Tag :
+
Esto es algo que todo blog debe tener... Piensa que si tienes muchos post publicados y aunque tengas todo bien etiquetado talvez se les dificulte a tus lectores encontrar alguna información que hayas publicado en el pasado.

Así que acá van tres formas de poner un buscador en el blog. El primero es muy simple, está basado en Javascript y el aspecto es muy sencillo.

Para agregarlo entra en Dieño | Añadir un gadget | HTML/Javascript. Y pega este código:

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" type="text"/> <input id="search-btn" value="Buscar" type="submit"/></form>


El resultado será este:


 Para el segundo buscador entra en Diseño | Añadir un gadget y elige Cuadro de búsqueda. Ahí selecciona las opciones, por si quieres que las búsquedas sean sólo en el blog o en la web. Cabe señalar que los resultados los mostrará en el área de los post, al igual como las opciones de búsqueda en el blog o en la web.


Buscador Blogger In Draft

Y por último este buscador de Google, que a diferencia del anterior en este aparecen las casillas en el buscador sobre dónde queremos hacer la búsqueda. El código es el siguiente:

<form action="http://www.google.com/search" method="GET">
<input value="UTF-8" name="ie" type="hidden"/>
<input value="UTF-8" name="oe" type="hidden"/>
<table bgcolor="#FFFFFF">
<a href="http://www.google.com/">
<img border="0" alt="Google" src="http://www.google.com/logos/Logo_25wht.gif"/>
</a>
<input maxlength="255" value=""
name="q" size="15" type="text"/> <input value="Buscar" name="btnG" type="submit"/>
<font size="-1">
<input value="URL DEL BLOG"
name="domains" type="hidden"/><br/><input value=""
name="sitesearch" type="radio"/> la Web<input checked value="URL DEL BLOG" name="sitesearch" type="radio"/> NOMBRE DEL BLOG<br/>
</font>
</table></form>


Sólo debes cambiar los datos que están en color rojo por los tuyos y el resultado será este:

Google
En la web Ayuditas Blogger



Como cambiar el orden de las entradas del blog de blogger

Posted by Unknown
0 Comments
Tag :
+
Como ya sabemos.... Los post (o entradas) del blog se ordenan automáticamente de los más nuevos a los más antiguos, es decir, de forma cronológica. Así que lo que podemos hacer para cambiar el orden en los post es editando la fecha de las entradas de modo que le pongamos la fecha que deseamos para poder así ordenarlas a nuestro gusto.

Para ello vamos a Entradas y damos click en Editar en la entrada a la que deseamos cambiarle el orden, luego buscamos al lado derecho donde dice Configuración de las entradas y damos click en Programar... Ahí cambiamos la fecha y la hora del post.



Si pones una fecha antigua entonces la entrada se bajará o se dejará de mostrar en la portada, y de forma contraria, si pones una fecha reciente la entrada se moverá hacia arriba.

Hacemos esto con todas las entradas a las que deseamos cambiar el orden y listo.

Como expandir un post de tu blog blogger

domingo, 18 de mayo de 2014
Posted by Unknown
0 Comments
Tag :
+

Hace poco tiempo estuve leyendo acerca de cómo poner la opción de leer más en un blog, y bueno, hice como veinte cambios y simplemente no quedaba. Luego me fijé que aunque se mostraba la opción, había posts que estaban tan cortos que no era necesario tener esa utilidad; hasta que me topé con un artículo de Ciudad Blogger en el que nos daba una alternativa, expandir post. Esta me pareció perfecta, pues además de que me quedó a la primera resuelve el problema de que eliges en cada post si quieres que aparezca expandir el post o no.

Para hacerlo entra en Diseño | Edición de HTML y marca la casilla Expandir plantillas de artilugios. Pega el siguiente código antes de </head>

<script type='text/javascript'>
//<![CDATA[
// Expandir entradas
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}

function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}

function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'none';
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
found = 1;
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
//]]>
</script>


Ahora busca este código:


<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

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


Y reemplázalo por este:


<b:includable id='post' var='post'>
<div class='post hentry' expr:id='&quot;post-&quot; + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='&quot;javascript:showFull(&quot;post-&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0);'>Seguir leyendo [+]</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='&quot;javascript:hideFull(&quot;post-&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0);'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Guarda los cambios. Ahora cuando quieras que esta opción aparezca en un post sólo escribe lo que quieras que aparezca, y antes del texto que quieres que se oculte agrega esto:
<span id="fullpost">Aquí el texto que quieras ocultar</span>

Ver ejemplo aquí

Como crear un mensaje de alerta al entrar y salir del blog

Posted by Unknown
0 Comments
Tag :
+
Si quieres poner un mensaje de bienvenida en el blog o un mensaje de advertencia como el que se ve en el ejemplo entonces hacemos lo siguiente:
 

Mensaje de alerta
Vamos a poner esta alerta en el blog entrando en Diseño | Edición de HTML y pega antes de </body> lo siguiente:

<script language='JavaScript'>
alert("Aquí escribe tu mensaje");
</script>

Si quieres que el mensaje aparezca cuando el usuario abandona el blog entonces busca la etiqueta <body>
Y cámbiala por esta:

<body onunload='confirm(&quot;Aquí tu mensaje de despedida&quot;);'>

Si usas una plantilla hecha con el Diseñador de Plantillas de Blogger entonces busca esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Y cámbiala por esta otra:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onunload='confirm(&quot;Aquí tu mensaje de despedida&quot;);'>

Para muchos este mensaje de alerta puede resultarles muy molesto, así que recomiendo que sólo lo uses si es realmente necesario.
BIENVENIDO A MI BLOG

- Copyright © TRUCOS PARA TU BLOGGER -Robotic Notes- Powered by Blogger - Designed by Jonathan Suarez -